How to Create the Blog Card Using HTML and CSS

A blog card is a best way to showcase articles, blog posts, or highlighted content on a website. It improves the look and makes the content more interesting for users. In this tutorial, we will explore how to create a modern blog card using HTML and CSS.

Blog Card using HTML and CSS


HTML

First, we create a simple HTML structure for the blog card.


  
<main>
    <section>
      <div class="blog-card">
         <div class="main-blog">
           <div class="blog-img">
             <img src="img/img.jpg" alt="Blog Image" />
           </div>
           <div class="blog-content">
             <span>Interior</span>
             <h5>Top 5 Living Room Inspirations</h5>
             <p>
               Curated vibrants colors for your living, make it pop & calm in the same time.
             </p>
             <a href="#">ReadMore</a>
           </div>
         </div>
       </div>
     </section>
</main>

<div class="blog-card"> is the main container for the blog card. 

<div class="main-blog"> holds the content, which includes: A blog image placed in <div class="blog-img">

Text content located in <div class="blog-content">, which includes: <span> for the category, <h5> for the title, <p> for the description, <a> for the "Read More" link.


Blog Card using HTML and CSS


Style the Blog Card

Now, let's style the blog card using CSS to give it a modern and clean look.

Basic Styling:


 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Removes default browser margins and paddings

Centering the Blog Card:


 
.blog-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

  • display: flex; aligns items
  • justify-content: center; centers horizontally
  • align-items: center; centers vertically
  • height: 100vh; makes it take the full screen height

Styling the Card Container:


 
.main-blog {
    width: 350px;
    background-color: #fff;
    border-radius: 10px;
}

  • width: 350px; sets the card width
  • background-color: #fff; makes the card white
  • border-radius: 10px; rounds the corners

Making the Image Fit the Card:


 
.blog-img img {
    width: 100%;
    height: 300px;
    border-radius: 10px 10px 0 0;
}

  • width: 100%; ensures the image fits
  • height: 300px; fixes the height
  • border-radius: 10px 10px 0 0; rounds only the top corners

Styling the Blog Content:


 
.blog-content {
    padding: 15px;
}
.blog-content h5 {
    font-size: 19px;
    margin: 15px 0 10px;
}
.blog-content p {
    font-size: 16px;
    color: #777;
}
.blog-content a {
    color: #564789;
    text-decoration: none;
    font-weight: 500;
}
.blog-content span {
    font-size: 13px;
    background-color: #f0fff1;
    color: #52b788;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: 500;
}

Full Code:


 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.blog-card {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.main-blog {
    width: 350px;
    background-color: #fff;
    border-radius: 10px;
}
.blog-img img {
    width: 100%;
    height: 300px;
    border-radius: 10px 10px 0 0;
}
.blog-content {
    padding: 15px;
}
.blog-content h5 {
    font-size: 19px;
    margin: 15px 0 10px;
}
.blog-content p {
    font-size: 16px;
    color: #777;
}
.blog-content a {
    color: #564789;
    text-decoration: none;
    font-weight: 500;
}
.blog-content span {
    font-size: 13px;
    background-color: #f0fff1;
    color: #52b788;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: 500;
}

Blog Card using HTML and CSS


Conclusion:

You can make a stylish blog card using only HTML and CSS. This will improve how your website looks and how easy it is to read. You can change the colors, fonts, and layout to fit your brand.

Video Tutorial of Responsive Navbar


Must Read If you haven't

Thanks for reading

If you liked this tutorial, please share it with your friends or leave a comment!

Previous Post Next Post