cards.html

 <div class="card">
  <img class="card-img" src="../assets/Img/chad-montano-MqT0asuoIcU-unsplash.jpg" alt="Food Image" srcset=""/>

  <div class="card-content">
      <div class="card-title">
          <h1>Breakfast Story</h1>
          <h3>by Tarun</h3>
      </div>   
      <div class="card-body">
          We went across globe and covered a range of first meal of the day story.
      </div>
  </div> 
  <div class="card-footer">
      <div class="card-footer-view">
          <button>READ</button>
          <button>BOOKMARK</button>
      </div>
  </div>
</div>
<div class="card">
  <img class="card-img" src="../assets/Img/chad-montano-MqT0asuoIcU-unsplash.jpg" alt="Food Image" srcset=""/>

  <div class="card-content">
      <div class="card-content-title">
          <h1>Breakfast Story</h1>
          <h3>by Tarun</h3>
      </div>   
      <div class="card-content-body">
          We went across globe and covered a range of first meal of the day story.
      </div>
  </div> 
  <div class="card-footer">
      <div class="card-footer-action">
              <span class="material-icons-round">
                  favorite_border
              </span>
              <span class="material-icons-round">
                  share
                  </span>
              <span class="material-icons-round">
                  more_vert
              </span>
      </div>
  </div>
</div>
<div class="card card-text-overlay">
  <img class="card-img card-overlay-image" src="../assets/Img/chad-montano-MqT0asuoIcU-unsplash.jpg" alt="Food Image" srcset=""/>

  <div class="card-content">
      <div class="card-content-title card-overlay-title">
          <h1>Breakfast Story</h1>
          <h3>by Tarun</h3>
      </div>   
      <div class="card-content-body">
          We went across globe and covered a range of first meal of the day story.
      </div>
  </div> 
  <div class="card-footer">
      <div class="card-footer-action">
              <span class="material-icons-round">
                  favorite_border
              </span>
              <span class="material-icons-round">
                  share
                  </span>
              <span class="material-icons-round">
                  more_vert
              </span>
      </div>
  </div>
</div>
<div class="card card-header-title">
  <img class="card-img card-header-title-image" src="../assets/Img/chad-montano-MqT0asuoIcU-unsplash.jpg" alt="Food Image" srcset=""/>

  <div class="card-content">
      <div class="card-content-title card-header-title-content">
          <h1>Breakfast Story</h1>
          <h3>by Tarun</h3>
      </div>   
      <div class="card-content-body">
          We went across globe and covered a range of first meal of the day story.
      </div>
  </div> 
  <div class="card-footer">
      <div class="card-footer-action">
              <span class="material-icons-round">
                  favorite_border
              </span>
              <span class="material-icons-round">
                  share
                  </span>
              <span class="material-icons-round">
                  more_vert
              </span>
      </div>
  </div>
</div>
<div class="card card-horizontal">
  <div class="card-horizontal-layout">
      <img class="card-img" src="../assets/Img/chad-montano-MqT0asuoIcU-unsplash.jpg" alt="Food Image" srcset=""/>

      <div class="card-content">
          <div class="card-title">
              <h1>Breakfast Story</h1>
              <h3>by Tarun</h3>
          </div>   
          <div class="card-body">
              We went across globe and covered a range of first meal of the day story.
          </div>
      </div> 
  </div>
  <div class="card-footer">
      <div class="card-footer-view">
          <button>READ</button>
          <button>BOOKMARK</button>
      </div>
  </div>
</div>
<div class="card card-horizontal">
  <div class="card-horizontal-layout">
      <div class="card-content">
          <div class="card-title">
              <h1>Breakfast Story</h1>
              <h3>by Tarun</h3>
          </div>   
          <div class="card-body">
              We went across globe and covered a range of first meal of the day story.
          </div>
      </div> 
  </div>
  <div class="card-footer">
      <div class="card-footer-view">
          <button>READ</button>
          <button>BOOKMARK</button>
      </div>
  </div>
</div>