<div class="container-fluid px-5 py-5 mx-auto">
<div class="row d-flex mb-4 px-3">
<h5 class="pr-4 bread-crumb">Receptacle</h5>
<h5 class="pr-4">></h5>
<h5 class="text-warning bread-crumb">Waste + Recycling</h5>
</div>
<div class="row justify-content-between px-4">
<div class="block text-center">
<p class="my-3 prod-name">Stream Receptacles</p> <img class="image" src="https://i.imgur.com/57tvLxH.jpg">
<div class="price">
<h6 class="mb-0">$322</h6>
</div>
</div>
<div class="block text-center">
<p class="my-3 prod-name">TRIO-$</p> <img class="image" src="https://i.imgur.com/gA5mCux.jpg">
<div class="price">
<h6 class="mb-0">$1,132</h6>
</div>
</div>
<div class="block text-center">
<p class="my-3 prod-name">ReSort</p> <img class="image" src="https://i.imgur.com/raRy5I0.jpg">
<div class="price">
<h6 class="mb-0">$1,431</h6>
</div>
</div>
<div class="block text-center">
<p class="my-3 prod-name">HexBin</p> <img class="image" src="https://i.imgur.com/baenb3V.jpg">
<div class="price">
<h6 class="mb-0">$960</h6>
</div>
</div>
</div>
<div class="row justify-content-between px-4">
<div class="block text-center">
<p class="my-3 prod-name">Stream Receptacles</p> <img class="image" src="https://i.imgur.com/57tvLxH.jpg">
<div class="price">
<h6 class="mb-0">$322</h6>
</div>
</div>
<div class="block text-center">
<p class="my-3 prod-name">TRIO-$</p> <img class="image" src="https://i.imgur.com/gA5mCux.jpg">
<div class="price">
<h6 class="mb-0">$1,132</h6>
</div>
</div>
<div class="block text-center">
<p class="my-3 prod-name">ReSort</p> <img class="image" src="https://i.imgur.com/raRy5I0.jpg">
<div class="price">
<h6 class="mb-0">$1,431</h6>
</div>
</div>
<div class="block text-center">
<p class="my-3 prod-name">HexBin</p> <img class="image" src="https://i.imgur.com/baenb3V.jpg">
<div class="price">
<h6 class="mb-0">$960</h6>
</div>
</div>
</div>
</div>
body {
color: #000;
overflow-x: hidden;
height: 100%;
background-color: #FFFF00;
background-repeat: no-repeat
}
.bread-crumb {
cursor: pointer
}
.bread-crumb:hover {
text-decoration: underline
}
.block {
position: relative;
background-color: #fff;
width: 24%;
height: 300px;
border: 2px solid #E0E0E0;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
margin-bottom: 25px
}
.block.active {
border: 2px solid #FBC02D;
box-shadow: 0 4px 8px 0 #FBC02D
}
.price {
position: absolute;
background-color: #E0E0E0;
padding: 25px 10px;
top: 70%;
left: 66%;
border-radius: 50%;
width: 70px;
height: 70px
}
.price.active {
background-color: #FBC02D;
box-shadow: 0 3px 6px 0 #FBC02D
}
.image {
width: 150px;
height: 180px
}
.prod-name {
font-size: 20px
}
@media screen and (max-width: 992px) {
.block {
width: 48%
}
}
@media screen and (max-width: 768px) {
.block {
width: 98%
}
}
$(document).ready(function(){
$(".block").click(function(){
$(this).toggleClass('active');
$(".price").removeClass('active');
$(".active .price").addClass('active');
});
});