HTML
<!-- Blog 1 - HCF Bootstrap 5 Component -->
<section class="bg-light py-5 py-xl-6">
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-12">
<div class="row align-items-center gy-3 gy-md-0 gx-xl-5">
<div class="col-xs-12 col-md-6">
<div class="img-wrapper position-relative hcf-transform">
<a href="#!">
<span class="badge rounded-pill text-bg-warning position-absolute top-10px start-10px">Sports</span>
<img class="img-fluid rounded w-100 hcf-of-cover hcf-op-center hcf-ih-250 hcf-ih-md-400" loading="lazy" src="./assets/img/blogs/blog-1/featured-image-1.jpg" alt="">
</a>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div>
<p class="text-secondary mb-1">Nov 11, 2022</p>
<h2 class="h1 mb-3"><a class="link-dark text-decoration-none" href="#!">Useful Skateboarding Tips For Beginners</a></h2>
<p class="mb-4">Learning how to skateboard can be a simultaneously exciting and terrifying experience. Explore the 20 top tips for beginner skaters.</p>
<a class="btn btn-primary" href="#!" target="_self">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center flex-row-reverse gy-3 gy-md-0 gx-xl-5">
<div class="col-xs-12 col-md-6">
<div class="img-wrapper position-relative hcf-transform">
<a href="#!">
<span class="badge rounded-pill text-bg-warning position-absolute top-10px end-10px">Travel</span>
<img class="img-fluid rounded w-100 hcf-of-cover hcf-op-center hcf-ih-250 hcf-ih-md-400" loading="lazy" src="./assets/img/blogs/blog-1/featured-image-2.jpg" alt="">
</a>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div>
<p class="text-secondary mb-1">Oct 9, 2022</p>
<h2 class="h1 mb-3"><a class="link-dark text-decoration-none" href="#!">Strange Facts About Hot Air Balloons</a></h2>
<p class="mb-4">You think the Wright Brothers were impressive? Hot air balloons were carrying people through the air almost a century before the Wright Brothers were even born.</p>
<a class="btn btn-primary" href="#!" target="_self">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center gy-3 gy-md-0 gx-xl-5">
<div class="col-xs-12 col-md-6">
<div class="img-wrapper position-relative hcf-transform">
<a href="#!">
<span class="badge rounded-pill text-bg-warning position-absolute top-10px start-10px">Photography</span>
<img class="img-fluid rounded w-100 hcf-of-cover hcf-op-center hcf-ih-250 hcf-ih-md-400" loading="lazy" src="./assets/img/blogs/blog-1/featured-image-3.jpg" alt="">
</a>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div>
<p class="text-secondary mb-1">Sep 17, 2022</p>
<h2 class="h1 mb-3"><a class="link-dark text-decoration-none" href="#!">Reasons Why Photography Is an Art Form</a></h2>
<p class="mb-4">Before the first photo was captured in the 18th century, lifelike images of what the eyes can see could only be made by talented artists.</p>
<a class="btn btn-primary" href="#!" target="_self">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-center flex-row-reverse gy-3 gy-md-0 gx-xl-5">
<div class="col-xs-12 col-md-6">
<div class="img-wrapper position-relative hcf-transform">
<a href="#!">
<span class="badge rounded-pill text-bg-warning position-absolute top-10px end-10px">Food</span>
<img class="img-fluid rounded w-100 hcf-of-cover hcf-op-center hcf-ih-250 hcf-ih-md-400" loading="lazy" src="./assets/img/blogs/blog-1/featured-image-4.jpg" alt="">
</a>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div>
<p class="text-secondary mb-1">Aug 23, 2022</p>
<h2 class="h1 mb-3"><a class="link-dark text-decoration-none" href="#!">Benefits of Having a Heavy Breakfast Every Morning</a></h2>
<p class="mb-4">Running late for work or school? "Let’s skip the breakfast!" Well, this might sound like the most ideal idea to save time when you are on the run.</p>
<a class="btn btn-primary" href="#!" target="_self">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Copy
