Elements Product

<div class="grid-products grid--view-items">
   <div class="row">
      <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
         <div class="product-image">
            <a href="product-layout1.html" class="product-img">
               <img class="primary blur-up lazyload" data-src="assets/images/products/product-6-2.jpg" src="assets/images/products/product-6-2.jpg" alt="image" title="">
               <img class="hover blur-up lazyload" data-src="assets/images/products/product-6-1.jpg" src="assets/images/products/product-6-1.jpg" alt="image" title="">
            </a>
            <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
            <div class="saleTime" data-countdown="2024/10/01"></div>
            <div class="button-set style0 d-none d-md-block">
               <ul>
                  <li><a class="btn-icon btn rounded-2 cartIcon pro-addtocart-popup bg-black text-white border-black" href="#pro-addtocart-popup"><i class="icon an an-cart-l"></i> <span class="tooltip-label top">Add to Cart</span></a></li>
                  <li><a class="btn-icon rounded-2 quick-view-popup quick-view bg-black text-white border-black" href="javascript:void(0)" data-toggle="modal" data-target="#content_quickview"><i class="icon an an-search-l"></i> <span class="tooltip-label top">Quick View</span></a></li>
                  <li><a class="btn-icon rounded-2 wishlist add-to-wishlist bg-black text-white border-black" href="my-wishlist.html"><i class="icon an an-heart-l"></i> <span class="tooltip-label top">Add To Wishlist</span></a></li>
                  <li><a class="btn-icon rounded-2 compare add-to-compare bg-black text-white border-black" href="compare-style2.html"><i class="icon an an-sync-ar"></i> <span class="tooltip-label top">Add to Compare</span></a></li>
               </ul>
            </div>
         </div>
         <div class="product-details text-start">
            <div class="product-name text-uppercase">
               <a href="product-layout1.html">Neck Tank Top</a>
            </div>
            <div class="product-price">
               <span class="old-price">$150.00</span>
               <span class="price">$100.00</span>
            </div>
            <div class="product-review d-flex align-items-center justify-content-start">
               <i class="an an-star"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i>
               <span class="caption hidden ms-2">10 reviews</span>
            </div>
            <ul class="image-swatches swatches">
               <li class="radius green medium" style="background-image:url(assets/images/products/swatches/top-green-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Green</span></li>
               <li class="radius peach medium" style="background-image:url(assets/images/products/swatches/top-peach-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Peach</span></li>
               <li class="radius white medium" style="background-image:url(assets/images/products/swatches/top-white-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">White</span></li>
            </ul>
         </div>
      </div>
   </div>
</div> 

<div class="grid-products grid--view-items">
   <div class="row">
      <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
         <div class="product-image">
            <a href="product-layout1.html" class="product-img">
               <img class="primary blur-up lazyload" data-src="assets/images/products/product-6-2.jpg" src="assets/images/products/product-6-2.jpg" alt="image" title="">
               <img class="hover blur-up lazyload" data-src="assets/images/products/product-6-1.jpg" src="assets/images/products/product-6-1.jpg" alt="image" title="">
            </a>
            <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
            <div class="saleTime" data-countdown="2024/10/01"></div>
            <div class="button-set style2 d-none d-md-block">
               <ul>
                  <li><a class="btn-icon btn rounded-2 cartIcon pro-addtocart-popup bg-black text-white border-black" href="#pro-addtocart-popup"><i class="icon an an-cart-l"></i> <span class="tooltip-label top">Add to Cart</span></a></li>
                  <li><a class="btn-icon rounded-2 quick-view-popup quick-view bg-black text-white border-black" href="javascript:void(0)" data-toggle="modal" data-target="#content_quickview"><i class="icon an an-search-l"></i> <span class="tooltip-label top">Quick View</span></a></li>
                  <li><a class="btn-icon rounded-2 wishlist add-to-wishlist bg-black text-white border-black" href="my-wishlist.html"><i class="icon an an-heart-l"></i> <span class="tooltip-label top">Add To Wishlist</span></a></li>
                  <li><a class="btn-icon rounded-2 compare add-to-compare bg-black text-white border-black" href="compare-style2.html"><i class="icon an an-sync-ar"></i> <span class="tooltip-label top">Add to Compare</span></a></li>
               </ul>
            </div>
         </div>
         <div class="product-details text-start">
            <div class="product-name text-uppercase">
               <a href="product-layout1.html">Neck Tank Top</a>
            </div>
            <div class="product-price">
               <span class="old-price">$150.00</span>
               <span class="price">$100.00</span>
            </div>
            <div class="product-review d-flex align-items-center justify-content-start">
               <i class="an an-star"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i>
               <span class="caption hidden ms-2">10 reviews</span>
            </div>
            <ul class="image-swatches swatches">
               <li class="radius green medium" style="background-image:url(assets/images/products/swatches/top-green-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Green</span></li>
               <li class="radius peach medium" style="background-image:url(assets/images/products/swatches/top-peach-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Peach</span></li>
               <li class="radius white medium" style="background-image:url(assets/images/products/swatches/top-white-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">White</span></li>
            </ul>
         </div>
      </div>
   </div>
