Card
Bootstrap 5 ecommerce artwork card
Featured Category
<a href="../../pages/gallery-grid.html"
class="text-decoration-none text-inherit">
<div class="card card-artwork" style="max-width: 390px;">
<div class="card-body text-center py-8">
<img src="../../assets/images/rm-artist/artwork-08.jpg"
alt="RM Artist personalized art" class="mb-3" />
<div class="text-truncate">Keychains & Keepsakes
</div>
</div>
</div>
</a>Card Thumbnail
<div class="card card-artwork" style="max-width: 390px;">
<div class="card-body">
<div class="text-center position-relative">
<div class="position-absolute top-0 start-0">
<span class="badge bg-danger">Sale</span>
</div>
<a href="#!">
<img src="../../assets/images/rm-artist/artwork-01.jpg"
alt="RM Artist personalized art"
class="mb-3 img-fluid" />
</a>
<div class="card-artwork-action">
<a href="#!" class="btn-action"
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i>
</a>
<a href="#!" class="btn-action"
data-bs-toggle="tooltip" data-bs-html="true"
title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action"
data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i
class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1">
<a href="#!"
class="text-decoration-none text-muted"><small>Keepsake
& Small Gifts</small></a>
</div>
<h2 class="fs-6">
<a href="../../pages/gallery-single.html"
class="text-inherit text-decoration-none">Haldiram's
Sev Bhujia</a>
</h2>
<div>
<small class="text-warning">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</small>
<span class="text-muted small">4.5(149)</span>
</div>
<div
class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="text-dark">Price pending</span>
<span
class="text-decoration-line-through text-muted">Price pending</span>
</div>
<div>
<a href="#!" class="btn btn-primary btn-sm">
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add
</a>
</div>
</div>
</div>
</div>Card Thumbnail #2
<div class="card card-artwork-v2 h-100" style="max-width: 390px;">
<div class="card-body position-relative">
<!-- badge -->
<div class="text-center position-relative">
<div class="position-absolute top-0 start-0">
<span class="badge bg-danger">Sale</span>
</div>
<!-- img -->
<a href="#!"><img
src="../../assets/images/rm-artist/artwork-01.jpg"
alt="RM Artist personalized art"
class="mb-3 img-fluid" /></a>
<!-- action btn -->
<div class="artwork-action-btn">
<a href="#!" class="btn-action mb-1"
data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i
class="bi bi-eye"></i></a>
<a href="#!" class="btn-action mb-1"
data-bs-toggle="tooltip" data-bs-html="true"
title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action"
data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i
class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<!-- title -->
<h2 class="fs-6"><a href="#!"
class="text-inherit text-decoration-none">Haldiram's
Sev Bhujia</a></h2>
<div>
<!-- rating -->
<small class="text-warning">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</small>
<span class="text-muted small">4.5(149)</span>
</div>
<!-- price -->
<div
class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="text-danger">Price pending</span>
<span
class="text-decoration-line-through text-muted">Price pending</span>
</div>
<div><span class="text-uppercase small text-primary">In
Stock</span></div>
</div>
<!-- btn -->
<div class="artwork-fade-block">
<div class="d-grid mt-4">
<a href="#" class="btn btn-primary rounded-pill">Add
to Cart</a>
</div>
</div>
</div>
<!-- hidden class for hover -->
<div class="artwork-content-fade border-info"
style="margin-bottom: -60px"></div>
</div>Card Thumbnail #3
<div class="card card-artwork" style="max-width: 390px;">
<div class="card-body">
<div class="text-center position-relative">
<a href="../../pages/gallery-single.html">
<img src="../../assets/images/rm-artist/artwork-27.jpg"
alt="RM Artist personalized art"
class="mb-3 img-fluid" />
</a>
<div class="card-artwork-action">
<a href="#!" class="btn-action"
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<i class="bi bi-eye"
data-bs-toggle="tooltip"
data-bs-html="true"
title="Quick View"></i>
</a>
<a href="#!" class="btn-action"
data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist"><i
class="bi bi-heart"></i></a>
<a href="#!" class="btn-action"
data-bs-toggle="tooltip"
data-bs-html="true" title="Compare"><i
class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1">
<a href="#!"
class="text-decoration-none text-muted"><small>Keepsakes
& Bridal Keepsakes</small></a>
</div>
<h2 class="fs-6"><a
href="../../pages/gallery-single.html"
class="text-inherit text-decoration-none">Golden
Pineapple</a></h2>
<div
class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="text-dark">Price pending</span>
<span
class="text-decoration-line-through text-muted">Price pending</span>
</div>
<div>
<small class="text-warning">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</small>
<span><small>4.5</small></span>
</div>
</div>
<div class="d-grid mt-2">
<a href="#!" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16"
viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19">
</line>
<line x1="5" y1="12" x2="19" y2="12">
</line>
</svg>
Add to cart
</a>
</div>
<div
class="d-flex justify-content-start text-center mt-3">
<div class="deals-countdown w-100"
data-countdown="2022/11/11 00:00:00"></div>
</div>
</div>
</div>Card Thumbnail with Progress bar
<div class="card card-artwork-v2 h-100" style="max-width: 390px;">
<div class="card-body position-relative text-center">
<div class="text-center position-relative">
<div class="position-absolute top-0">
<span class="badge bg-info">Details pending</span>
</div>
<!-- img -->
<a href="#!"><img
src="../../assets/images/rm-artist/artwork-03.jpg"
alt="RM Artist personalized art"
class="mb-3 img-fluid" /></a>
<!-- action btn -->
<div class="artwork-action-btn">
<a href="#!" class="btn-action mb-1"
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i>
</a>
<a href="#!" class="btn-action mb-1"
data-bs-toggle="tooltip" data-bs-html="true"
title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action"
data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i
class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="mb-3"><span class="text-dark">Price pending</span>
</div>
<!-- title -->
<h2 class="fs-6"><a href="#!"
class="text-inherit text-decoration-none">Britannia
Personalized Mug Hand Fans</a></h2>
<div>
<!-- rating -->
<small class="text-warning">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</small>
<span class="text-muted small">4.4(3,149)</span>
</div>
<div class="mt-3"><span
class="text-uppercase small text-primary">In
Stock</span></div>
<div class="mt-4">
<div class="progress mt-6" style="height: 8px">
<div class="progress-bar bg-gray-400"
role="progressbar" style="width: Details pending"
aria-valuenow="88" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="my-3">
<small>
the available artworks :
<span class="text-dark fw-bold">12</span>
</small>
</div>
</div>
<!-- btn -->
<div class="artwork-fade-block">
<div class="d-grid mt-4">
<a href="#" class="btn btn-primary rounded-pill">Add
to Cart</a>
</div>
</div>
</div>
<div class="artwork-content-fade border-info"
style="margin-bottom: -60px"></div>
</div>Card with List
Sale
<div class="card card-artwork" style="max-width: 390px;">
<!-- card body -->
<div class="card-body">
<div class="row align-items-center">
<!-- col -->
<div class="col-md-4 col-12">
<div class="text-center position-relative">
<div class="position-absolute top-0">
<!-- badge -->
<span class="badge bg-danger">Sale</span>
</div>
<a href="gallery-single.html">
<!-- img -->
<img src="../../assets/images/rm-artist/artwork-01.jpg"
alt="RM Artist personalized art"
class="mb-3 img-fluid" />
</a>
</div>
</div>
<div class="col-md-8 col-12 flex-grow-1">
<!-- heading -->
<div class="text-small mb-1">
<a href="#!"
class="text-decoration-none text-muted"><small>Keepsake
& Small Gifts</small></a>
</div>
<h2 class="fs-6"><a href="gallery-single.html"
class="text-inherit text-decoration-none">Haldiram's
Sev Bhujia</a></h2>
<div>
<!-- rating -->
<small class="text-warning">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</small>
<span class="text-muted small">4.5(149)</span>
</div>
<div class="mt-6">
<!-- price -->
<div>
<span class="text-dark">Price pending</span>
<span
class="text-decoration-line-through text-muted">Price pending</span>
</div>
<!-- btn -->
<div class="mt-3">
<a href="#!"
class="btn btn-icon btn-sm btn-outline-gray-400 text-muted"
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<i class="bi bi-eye"
data-bs-toggle="tooltip"
data-bs-html="true"
title="Quick View"></i>
</a>
<a href="gallery-wishlist.html"
class="btn btn-icon btn-sm btn-outline-gray-400 text-muted"
data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist">
<i class="bi bi-heart"></i>
</a>
<a href="#!"
class="btn btn-icon btn-sm btn-outline-gray-400 text-muted"
data-bs-toggle="tooltip"
data-bs-html="true" title="Compare">
<i class="bi bi-arrow-left-right"></i>
</a>
</div>
<!-- btn -->
<div class="mt-2">
<a href="#!" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16"
viewBox="0 0 24 24" fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-shopping-bag me-2">
<path
d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z">
</path>
<line x1="3" y1="6" x2="21" y2="6">
</line>
<path d="M16 10a4 4 0 0 1-8 0">
</path>
</svg>
Add to Cart
</a>
</div>
</div>
</div>
</div>
</div>
</div>Card with Text
<div class="card" style="max-width: 390px;">
<div class="card-body p-6">
<div class="form-check mb-4">
<input class="form-check-input" type="radio"
name="flexRadioDefault" id="homeRadio"
checked />
<label
class="form-check-label text-dark fw-semibold"
for="homeRadio">Home</label>
</div>
<!-- address -->
<p class="mb-6">
Jitu Chauhan
<br />
4450 North Avenue Oakland,
<br />
Nebraska, United States,
<br />
402-776-1106
</p>
<!-- btn -->
<a href="#" class="btn btn-info btn-sm">Default
address</a>
<div class="mt-4">
<a href="#" class="text-inherit">Edit</a>
<a href="#" class="text-danger ms-3"
data-bs-toggle="modal"
data-bs-target="#deleteModal">Delete</a>
</div>
</div>
</div>Card with Text
<div class="card card-artwork mb-4" style="max-width: 390px;">
<div class="card-body text-center py-8">
<!-- img -->
<a href="#" tabindex="-1"><img
src="../../assets/images/rm-artist/artwork-08.jpg"
alt="RM Artist personalized art"
class="mb-3" /></a>
<!-- text -->
</div>
</div>
<div>
<span class="badge bg-danger rounded-pill">-Details pending</span>
<h2 class="mt-3 fs-6"><a href="#" class="text-inherit"
tabindex="-1">Acrylic Name Plaque</a></h2>
<div>
<span class="text-dark fs-5 fw-bold">Price pending</span>
<span
class="text-decoration-line-through text-muted">Price pending</span>
</div>
<div class="text-warning">
<!-- rating -->
<small>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</small>
<span class="text-muted small">4.5</span>
</div>
</div>Card with ID
Gross Sale
Price pending
Earning
Price pending
<div class="card border-0 text-center card-lg" style="max-width: 390px;">
<div class="card-body p-6">
<div>
<!-- img -->
<img src="../../assets/images/logo/rm-artist-logo.jpg"
alt=""
class="rounded-circle icon-shape icon-xxl mb-6">
<!-- content -->
<h2 class="mb-2 h5"><a href="#!"
class="text-inherit">E-Art & Gifts Super
Market</a></h2>
<div class="mb-2">Seller ID: #009</div>
<div>heathercarpenter@dayrep.com</div>
</div>
<!-- meta content -->
<div class="row justify-content-center mt-8">
<div class="col">
<div>Gross Sale</div>
<h5 class="mb-0 mt-1">Price pending</h5>
</div>
<div class="col">
<div>Earning</div>
<h5 class="mb-0 mt-1">Price pending</h5>
</div>
</div>
</div>
</div>Featured Category
RM Artist Collection
Handcrafted
Artworks
Butcher Gallery
- Delivery
- Pickup available
7.5 mi away
In-collection prices
<!-- card -->
<div class="card p-6 card-artwork" style="max-width: 390px;">
<div> <!-- img --><img
src="../../assets/images/logo/rm-artist-logo.jpg"
alt="" class="rounded-circle icon-shape icon-xl">
</div>
<div class="mt-4">
<!-- content -->
<h2 class="mb-1 h5"><a href="#!"
class="text-inherit">RM Artist Collection</a>
</h2>
<div class="small text-muted"><span class="me-2">Handcrafted
</span><span class="me-2">Artworks</span>
<span>Butcher Gallery</span>
</div>
<div class="py-3">
<ul class="list-unstyled mb-0 small">
<li>Delivery
</li>
<li>Pickup available</li>
</ul>
</div>
<div>
<!-- badge -->
<div class="badge text-bg-light border">7.5 mi away
</div>
<!-- badge -->
<div class="badge text-bg-light border">In-collection
prices </div>
</div>
</div>
</div>Collections
E-Art & Gifts Super Market
Handcrafted
Artworks
Butcher Gallery
- Delivery
- Pickup available
7.5 mi away
In-collection prices
<!-- card -->
<div class="card flex-row p-8 card-artwork" style="max-width: 390px;">
<div>
<!-- img -->
<img src="../../assets/images/logo/rm-artist-logo.jpg"
alt="" class="rounded-circle icon-shape icon-xl">
</div>
<!-- content -->
<div class="ms-6">
<h5 class="mb-1"><a href="#!"
class="text-inherit">RM Artist Collection</a>
</h5>
<div class="small text-muted">
<span>Handcrafted</span>
<span class="mx-1"><svg
xmlns="http://www.w3.org/2000/svg" width="4"
height="4" fill="#C1C7C6"
class="bi bi-circle-fill align-middle "
viewBox="0 0 16 16">
<circle cx="8" cy="8" r="8" />
</svg></span>
<span>Artworks</span>
<span class="mx-1"><svg
xmlns="http://www.w3.org/2000/svg" width="4"
height="4" fill="#C1C7C6"
class="bi bi-circle-fill align-middle "
viewBox="0 0 16 16">
<circle cx="8" cy="8" r="8" />
</svg></span>
<span>Butcher Gallery</span>
</div>
<div class="py-3">
<ul class="list-unstyled mb-0 small">
<li>Delivery
</li>
<li>Pickup available</li>
</ul>
</div>
<div>
<!-- badge -->
<div class="badge text-bg-light border">7.5 mi away
</div>
<!-- badge -->
<div class="badge text-bg-light border">In-collection
prices </div>
</div>
</div>
</div>Ready to started
Discover personalized gifts
Duis placerat, urna ut dictum lobortis, erat libero feugiat nulla, ullamcorper fermentum lectus dolor ut tortor.
View the Gallery<!-- card -->
<div class="card bg-light mb-6 border-0" style="max-width: 390px;">
<!-- card body -->
<div class="card-body p-8">
<div class="mb-4">
<!-- img -->
<img src="../../assets/images/rm-artist/artwork-17.jpg"
alt="" />
</div>
<h4>Discover personalized gifts</h4>
<p>Duis placerat, urna ut dictum lobortis, erat libero
feugiat nulla, ullamcorper fermentum lectus dolor ut
tortor.</p>
<!-- btn -->
<a href="#" class="btn btn-dark mt-2">RM Artist
Platform</a>
</div>
</div>Best sell
<div class="card card-artwork" style="max-width: 390px;">
<div class="card-body">
<div class="text-center position-relative">
<a href="./pages/gallery-single.html"><img
src="../../assets/images/rm-artist/artwork-24.jpg"
alt="RM Artist personalized art"
class="mb-3 img-fluid" /></a>
<div class="card-artwork-action">
<a href="#!" class="btn-action"
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<i class="bi bi-eye"
data-bs-toggle="tooltip"
data-bs-html="true"
title="Quick View"></i>
</a>
<a href="#!" class="btn-action"
data-bs-toggle="tooltip" data-bs-html="true"
title="Wishlist"><i
class="bi bi-heart"></i></a>
<a href="#!" class="btn-action"
data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i
class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1">
<a href="#!"
class="text-decoration-none text-muted"><small>Tea,
Coffee & Drinks</small></a>
</div>
<h2 class="fs-6"><a href="./pages/gallery-single.html"
class="text-inherit text-decoration-none">Roast
Ground Coffee</a></h2>
<div
class="d-flex justify-content-between align-items-center mt-3">
<div>
<span class="text-dark">Price pending</span>
<span
class="text-decoration-line-through text-muted">Price pending</span>
</div>
<div>
<small class="text-warning">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</small>
<span><small>4.5</small></span>
</div>
</div>
<div class="d-grid mt-2">
<a href="#!" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add to cart
</a>
</div>
<div
class="d-flex justify-content-start text-center mt-3">
<div class="deals-countdown w-100"
data-countdown="2028/10/10 00:00:00"></div>
</div>
</div>
</div>New Artwork
<div class="card card-artwork mb-4" style="max-width: 390px;">
<div class="card-body text-center py-8">
<!-- img -->
<a href="#"><img
src="../../assets/images/rm-artist/artwork-12.jpg"
alt="RM Artist personalized art"
class="mb-3" /></a>
<!-- text -->
</div>
</div>
<div>
<span class="badge bg-danger rounded-pill">-Details pending</span>
<h2 class="mt-3 fs-6"><a href="#"
class="text-inherit">LED & Acrylic Art</a></h2>
<div>
<span class="text-dark fs-5 fw-bold">Price pending</span>
<span
class="text-decoration-line-through text-muted">Price pending</span>
</div>
<div class="text-warning">
<!-- rating -->
<small>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</small>
<span class="text-muted small">4.5</span>
</div>
</div>Earning
Earnings
Price pending
Monthly revenue<!-- card -->
<div class="card h-100 card-lg" style="max-width: 390px;">
<!-- card body -->
<div class="card-body p-6">
<!-- heading -->
<div
class="d-flex justify-content-between align-items-center mb-6">
<div>
<h4 class="mb-0 fs-5">Earnings</h4>
</div>
<div
class="icon-shape icon-md bg-light-danger text-dark-danger rounded-circle">
<i class="bi bi-currency-dollar fs-5"></i>
</div>
</div>
<!-- project number -->
<div class="lh-1">
<h1 class="mb-2 fw-bold fs-2">Price pending</h1>
<span>Monthly revenue</span>
</div>
</div>
</div>Card with Countdown
4.5
Parle Platina Nutricrunch Digestive Cookies
Price pending
Price pending
Already Sold:
45
Available:
25
Hurry up offer ends soon
<div class="card border border-danger p-6" style="max-width: 768px">
<div class="row">
<div class="col-lg-5 text-center">
<a href="./pages/gallery-single.html"><img src="../../assets/images/rm-artist/artwork-42.jpg" alt="RM Artist personalized art" class="img-fluid" /></a>
</div>
<div class="col-lg-7 text-center text-lg-start">
<div class="mb-3">
<small class="text-warning">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</small>
<span><small>4.5</small></span>
</div>
<h2 class="fs-4"><a href="./pages/gallery-single.html" class="text-inherit text-decoration-none">Parle Platina Nutricrunch Digestive Cookies</a></h2>
<div class="d-flex justify-content-center align-items-center justify-content-lg-between mt-3">
<div>
<span class="text-dark fs-5 fw-bold">Price pending</span>
<span class="text-decoration-line-through text-muted fs-5">Price pending</span>
</div>
</div>
<div class="mt-2">
<a href="javascript:void(0)" class="btn btn-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-plus"
>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add to cart
</a>
</div>
<div class="mt-6 mb-6">
<div class="d-flex justify-content-between mb-2">
<span>
Already Sold:
<span class="text-dark fs-6 fw-bold">45</span>
</span>
<span>
Available:
<span class="text-dark fs-6 fw-bold">25</span>
</span>
</div>
<div class="progress bg-light-danger" role="progressbar" aria-label="Example 1px high" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="height: 5px">
<div class="progress-bar bg-danger" style="width: Details pending"></div>
</div>
</div>
<p class="fw-bold text-dark mb-0">Hurry up offer ends soon</p>
<div class="d-flex justify-content-center justify-content-lg-start text-center mt-1">
<div class="deals-countdown" data-countdown="2024/10/10 00:00:00"></div>
</div>
</div>
</div>
</div>Gallery by Categories
Bridal Accessories
<!-- card -->
<div class="card mb-3 card-lift " style="max-width: 390px;">
<div class="card-body text-center py-6 text-center">
<div class="my-5">
<svg width="56" height="56" fill="#3d4f58"
xmlns="http://www.w3.org/2000/svg">
<path
d="M39.615 1.482c-2.408.689-5.92 3.244-11.615 8.45-2.166 1.98-11.172 10.99-13.38 13.386C8.679 29.765 5.119 34.379 3.338 37.94c-1.308 2.616-1.407 3.949-.369 4.983.266.264.589.48.822.55 2.419.718 6.677-1.78 13.242-7.77 3.539-3.228 13.946-13.993 18.728-19.372 6.081-6.838 8.485-10.74 8.015-13.006-.172-.825-.85-1.597-1.659-1.885-.492-.176-1.82-.154-2.502.042M41.95 3.09c.305.268.33.329.33.823 0 .687-.174 1.258-.693 2.275-1.41 2.762-4.569 6.675-10.641 13.179C19.811 31.295 13.759 37.073 9.241 40.089c-3.039 2.029-5.195 2.564-5.46 1.354-.144-.656.72-2.735 1.964-4.725 1.147-1.835 1.162-1.851 2.853-2.9 3.103-1.926 5.079-2.913 7.362-3.677.967-.324 1.034-.36.671-.364-1.579-.016-4.415.816-6.564 1.926-.58.299-1.094.56-1.142.58-.123.05 1.938-2.486 3.252-4.003 1.047-1.208 1.136-1.285 2.134-1.856 2.704-1.546 6.071-2.998 8.501-3.664.595-.164 1.071-.306 1.058-.317-.013-.011-.524.018-1.137.063-2.117.157-4.114.668-6.119 1.566-.99.443-1.047.458-.83.218.127-.141.893-.956 1.701-1.811 1.603-1.698 1.606-1.699 4.164-3.063 3.621-1.929 6.062-2.922 9.058-3.683l.513-.13-.887.046c-1.256.065-3.035.369-4.323.74-1.132.326-2.913.989-3.609 1.344-.216.11-.411.182-.433.159-.023-.022.916-.962 2.085-2.088l2.127-2.048 1.68-.896c3.259-1.738 4.995-2.521 7.747-3.496l1.68-.594-.84.058c-1.726.121-4.457.823-6.324 1.626-.449.193-.816.341-.816.329 0-.05 2.445-2.216 3.546-3.141 3.918-3.293 6.511-4.835 8.14-4.84.57-.002.657.025.957.288m9.6 8.104c-3.248.878-8.229 4.84-17.159 13.651-10.108 9.974-16.547 17.56-19.17 22.584-.611 1.171-1.088 2.441-1.182 3.148-.137 1.034.376 2.074 1.23 2.492.475.232.572.246 1.417.201 1.455-.077 2.921-.706 5.197-2.232 4.091-2.741 8.783-7.083 17.162-15.882 8.679-9.114 11.932-12.829 14.239-16.259 1.075-1.6 1.613-2.603 1.974-3.682.263-.786.292-.973.256-1.68-.044-.881-.177-1.218-.672-1.714-.752-.751-1.972-.984-3.292-.627m1.879 1.445c1.063.444.789 1.993-.81 4.58-2.201 3.562-7.288 9.321-18.131 20.524-5.979 6.177-11.058 10.673-14.201 12.572-1.739 1.05-3.38 1.654-4.126 1.518-.359-.066-.667-.482-.667-.903-.001-.697.922-2.758 2.034-4.543.791-1.269.895-1.399 1.307-1.638.19-.111.864-.506 1.498-.88 1.963-1.156 4.975-2.407 7.34-3.05.668-.181 1.235-.351 1.26-.377.056-.057-1.169.039-2.146.167-1.751.23-3.687.806-5.625 1.674-.569.254-1.045.452-1.058.439-.041-.041 2.068-2.648 3.34-4.129l1.202-1.4 1.187-.638c2.708-1.456 5.552-2.652 7.814-3.284.974-.273 1.065-.314.7-.318-1.759-.02-4.605.637-6.649 1.535-.668.294-.877.354-.79.23.065-.093.915-1.011 1.888-2.041 1.744-1.844 1.786-1.88 2.797-2.43 3.14-1.707 7.404-3.449 9.707-3.966l.653-.146-.98.052c-1.309.07-2.657.273-3.719.561-.909.246-2.802.9-3.607 1.247-.44.189-.344.077 1.629-1.9l2.096-2.101 1.217-.647c.67-.356 1.701-.867 2.291-1.135.59-.269 1.42-.652 1.844-.852 1.079-.508 1.958-.854 3.896-1.535 1.625-.571 1.66-.588 1.073-.54-1.922.157-4.072.666-6.206 1.468l-1.12.42.7-.662c.995-.942 3.428-3.067 4.526-3.953 3.944-3.182 6.518-4.47 7.836-3.919"
fill-rule="evenodd" />
</svg>
</div>
<!-- text -->
<div>Bridal Accessories</div>
</div>
</div>
