<div class="container justify-content-center align-items-center mb-5">
<div class="row mt-5">
<div class="col-md-4">
<div class="part1 p-3 ">
<div class="mt-1 d-flex flex-row justify-content-between">
<div> <i class="fa fa-close"></i> </div>
<div class="cart "> <i class="fa fa-shopping-cart "></i> <i class="fa fa-search ml-3"></i> </div>
</div>
<div class="mt-3"> <span class="header">/STUFF UMBRELLA/</span> </div>
<div class="mt-3">
<h4 class="mainshot">Mini X - $23</h4> <span class="smallshot mt-3">comfort blunt XS has a perfect balance of portability an performance</span>
</div>
<div class="picture"> <img src="https://i.imgur.com/fCujHB5.png" width="220"> </div>
</div>
</div>
<div class="col-md-4">
<div class="part2 p-3">
<div class=" mt-1 d-flex flex-row justify-content-between">
<div> <i class="fa fa-close"></i> </div>
<div class="cart "> <i class="fa fa-shopping-cart "></i> <i class="fa fa-search ml-3"></i> </div>
</div>
<div class="mt-3"> <span class="header">/STUFF UMBRELLA/</span> </div>
<div class="mt-3">
<h4 class="mainshot">Mini XL - $29</h4> <span class="smallshot mt-3">comfort blunt XS has a perfect balance of portability an performance</span>
</div>
<div class="picture"> <img src="https://i.imgur.com/fCujHB5.png" width="220"> </div>
</div>
</div>
<div class="col-md-4">
<div class="part3 p-3">
<div class=" mt-1 d-flex flex-row justify-content-between">
<div> <i class="fa fa-close"></i> </div>
<div class="cart "> <i class="fa fa-shopping-cart "></i> <i class="fa fa-search ml-3"></i> </div>
</div>
<div class="mt-3"> <span class="header">/STUFF UMBRELLA/</span> </div>
<div class="mt-3">
<h4 class="mainshot">Mini XXL - $39</h4> <span class="smallshot mt-3">comfort blunt XS has a perfect balance of portability an performance</span>
</div>
<div class="picture"> <img src="https://i.imgur.com/fCujHB5.png" width="220"> </div>
</div>
</div>
</div>
</div>
body {
background-color: #D1C4E9;
border-radius: 12px
}
.part1 {
background-color: #eb5a51;
width: 100%;
height: 450px
}
.header {
font-size: 12px;
color: #fff
}
.mainshot {
font-size: 35px;
color: #fff
}
.col-md-4 {
margin-top: 10px
}
.picture {
text-align: center;
margin-top: 60px
}
.smallshot {
font-size: 9px;
color: #fff
}
.part2 {
background-color: #eabe5c;
width: 100%;
height: 450px
}
.part3 {
background-color: #4863eb;
width: 100%;
height: 450px
}
.picture:hover {
animation: umbrella 1.5s ease-in forwards
}
@keyframes umbrella {
0% {
transform: scale(1)
}
50% {
transform: scale(1.1)
}
100% {
transform: scale(1.2)
}
}