-
3
You have 03 items in your shopping bag
Total $500.00
Featured Products 1
$ 56.20
$ 56.20
$ 56.20
$ 56.20
$ 56.20
<!-- Section-title start -->
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center">
<h2 class="title-border">Featured Products 1</h2>
</div>
</div>
</div>
<!-- Section-title end -->
<div class="row">
<div class="product-slider arrow-left-right">
<!-- Single-product start -->
<div class="single-product col-lg-12">
<div class="product-img">
<span class="pro-label new-label">new</span>
<a href="single-product.html"><img src="img/product/1.jpg" alt="" /></a>
<div class="product-action clearfix">
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
</div>
</div>
<div class="product-info clearfix">
<div class="fix">
<h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
<p class="floatright hidden-sm d-none d-md-block">Furniture</p>
</div>
<div class="fix">
<span class="pro-price floatleft">$ 56.20</span>
<span class="pro-rating floatright">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
</span>
</div>
</div>
</div>
<!-- Single-product end -->
<!-- Single-product start -->
<div class="single-product col-lg-12">
<div class="product-img">
<span class="pro-label sale-label">Sale</span>
<a href="single-product.html"><img src="img/product/2.jpg" alt="" /></a>
<div class="product-action clearfix">
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
</div>
</div>
<div class="product-info clearfix">
<div class="fix">
<h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
<p class="floatright hidden-sm d-none d-md-block">Furniture</p>
</div>
<div class="fix">
<span class="pro-price floatleft">$ 56.20</span>
<span class="pro-rating floatright">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
</span>
</div>
</div>
</div>
<!-- Single-product end -->
<!-- Single-product start -->
<div class="single-product col-lg-12">
<div class="product-img">
<a href="single-product.html"><img src="img/product/3.jpg" alt="" /></a>
<div class="product-action clearfix">
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
</div>
</div>
<div class="product-info clearfix">
<div class="fix">
<h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
<p class="floatright hidden-sm d-none d-md-block">Furniture</p>
</div>
<div class="fix">
<span class="pro-price floatleft">$ 56.20</span>
<span class="pro-rating floatright">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
</span>
</div>
</div>
</div>
<!-- Single-product end -->
<!-- Single-product start -->
<div class="single-product col-lg-12">
<div class="product-img">
<a href="single-product.html"><img src="img/product/4.jpg" alt="" /></a>
<div class="product-action clearfix">
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
</div>
</div>
<div class="product-info clearfix">
<div class="fix">
<h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
<p class="floatright hidden-sm d-none d-md-block">Furniture</p>
</div>
<div class="fix">
<span class="pro-price floatleft">$ 56.20</span>
<span class="pro-rating floatright">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
</span>
</div>
</div>
</div>
<!-- Single-product end -->
<!-- Single-product start -->
<div class="single-product col-lg-12">
<div class="product-img">
<span class="pro-label new-label">new</span>
<a href="single-product.html"><img src="img/product/3.jpg" alt="" /></a>
<div class="product-action clearfix">
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Wishlist"><i class="zmdi zmdi-favorite-outline"></i></a>
<a href="#" data-bs-toggle="modal" data-bs-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
<a href="#" data-bs-toggle="tooltip" data-placement="top" title="Add To Cart"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
</div>
</div>
<div class="product-info clearfix">
<div class="fix">
<h4 class="post-title floatleft"><a href="#">dummy Product name</a></h4>
<p class="floatright hidden-sm d-none d-md-block">Furniture</p>
</div>
<div class="fix">
<span class="pro-price floatleft">$ 56.20</span>
<span class="pro-rating floatright">
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
<a href="#"><i class="zmdi zmdi-star-half"></i></a>
</span>
</div>
</div>
</div>
<!-- Single-product end -->
</div>
</div>
.product-slider .slick-list { padding: 10px 15px 20px;}
.single-product {
padding-top: 15px;
transition: all 0.5s ease 0s;
}
.product-img {
overflow: hidden;
position: relative;
}
.product-img img { width: 100%;}
.product-action {
background: #fff none repeat scroll 0 0;
bottom: -40px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
visibility:hidden;
opacity: 0;
transition: all 0.5s ease 0s;
width: calc(100% - 40px);
}
.product-action a {
color: #666666;
float: left;
font-size: 16px;
height: 40px;
line-height: 40px;
position: relative;
width: 25%;
}
.product-action a::before {
background: #999 none repeat scroll 0 0;
content: "";
height: 16px;
margin-top: -8px;
position: absolute;
right: 0;
top: 50%;
width: 2px;
}
.product-action a:last-child::before {
display:none;
}
.product-action a:hover {
color: #C8A165;
}
.product-info {
padding: 20px 0;
}
.post-title {
font-size: 16px;
line-height: 18px;
text-transform: uppercase;
font-family: bree serif;
margin-bottom: 5px;
}
.product-info p {
font-weight: 700;
margin-bottom: 5px;
}
.pro-price {
color: #c87065;
font-size: 18px;
font-weight: bold;
line-height: 28px;
}
.pro-rating a {
color: #c87065;
font-size: 15px;
line-height: 28px;
}
.single-product:hover .product-action {
bottom: 15px;
visibility:visible;
opacity: 1;
}
.single-product:hover {
box-shadow: 1px 25px 54px rgba(0, 0, 0, 0.12);
}
.product-slider .single-product:hover {
box-shadow: 1px 8px 15px rgba(0, 0, 0, 0.12);
}
$('.product-slider').slick({
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: '<button type="button" class="slick-prev">p<br />r<br />e<br />v</button>',
nextArrow: '<button type="button" class="slick-next">n<br />e<br />x<br />t</button>',
responsive: [
{ breakpoint: 1169, settings: { slidesToShow: 3, } },
{ breakpoint: 969, settings: { slidesToShow: 3, } },
{ breakpoint: 767, settings: { slidesToShow: 1, } },
{ breakpoint: 480, settings: { slidesToShow: 1, } },
]
});
Aenean eu tristique
$160.00
$190.00
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla augue nec est tristique auctor. Donec non est at libero.