Skip to content

Instantly share code, notes, and snippets.

@tarunsankhla

tarunsankhla/cards.html

Created February 6, 2022 09:12
Show Gist options
  • Save tarunsankhla/48642c1a9de7a57aed3cf6913e2b1f54 to your computer and use it in GitHub Desktop.
Save tarunsankhla/48642c1a9de7a57aed3cf6913e2b1f54 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment