Ecommerce
Component #1
Bakery Biscuits
Napolitanke Ljesnjak
$32 $3526%
Off
| Product Code: | FBB00255 |
| Availability: | In Stock |
| Type: | Fruits |
| Shipping: | 01 day shipping.( Free pickup today) |
<div class="row">
<div class="col-md-6">
<!-- img slide -->
<div class="product" id="product">
<div class="zoom" onmousemove="zoom(event)"
style="background-image: url(../../assets/images/products/product-single-img-1.jpg)">
<!-- img -->
<!-- img --><img src="../../assets/images/products/product-single-img-1.jpg" alt="">
</div>
<div>
<div class="zoom" onmousemove="zoom(event)"
style="background-image: url(../../assets/images/products/product-single-img-2.jpg)">
<!-- img -->
<img src="../../assets/images/products/product-single-img-2.jpg" alt="">
</div>
</div>
<div>
<div class="zoom" onmousemove="zoom(event)"
style="background-image: url(../../assets/images/products/product-single-img-3.jpg)">
<!-- img -->
<img src="../../assets/images/products/product-single-img-3.jpg" alt="">
</div>
</div>
<div>
<div class="zoom" onmousemove="zoom(event)"
style="background-image: url(../../assets/images/products/product-single-img-4.jpg)">
<!-- img -->
<img src="../../assets/images/products/product-single-img-4.jpg" alt="">
</div>
</div>
</div>
<!-- product tools -->
<div class="product-tools">
<div class="thumbnails row g-3" id="productThumbnails">
<div class="col-3">
<div class="thumbnails-img">
<!-- img -->
<img src="../../assets/images/products/product-single-img-1.jpg" alt="">
</div>
</div>
<div class="col-3">
<div class="thumbnails-img">
<!-- img -->
<img src="../../assets/images/products/product-single-img-2.jpg" alt="">
</div>
</div>
<div class="col-3">
<div class="thumbnails-img">
<!-- img -->
<img src="../../assets/images/products/product-single-img-3.jpg" alt="">
</div>
</div>
<div class="col-3">
<div class="thumbnails-img">
<!-- img -->
<img src="../../assets/images/products/product-single-img-4.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="ps-lg-10 mt-6 mt-md-0">
<!-- content -->
<a href="#!" class="mb-4 d-block">Bakery Biscuits</a>
<!-- heading -->
<h1 class="mb-1">Napolitanke Ljesnjak </h1>
<div class="mb-4">
<!-- rating -->
<!-- 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><a href="#" class="ms-2">(30 reviews)</a>
</div>
<div class="fs-4">
<!-- price --><span class="fw-bold text-dark">$32</span> <span
class="text-decoration-line-through text-muted">$35</span><span><small class="fs-6 ms-2 text-danger">26%
Off</small></span>
</div>
<!-- hr -->
<hr class="my-6">
<div class="mb-5">
<button type="button" class="btn btn-outline-secondary">250g</button>
<!-- btn --> <button type="button" class="btn btn-outline-secondary">500g</button>
<!-- btn --> <button type="button" class="btn btn-outline-secondary">1kg</button>
</div>
<div>
<!-- input -->
<div class="input-group input-spinner ">
<input type="button" value="-" class="button-minus btn btn-sm " data-field="quantity">
<input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input ">
<input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
</div>
</div>
<div class="mt-3 row justify-content-start g-2 align-items-center">
<div class="col-xxl-4 col-lg-4 col-md-5 col-5 d-grid">
<!-- button -->
<!-- btn --> <button type="button" class="btn btn-primary"><i class="feather-icon icon-shopping-bag me-2"></i>Add to
cart</button>
</div>
<div class="col-md-4 col-4">
<!-- btn -->
<a class="btn btn-light " href="#" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Compare"><i class="bi bi-arrow-left-right"></i></a>
<a class="btn btn-light " href="#!" data-bs-toggle="tooltip" data-bs-html="true" aria-label="Wishlist"><i class="feather-icon icon-heart"></i></a>
</div>
</div>
<!-- hr -->
<hr class="my-6">
<div>
<!-- table -->
<table class="table table-borderless">
<tbody>
<tr>
<td>Product Code:</td>
<td>FBB00255</td>
</tr>
<tr>
<td>Availability:</td>
<td>In Stock</td>
</tr>
<tr>
<td>Type:</td>
<td>Fruits</td>
</tr>
<tr>
<td>Shipping:</td>
<td><small>01 day shipping.<span class="text-muted">( Free pickup today)</span></small></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8">
<!-- dropdown -->
<div class="dropdown">
<a class="btn btn-outline-secondary dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Share
</a>
<ul class="dropdown-menu" >
<li><a class="dropdown-item" href="#"><i class="bi bi-facebook me-2"></i>Facebook</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-twitter me-2"></i>Twitter</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-instagram me-2"></i>Instagram</a></li>
</ul>
</div>
</div>
</div>
</div>
</div> Component #2
You’ve got FREE delivery. Start checkout now!
Summary
-
$70.00Item Subtotal
-
$3.00Service Fee
-
$67.00Subtotal
By placing your order, you agree to be bound by the Freshcart Terms of Service and Privacy Policy.
Add Promo or Gift Card
<div class="row">
<div class="col-lg-8 col-md-7">
<div class="py-3">
<!-- alert -->
<div class="alert alert-danger p-2" role="alert">
You’ve got FREE delivery. Start <a href="#!" class="alert-link">checkout now!</a>
</div>
<ul class="list-group list-group-flush">
<!-- list group -->
<li class="list-group-item py-3 py-lg-0 px-0 border-top">
<!-- row -->
<div class="row align-items-center">
<div class="col-3 col-md-2">
<!-- img --> <img src="../../assets/images/products/product-img-1.jpg" alt="Ecommerce"
class="img-fluid">
</div>
<div class="col-4 col-md-5">
<!-- title -->
<a href="shop-single.html" class="text-inherit">
<h6 class="mb-0">Haldiram's Sev Bhujia</h6>
</a>
<span><small class="text-muted">.98 / lb</small></span>
<!-- text -->
<div class="mt-2 small lh-1">
<a href="#!" class="text-decoration-none text-inherit">
<span
class="me-1 align-text-bottom">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-trash-2 text-success">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</span>
<span class="text-muted">Remove</span>
</a>
</div>
</div>
<!-- input group -->
<div class="col-3 col-md-3 col-lg-2">
<!-- input -->
<div class="input-group input-spinner ">
<input type="button" value="-" class="button-minus btn btn-sm " data-field="quantity">
<input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input ">
<input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
</div>
</div>
<!-- price -->
<div class="col-2 text-lg-end text-start text-md-end col-md-2">
<span class="fw-bold">$5.00</span>
</div>
</div>
</li>
<!-- list group -->
<li class="list-group-item py-3 py-lg-0 px-0">
<!-- row -->
<div class="row align-items-center">
<div class="col-3 col-md-2">
<!-- img --> <img src="../../assets/images/products/product-img-2.jpg" alt="Ecommerce"
class="img-fluid">
</div>
<div class="col-4 col-md-5">
<!-- title -->
<a href="shop-single.html" class="text-inherit">
<h6 class="mb-0">NutriChoice Digestive </h6>
</a>
<span><small class="text-muted">250g</small></span>
<!-- text -->
<div class="mt-2 small lh-1">
<a href="#!" class="text-decoration-none text-inherit">
<span
class="me-1 align-text-bottom">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-trash-2 text-success">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</span>
<span class="text-muted">Remove</span>
</a>
</div>
</div>
<!-- input group -->
<div class="col-3 col-md-3 col-lg-2">
<!-- input -->
<div class="input-group input-spinner ">
<input type="button" value="-" class="button-minus btn btn-sm " data-field="quantity">
<input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input ">
<input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
</div>
</div>
<!-- price -->
<div class="col-2 text-lg-end text-start text-md-end col-md-2">
<span class="fw-bold text-danger">$20.00</span>
<div class="text-decoration-line-through text-muted small">$26.00</div>
</div>
</div>
</li>
<!-- list group -->
<li class="list-group-item py-3 py-lg-0 px-0">
<!-- row -->
<div class="row align-items-center">
<div class="col-3 col-md-2">
<!-- img --> <img src="../../assets/images/products/product-img-3.jpg" alt="Ecommerce"
class="img-fluid">
</div>
<div class="col-4 col-md-5">
<!-- title -->
<a href="shop-single.html" class="text-inherit">
<h6 class="mb-0">Cadbury 5 Star Chocolate</h6>
</a>
<span><small class="text-muted">1 kg</small></span>
<!-- text -->
<div class="mt-2 small lh-1">
<a href="#!" class="text-decoration-none text-inherit">
<span
class="me-1 align-text-bottom">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-trash-2 text-success">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</span>
<span class="text-muted">Remove</span>
</a>
</div>
</div>
<!-- input group -->
<div class="col-3 col-md-3 col-lg-2">
<!-- input -->
<div class="input-group input-spinner ">
<input type="button" value="-" class="button-minus btn btn-sm " data-field="quantity">
<input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input ">
<input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
</div>
</div>
<!-- price -->
<div class="col-2 text-lg-end text-start text-md-end col-md-2">
<span class="fw-bold">$15.00</span>
<div class="text-decoration-line-through text-muted small">$20.00</div>
</div>
</div>
</li>
<!-- list group -->
<li class="list-group-item py-3 py-lg-0 px-0">
<!-- row -->
<div class="row align-items-center">
<div class="col-3 col-md-2">
<!-- img --> <img src="../../assets/images/products/product-img-4.jpg" alt="Ecommerce"
class="img-fluid">
</div>
<div class="col-4 col-md-5">
<!-- title -->
<a href="shop-single.html" class="text-inherit">
<h6 class="mb-0">Onion Flavour Potato</h6>
</a>
<span><small class="text-muted">250g</small></span>
<!-- text -->
<div class="mt-2 small lh-1">
<a href="#!" class="text-decoration-none text-inherit">
<span
class="me-1 align-text-bottom">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-trash-2 text-success">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</span>
<span class="text-muted">Remove</span>
</a>
</div>
</div>
<!-- input group -->
<div class="col-3 col-md-3 col-lg-2">
<!-- input -->
<div class="input-group input-spinner ">
<input type="button" value="-" class="button-minus btn btn-sm " data-field="quantity">
<input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input ">
<input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
</div>
</div>
<!-- price -->
<div class="col-2 text-lg-end text-start text-md-end col-md-2">
<span class="fw-bold">$15.00</span>
<div class="text-decoration-line-through text-muted small">$20.00</div>
</div>
</div>
</li>
<!-- list group -->
<li class="list-group-item py-3 py-lg-0 px-0 border-bottom">
<!-- row -->
<div class="row align-items-center">
<div class="col-3 col-md-2">
<!-- img --> <img src="../../assets/images/products/product-img-5.jpg" alt="Ecommerce"
class="img-fluid">
</div>
<div class="col-4 col-md-5">
<!-- title -->
<a href="shop-single.html" class="text-inherit">
<h6 class="mb-0">Salted Instant Popcorn </h6>
</a>
<span><small class="text-muted">100g</small></span>
<!-- text -->
<div class="mt-2 small lh-1">
<a href="#!" class="text-decoration-none text-inherit">
<span
class="me-1 align-text-bottom">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-trash-2 text-success">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</span>
<span class="text-muted">Remove</span>
</a>
</div>
</div>
<!-- input group -->
<div class="col-3 col-md-3 col-lg-2">
<!-- input -->
<div class="input-group input-spinner ">
<input type="button" value="-" class="button-minus btn btn-sm " data-field="quantity">
<input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input ">
<input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
</div>
</div>
<!-- price -->
<div class="col-2 text-lg-end text-start text-md-end col-md-2">
<span class="fw-bold">$15.00</span>
<div class="text-decoration-line-through text-muted small">$25.00</div>
</div>
</div>
</li>
</ul>
<!-- btn -->
<div class="d-flex justify-content-between mt-4">
<a href="#!" class="btn btn-primary">Continue Shopping</a>
<a href="#!" class="btn btn-dark">Update Cart</a>
</div>
</div>
</div>
<!-- sidebar -->
<div class="col-12 col-lg-4 col-md-5">
<!-- card -->
<div class="mb-5 card mt-6">
<div class="card-body p-6">
<!-- heading -->
<h2 class="h5 mb-4">Summary</h2>
<div class="card mb-2">
<!-- list group -->
<ul class="list-group list-group-flush">
<!-- list group item -->
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="me-auto">
<div>Item Subtotal</div>
</div>
<span>$70.00</span>
</li>
<!-- list group item -->
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="me-auto">
<div>Service Fee</div>
</div>
<span>$3.00</span>
</li>
<!-- list group item -->
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="me-auto">
<div class="fw-bold">Subtotal</div>
</div>
<span class="fw-bold">$67.00</span>
</li>
</ul>
</div>
<div class="d-grid mb-1 mt-4">
<!-- btn -->
<button class="btn btn-primary btn-lg d-flex justify-content-between align-items-center" type="submit">
Go to Checkout <span class="fw-bold">$67.00</span></button>
</div>
<!-- text -->
<p><small>By placing your order, you agree to be bound by the Freshcart <a href="#!">Terms of Service</a>
and <a href="#!">Privacy Policy.</a> </small>
</p>
<!-- heading -->
<div class="mt-8">
<h2 class="h5 mb-3">Add Promo or Gift Card</h2>
<form>
<div class="mb-2">
<!-- input -->
<label for="giftcard" class="form-label sr-only">Email address</label>
<input type="text" class="form-control" id="giftcard" placeholder="Promo or Gift Card">
</div>
<!-- btn -->
<div class="d-grid"><button type="submit" class="btn btn-outline-dark mb-1">Redeem</button></div>
<p class="text-muted mb-0"> <small>Terms & Conditions apply</small></p>
</form>
</div>
</div>
</div>
</div>
</div>Component #3
<div class="row">
<div class="offset-lg-1 col-lg-3 col-12">
<div class="mb-8 mt-8">
<!-- title -->
<h5 class="mb-3">Categories</h5>
<!-- nav -->
<ul class="nav nav-category" id="categoryCollapseMenu">
<li class="nav-item border-bottom w-100 " ><a href="#"
class="nav-link collapsed" data-bs-toggle="collapse"
data-bs-target="#categoryFlushOne" aria-expanded="false" aria-controls="categoryFlushOne">Dairy, Bread & Eggs <i class="feather-icon icon-chevron-right"></i></a>
<!-- accordion collapse -->
<div id="categoryFlushOne" class="accordion-collapse collapse"
data-bs-parent="#categoryCollapseMenu">
<div>
<!-- nav -->
<ul class="nav flex-column ms-3">
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Milk</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Milk Drinks</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Curd & Yogurt</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Eggs</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Bread</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Buns & Bakery</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Butter & More</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Cheese</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Paneer & Tofu</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Cream & Whitener</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Condensed Milk</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Vegan Drinks</a></li>
</ul>
</div>
</div>
</li>
<!-- nav item -->
<li class="nav-item border-bottom w-100 " ><a href="#"
class="nav-link collapsed" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Snacks &
Munchies <i class="feather-icon icon-chevron-right"></i>
</a>
<!-- collapse -->
<div id="flush-collapseTwo" class="accordion-collapse collapse"
data-bs-parent="#categoryCollapseMenu">
<div>
<ul class="nav flex-column ms-3">
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Chips & Crisps</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Nachos</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Popcorn</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Bhujia & Mixtures</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Namkeen Snacks</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Healthy Snacks</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Cakes & Rolls</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Energy Bars</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Papad & Fryums</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Rusks & Wafers</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item border-bottom w-100 " > <a
href="#" class="nav-link collapsed" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">Fruits & Vegetables <i class="feather-icon icon-chevron-right"></i></a>
<!-- collapse -->
<div id="flush-collapseThree" class="accordion-collapse collapse"
data-bs-parent="#categoryCollapseMenu">
<div>
<ul class="nav flex-column ms-3">
<!-- nav item -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#!">Fresh Vegetables</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Herbs & Seasonings</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Fresh Fruits</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Organic Fruits & Vegetables</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Cuts & Sprouts</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Exotic Fruits & Veggies</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Flower Bouquets, Bunches</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item border-bottom w-100 "> <a
href="#" class="nav-link collapsed" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">Cold Drinks & Juices <i class="feather-icon icon-chevron-right"></i></a>
<!-- collapse -->
<div id="flush-collapseFour" class="accordion-collapse collapse"
data-bs-parent="#categoryCollapseMenu">
<div>
<ul class="nav flex-column ms-3">
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Soft Drinks</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Fruit Juices</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Coldpress</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Energy Drinks</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Water & Ice Cubes</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Soda & Mixers</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Concentrates & Syrups</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Detox & Energy Drinks</a></li>
<!-- nav item -->
<li class="nav-item"><a href="#!" class="nav-link">Juice Collection</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item border-bottom w-100 " > <a
href="#" class="nav-link collapsed" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">Breakfast & Instant Food <i class="feather-icon icon-chevron-right"></i></a>
<!-- collapse -->
<div id="flush-collapseFive" class="accordion-collapse collapse"
data-bs-parent="#categoryCollapseMenu">
<div>
<ul class="nav flex-column ms-3">
<!-- nav item -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#!">Batter</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Breakfast Cereal</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Noodles, Pasta & Soup</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Frozen Non-Veg Snackss</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Frozen Veg</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Vermicelli</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Instant Mixes</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item border-bottom w-100 " > <a href="#"
class="nav-link collapsed" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">Bakery & Biscuits <i class="feather-icon icon-chevron-right"></i></a>
<!-- collapse -->
<div id="flush-collapseSix" class="accordion-collapse collapse"
data-bs-parent="#categoryCollapseMenu">
<div>
<ul class="nav flex-column ms-3">
<!-- nav item -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#!">Cookies</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Glucose & Marie</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Sweet & Salty</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Healthy & Digestive</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Cream Biscuits</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Rusks & Wafers</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Cakes & Rolls</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">
Buns & Bakery</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item border-bottom w-100 " > <a
href="#" class="nav-link collapsed" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">Chicken, Meat & Fish <i class="feather-icon icon-chevron-right"></i></a>
<!-- collapse -->
<div id="flush-collapseSeven" class="accordion-collapse collapse"
data-bs-parent="#categoryCollapseMenu">
<div>
<ul class="nav flex-column ms-3">
<!-- nav item -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#!">Chicken</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Sausage, Salami & Ham</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Exotic Meat</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Eggs</a>
</li>
<!-- nav item -->
<li class="nav-item">
<a class="nav-link" href="#!">Frozen Non-Veg Snacks</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="mb-8">
<h5 class="mb-3">Stores</h5>
<div class="my-4">
<!-- input -->
<input type="search" class="form-control" placeholder="Search by store">
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="eGrocery" checked>
<label class="form-check-label" for="eGrocery">
E-Grocery
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="DealShare">
<label class="form-check-label" for="DealShare">
DealShare
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="Dmart">
<label class="form-check-label" for="Dmart">
DMart
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="Blinkit">
<label class="form-check-label" for="Blinkit">
Blinkit
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="BigBasket">
<label class="form-check-label" for="BigBasket">
BigBasket
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="StoreFront">
<label class="form-check-label" for="StoreFront">
StoreFront
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="Spencers">
<label class="form-check-label" for="Spencers">
Spencers
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="onlineGrocery">
<label class="form-check-label" for="onlineGrocery">
Online Grocery
</label>
</div>
</div>
<div class="mb-8">
<!-- price -->
<h5 class="mb-3">Price</h5>
<div>
<!-- range -->
<div id="priceRange" class="mb-3"></div>
<small class="text-muted">Price:</small> <span id="priceRange-value" class="small"></span>
</div>
</div>
<!-- rating -->
<div class="mb-8">
<h5 class="mb-3">Rating</h5>
<div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingFive">
<label class="form-check-label" for="ratingFive">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingFour" checked>
<label class="form-check-label" for="ratingFour">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star text-warning"></i>
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingThree">
<label class="form-check-label" for="ratingThree">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star-fill text-warning "></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingTwo">
<label class="form-check-label" for="ratingTwo">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
</label>
</div>
<!-- form check -->
<div class="form-check mb-2">
<!-- input -->
<input class="form-check-input" type="checkbox" value="" id="ratingOne">
<label class="form-check-label" for="ratingOne">
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
<i class="bi bi-star text-warning"></i>
</label>
</div>
</div>
</div>
<div class="mb-8 position-relative">
<!-- Banner Design -->
<!-- Banner Content -->
<div class="position-absolute p-5 py-8">
<h3 class="mb-0">Fresh Fruits </h3>
<p>Get Upto 25% Off</p>
<a href="#" class="btn btn-dark">Shop Now<i class="feather-icon icon-arrow-right ms-1"></i></a>
</div>
<!-- Banner Content -->
<!-- Banner Image -->
<!-- img --><img src="../../assets/images/banner/assortment-citrus-fruits.png" alt=""
class="img-fluid rounded ">
<!-- Banner Image -->
</div>
</div>
</div>Component #4
Order Details
-
Haldiram's Sev Bhujia
.98 / lb1$5.00 -
NutriChoice Digestive
250g1$20.00$26.00 -
Cadbury 5 Star Chocolate
1 kg1$15.00$20.00 -
Onion Flavour Potato
250g1$15.00$20.00 -
Item Subtotal$70.00Service Fee$3.00
-
Subtotal$73.00
<div class="mt-4 mt-lg-0" style="max-width: 390px;">
<div class="card shadow-sm">
<h5 class="px-6 py-4 bg-transparent mb-0">Order Details</h5>
<ul class="list-group list-group-flush">
<!-- list group item -->
<li class="list-group-item px-4 py-3">
<div class="row align-items-center">
<div class="col-2 col-md-2">
<img src="../../assets/images/products/product-img-1.jpg" alt="Ecommerce"
class="img-fluid">
</div>
<div class="col-5 col-md-5">
<h6 class="mb-0">Haldiram's Sev Bhujia</h6>
<span><small class="text-muted">.98 / lb</small></span>
</div>
<div class="col-2 col-md-2 text-center text-muted">
<span>1</span>
</div>
<div class="col-3 text-lg-end text-start text-md-end col-md-3">
<span class="fw-bold">$5.00</span>
</div>
</div>
</li>
<!-- list group item -->
<li class="list-group-item px-4 py-3">
<div class="row align-items-center">
<div class="col-2 col-md-2">
<img src="../../assets/images/products/product-img-2.jpg" alt="Ecommerce"
class="img-fluid">
</div>
<div class="col-5 col-md-5">
<h6 class="mb-0">NutriChoice Digestive</h6>
<span><small class="text-muted">250g</small></span>
</div>
<div class="col-2 col-md-2 text-center text-muted">
<span>1</span>
</div>
<div class="col-3 text-lg-end text-start text-md-end col-md-3">
<span class="fw-bold">$20.00</span>
<div class="text-decoration-line-through text-muted small">$26.00</div>
</div>
</div>
</li>
<!-- list group item -->
<li class="list-group-item px-4 py-3">
<div class="row align-items-center">
<div class="col-2 col-md-2">
<img src="../../assets/images/products/product-img-3.jpg" alt="Ecommerce"
class="img-fluid">
</div>
<div class="col-5 col-md-5">
<h6 class="mb-0">Cadbury 5 Star Chocolate</h6>
<span><small class="text-muted">1 kg</small></span>
</div>
<div class="col-2 col-md-2 text-center text-muted">
<span>1</span>
</div>
<div class="col-3 text-lg-end text-start text-md-end col-md-3">
<span class="fw-bold">$15.00</span>
<div class="text-decoration-line-through text-muted small">$20.00</div>
</div>
</div>
</li>
<!-- list group item -->
<li class="list-group-item px-4 py-3">
<div class="row align-items-center">
<div class="col-2 col-md-2">
<img src="../../assets/images/products/product-img-4.jpg" alt="Ecommerce"
class="img-fluid">
</div>
<div class="col-5 col-md-5">
<h6 class="mb-0">Onion Flavour Potato</h6>
<span><small class="text-muted">250g</small></span>
</div>
<div class="col-2 col-md-2 text-center text-muted">
<span>1</span>
</div>
<div class="col-3 text-lg-end text-start text-md-end col-md-3">
<span class="fw-bold">$15.00</span>
<div class="text-decoration-line-through text-muted small">$20.00</div>
</div>
</div>
</li>
<!-- list group item -->
<li class="list-group-item px-4 py-3">
<div class="d-flex align-items-center justify-content-between mb-2">
<div>
Item Subtotal
</div>
<div class="fw-bold">
$70.00
</div>
</div>
<div class="d-flex align-items-center justify-content-between ">
<div>
Service Fee <i class="feather-icon icon-info text-muted"
data-bs-toggle="tooltip" title="Default tooltip"></i>
</div>
<div class="fw-bold">
$3.00
</div>
</div>
</li>
<!-- list group item -->
<li class="list-group-item px-4 py-3">
<div class="d-flex align-items-center justify-content-between fw-bold">
<div>
Subtotal
</div>
<div>
$73.00
</div>
</div>
</li>
</ul>
</div>
</div>