CSS Cards
// Hello Friends, I have listed over 30+ best card designs made with HTML, CSS, and JS. Check out these excellent CSS card design examples which are available on Codepen.
<div class="container">
<div class="cards grid-row">
<div class="card">
<div class="card-top">
<img src="img1.jpg" alt="Blog Name">
</div>
<div class="card-info">
<h2>JavaScript Quote Generator</h2>
<span class="date">Monday, Jan 20, 2021</span>
<p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="card-bottom flex-row">
<a href="#" class="read-more">Read Full Blog</a>
<a href="#" class="button btn-yellow">Blog</a>
</div>
</div>
<div class="card">
<div class="card-top">
<img src="img2.jpg" alt="Blog Name">
</div>
<div class="card-info">
<h2>How to Build HTML Minifier</h2>
<span class="date">Monday, Jan 20, 2021</span>
<p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="card-bottom flex-row">
<a href="#" class="read-more">Read Full Blog</a>
<a href="#" class="button btn-sky">Blog</a>
</div>
</div>
<div class="card">
<div class="card-top">
<img src="img3.jpg" alt="Blog Name">
</div>
<div class="card-info">
<h2>How to Build Signature Pad</h2>
<span class="date">Monday, Jan 20, 2021</span>
<p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="card-bottom flex-row">
<a href="#" class="read-more">Read Full Blog</a>
<a href="#" class="button btn-dpink">Blog</a>
</div>
</div>
<div class="card">
<div class="card-top">
<img src="img4.jpeg" alt="Blog Name">
</div>
<div class="card-info">
<h2>How to Build Gsap Gallery</h2>
<span class="date">Monday, Jan 20, 2021</span>
<p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="card-bottom flex-row">
<a href="#" class="read-more">Read Full Blog</a>
<a href="#" class="button btn-dpink">Blog</a>
</div>
</div>
</div>
</div>
//CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
overflow-x: hidden;
background: #e8eff7;
}
.grid-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
margin: 20px 0;
}
.card-top img {
display: block;
width: 100%;
}
.container {
width: 95%;
margin: auto;
}
.card {
background: #fff;
padding: 20px;
border-radius: 20px;
box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
}
.card-top {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
overflow: hidden;
}
.card-info h2 {
font-size: 18px;
margin: 10px 0 5px 0;
}
.date {
margin-bottom: 10px;
}
span,p {
font-size: 15px;
display: block;
}
.excerpt {
color: #aeaeae;
}
.flex-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-bottom {
margin-top: 20px;
}
.button {
text-decoration: unset;
font-weight: 600;
text-transform: uppercase;
color: #4e4e4e;
width: 80px;
text-align: center;
font-size: 15px;
line-height: 30px;
border-radius: 5px;
background: #f2f4f6;
}
.read-more {
text-decoration: unset;
color: #000;
font-weight: 600;
}
.btn-yellow {
background: #ffb91d;
}
.btn-sky {
background: #d2f9fe;
}
.btn-dpink {
background: #e8d3fc;
}
Xerothermic Xenomorph