</div> 

<div class="grid-products grid--view-items">
   <div class="row">
      <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
         <div class="product-image">
            <a href="product-layout1.html" class="product-img">
               <img class="primary blur-up lazyload" data-src="assets/images/products/product-6-2.jpg" src="assets/images/products/product-6-2.jpg" alt="image" title="">
               <img class="hover blur-up lazyload" data-src="assets/images/products/product-6-1.jpg" src="assets/images/products/product-6-1.jpg" alt="image" title="">
            </a>
            <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
            <div class="saleTime" data-countdown="2024/10/01"></div>
            <div class="button-set style3 d-none d-md-block">
               <ul>
                  <li><a class="btn-icon btn rounded-2 cartIcon pro-addtocart-popup bg-black text-white border-black" href="#pro-addtocart-popup"><i class="icon an an-cart-l"></i> <span class="tooltip-label top">Add to Cart</span></a></li>
                  <li><a class="btn-icon rounded-2 quick-view-popup quick-view bg-black text-white border-black" href="javascript:void(0)" data-toggle="modal" data-target="#content_quickview"><i class="icon an an-search-l"></i> <span class="tooltip-label top">Quick View</span></a></li>
                  <li><a class="btn-icon rounded-2 wishlist add-to-wishlist bg-black text-white border-black" href="my-wishlist.html"><i class="icon an an-heart-l"></i> <span class="tooltip-label top">Add To Wishlist</span></a></li>
                  <li><a class="btn-icon rounded-2 compare add-to-compare bg-black text-white border-black" href="compare-style2.html"><i class="icon an an-sync-ar"></i> <span class="tooltip-label top">Add to Compare</span></a></li>
               </ul>
            </div>
         </div>
         <div class="product-details text-start">
            <div class="product-name text-uppercase">
               <a href="product-layout1.html">Neck Tank Top</a>
            </div>
            <div class="product-price">
               <span class="old-price">$150.00</span>
               <span class="price">$100.00</span>
            </div>
            <div class="product-review d-flex align-items-center justify-content-start">
               <i class="an an-star"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i>
               <span class="caption hidden ms-2">10 reviews</span>
            </div>
            <ul class="image-swatches swatches">
               <li class="radius green medium" style="background-image:url(assets/images/products/swatches/top-green-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Green</span></li>
               <li class="radius peach medium" style="background-image:url(assets/images/products/swatches/top-peach-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Peach</span></li>
               <li class="radius white medium" style="background-image:url(assets/images/products/swatches/top-white-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">White</span></li>
            </ul>
         </div>
      </div>
   </div>
</div>

