You have 03 items in your shopping bag
Price : $ 100.00
Qty : 02
Price : $ 300.00
Qty : 01
Furniture
<div class="row"> <div class="col-lg-12"> <div class="section-title text-center"> <h2 class="title-border">Product Tab Style 1</h2> </div> </div> </div> <div class="row"> <div class="col-lg-12 text-center"> <!-- Nav tabs --> <ul class="tab-menu clearfix"> <li class="active"><a href="#new-arrivals" data-bs-toggle="tab">New Arrivals</a></li> <li><a href="#best-seller" data-bs-toggle="tab">Best Seller </a></li> <li><a href="#most-view" data-bs-toggle="tab">Most View </a></li> <li><a href="#discounts" data-bs-toggle="tab">Discounts</a></li> </ul> </div> <div class="col-lg-12"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="new-arrivals"> <div class="row"> <!-- Single-product start --> <div class="single-product col-lg-3 col-sm-6"> <div class="product-img"> <span class="pro-label new-label">new</span> <a href="single-product.html"><img src="img/product/5.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">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-3 col-sm-6"> <div class="product-img"> <span class="pro-label sale-label">Sale</span> <a href="single-product.html"><img src="img/product/6.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 36.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-3 col-sm-6"> <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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 66.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/7.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 57.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-3 col-sm-6"> <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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 55.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-3 col-sm-6"> <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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 65.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/8.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 60.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/9.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 66.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> <div class="tab-pane" id="best-seller"> <div class="row"> <!-- Single-product start --> <div class="single-product col-lg-3 col-sm-6"> <div class="product-img"> <span class="pro-label new-label">new</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">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-3 col-sm-6"> <div class="product-img"> <span class="pro-label sale-label">Sale</span> <a href="single-product.html"><img src="img/product/9.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 36.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/8.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 66.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/6.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 57.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-3 col-sm-6"> <div class="product-img"> <span class="pro-label new-label">new</span> <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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 55.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-3 col-sm-6"> <div class="product-img"> <span class="pro-label sale-label">Sale</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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 65.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/7.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 60.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/5.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 66.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> <div class="tab-pane" id="most-view"> <div class="row"> <!-- Single-product start --> <div class="single-product col-lg-3 col-sm-6"> <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">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-3 col-sm-6"> <div class="product-img"> <span class="pro-label sale-label">Sale</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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 36.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/5.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 66.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/9.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 57.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-3 col-sm-6"> <div class="product-img"> <span class="pro-label new-label">new</span> <a href="single-product.html"><img src="img/product/7.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 55.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-3 col-sm-6"> <div class="product-img"> <span class="pro-label sale-label">Sale</span> <a href="single-product.html"><img src="img/product/5.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 65.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/7.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 60.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/8.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 66.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> <div class="tab-pane" id="discounts"> <div class="row"> <!-- Single-product start --> <div class="single-product col-lg-3 col-sm-6"> <div class="product-img"> <span class="pro-label new-label">new</span> <a href="single-product.html"><img src="img/product/8.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">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-3 col-sm-6"> <div class="product-img"> <span class="pro-label sale-label">Sale</span> <a href="single-product.html"><img src="img/product/9.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 36.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/7.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 66.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/6.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 57.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-3 col-sm-6"> <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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 55.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-3 col-sm-6"> <div class="product-img"> <span class="pro-label sale-label">Sale</span> <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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 65.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-3 col-sm-6"> <div class="product-img"> <a href="single-product.html"><img src="img/product/5.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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 60.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-3 col-sm-6"> <div class="product-img"> <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">Furniture</p> </div> <div class="fix"> <span class="pro-price floatleft">$ 66.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> </div> </div> </div>
.tab-menu { margin-bottom: 23px;display: inline-block;} .tab-menu li { display: block; margin: 0 15px; position: relative; float: left; } .tab-menu li a { color: #666; display: inline-block; font-size: 14px; font-weight: 700; line-height: 10px; padding-bottom: 12px; } .tab-menu li.active a { color: #D3B484;} .tab-menu li.active::before { background: #D3B484 none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; position: absolute; width: 30px; } .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); }