Developed by Codescandy

Card

Bootstrap 5 ecommerce product card

Featured Category

<a href="../../pages/shop-grid.html"
class="text-decoration-none text-inherit">
<div class="card card-product" style="max-width: 390px;">
	<div class="card-body text-center py-8">
		<img src="../../assets/images/category/category-snack-munchies.jpg"
			alt="Grocery Ecommerce Template" class="mb-3" />
		<div class="text-truncate">Snack & Munchies
		</div>
	</div>
</div>
</a>

Card Thumbnail

<div class="card card-product" 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/products/product-img-1.jpg"
				alt="Grocery Ecommerce Template"
				class="mb-3 img-fluid" />
		</a>
		<div class="card-product-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>Snack
				& Munchies</small></a>
	</div>
	<h2 class="fs-6">
		<a href="../../pages/shop-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">$18</span>
			<span
				class="text-decoration-line-through text-muted">$24</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

Sale
Grocery Ecommerce Template

Haldiram's Sev Bhujia

4.5(149)
$18 $24
In Stock
Add to Cart 
<div class="card card-product-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/products/product-img-1.jpg"
				alt="Grocery Ecommerce Template"
				class="mb-3 img-fluid" /></a>
		<!-- action btn -->
		<div class="product-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">$18</span>
			<span
				class="text-decoration-line-through text-muted">$24</span>
		</div>
		<div><span class="text-uppercase small text-primary">In
				Stock</span></div>
	</div>
	<!-- btn -->
	<div class="product-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="product-content-fade border-info"
style="margin-bottom: -60px"></div>
</div>

Card Thumbnail #3

<div class="card card-product" style="max-width: 390px;">
<div class="card-body">
	<div class="text-center position-relative">
		<a href="../../pages/shop-single.html">
			<img src="../../assets/images/products/product-img-13.jpg"
				alt="Grocery Ecommerce Template"
				class="mb-3 img-fluid" />
		</a>
		<div class="card-product-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>Fruits
				& Vegetables</small></a>
	</div>
	<h2 class="fs-6"><a
			href="../../pages/shop-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">$13</span>
			<span
				class="text-decoration-line-through text-muted">$18</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

25%
Grocery Ecommerce Template
$15

Britannia NutriChoice Digestive Biscuits

4.4(3,149)
In Stock
the available products : 12
Add to Cart 
<div class="card card-product-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">25%</span>
		</div>
		<!-- img -->
		<a href="#!"><img
				src="../../assets/images/products/product-img-2.jpg"
				alt="Grocery Ecommerce Template"
				class="mb-3 img-fluid" /></a>
		<!-- action btn -->
		<div class="product-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">$15</span>
	</div>
	<!-- title -->
	<h2 class="fs-6"><a href="#!"
			class="text-inherit text-decoration-none">Britannia
			NutriChoice Digestive Biscuits</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: 88%"
				aria-valuenow="88" aria-valuemin="0"
				aria-valuemax="100"></div>
		</div>
		<div class="my-3">
			<small>
				the available products :
				<span class="text-dark fw-bold">12</span>
			</small>
		</div>
	</div>
	<!-- btn -->
	<div class="product-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="product-content-fade border-info"
	style="margin-bottom: -60px"></div>
</div>

Card with List

<div class="card card-product" 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="shop-single.html">
					<!-- img -->
					<img src="../../assets/images/products/product-img-1.jpg"
						alt="Grocery Ecommerce Template"
						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>Snack
						& Munchies</small></a>
			</div>
			<h2 class="fs-6"><a href="shop-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">$18</span>
					<span
						class="text-decoration-line-through text-muted">$24</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="shop-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

Jitu Chauhan
4450 North Avenue Oakland,
Nebraska, United States,
402-776-1106

Default address
Edit Delete 
<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

Grocery Ecommerce Template
-45%

Salted Instant Popcorn

$18 $24
4.5 
<div class="card card-product mb-4" style="max-width: 390px;">
<div class="card-body text-center py-8">
	<!-- img -->
	<a href="#" tabindex="-1"><img
			src="../../assets/images/category/category-snack-munchies.jpg"
			alt="Grocery Ecommerce Template"
			class="mb-3" /></a>
	<!-- text -->
</div>
													</div>
													<div>
<span class="badge bg-danger rounded-pill">-45%</span>
<h2 class="mt-3 fs-6"><a href="#" class="text-inherit"
		tabindex="-1">Salted Instant Popcorn</a></h2>
