Blog section cards design HTML is created by using the Bootstrap 4 and custom CSS. The Blog section is made created for a blog template where we can show our blog postcards in three columns layout.
HTML
<!-- Blog Section -->
<section id="blog">
<div class="container">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2 class="text-center">Read Guides And Tips</h2>
<p class="text-center col-md-8 offset-md-2"><i>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</i></p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="blog-post">
<div class="post-thumb">
<a href="#"><img src="images/image-one.jpg" class="img-fluid" /></a>
</div>
<h2><a href="#">What is Lorem Ipsum?</a></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</p>
<a href="blog-single.html" class="btn btn-warning float-right">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="blog-post">
<div class="post-thumb">
<a href="#"><img src="images/image-two.jpg" class="img-fluid" /></a>
</div>
<h2><a href="#">Why do we use it?</a></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</p>
<a href="blog-single.html" class="btn btn-warning float-right">Read More</a>
</div>
</div>
<div class="col-md-4">
<div class="blog-post">
<div class="post-thumb">
<a href="#"><img src="images/image-three.jpg" class="img-fluid" /></a>
</div>
<h2><a href="#">Where can I get some?</a></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</p>
<a href="blog-single.html" class="btn btn-warning float-right">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!-- End Blog Section -->CSS
/*-- Blog Section CSS --*/
#blog {
width: 100%;
float: left;
padding: 50px 0px;
}
.blog-post h2 {
font-size: 20px;
margin: 10px 0px;
}
.blog-post h2 a {
color: #333;
}
.blog-post p {
color: #505050;
}
#blog .section-title {
padding: 20px 0px 5px;
background-color: #fafafa;
border-radius: 10px;
margin-bottom: 30px;
}
#blog .blog-post {
padding: 15px;
border-radius: 5px;
box-shadow: 30px 30px 0px -20px #EEEEEE;
background: #fff;
border: 1px solid #e6e6e6;
position: relative;
overflow: hidden;
z-index: 99999;
margin-bottom: 30px;
}
#blog .blog-post .post-thumb {
max-height: 210px;
overflow: hidden;
}
/*-- End Blog Section CSS --*/