<section class="products-2 py-5">
<div class="fui-container">
<div class="row fj-center">
<!-- SINGLE PRODUCT -->
<div class="col-md-4 col-sm-6 col-12 single-product-col mb-2">
<div class="fui-card">
<div class="fui-card-body">
<div class="img">
<img src="https://source.unsplash.com/200x200/" alt="">
</div>
<!-- TITLE -->
<div class="title-col text-center">
<h5 class="title">Ragdoll cat</h5>
<div class="pricing"><del class="text-danger">$560</del><span class="text-gray">$320</span>
</div>
<!-- CART -->
<div class="cart-col">
<a href=""><i class="fa fa-shopping-cart"></i></a>
<a href=""><i class="fa fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- SINGLE PRODUCT -->
<div class="col-md-4 col-sm-6 col-12 single-product-col mb-2">
<div class="fui-card">
<div class="fui-card-body">
<div class="img">
<img src="https://source.unsplash.com/200x200/" alt="">
</div>
<!-- TITLE -->
<div class="title-col text-center">
<h5 class="title">Ragdoll cat</h5>
<div class="pricing"><del class="text-danger">$560</del><span class="text-gray">$320</span>
</div>
<!-- CART -->
<div class="cart-col">
<a href=""><i class="fa fa-shopping-cart"></i></a>
<a href=""><i class="fa fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- SINGLE PRODUCT -->
<div class="col-md-4 col-sm-6 col-12 single-product-col mb-2">
<div class="fui-card">
<div class="fui-card-body">
<div class="img">
<img src="https://source.unsplash.com/200x200/" alt="">
</div>
<!-- TITLE -->
<div class="title-col text-center">
<h5 class="title">Ragdoll cat</h5>
<div class="pricing"><del class="text-danger">$560</del><span class="text-gray">$320</span>
</div>
<!-- CART -->
<div class="cart-col">
<a href=""><i class="fa fa-shopping-cart"></i></a>
<a href=""><i class="fa fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- SINGLE PRODUCT -->
<div class="col-md-4 col-sm-6 col-12 single-product-col mb-2">
<div class="fui-card">
<div class="fui-card-body">
<div class="img">
<img src="https://source.unsplash.com/200x200/" alt="">
</div>
<!-- TITLE -->
<div class="title-col text-center">
<h5 class="title">Ragdoll cat</h5>
<div class="pricing"><del class="text-danger">$560</del><span class="text-gray">$320</span>
</div>
<!-- CART -->
<div class="cart-col">
<a href=""><i class="fa fa-shopping-cart"></i></a>
<a href=""><i class="fa fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- SINGLE PRODUCT -->
<div class="col-md-4 col-sm-6 col-12 single-product-col mb-2">
<div class="fui-card">
<div class="fui-card-body">
<div class="img">
<img src="https://source.unsplash.com/200x200/" alt="">
</div>
<!-- TITLE -->
<div class="title-col text-center">
<h5 class="title">Ragdoll cat</h5>
<div class="pricing"><del class="text-danger">$560</del><span class="text-gray">$320</span>
</div>
<!-- CART -->
<div class="cart-col">
<a href=""><i class="fa fa-shopping-cart"></i></a>
<a href=""><i class="fa fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- SINGLE PRODUCT -->
<div class="col-md-4 col-sm-6 col-12 single-product-col mb-2">
<div class="fui-card">
<div class="fui-card-body">
<div class="img">
<img src="https://source.unsplash.com/200x200/" alt="">
</div>
<!-- TITLE -->
<div class="title-col text-center">
<h5 class="title">Ragdoll cat</h5>
<div class="pricing"><del class="text-danger">$560</del><span class="text-gray">$320</span>
</div>
<!-- CART -->
<div class="cart-col">
<a href=""><i class="fa fa-shopping-cart"></i></a>
<a href=""><i class="fa fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.products-2 .category-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.products-2 .category-menu a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 15px 35px;
border: 1px solid #ccc;
border-right: none;
}
.products-2 .category-menu a:first-child {
border-top-left-radius: 35px;
border-bottom-left-radius: 35px;
}
.products-2 .category-menu a:last-child {
border-top-right-radius: 35px;
border-bottom-right-radius: 35px;
border-right: 1px solid #ccc;
}
.products-2 .category-menu a.active,
.products-2 .category-menu a:hover {
background: #008cff;
}
.products-2 .category-menu a img {
height: 35px;
}
.products-2 .category-menu a span {
padding-left: 10px;
color: black;
}
@media (max-width: 768px) {
.products-2 .category-menu a {
padding: 10px 15px;
margin: 2px !important;
border: 1px solid #ccc;
}
.products-2 .category-menu a:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-right: 25px;
}
.products-2 .category-menu a:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.products-2 .category-menu a.active,
.products-2 .category-menu a:hover {
background: #008cff;
}
.products-2 .category-menu a img {
height: 15px;
}
.products-2 .category-menu a span {
padding-left: 10px;
color: black;
}
}
.products-2 .single-product-col .fui-card:hover {
border-color: #ff4444;
}
.products-2 .single-product-col .fui-card:hover .cart-col {
opacity: 1;
}
.products-2 .single-product-col .img {
height: 300px;
border: 1px solid #eee;
}
.products-2 .single-product-col .img img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.products-2 .single-product-col .title-col {
position: relative;
}
.products-2 .single-product-col .title-col .title {
padding-top: 20px;
}
.products-2 .single-product-col .title-col .pricing {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.products-2 .single-product-col .title-col .pricing del {
border-right: 1px solid #ccc;
}
.products-2 .single-product-col .title-col .pricing del,
.products-2 .single-product-col .title-col .pricing span {
padding: 5px 15px;
}
.products-2 .single-product-col .title-col .cart-col {
opacity: 0;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
.products-2 .single-product-col .title-col .cart-col a {
width: 40px;
height: 40px;
border: 1px solid #ccc;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #555;
font-size: 20px;
}
.products-2 .single-product-col .title-col .cart-col a:hover {
color: #008cff;
border-color: #008cff;
}
/*# sourceMappingURL=style.min.css.map */
Insert before the closing </head> tag
<!-- Icon Famous -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/icon-famous/1.0.0-beta.2/iconfamous.css">
<!-- Famous UI -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.css">
Insert before the closing </body> tag
<!-- jQuery -->
<script src="https://cdn.boomcdn.com/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Famous UI -->
<script src="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.js"></script>