<div>
	<span class="text-dark fs-5 fw-bold">$18</span>
	<span
		class="text-decoration-line-through text-muted">$24</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

E-Grocery Super Market

Seller ID: #009
heathercarpenter@dayrep.com
Gross Sale
$200.00
Earning
$200.00
<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/stores-logo/stores-logo-1.svg"
			alt=""
			class="rounded-circle icon-shape icon-xxl mb-6">
		<!-- content -->
		<h2 class="mb-2 h5"><a href="#!"
				class="text-inherit">E-Grocery 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">$200.00</h5>
		</div>
		<div class="col">
			<div>Earning</div>
			<h5 class="mb-0 mt-1">$200.00</h5>
		</div>
		</div>
</div>
													</div>

Featured Category

E-Grocery Super Market

Organic Groceries Butcher Shop
  • Delivery
  • Pickup available
7.5 mi away
In-store prices 
<!-- card -->
<div class="card p-6 card-product" style="max-width: 390px;">
	<div> <!-- img --><img
			src="../../assets/images/stores-logo/stores-logo-1.svg"
			alt="" class="rounded-circle icon-shape icon-xl">
	</div>
	<div class="mt-4">
		<!-- content -->
		<h2 class="mb-1 h5"><a href="#!"
				class="text-inherit">E-Grocery Super Market</a>
		</h2>
		<div class="small text-muted"><span class="me-2">Organic
			</span><span class="me-2">Groceries</span>
			<span>Butcher Shop</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-store
				prices </div>
		</div>
	</div>
</div>

Stores

E-Grocery Super Market
Organic Groceries Butcher Shop
  • Delivery
  • Pickup available
7.5 mi away
In-store prices 
<!-- card -->
<div class="card flex-row p-8 card-product" style="max-width: 390px;">
	<div>
		<!-- img -->
		<img src="../../assets/images/stores-logo/stores-logo-1.svg"
			alt="" class="rounded-circle icon-shape icon-xl">
	</div>
	<!-- content -->
	<div class="ms-6">
		<h5 class="mb-1"><a href="#!"
				class="text-inherit">E-Grocery Super Market</a>
		</h5>
		<div class="small text-muted">
			<span>Organic</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>Groceries</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 Shop</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-store
				prices </div>
			</div>
	</div>
</div>

Ready to started

Grow my business with Freshcart

Duis placerat, urna ut dictum lobortis, erat libero feugiat nulla, ullamcorper fermentum lectus dolor ut tortor.

FreshCart Platform 
<!-- 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/about/about-icons-1.svg"
				alt="" />
		</div>
		<h4>Grow my business with Freshcart</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">FreshCart
			Platform</a>
	</div>
</div>

Best sell

<div class="card card-product" style="max-width: 390px;">
<div class="card-body">
	<div class="text-center position-relative">
		<a href="./pages/shop-single.html"><img
				src="../../assets/images/products/product-img-11.jpg"
				alt="Grocery Ecommerce Template"
				class="mb-3 img-fluid" /></a>
				<div class="card-product-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/shop-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">$13</span>
			<span
				class="text-decoration-line-through text-muted">$18</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 Product

Grocery Ecommerce Template
-45%

Instant Food

$18 $24
4.5 
<div class="card card-product mb-4" style="max-width: 390px;">
<div class="card-body text-center py-8">
	<!-- img -->
	<a href="#"><img
			src="../../assets/images/category/category-instant-food.jpg"
			alt="Grocery Ecommerce Template"
			class="mb-3" /></a>
	<!-- text -->
</div>
</div>
<div>
<span class="badge bg-danger rounded-pill">-45%</span>
<h2 class="mt-3 fs-6"><a href="#"
		class="text-inherit">Instant Food</a></h2>
<div>
	<span class="text-dark fs-5 fw-bold">$18</span>
	<span
		class="text-decoration-line-through text-muted">$24</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

$93,438.78

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">$93,438.78</h1>
			<span>Monthly revenue</span>
		</div>
	</div>
</div>

Card with Countdown

Grocery Ecommerce Template
4.5

Parle Platina Nutricrunch Digestive Cookies

$100 $150
Add to cart
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/shop-single.html"><img src="../../assets/images/products/deal-img.jpg" alt="Grocery Ecommerce Template" 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/shop-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">$100</span>
				<span class="text-decoration-line-through text-muted fs-5">$150</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: 85%"></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>

Shop by Categories

Bakery
<!-- 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>Bakery</div>
	</div>
</div>