Awesome Blog Card Design 2021 - Free Cards Design

Awesome Blog Card Design 2021 - Free Cards Design

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

* 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. 25+ Best CSS Card Design

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:[email protected]&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;
}

Best Collection of products card design

html css javascript jquery

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Counter For HTML & CSS Website | Counter with JavaScript, jQuery

Learn How to animate counter for website using HTML, CSS and JavaScript, Number Counter Up with JavaScript for web design. In this video we will create a number counter up using JavaScript and jQuery, That add very beautiful effect on website design.

Complete Cake Website Step by Step using HTML, CSS, JavaScript and JQuery

In this video we will see how to make this beautiful website using html, css, javascript, jQuery , aos , magnific pop up and stellar , bootstrap , and many other open source libraries. Complete Cake Website Step by Step using HTML, CSS, JavaScript and JQuery

Animated Background with Pure CSS and HTML| No JavaScript no jQuery

Animated Background with Pure CSS and Html | No Javascript no Jquery

Custom Dropdown HTML CSS JavaScript | Custom Select input HTML CSS and JavaScript

Custom Dropdown HTML CSS JavaScript | Custom Select input HTML CSS and JavaScript. Let's create a custom select dropdown in HTML.

Image slider in HTML, CSS and, JavaScript || Carousel in HTML, CSS, and, JavaScript

Create a simple and responsive image slider or carousel using HTML, CSS, and javaScript.