<div class="container-fluid px-5 py-5 mx-auto">
<div class="row justify-content-between px-3">
<div class="block text-center"> <img class="image" src="https://i.imgur.com/rwdD8hv.png">
<div class="info py-2 px-2">
<div class="row px-3">
<div class="cart">
<p class="mb-0 sm-font">ADD TO BAG</p>
</div>
<div class="order">
<p class="mb-0 sm-font">ORDER NOW</p>
</div>
</div>
<div class="text-left">
<h5 class="mb-0 mt-2">Hangup Trend</h5> <small class="text-muted mb-1">Men's Stylish Designed Shirt</small>
</div>
<div class="row px-3">
<h5>Rs.419</h5>
<p class="text-muted ml-2"><del>Rs.799</del></p>
</div>
</div>
</div>
<div class="block text-center"> <img class="image" src="https://i.imgur.com/hABF8A4.png">
<div class="info py-2 px-2">
<div class="row px-3">
<div class="cart">
<p class="mb-0 sm-font">ADD TO BAG</p>
</div>
<div class="order">
<p class="mb-0 sm-font">ORDER NOW</p>
</div>
</div>
<div class="text-left">
<h5 class="mb-0 mt-2">Hangup Trend</h5> <small class="text-muted mb-1">Men's Stylish Designed Shirt</small>
</div>
<div class="row px-3">
<h5>Rs.419</h5>
<p class="text-muted ml-2"><del>Rs.799</del></p>
</div>
</div>
</div>
<div class="block text-center"> <img class="image" src="https://i.imgur.com/S1oWXTm.png">
<div class="info py-2 px-2">
<div class="row px-3">
<div class="cart">
<p class="mb-0 sm-font">ADD TO BAG</p>
</div>
<div class="order">
<p class="mb-0 sm-font">ORDER NOW</p>
</div>
</div>
<div class="text-left">
<h5 class="mb-0 mt-2">Hangup Trend</h5> <small class="text-muted mb-1">Men's Stylish Designed Shirt</small>
</div>
<div class="row px-3">
<h5>Rs.419</h5>
<p class="text-muted ml-2"><del>Rs.799</del></p>
</div>
</div>
</div>
<div class="block text-center"> <img class="image" src="https://i.imgur.com/uduyk9T.png">
<div class="info py-2 px-2">
<div class="row px-3">
<div class="cart">
<p class="mb-0 sm-font">ADD TO BAG</p>
</div>
<div class="order">
<p class="mb-0 sm-font">ORDER NOW</p>
</div>
</div>
<div class="text-left">
<h5 class="mb-0 mt-2">Hangup Trend</h5> <small class="text-muted mb-1">Men's Stylish Designed Shirt</small>
</div>
<div class="row px-3">
<h5>Rs.419</h5>
<p class="text-muted ml-2"><del>Rs.799</del></p>
</div>
</div>
</div>
</div>
<div class="row justify-content-between px-3">
<div class="block text-center"> <img class="image" src="https://i.imgur.com/S1oWXTm.png">
<div class="info py-2 px-2">
<div class="row px-3">
<div class="cart">
<p class="mb-0 sm-font">ADD TO BAG</p>
</div>
<div class="order">
<p class="mb-0 sm-font">ORDER NOW</p>
</div>
</div>
<div class="text-left">
<h5 class="mb-0 mt-2">Hangup Trend</h5> <small class="text-muted mb-1">Men's Stylish Designed Shirt</small>
</div>
<div class="row px-3">
<h5>Rs.419</h5>
<p class="text-muted ml-2"><del>Rs.799</del></p>
</div>
</div>
</div>
<div class="block text-center"> <img class="image" src="https://i.imgur.com/uduyk9T.png">
<div class="info py-2 px-2">
<div class="row px-3">
<div class="cart">
<p class="mb-0 sm-font">ADD TO BAG</p>
</div>
<div class="order">
<p class="mb-0 sm-font">ORDER NOW</p>
</div>
</div>
<div class="text-left">
<h5 class="mb-0 mt-2">Hangup Trend</h5> <small class="text-muted mb-1">Men's Stylish Designed Shirt</small>
</div>
<div class="row px-3">
<h5>Rs.419</h5>
<p class="text-muted ml-2"><del>Rs.799</del></p>
</div>
</div>
</div>
<div class="block text-center"> <img class="image" src="https://i.imgur.com/rwdD8hv.png">
<div class="info py-2 px-2">
<div class="row px-3">
<div class="cart">
<p class="mb-0 sm-font">ADD TO BAG</p>
</div>
<div class="order">
<p class="mb-0 sm-font">ORDER NOW</p>
</div>
</div>
<div class="text-left">
<h5 class="mb-0 mt-2">Hangup Trend</h5> <small class="text-muted mb-1">Men's Stylish Designed Shirt</small>
</div>
<div class="row px-3">
<h5>Rs.419</h5>
<p class="text-muted ml-2"><del>Rs.799</del></p>
</div>
</div>
</div>
<div class="block text-center"> <img class="image" src="https://i.imgur.com/hABF8A4.png">
<div class="info py-2 px-2">
<div class="row px-3">
<div class="cart">
<p class="mb-0 sm-font">ADD TO BAG</p>
</div>
<div class="order">
<p class="mb-0 sm-font">ORDER NOW</p>
</div>
</div>
<div class="text-left">
<h5 class="mb-0 mt-2">Hangup Trend</h5> <small class="text-muted mb-1">Men's Stylish Designed Shirt</small>
</div>
<div class="row px-3">
<h5>Rs.419</h5>
<p class="text-muted ml-2"><del>Rs.799</del></p>
</div>
</div>
</div>
</div>
</div>
body {
color: #000;
overflow-x: hidden;
height: 100%;
background-color: #fff;
background-repeat: no-repeat
}
.block {
position: relative;
width: 22%;
background-color: lightgrey;
padding-top: 10px;
margin-bottom: 165px
}
.image {
width: 180px;
height: 300px
}
.info {
position: absolute;
width: 94%;
top: 280px;
left: 3%;
background-color: #fff
}
.cart {
background-color: #26A69A;
color: #fff;
padding: 6px;
width: 48%;
margin-right: 2%;
border: 2px solid #26A69A;
cursor: pointer
}
.cart:hover {
background-color: #00796B
}
.order {
color: #26A69A;
padding: 6px 5px;
width: 48%;
margin-left: 2%;
border: 2px solid #26A69A;
cursor: pointer
}
.order:hover {
color: #fff;
background-color: #00796B
}
.sm-font {
font-size: 12px
}
@media screen and (max-width: 992px) {
.block {
width: 45%
}
}
@media screen and (max-width: 550px) {
.block {
width: 100%
}
}