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.
.png "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.
.PNG "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;
}
.PNG "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
- 100+ Frontend Projects to Level up Your Skill
- 23 React Projects with Source Code
- How to Create Responsive Navbar Using HTML, CSS, and JavaScript
Thanks for reading
If you liked this tutorial, please share it with your friends or leave a comment!
.png&description=How to Create the Blog Card Using HTML and CSS){kind=link}