<div class="grid-products grid--view-items">
    <div class="row">
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
            <div class="product-image">
                <a href="product-layout1.html" class="product-img">
                    <img class="primary blur-up lazyload" data-src="assets/images/products/product-6-2.jpg" src="assets/images/products/product-6-2.jpg" alt="image" title="">
                    <img class="hover blur-up lazyload" data-src="assets/images/products/product-6-1.jpg" src="assets/images/products/product-6-1.jpg" alt="image" title="">
                </a>
                <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
                <div class="saleTime" data-countdown="2024/10/01"></div>
                <div class="button-set style4 d-none d-md-block">
                    <ul>
                        <li><a class="btn-icon btn cartIcon pro-addtocart-popup bg-black text-white border-black" href="#pro-addtocart-popup"><i class="icon an an-cart-l"></i> <span class="tooltip-label top">Add to Cart</span></a></li>
                        <li><a class="btn-icon quick-view-popup quick-view bg-black text-white border-black" href="javascript:void(0)" data-toggle="modal" data-target="#content_quickview"><i class="icon an an-search-l"></i> <span class="tooltip-label top">Quick View</span></a></li>
                        <li><a class="btn-icon wishlist add-to-wishlist bg-black text-white border-black" href="my-wishlist.html"><i class="icon an an-heart-l"></i> <span class="tooltip-label top">Add To Wishlist</span></a></li>
                        <li><a class="btn-icon compare add-to-compare bg-black text-white border-black" href="compare-style2.html"><i class="icon an an-sync-ar"></i> <span class="tooltip-label top">Add to Compare</span></a></li>
                    </ul>
                </div>
            </div>
            <div class="product-details text-center">
                <div class="product-name">
                    <a href="product-layout1.html">Neck Tank Top</a>
                </div>
                <div class="product-price">
                    <span class="old-price">$150.00</span>
                    <span class="price">$100.00</span>
                </div>
                <div class="product-review d-flex align-items-center justify-content-center">
                    <i class="an an-star"></i><i class="an an-star"></i><i class="an an-star"></i><i class="an an-star"></i><i class="an an-star-o"></i>
                    <span class="caption hidden ms-2">10 reviews</span>
                </div>
                <ul class="image-swatches swatches">
                    <li class="radius green medium" style="background-image:url(assets/images/products/swatches/top-green-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Green</span></li>
                    <li class="radius peach medium" style="background-image:url(assets/images/products/swatches/top-peach-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Peach</span></li>
                    <li class="radius white medium" style="background-image:url(assets/images/products/swatches/top-white-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">White</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="grid-products grid--view-items">
   <div class="row">
      <div class="col-6 col-sm-6 col-md-4 col-lg-4 item">
         <div class="product-image">
            <a href="product-layout1.html" class="product-img">
               <img class="primary blur-up lazyload" data-src="assets/images/products/product-6-2.jpg" src="assets/images/products/product-6-2.jpg" alt="image" title="">
               <img class="hover blur-up lazyload" data-src="assets/images/products/product-6-1.jpg" src="assets/images/products/product-6-1.jpg" alt="image" title="">
            </a>
            <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
            <div class="saleTime" data-countdown="2024/10/01"></div>
            <div class="button-set-top position-absolute">
               <a class="btn-icon wishlist add-to-wishlist rounded" href="my-wishlist.html"><i class="icon an an-heart-l"></i> <span class="tooltip-label">Add To Wishlist</span></a>
               <a class="btn-icon quick-view-popup quick-view rounded" href="javascript:void(0)" data-toggle="modal" data-target="#content_quickview"><i class="icon an an-search-l"></i> <span class="tooltip-label">Quick View</span></a>
               <a class="btn-icon compare add-to-compare rounded" href="compare-style2.html"><i class="icon an an-sync-ar"></i> <span class="tooltip-label">Add to Compare</span></a>
            </div>
            <div class="button-set-bottom position-absolute">
               <a class="btn-icon btn btn-addto-cart pro-addtocart-popup rounded" href="#pro-addtocart-popup"><i class="icon an an-cart-l"></i> <span>Add To Cart</span></a>
            </div>
         </div>
         <div class="product-details text-start">
            <div class="product-name text-uppercase">
               <a href="product-layout1.html">Neck Tank Top</a>
            </div>
            <div class="product-price">
               <span class="old-price">$150.00</span>
               <span class="price">$100.00</span>
            </div>
            <div class="product-review d-flex align-items-center justify-content-start">
               <i class="an an-star"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i>
               <span class="caption hidden ms-2">10 reviews</span>
            </div>
            <ul class="image-swatches swatches">
               <li class="radius green medium" style="background-image:url(assets/images/products/swatches/top-green-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Green</span></li>
               <li class="radius peach medium" style="background-image:url(assets/images/products/swatches/top-peach-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Peach</span></li>
               <li class="radius white medium" style="background-image:url(assets/images/products/swatches/top-white-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">White</span></li>
            </ul>
         </div>
      </div>
   </div>
</div> 

