Awesome Blog Card Design 2021 - Free Cards Design
Tags: html, css, javascript, beginners
Published: 2021-07-17 07:08:12

***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:**

1. <a href="https://blog.stackfindover.com/best-css-card-design-for-website/">25+ Best CSS Card Design</a>

#### Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.

```html
<!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

```html
<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

```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;
}
```

### #Final Result
{% youtube rntWasYuz1E %}


#### <a href="https://blog.stackfindover.com/best-css-card-design-for-website/">Best Collection of blog card design</a>