HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="bg-container shadow mb-2 pb-5">
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="offers-heading p-3">Explore Deals & Offers</h1>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="electronics-gadgets-bg shadow pb-4 pt-3 mt-3">
<h1 class="electronics-gadgets-heading m-3">Up to 80% Off | Electronics & Gadgets</h1>
<div class="d-flex flex-row">
<div>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-mamba-watch-img.png" alt="" class="w-100 p-4 img" />
<h1 class="gadgets-heading text-center">Smart Watch</h1>
</div>
<div>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-camera-img.png" alt="" class="w-100 p-4 img">
<h1 class="gadgets-heading text-center">Cameras</h1>
</div>
</div>
<div class="d-flex flex-row">
<div>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-sport-and-fitness-img.png" alt="" class="w-100 p-4 img" />
<h1 class="gadgets-heading text-center">Sports & Fitness</h1>
</div>
<div>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-ear-phones-pink-img.png" alt="" class="w-100 p-4 img">
<h1 class="gadgets-heading text-center">Earphones</h1>
</div>
</div>
<a href="#"><span class="deals-style ml-3">
See All Deals
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right icon ml-1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
</svg>
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="electronics-gadgets-bg pt-4 pb-4 mt-3 shadow">
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-tv-img.png" alt="" class="w-100 p-4 img" />
<a href="#"><span class="deals-style ml-3">
See All Deals
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right icon ml-1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
</svg>
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="electronics-gadgets-bg shadow pb-4 pt-3 mt-3">
<h1 class="electronics-gadgets-heading m-3">Under Rs 4000 | Friendly Accessories</h1>
<div class="d-flex flex-row">
<div>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-tablet-device-img.png" alt="" class="w-100 p-4 img" />
<h1 class="gadgets-heading text-center">Tablet</h1>
</div>
<div>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-joy-stick-img.png" alt="" class="w-100 p-4 img">
<h1 class="gadgets-heading text-center">PlayStation</h1>
</div>
</div>
<div class="d-flex flex-row">
<div>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-speakers-big-img.png" alt="" class="w-100 p-4 img" />
<h1 class="gadgets-heading text-center">Speakers</h1>
</div>
<div>
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-website/ecommerce-explore-vr-set-img.png" alt="" class="w-100 p-4 img">
<h1 class="gadgets-heading text-center">Virtual Reality set</h1>
</div>
</div>
<a href="#"><span class="deals-style ml-3">
See All Deals
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right icon ml-1" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');
.bg-container {
background-color: #f5f7fa;
}
.electronics-gadgets-bg {
background-color: #ffffff;
border-radius: 9px;
}
.offers-heading {
color: #183b56;
font-weight: bold;
}
.electronics-gadgets-heading {
color: #183b56;
font-size: 33px;
font-weight: 700;
}
.img {
border-radius: 55px;
}
.gadgets-heading {
font-size: 25px;
}
.deals-style {
color: #ff9f00;
font-size: 20px;
font-weight: 700;
}
.icon {
color: #ff9f00;
}