<div class="grid-products grid--view-items">
   <div class="row">
      <div class="col-6 col-sm-6 col-md-4 col-lg-4">
         <div class="item mb-4 w-100 p-0">
            <a class="overlay" href="product-layout-3.html"></a>
            <div class="product-image">
               <a href="product-layout1.html" class="product-img">
                  <img class="primary blur-up lazyload" data-src="assets/images/products/product-6-2.jpg" src="assets/images/products/product-6-2.jpg" alt="image" title="">
                  <img class="hover blur-up lazyload" data-src="assets/images/products/product-6-1.jpg" src="assets/images/products/product-6-1.jpg" alt="image" title="">
               </a>
               <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
               <div class="saleTime" data-countdown="2024/10/01"></div>
            </div>
            <div class="product-details text-center">
               <div class="product-name">
                  <a href="product-layout1.html">Neck Tank Top</a>
               </div>
               <div class="product-price">
                  <span class="old-price">$150.00</span>
                  <span class="price">$100.00</span>
               </div>
               <div class="product-review d-flex align-items-center justify-content-center">
                  <i class="an an-star"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i>
                  <span class="caption hidden ms-2">10 reviews</span>
               </div>
               <ul class="image-swatches swatches">
                  <li class="radius green medium" style="background-image:url(assets/images/products/swatches/top-green-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Green</span></li>
                  <li class="radius peach medium" style="background-image:url(assets/images/products/swatches/top-peach-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Peach</span></li>
                  <li class="radius white medium" style="background-image:url(assets/images/products/swatches/top-white-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">White</span></li>
               </ul>
               <div class="button-set d-none d-md-block mt-1" style="position:static;opacity:1;visibility:visible;">
                  <ul>
                     <li><a class="btn-icon btn rounded-2 cartIcon pro-addtocart-popup" href="#pro-addtocart-popup"><i class="icon an an-cart-l"></i> <span class="tooltip-label top">Add to Cart</span></a></li>
                     <li><a class="btn-icon rounded-2 quick-view-popup quick-view" href="javascript:void(0)" data-toggle="modal" data-target="#content_quickview"><i class="icon an an-search-l"></i> <span class="tooltip-label top">Quick View</span></a></li>
                     <li><a class="btn-icon rounded-2 wishlist add-to-wishlist" href="my-wishlist.html"><i class="icon an an-heart-l"></i> <span class="tooltip-label top">Add To Wishlist</span></a></li>
                     <li><a class="btn-icon rounded-2 compare add-to-compare" href="compare-style2.html"><i class="icon an an-sync-ar"></i> <span class="tooltip-label top">Add to Compare</span></a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
</div> 

<div class="grid-products style2 grid--view-items">
   <div class="row">
      <div class="col-6 col-sm-6 col-md-4 col-lg-4">
         <div class="item mb-4 w-100 p-0">
            <a class="overlay" href="product-layout-3.html"></a>
            <div class="product-image">
               <a href="product-layout1.html" class="product-img">
                 <img class="primary blur-up lazyload" data-src="assets/images/products/product-6-2.jpg" src="assets/images/products/product-6-2.jpg" alt="image" title="">
                 <img class="hover blur-up lazyload" data-src="assets/images/products/product-6-1.jpg" src="assets/images/products/product-6-1.jpg" alt="image" title="">
               </a>
               <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
               <div class="saleTime" data-countdown="2024/10/01"></div>
            </div>
            <div class="product-details text-center">
               <div class="product-name">
                  <a href="product-layout1.html">Neck Tank Top</a>
               </div>
               <div class="product-price">
                  <span class="old-price">$150.00</span>
                  <span class="price">$100.00</span>
               </div>
               <div class="product-review d-flex align-items-center justify-content-center">
                  <i class="an an-star"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i><i class="an an-star-o"></i>
                  <span class="caption hidden ms-2">10 reviews</span>
               </div>
               <ul class="image-swatches swatches">
                  <li class="radius green medium" style="background-image:url(assets/images/products/swatches/top-green-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Green</span></li>
                  <li class="radius peach medium" style="background-image:url(assets/images/products/swatches/top-peach-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">Peach</span></li>
                  <li class="radius white medium" style="background-image:url(assets/images/products/swatches/top-white-1.jpg);"><span class="swacth-btn"></span><span class="tooltip-label">White</span></li>
               </ul>
               <div class="button-set d-none d-md-block">
                  <ul>
                     <li><a class="btn-icon btn rounded-2 cartIcon pro-addtocart-popup" href="#pro-addtocart-popup"><i class="icon an an-cart-l"></i> <span class="tooltip-label top">Add to Cart</span></a></li>
                     <li><a class="btn-icon rounded-2 quick-view-popup quick-view" href="javascript:void(0)" data-toggle="modal" data-target="#content_quickview"><i class="icon an an-search-l"></i> <span class="tooltip-label top">Quick View</span></a></li>
                     <li><a class="btn-icon rounded-2 wishlist add-to-wishlist" href="my-wishlist.html"><i class="icon an an-heart-l"></i> <span class="tooltip-label top">Add To Wishlist</span></a></li>
                     <li><a class="btn-icon rounded-2 compare add-to-compare" href="compare-style2.html"><i class="icon an an-sync-ar"></i> <span class="tooltip-label top">Add to Compare</span></a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>