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.
Awesome Blog Card Design 2021 step by step
Step 1 — Creating a New Project
In this step, we need to create a new project folder and files(index.html, style.css) for creating a simple css blog card design. In the next step, you will start creating the structure of the webpage.
You may like these also:
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog card design 2021</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag
<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>
Step 3 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
@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;
}
#Final Result
Top comments (0)