Product
Display list of product
Product 01
<div style="max-width: 360px;">
<div class="card border-0 product px-3">
<div class="position-relative">
<img src="../../images/product-01.jpg" alt="Product 01" class="card-img">
<div class="position-absolute pos-fixed-top-right d-inline-flex p-4 flex-column z-index-10">
<div class="d-flex align-items-center">
<span class="badge badge-purple rounded-pill">New</span>
<span class="d-inline-block ml-auto text-primary"><i class="fas fa-star"></i></span>
</div>
<div class="w-100 content-change-horizontal d-flex justify-content-center mt-auto">
<a href="shopping-cart.html" data-toggle="tooltip" data-placement="top" title="Add to cart"
class="add-to-cart d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mr-2">
<i class="fal fa-shopping-bag"></i>
</a>
<a href="compare.html" data-toggle="tooltip" data-placement="top" title="Compare"
class="add-to-compare d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mr-2">
<i class="fal fa-exchange"></i>
</a>
<a href="#" data-toggle="tooltip" data-placement="top" title="Quick view"
class="preview d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mr-2">
<span data-toggle="modal" data-target="#product-quick-view-01">
<i class="fal fa-eye"></i>
</span>
</a>
</div>
</div>
</div>
<div class="card-body pt-3 px-0 pb-0">
<h3 class="card-title fs-16 font-weight-500 mb-1 lh-14375"><a href="product-detail-01.html">Hoodie with pocket</a></h3>
<p class="text-primary mb-2 card-title lh-14375"> $79.00</p>
<ul class="list-inline mb-0 shop-swatch-color d-flex align-items-center">
<li class="list-inline-item selected">
<a href="#" class="d-block swatches-item" data-var="green-revitalizing"
style="background-color: #EACCBD;"> </a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="pink"
style="background-color: #000;"></a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="yellow"
style="background-color: #C9E1E5;"> </a>
</li>
</ul>
</div>
</div>
<div class="modal fade quick-view" id="product-quick-view-01" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content p-0">
<div class="modal-body p-0">
<button type="button"
class="close fs-32 position-absolute pos-fixed-top-right pr-3 pt-2 z-index-10"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="fs-20"><i class="fal fa-times"></i></span>
</button>
<div class="row no-gutters">
<div class="col-sm-6">
<div style="background-image: url('../../images/product-01.jpg');"
class="h-100 bg-img-cover-center ratio ratio-1-1"></div>
</div>
<div class="col-sm-6">
<div class="p-3 py-lg-8 pl-lg-8 pr-lg-7">
<a href="../../shop-page-01.html" class="text-muted fs-11 font-weight-500 letter-spacing-05px text-uppercase mb-2 d-block">
Sweaters</a>
<div class="d-flex align-items-center">
<h2 class="fs-30 mb-1">Hoodie with pocket</h2>
</div>
<p class="mb-6 fs-20 text-primary lh-14">
$79.00
</p>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline d-flex justify-content-sm-end justify-content-center mb-0 rating-result">
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
</ul>
<p class="text-primary mb-0 fs-14 lh-1 overflow-hidden pl-3">
<span class="pr-2">5.0</span><span class="mr-2 border-right border-light-dark"></span><a href="#">See 3
Reviews</a>
</p>
</div>
<p class="mt-2 mb-6">Posuere in netus a eu varius adipiscing suspendisse
elementum vitae
tempor
suspendisse ullamcorper aenean taciti morbi potenti.</p>
<form>
<div class="form-group shop-swatch-color shop-swatch-color-02 mb-6">
<label class="mb-2"><span class="font-weight-500 text-primary mr-2">Color:</span>
<span
class="var text-capitalize"></span></label>
<ul class="list-inline d-flex justify-content-start mb-0">
<li class="list-inline-item selected">
<a href="#" class="d-block swatches-item" data-var="green-revitalizing"
style="background-color: #EACCBD;"> </a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="pink"
style="background-color: #000;"></a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="yellow"
style="background-color: #C9E1E5;"> </a>
</ul>
<input type="hidden" name="swatches-color" class="swatches-select"
value="min">
</div>
<div class="form-group shop-swatch swatch-size mb-7">
<label class="mb-2"><span
class="font-weight-500 text-primary mr-2">Select a Size:</span>
<span
class="var text-uppercase">S</span></label>
<ul class="list-inline d-flex">
<li class="list-inline-item mr-2 selected">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="xs"
>XS</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="s"
>S</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="M"
>M</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="L"
>L</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XL"
>XL</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XXL"
>XXL</a>
</li>
</ul>
<input type="hidden" name="swatches-size" class="swatches-select"
value="xs">
</div>
<div class="row align-items-end no-gutters mx-n2">
<div class="col-sm-3 form-group px-2 mb-6 mb-sm-0">
<label class="text-primary fs-16 font-weight-bold mb-3">Quantity: </label>
<div class="input-group position-relative w-100">
<a href="#"
class="down position-absolute pos-fixed-left-center pl-2 z-index-2"><i
class="far fa-minus"></i></a>
<input name="number" type="number"
class="form-control w-100 px-6 text-center input-quality bg-transparent text-primary"
value="1"
required>
<a href="#"
class="up position-absolute pos-fixed-right-center pr-2 z-index-2"><i
class="far fa-plus"></i>
</a>
</div>
</div>
<div class="col-sm-9 mb-6 mb-sm-0 px-2">
<button type="submit"
class="btn btn-primary btn-block text-capitalize">add to
cart
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Product 02
<div style="max-width: 360px;">
<div class="card border-0 product px-3">
<div class="position-relative">
<img src="../../images/product-01.jpg" alt="Product 01" class="card-img">
<div class="position-absolute pos-fixed-top-right d-inline-flex p-4 flex-column z-index-10">
<div class="content-change-vertical d-flex flex-column ml-auto">
<a href="wishlist.html" data-toggle="tooltip" data-placement="left" title="Add to wish list"
class="add-to-wishlist d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mb-2">
<i class="fas fa-star"></i>
</a>
<a href="compare.html" data-toggle="tooltip" data-placement="left" title="Compare"
class="add-to-compare d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mb-2">
<i class="fal fa-exchange"></i>
</a>
<a href="#" data-toggle="tooltip" data-placement="left"
title="Quick view"
class="preview d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle">
<span data-toggle="modal" data-target="#product-quick-view-02">
<i class="fal fa-eye"></i>
</span>
</a>
</div>
</div><div class="position-absolute pos-fixed-bottom pb-4 px-4 w-100">
<a href="#" class="btn btn-white btn-block">+ Quick Add</a>
</div>
</div>
<div class="card-body pt-4 px-0 pb-0">
<p class="text-muted fs-12 font-weight-500 text-uppercase mb-1 card-title lh-14 mb-2">Accessories</p>
<h3 class="card-title fs-16 font-weight-500 mb-1 lh-14375"><a href="product-detail-01.html">Embroidered Cotton Blouse</a></h3>
<p class="text-primary mb-0 card-title lh-14375"> $79.00</p>
</div>
</div>
<div class="modal fade quick-view" id="product-quick-view-02" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content p-0">
<div class="modal-body p-0">
<button type="button"
class="close fs-32 position-absolute pos-fixed-top-right pr-3 pt-2 z-index-10"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="fs-20"><i class="fal fa-times"></i></span>
</button>
<div class="row no-gutters">
<div class="col-sm-6">
<div style="background-image: url('../../images/product-01.jpg');"
class="h-100 bg-img-cover-center ratio ratio-1-1"></div>
</div>
<div class="col-sm-6">
<div class="p-3 py-lg-8 pl-lg-8 pr-lg-7">
<a href="../../shop-page-01.html" class="text-muted fs-11 font-weight-500 letter-spacing-05px text-uppercase mb-2 d-block">
Sweaters</a>
<div class="d-flex align-items-center">
<h2 class="fs-30 mb-1">Hoodie with pocket</h2>
</div>
<p class="mb-6 fs-20 text-primary lh-14">
$79.00
</p>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline d-flex justify-content-sm-end justify-content-center mb-0 rating-result">
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
</ul>
<p class="text-primary mb-0 fs-14 lh-1 overflow-hidden pl-3">
<span class="pr-2">5.0</span><span class="mr-2 border-right border-light-dark"></span><a href="#">See 3
Reviews</a>
</p>
</div>
<p class="mt-2 mb-6">Posuere in netus a eu varius adipiscing suspendisse
elementum vitae
tempor
suspendisse ullamcorper aenean taciti morbi potenti.</p>
<form>
<div class="form-group shop-swatch-color shop-swatch-color-02 mb-6">
<label class="mb-2"><span class="font-weight-500 text-primary mr-2">Color:</span>
<span
class="var text-capitalize"></span></label>
<ul class="list-inline d-flex justify-content-start mb-0">
<li class="list-inline-item selected">
<a href="#" class="d-block swatches-item" data-var="green-revitalizing"
style="background-color: #EACCBD;"> </a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="pink"
style="background-color: #000;"></a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="yellow"
style="background-color: #C9E1E5;"> </a>
</ul>
<input type="hidden" name="swatches-color" class="swatches-select"
value="min">
</div>
<div class="form-group shop-swatch swatch-size mb-7">
<label class="mb-2"><span
class="font-weight-500 text-primary mr-2">Select a Size:</span>
<span
class="var text-uppercase">S</span></label>
<ul class="list-inline d-flex">
<li class="list-inline-item mr-2 selected">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="xs"
>XS</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="s"
>S</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="M"
>M</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="L"
>L</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XL"
>XL</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XXL"
>XXL</a>
</li>
</ul>
<input type="hidden" name="swatches-size" class="swatches-select"
value="xs">
</div>
<div class="row align-items-end no-gutters mx-n2">
<div class="col-sm-3 form-group px-2 mb-6 mb-sm-0">
<label class="text-primary fs-16 font-weight-bold mb-3">Quantity: </label>
<div class="input-group position-relative w-100">
<a href="#"
class="down position-absolute pos-fixed-left-center pl-2 z-index-2"><i
class="far fa-minus"></i></a>
<input name="number" type="number"
class="form-control w-100 px-6 text-center input-quality bg-transparent text-primary"
value="1"
required>
<a href="#"
class="up position-absolute pos-fixed-right-center pr-2 z-index-2"><i
class="far fa-plus"></i>
</a>
</div>
</div>
<div class="col-sm-9 mb-6 mb-sm-0 px-2">
<button type="submit"
class="btn btn-primary btn-block text-capitalize">add to
cart
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Product 03
<div style="max-width: 360px;">
<div class="card border-0 product px-3">
<div class="position-relative">
<img src="../../images/product-01.jpg" alt="Product 01" class="card-img">
<div class="card-img-overlay d-flex p-4">
<div><span class="badge badge-purple rounded-pill">New</span></div>
<div class="content-change-vertical d-flex flex-column ml-auto">
<a href="shopping-cart.html" data-toggle="tooltip" data-placement="left" title="Add to cart"
class="add-to-cart d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mb-2">
<i class="fal fa-shopping-basket"></i>
</a>
<a href="compare.html" data-toggle="tooltip" data-placement="left" title="Compare"
class="add-to-compare d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mb-2">
<i class="fal fa-exchange"></i>
</a>
<a href="#" data-toggle="tooltip" data-placement="left"
title="Quick view"
class="preview d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mr-2">
<span data-toggle="modal" data-target="#product-quick-view-03">
<i class="fal fa-eye"></i>
</span>
</a>
</div>
</div>
</div>
<div class="card-body pt-3 px-0 d-flex pb-0">
<div class="mr-auto">
<h3 class="card-title fs-16 font-weight-500 mb-1 lh-14375"><a href="product-detail-01.html">Hoodie with pocket</a></h3>
<p class="text-primary mb-3 card-title lh-14375"> $79.00</p>
<ul class="list-inline mb-0 shop-swatch-color d-flex align-items-center">
<li class="list-inline-item selected">
<a href="#" class="d-block swatches-item" data-var="green-revitalizing"
style="background-color: #EACCBD;"> </a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="pink"
style="background-color: #000;"></a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="yellow"
style="background-color: #C9E1E5;"> </a>
</li>
</ul>
</div>
<a href="wishlist.html" data-toggle="tooltip" data-placement="left" title="Add to wish list"
class="add-to-wishlist d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle border">
<i class="fal fa-star"></i>
</a>
</div>
</div>
<div class="modal fade quick-view" id="product-quick-view-03" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content p-0">
<div class="modal-body p-0">
<button type="button"
class="close fs-32 position-absolute pos-fixed-top-right pr-3 pt-2 z-index-10"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="fs-20"><i class="fal fa-times"></i></span>
</button>
<div class="row no-gutters">
<div class="col-sm-6">
<div style="background-image: url('../../images/product-01.jpg');"
class="h-100 bg-img-cover-center ratio ratio-1-1"></div>
</div>
<div class="col-sm-6">
<div class="p-3 py-lg-8 pl-lg-8 pr-lg-7">
<a href="../../shop-page-01.html" class="text-muted fs-11 font-weight-500 letter-spacing-05px text-uppercase mb-2 d-block">
Sweaters</a>
<div class="d-flex align-items-center">
<h2 class="fs-30 mb-1">Hoodie with pocket</h2>
</div>
<p class="mb-6 fs-20 text-primary lh-14">
$79.00
</p>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline d-flex justify-content-sm-end justify-content-center mb-0 rating-result">
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
</ul>
<p class="text-primary mb-0 fs-14 lh-1 overflow-hidden pl-3">
<span class="pr-2">5.0</span><span class="mr-2 border-right border-light-dark"></span><a href="#">See 3
Reviews</a>
</p>
</div>
<p class="mt-2 mb-6">Posuere in netus a eu varius adipiscing suspendisse
elementum vitae
tempor
suspendisse ullamcorper aenean taciti morbi potenti.</p>
<form>
<div class="form-group shop-swatch-color shop-swatch-color-02 mb-6">
<label class="mb-2"><span class="font-weight-500 text-primary mr-2">Color:</span>
<span
class="var text-capitalize"></span></label>
<ul class="list-inline d-flex justify-content-start mb-0">
<li class="list-inline-item selected">
<a href="#" class="d-block swatches-item" data-var="green-revitalizing"
style="background-color: #EACCBD;"> </a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="pink"
style="background-color: #000;"></a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="yellow"
style="background-color: #C9E1E5;"> </a>
</ul>
<input type="hidden" name="swatches-color" class="swatches-select"
value="min">
</div>
<div class="form-group shop-swatch swatch-size mb-7">
<label class="mb-2"><span
class="font-weight-500 text-primary mr-2">Select a Size:</span>
<span
class="var text-uppercase">S</span></label>
<ul class="list-inline d-flex">
<li class="list-inline-item mr-2 selected">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="xs"
>XS</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="s"
>S</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="M"
>M</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="L"
>L</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XL"
>XL</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XXL"
>XXL</a>
</li>
</ul>
<input type="hidden" name="swatches-size" class="swatches-select"
value="xs">
</div>
<div class="row align-items-end no-gutters mx-n2">
<div class="col-sm-3 form-group px-2 mb-6 mb-sm-0">
<label class="text-primary fs-16 font-weight-bold mb-3">Quantity: </label>
<div class="input-group position-relative w-100">
<a href="#"
class="down position-absolute pos-fixed-left-center pl-2 z-index-2"><i
class="far fa-minus"></i></a>
<input name="number" type="number"
class="form-control w-100 px-6 text-center input-quality bg-transparent text-primary"
value="1"
required>
<a href="#"
class="up position-absolute pos-fixed-right-center pr-2 z-index-2"><i
class="far fa-plus"></i>
</a>
</div>
</div>
<div class="col-sm-9 mb-6 mb-sm-0 px-2">
<button type="submit"
class="btn btn-primary btn-block text-capitalize">add to
cart
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Product 04
<div style="max-width: 360px;">
<div class="card border-0 product px-3">
<div class="position-relative">
<img src="../../images/product-01.jpg" alt="Product 01" class="card-img">
<div class="position-absolute pos-fixed-top-right d-inline-flex p-4 flex-column z-index-10">
<div class="content-change-vertical d-flex flex-column ml-auto">
<a href="wishlist.html" data-toggle="tooltip" data-placement="left" title="Add to wish list"
class="add-to-wishlist d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mb-2">
<i class="fas fa-star"></i>
</a>
<a href="compare.html" data-toggle="tooltip" data-placement="left" title="Compare"
class="add-to-compare d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mb-2">
<i class="fal fa-exchange"></i>
</a>
<a href="#" data-toggle="tooltip" data-placement="left"
title="Quick view"
class="preview d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mr-2">
<span data-toggle="modal" data-target="#product-quick-view-04">
<i class="fal fa-eye"></i>
</span>
</a>
</div>
</div><div class="position-absolute pos-fixed-bottom pb-4 px-4 w-100">
<a href="#" class="btn btn-white btn-block">+ Quick Add</a>
</div>
</div>
<div class="card-body pt-4 px-0 pb-0">
<p class="text-muted fs-12 font-weight-500 text-uppercase mb-1 card-title lh-14 mb-2">Accessories</p>
<h3 class="card-title fs-16 font-weight-500 mb-1 lh-14375"><a href="product-detail-01.html">Embroidered Cotton Blouse</a></h3>
<p class="text-primary mb-2 card-title lh-14375"> $79.00</p>
<ul class="list-inline mb-0 shop-swatch-color d-flex align-items-center">
<li class="list-inline-item selected">
<a href="#" class="d-block swatches-item" data-var="green-revitalizing"
style="background-color: #EACCBD;"> </a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="pink"
style="background-color: #000;"></a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="yellow"
style="background-color: #C9E1E5;"> </a>
</li>
</ul>
</div>
</div>
<div class="modal fade quick-view" id="product-quick-view-04" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content p-0">
<div class="modal-body p-0">
<button type="button"
class="close fs-32 position-absolute pos-fixed-top-right pr-3 pt-2 z-index-10"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="fs-20"><i class="fal fa-times"></i></span>
</button>
<div class="row no-gutters">
<div class="col-sm-6">
<div style="background-image: url('../../images/product-01.jpg');"
class="h-100 bg-img-cover-center ratio ratio-1-1"></div>
</div>
<div class="col-sm-6">
<div class="p-3 py-lg-8 pl-lg-8 pr-lg-7">
<a href="../../shop-page-01.html" class="text-muted fs-11 font-weight-500 letter-spacing-05px text-uppercase mb-2 d-block">
Sweaters</a>
<div class="d-flex align-items-center">
<h2 class="fs-30 mb-1">Embroidered Cotton Blouse</h2>
</div>
<p class="mb-6 fs-20 text-primary lh-14">
$79.00
</p>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline d-flex justify-content-sm-end justify-content-center mb-0 rating-result">
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
</ul>
<p class="text-primary mb-0 fs-14 lh-1 overflow-hidden pl-3">
<span class="pr-2">5.0</span><span class="mr-2 border-right border-light-dark"></span><a href="#">See 3
Reviews</a>
</p>
</div>
<p class="mt-2 mb-6">Posuere in netus a eu varius adipiscing suspendisse
elementum vitae
tempor
suspendisse ullamcorper aenean taciti morbi potenti.</p>
<form>
<div class="form-group shop-swatch-color shop-swatch-color-02 mb-6">
<label class="mb-2"><span class="font-weight-500 text-primary mr-2">Color:</span>
<span
class="var text-capitalize"></span></label>
<ul class="list-inline d-flex justify-content-start mb-0">
<li class="list-inline-item selected">
<a href="#" class="d-block swatches-item" data-var="green-revitalizing"
style="background-color: #EACCBD;"> </a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="pink"
style="background-color: #000;"></a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="yellow"
style="background-color: #C9E1E5;"> </a>
</ul>
<input type="hidden" name="swatches-color" class="swatches-select"
value="min">
</div>
<div class="form-group shop-swatch swatch-size mb-7">
<label class="mb-2"><span
class="font-weight-500 text-primary mr-2">Select a Size:</span>
<span
class="var text-uppercase">S</span></label>
<ul class="list-inline d-flex">
<li class="list-inline-item mr-2 selected">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="xs"
>XS</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="s"
>S</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="M"
>M</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="L"
>L</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XL"
>XL</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XXL"
>XXL</a>
</li>
</ul>
<input type="hidden" name="swatches-size" class="swatches-select"
value="xs">
</div>
<div class="row align-items-end no-gutters mx-n2">
<div class="col-sm-3 form-group px-2 mb-6 mb-sm-0">
<label class="text-primary fs-16 font-weight-bold mb-3">Quantity: </label>
<div class="input-group position-relative w-100">
<a href="#"
class="down position-absolute pos-fixed-left-center pl-2 z-index-2"><i
class="far fa-minus"></i></a>
<input name="number" type="number"
class="form-control w-100 px-6 text-center input-quality bg-transparent text-primary"
value="1"
required>
<a href="#"
class="up position-absolute pos-fixed-right-center pr-2 z-index-2"><i
class="far fa-plus"></i>
</a>
</div>
</div>
<div class="col-sm-9 mb-6 mb-sm-0 px-2">
<button type="submit"
class="btn btn-primary btn-block text-capitalize">add to
cart
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Product 05
<div style="max-width: 360px;">
<div class="card border-0 product px-3">
<div class="position-relative">
<img src="../../images/product-02.jpg" alt="Product 01" class="card-img">
<div class="card-img-overlay p-0 d-flex flex-column">
<div class="d-flex p-3">
<div>
<div class="flash-sale"><span class="d-inline-block mr-1"><svg class="icon icon-flash"><use xlink:href="#icon-flash"></use></svg></span>-30%</div>
</div>
<div class="content-change-vertical d-flex flex-column ml-auto">
<a href="shopping-cart.html" data-toggle="tooltip" data-placement="left" title="Add to cart"
class="add-to-cart d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mb-2">
<i class="fal fa-shopping-bag"></i>
</a>
<a href="compare.html" data-toggle="tooltip" data-placement="left" title="Compare"
class="add-to-compare d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mb-2">
<i class="fal fa-exchange"></i>
</a>
<a href="#" data-toggle="tooltip" data-placement="left"
title="Quick view"
class="preview d-flex align-items-center justify-content-center text-primary bg-white hover-white bg-hover-primary w-45px h-45px rounded-circle mr-2">
<span data-toggle="modal" data-target="#product-quick-view-05">
<i class="fal fa-eye"></i>
</span>
</a>
</div>
</div>
<div class="px-2 py-1 bg-white mt-auto progress-wrapper">
<div class="d-flex">
<div class="fs-13">Sold:<strong class="text-primary">50</strong></div>
<div class="ml-auto text-right fs-13">Available:<strong class="text-primary">10</strong></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="card-body pt-3 px-0 pb-0">
<h3 class="card-title fs-16 font-weight-500 mb-1 lh-14375"><a href="product-detail-01.html">Hoodie with pocket</a></h3>
<p class="text-primary mb-2 card-title lh-14375"> $79.00</p>
<ul class="list-inline mb-0 shop-swatch-color d-flex align-items-center">
<li class="list-inline-item selected">
<a href="#" class="d-block swatches-item" data-var="green-revitalizing"
style="background-color: #EACCBD;"> </a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="pink"
style="background-color: #000;"></a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="yellow"
style="background-color: #C9E1E5;"> </a>
</li>
</ul>
</div>
</div>
<div class="modal fade quick-view" id="product-quick-view-05" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content p-0">
<div class="modal-body p-0">
<button type="button"
class="close fs-32 position-absolute pos-fixed-top-right pr-3 pt-2 z-index-10"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="fs-20"><i class="fal fa-times"></i></span>
</button>
<div class="row no-gutters">
<div class="col-sm-6">
<div style="background-image: url('../../images/product-02.jpg');"
class="h-100 bg-img-cover-center ratio ratio-1-1"></div>
</div>
<div class="col-sm-6">
<div class="p-3 py-lg-8 pl-lg-8 pr-lg-7">
<a href="../../shop-page-01.html" class="text-muted fs-11 font-weight-500 letter-spacing-05px text-uppercase mb-2 d-block">
Sweaters</a>
<div class="d-flex align-items-center">
<h2 class="fs-30 mb-1">Hoodie with pocket</h2>
</div>
<p class="mb-6 fs-20 text-primary lh-14">
$79.00
</p>
<div class="d-flex align-items-center flex-wrap">
<ul class="list-inline d-flex justify-content-sm-end justify-content-center mb-0 rating-result">
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
<li class="list-inline-item">
<span class="text-primary fs-12 lh-2"><i
class="fas fa-star"></i></span>
</li>
</ul>
<p class="text-primary mb-0 fs-14 lh-1 overflow-hidden pl-3">
<span class="pr-2">5.0</span><span class="mr-2 border-right border-light-dark"></span><a href="#">See 3
Reviews</a>
</p>
</div>
<p class="mt-2 mb-6">Posuere in netus a eu varius adipiscing suspendisse
elementum vitae
tempor
suspendisse ullamcorper aenean taciti morbi potenti.</p>
<form>
<div class="form-group shop-swatch-color shop-swatch-color-02 mb-6">
<label class="mb-2"><span class="font-weight-500 text-primary mr-2">Color:</span>
<span
class="var text-capitalize"></span></label>
<ul class="list-inline d-flex justify-content-start mb-0">
<li class="list-inline-item selected">
<a href="#" class="d-block swatches-item" data-var="green-revitalizing"
style="background-color: #EACCBD;"> </a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="pink"
style="background-color: #000;"></a>
</li>
<li class="list-inline-item">
<a href="#" class="d-block swatches-item" data-var="yellow"
style="background-color: #C9E1E5;"> </a>
</ul>
<input type="hidden" name="swatches-color" class="swatches-select"
value="min">
</div>
<div class="form-group shop-swatch swatch-size mb-7">
<label class="mb-2"><span
class="font-weight-500 text-primary mr-2">Select a Size:</span>
<span
class="var text-uppercase">S</span></label>
<ul class="list-inline d-flex">
<li class="list-inline-item mr-2 selected">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="xs"
>XS</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="s"
>S</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="M"
>M</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="L"
>L</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XL"
>XL</a>
</li>
<li class="list-inline-item mr-2">
<a href="#"
class="fs-12 swatches-item w-40px h-40px d-flex align-items-center justify-content-center rounded-circle border text-primary"
data-var="XXL"
>XXL</a>
</li>
</ul>
<input type="hidden" name="swatches-size" class="swatches-select"
value="xs">
</div>
<div class="row align-items-end no-gutters mx-n2">
<div class="col-sm-3 form-group px-2 mb-6 mb-sm-0">
<label class="text-primary fs-16 font-weight-bold mb-3">Quantity: </label>
<div class="input-group position-relative w-100">
<a href="#"
class="down position-absolute pos-fixed-left-center pl-2 z-index-2"><i
class="far fa-minus"></i></a>
<input name="number" type="number"
class="form-control w-100 px-6 text-center input-quality bg-transparent text-primary"
value="1"
required>
<a href="#"
class="up position-absolute pos-fixed-right-center pr-2 z-index-2"><i
class="far fa-plus"></i>
</a>
</div>
</div>
<div class="col-sm-9 mb-6 mb-sm-0 px-2">
<button type="submit"
class="btn btn-primary btn-block text-capitalize">add to
cart
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>