Ecommerce
Grid
<div class="row gy-4">
<!-- shop thumbnail -->
<div class="col-lg-4 col-md-6 col-12">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">
<div>
<div class="badge bg-primary-soft">New</div>
</div>
<div>
<a href="#" class="btn-like">
<i class="fe fe-heart"></i>
</a>
</div>
</div>
<a href="shop-single.html"><img src="../assets/images/book.png" alt="book" class="mt-3 img-fluid" /></a>
<div class="mt-3">
<a href="shop-single.html">
<h4 class="mb-1">Life Hack - Coach</h4>
</a>
<p class="font-12 mb-2">Rhianna Mcdougall</p>
<span class="text-dark me-2">$16.99</span>
<span class="text-muted"><s>$20.99</s></span>
<div class="font-12">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<span class="ms-1">6</span>
</div>
<a href="#" class="btn btn-outline-primary btn-sm mt-3">Add to cart</a>
</div>
</div>
</div>
</div>
<!-- shop thumbnail -->
<div class="col-lg-4 col-md-6 col-12">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">
<div>
<div class="badge bg-secondary-soft">Sale!</div>
</div>
<div>
<a href="#" class="btn-like">
<i class="fe fe-heart"></i>
</a>
</div>
</div>
<a href="shop-single.html"><img src="../assets/images/book-2.png" alt="book" class="mt-3 img-fluid" /></a>
<div class="mt-3">
<a href="shop-single.html">
<h4 class="mb-1">Learn Foucs - Coach</h4>
</a>
<p class="font-12 mb-2">Maleeha Stanley</p>
<span class="text-dark me-2">$20.99</span>
<span class="text-muted"><s>$20.99</s></span>
<div class="font-12">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<span class="ms-1">6</span>
</div>
<a href="#" class="btn btn-outline-primary btn-sm mt-3">Add to cart</a>
</div>
</div>
</div>
</div>
<!-- shop thumbnail -->
<div class="col-lg-4 col-md-6 col-12">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between">
<div>
<div class="badge bg-primary-soft">New</div>
</div>
<div>
<a href="#" class="btn-like">
<i class="fe fe-heart"></i>
</a>
</div>
</div>
<a href="shop-single.html"><img src="../assets/images/book-3.png" alt="book" class="mt-3 img-fluid" /></a>
<div class="mt-3">
<a href="shop-single.html">
<h4 class="mb-1">Executive Focus</h4>
</a>
<p class="font-12 mb-2">Arandeep Woodcock</p>
<span class="text-dark me-2">$19.99</span>
<span class="text-muted"><s>$20.99</s></span>
<div class="font-12">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<span class="ms-1">6</span>
</div>
<a href="#" class="btn btn-outline-primary btn-sm mt-3">Add to cart</a>
</div>
</div>
</div>
</div>
</div>List
New
<div class="row gy-4">
<!-- shop list -->
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-lg-4 col-md-4 col-12 text-center">
<div class="position-relative">
<div class="badge bg-primary-soft position-absolute start-0">New</div>
</div>
<a href="shop-single.html"><img src="../assets/images/book-3.png" alt="" class="mt-3" height="190" /></a>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="mt-3">
<a href="#">
<h4 class="mb-1">Executive Focus - Focused Success</h4>
</a>
<p class="font-12 mb-2">
Author
<span class="text-danger ms-1">Rhianna Mcdougall</span>
</p>
<div class="">
<span class="text-dark me-2">$16.99</span>
<span class="text-muted"><s>$20.99</s></span>
<div class="font-12 mb-3">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<span class="ms-1">6</span>
</div>
<a href="#" class="btn btn-outline-primary btn-sm me-2">Add to cart</a>
<a href="#" class="btn-like d-inline-block">
<i class="fe fe-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- shop list -->
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-lg-4 col-md-4 col-12 text-center">
<a href="shop-single.html"><img src="../assets/images/book-4.png" alt="" class="mt-3" height="190" /></a>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="mt-3">
<a href="#">
<h4 class="mb-1">Effective Coach Focused Success</h4>
</a>
<p class="font-12 mb-2">
Author
<span class="text-danger ms-1">Maleeha Stanley</span>
</p>
<div class="">
<span class="text-dark me-2">$20.99</span>
<span class="text-muted"><s>$30.99</s></span>
<div class="font-12 mb-3">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<span class="ms-1">6</span>
</div>
<a href="#" class="btn btn-outline-primary btn-sm me-2">Add to cart</a>
<a href="#" class="btn-like d-inline-block">
<i class="fe fe-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Product Details
Life Hack - Inspiring Motivatinal & Focused Success
by Greg McKeown
$16.99
$20.99
Add to cart
Add to wishlist
Category: Motivational
Tags: life coach , motivation , success
Product details
- Hardcover: 320 pages
- Publisher: Coach; 1st edition (October 03, 2024)
- Language: English
- ISBN: 978-2-12-345680-3
- ISBN: 123-2-12-123456-2
- Product Dimensiona: 6.2 x 1 x 9.3 inches
Descriptions
Same generally the with so, change. But the and was after know called absolutely morning, are supposedly of unionized didn’t be chime very my remodelling and back transmitting familiarity possible with of his a he of rank geared and small promptness been economics.
Aenean vitae nibh vel mi vestibulum condimentum ac sed metus. Integer orci velit, eleifend at ante eget, tempor eleifend dolor. Sed molestie egestas massa, commodo aliquet nunc sagittis at. Quisque nisi nibh, euismod eu velit id, suscipit accumsan est. Pellentesque dictum volutpat varius.
<!--start shop single-->
<section class="py-6 py-lg-8 py-xxl-16">
<div class="container">
<div class="row align-items-center">
<!-- image -->
<div class="col-lg-4 col-md-4 col-12">
<img src="../assets/images/book.png" alt="book" class="img-fluid" />
</div>
<!-- description -->
<div class="offset-lg-1 col-lg-7 col-md-8 col-12">
<h2>Life Hack - Inspiring Motivatinal & Focused Success</h2>
<p>
by
<span class="text-primary">Greg McKeown</span>
</p>
<div class="d-flex">
<div class="dropdown">
<span class="font-12">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
</span>
<a class="text-dark" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="align-middle"><i class="fe fe-chevron-down"></i></span>
</a>
<!-- dropdown menu -->
<div class="dropdown-menu dropdown-menu-lg p-3" aria-labelledby="dropdownMenuLink">
<span class="font-14">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
</span>
<span class="h5 ms-2">4.6 out of 5</span>
<p class="font-14">2,693 customer ratings</p>
<!-- row -->
<div class="row align-items-center mb-1">
<div class="col-md-2 col-2 pe-0">
<div class="font-12 text-dark">5 Star</div>
</div>
<div class="col-md-8 col-8 pe-2">
<div class="progress" style="height: 8px">
<div class="progress-bar bg-warning" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-2 col-2">
<div class="font-12 text-dark">78%</div>
</div>
</div>
<div class="row align-items-center mb-1">
<div class="col-md-2 col-2 pe-0">
<div class="font-12 text-dark">4 Star</div>
</div>
<div class="col-md-8 col-8 pe-2">
<div class="progress" style="height: 8px">
<div class="progress-bar bg-warning" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-2 col-2">
<div class="font-12 text-dark">12%</div>
</div>
</div>
<div class="row align-items-center mb-1">
<div class="col-md-2 col-2 pe-0">
<div class="font-12 text-dark">3 Star</div>
</div>
<div class="col-md-8 col-8 pe-2">
<div class="progress" style="height: 8px">
<div class="progress-bar bg-warning" role="progressbar" style="width: 5%" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-2 col-2">
<div class="font-12 text-dark">5%</div>
</div>
</div>
<div class="row align-items-center mb-1">
<div class="col-md-2 col-2 pe-0">
<div class="font-12 text-dark">2 Star</div>
</div>
<div class="col-md-8 col-8 pe-2">
<div class="progress" style="height: 8px">
<div class="progress-bar bg-warning" role="progressbar" style="width: 2%" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-2 col-2">
<div class="font-12 text-dark">2%</div>
</div>
</div>
<div class="row align-items-center mb-2">
<div class="col-md-2 col-2 pe-0">
<div class="font-12 text-dark">1 Star</div>
</div>
<div class="col-md-8 col-8 pe-2">
<div class="progress" style="height: 8px">
<div class="progress-bar bg-warning" role="progressbar" style="width: 1%" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-2 col-2">
<div class="font-12 text-dark">1%</div>
</div>
</div>
<a href="#">See all customer reviews</a>
</div>
</div>
<!-- rating -->
<div>
<span class="ms-2 font-12 text-dark">2,693 ratings</span>
<span class="badge bg-success-soft text-uppercase ms-3">In Stock</span>
</div>
</div>
<hr class="my-4" />
<div class="mb-3 font-20">
<span class="text-dark me-2">$16.99</span>
<span class="text-muted"><s>$20.99</s></span>
</div>
<a href="shop-cart.html" class="btn btn-outline-primary me-2">Add to cart</a>
<a href="#" class="btn btn-light">Add to wishlist</a>
<p class="mt-4 font-14 mb-1">
<span class="text-dark me-1">Category:</span>
<a href="#" class="text-inherit ms-1">Motivational</a>
</p>
<p class="font-14">
<span class="text-dark me-1">Tags:</span>
<a href="#" class="text-inherit ms-1">life coach</a>
,
<a href="#" class="text-inherit ms-1">motivation</a>
,
<a href="#" class="text-inherit ms-1">success</a>
</p>
</div>
</div>
<hr class="my-10" />
<!-- product detail list -->
<div class="row">
<div class="col-lg-4 col-md-5 col-12">
<div class="mb-6 mb-md-0">
<h4 class="mb-3">Product details</h4>
<ul class="list-group list-group-flush font-14 mb-0">
<li class="list-group-item px-0 py-1">
<span class="text-dark">Hardcover:</span>
320 pages
</li>
<li class="list-group-item px-0 py-1">
<span class="text-dark">Publisher:</span>
Coach; 1st edition (October 03, 2024)
</li>
<li class="list-group-item px-0 py-1">
<span class="text-dark">Language:</span>
English
</li>
<li class="list-group-item px-0 py-1">
<span class="text-dark">ISBN:</span>
978-2-12-345680-3
</li>
<li class="list-group-item px-0 py-1">
<span class="text-dark">ISBN:</span>
123-2-12-123456-2
</li>
<li class="list-group-item px-0 py-1">
<span class="text-dark">Product Dimensiona:</span>
6.2 x 1 x 9.3 inches
</li>
</ul>
</div>
</div>
<!-- description -->
<div class="col-lg-8 col-md-7 col-12">
<h4 class="mb-3">Descriptions</h4>
<p>
Same generally the with so, change. But the and was after know called absolutely morning, are supposedly of unionized didn’t be chime very my remodelling and back
transmitting familiarity possible with of his a he of rank geared and small promptness been economics.
</p>
<p>
Aenean vitae nibh vel mi vestibulum condimentum ac sed metus. Integer orci velit, eleifend at ante eget, tempor eleifend dolor. Sed molestie egestas massa, commodo
aliquet nunc sagittis at. Quisque nisi nibh, euismod eu velit id, suscipit accumsan est. Pellentesque dictum volutpat varius.
</p>
</div>
</div>
</div>
</section>
<!--end of shop single-->Product Sidebar
Price
Category
-
2
-
1
-
3
-
2
-
1
Rating
-
1
-
4
-
8
-
23
-
213
<div class="row">
<!-- sidebar -->
<div class="col-lg-3 col-md-12 col-12">
<!-- price ranger -->
<div class="card rounded-3 mb-3 mt-5 mt-lg-0">
<div class="card-body p-4">
<h4 class="mb-4">Price</h4>
<input id="price_ranger" type="text" value="" />
</div>
</div>
<!-- category -->
<div class="card rounded-3 mb-3">
<div class="card-body p-4">
<h4 class="mb-3">Category</h4>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between mb-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="development" />
<label class="form-check-label" for="development">Self Development</label>
</div>
<div class="text-dark">2</div>
</li>
<li class="d-flex justify-content-between mb-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="motivational" />
<label class="form-check-label" for="motivational">Motivational</label>
</div>
<div class="text-dark">1</div>
</li>
<li class="d-flex justify-content-between mb-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="lifeHack" />
<label class="form-check-label" for="lifeHack">Life Hack</label>
</div>
<div class="text-dark">3</div>
</li>
<li class="d-flex justify-content-between mb-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="ceoCoach" />
<label class="form-check-label" for="ceoCoach">CEO Coach</label>
</div>
<div class="text-dark">2</div>
</li>
<li class="d-flex justify-content-between">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="businessCoach" />
<label class="form-check-label" for="businessCoach">Business Coach</label>
</div>
<div class="text-dark">1</div>
</li>
</ul>
</div>
</div>
<!-- rating -->
<div class="card rounded-3 mb-3">
<div class="card-body p-4">
<h4 class="mb-3">Rating</h4>
<ul class="list-unstyled mb-0">
<!-- list group -->
<li class="d-flex justify-content-between mb-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="starOne" />
<label class="form-check-label font-14" for="starOne">
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
</label>
</div>
<div class="text-dark">1</div>
</li>
<!-- list group -->
<li class="d-flex justify-content-between mb-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="starTwo" />
<label class="form-check-label font-14" for="starTwo">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
</label>
</div>
<div class="text-dark">4</div>
</li>
<!-- list group -->
<li class="d-flex justify-content-between mb-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="starThree" />
<label class="form-check-label font-14" for="starThree">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
</label>
</div>
<div class="text-dark">8</div>
</li>
<!-- list group -->
<li class="d-flex justify-content-between mb-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="starFour" />
<label class="form-check-label font-14" for="starFour">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="far fa-star text-warning"></i>
</label>
</div>
<div class="text-dark">23</div>
</li>
<!-- list group -->
<li class="d-flex justify-content-between">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="starFive" />
<label class="form-check-label font-14" for="starFive">
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
<i class="fas fa-star text-warning"></i>
</label>
</div>
<div class="text-dark">213</div>
</li>
</ul>
</div>
</div>
</div>
</div>Product Cart
Shopping cart
| Product | Price | |
|---|---|---|
|
|
$16 | |
Learn Foucs - CoachIn Stock |
$20 |
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<div class="mb-4">
<h2 class="h4">Shopping cart</h2>
</div>
<div class="card table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th class="text-uppercase border-bottom border-top-0">Product</th>
<th class="text-uppercase border-bottom border-top-0">Price</th>
<th class="border-bottom border-top-0"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="d-flex align-items-center align-middle">
<a href="#"><img src="../assets/images/book.png" alt="" height="80" /></a>
<div class="ms-3">
<h5><a href="#" class="text-reset">Life Hack - Inspiring Motivatinal & Focused Success</a></h5>
<span class="badge bg-success-soft text-uppercase">In Stock</span>
</div>
</td>
<td class="text-dark align-middle">$16</td>
<td class="align-middle">
<a href="#" class="text-reset font-24"><i class="fe fe-x-circle"></i></a>
</td>
</tr>
<tr>
<td class="d-flex align-items-center align-middle border-bottom-0">
<a href="#"><img src="../assets/images/book-2.png" alt="" height="80" /></a>
<div class="ms-3">
<h5><a href="#" class="text-reset">Learn Foucs - Coach</a></h5>
<span class="badge bg-success-soft text-uppercase">In Stock</span>
</div>
</td>
<td class="text-dark align-middle">$20</td>
<td class="align-middle">
<a href="#" class="text-reset font-24"><i class="fe fe-x-circle"></i></a>
</td>
</tr>
</tbody>
</table>
<div class="p-4 border-top">
<div class="row">
<div class="col-lg-5 col-md-6 col-12 pe-0">
<label for="exampleFormControlCode" class="form-label">Email address</label>
<input type="text" class="form-control" placeholder="Coupon Code" id="exampleFormControlCode" name="exampleFormControlCode" />
</div>
<div class="col-lg-4 col-md-6 col-12 mt-2 mt-md-0">
<button class="btn btn-primary" type="button">Apply Coupon</button>
</div>
</div>
</div>
</div>
</div>
</div>Order Summary
Order summary
-
Subtotal
$16.00 -
Discount
$-2.00 -
Delivery
Free -
Tax
--- -
Total
$14.00
<div class="col-lg-4 col-md-8 col-12">
<div class="mb-4">
<h2 class="h4">Order summary</h2>
</div>
<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<h5 class="mb-0">Subtotal</h5>
<span>$16.00</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<h5 class="mb-0">Discount</h5>
<span class="text-success">$-2.00</span>
</li>
<li class="list-group-item p-3">
<div class=" d-flex justify-content-between align-items-center mb-4">
<h5 class="mb-0">Delivery</h5>
<span class="text-dark text-uppercase">Free</span>
</div>
<div class="form-check custom-radio mb-3">
<input type="radio" id="freeDelivery" name="customRadio" class="form-check-input" checked>
<label class="form-check-label" for="freeDelivery">
Free - Standard delivery<br><small>Shipment may take 5-6 business days.</small>
</label>
</div>
<div class="form-check custom-radio mb-3">
<input type="radio" id="expressDelivery" name="customRadio" class="form-check-input">
<label class="form-check-label" for="expressDelivery">$2.99 - Express delivery<br><small>Shipment may take 5-6 business days.</small></label>
</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<h5 class="mb-0">Tax</h5>
<span class="text-dark">---</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3">
<h5 class="mb-0">Total</h5>
<span class="text-primary">$14.00</span>
</li>
<li class="list-group-item p-3">
<div class="d-grid">
<a href="shop-checkout.html" type="button" class="btn btn-primary">Procees to checkout </a>
</div>
</li>
</ul>
</div>
</div>Checkout Form
Billing Address
<div class="card">
<!-- card header -->
<div class="card-header bg-white p-4">
<h4 class="mb-0">Billing Address</h4>
</div>
<!-- card body -->
<div class="card-body p-4">
<!-- form -->
<form class="row g-3 needs-validation" novalidate="">
<div class="col-12 col-lg-6 col-md-12">
<!-- label -->
<label class="form-label" for="checkoutFormName">First Name</label>
<!-- input -->
<input type="text" id="checkoutFormName" class="form-control" name="checkoutFormName" placeholder="First Name" required="" />
<div class="invalid-feedback">Please enter first name.</div>
</div>
<div class="col-12 col-lg-6 col-md-12">
<!-- label -->
<label class="form-label" for="checkoutFormLName">Last Name</label>
<!-- input -->
<input type="text" id="checkoutFormLName" class="form-control" name="checkoutFormLName" placeholder="Last Name" required="" />
<div class="invalid-feedback">Please enter last name.</div>
</div>
<div class="col-12 col-lg-6 col-md-12">
<!-- label -->
<label class="form-label" for="checkoutFromEmail">Email Address</label>
<!-- input -->
<input class="form-control" type="email" placeholder="Email here" id="checkoutFromEmail" name="checkoutFromEmail" required="" />
<div class="invalid-feedback">Please enter email.</div>
</div>
<div class="col-12 col-lg-6 col-md-12">
<!-- label -->
<label class="form-label" for="checkoutFromPhone">Phone</label>
<!-- input -->
<input type="text" id="checkoutFromPhone" class="form-control" placeholder="checkoutFromPhone" required="" />
<div class="invalid-feedback">Please enter phone number.</div>
</div>
<div class="col-12 col-lg-6 col-md-12">
<!-- label -->
<label class="form-label" for="checkoutFormAddress">Street Address</label>
<!-- input -->
<input type="text" id="checkoutFormAddress" class="form-control" placeholder="checkoutFormAddress" required="" />
<div class="invalid-feedback">Please enter street address.</div>
</div>
<div class="col-12 col-lg-6 col-md-12">
<!-- label -->
<label class="form-label" for="checkoutFormAddress1">Apt, suite, etc.</label>
<!-- input -->
<input type="text" id="checkoutFormAddress1" class="form-control" placeholder="checkoutFormAddress1" required="" />
<div class="invalid-feedback">Please enter address.</div>
</div>
<div class="col-12 col-lg-4 col-md-12">
<!-- label -->
<label for="checkoutSelectState" class="form-label">State</label>
<!-- select -->
<select class="form-select" id="checkoutSelectState" required="">
<option selected="" disabled="" value="">Select State</option>
<option value="Gujarat">Gujarat</option>
<option value="Rajshathan">Rajshathan</option>
<option value="Maharashtra">Maharashtra</option>
</select>
<div class="invalid-feedback">Please select state.</div>
</div>
<div class="col-12 col-lg-4 col-md-12">
<!-- label -->
<label for="checkoutSelectCountry" class="form-label">Country</label>
<!-- select -->
<select class="form-select" id="checkoutSelectCountry" required="">
<option selected="" disabled="" value="">Select Country</option>
<option value="India">India</option>
<option value="UK">UK</option>
<option value="USA">USA</option>
</select>
<div class="invalid-feedback">Please select country.</div>
</div>
<div class="col-12 col-lg-4 col-md-12">
<!-- label -->
<label class="form-label" for="checkoutZipcode">ZipCode</label>
<!-- input -->
<input type="text" id="checkoutZipcode" class="form-control" name="checkoutZipcode" placeholder="ex:000000" required="" />
<div class="invalid-feedback">Please enter zipcode.</div>
</div>
<div class="col-12">
<div class="form-check custom-checkbox mt-4 pt-4 border-top">
<!-- input -->
<input type="checkbox" class="form-check-input" id="CheckboxOne" required="" />
<!-- label -->
<label class="form-check-label" for="CheckboxOne">Shipping address is the same as my billing address</label>
<div id="invalidCheckFeedback1" class="invalid-feedback">You must agree.</div>
</div>
<div class="form-check custom-checkbox mb-3">
<!-- input -->
<input type="checkbox" class="form-check-input" id="CheckboxTwo" required="" />
<!-- label -->
<label class="form-check-label" for="CheckboxTwo">Save this information for next time</label>
<div id="invalidCheckFeedback2" class="invalid-feedback">You must agree.</div>
</div>
</div>
<div class="col-12">
<!-- heading -->
<div class="border-bottom mb-4 pt-4 pb-4">
<h4 class="mb-0">Payment Method</h4>
</div>
</div>
<div class="col-12 mb-4">
<div class="d-flex">
<div class="form-check">
<!-- input -->
<input type="radio" class="form-check-input" id="checkoutFormCredit" name="checkoutFormCredit" required="" />
<!-- label -->
<label class="form-check-label" for="checkoutFormCredit">Credit card</label>
</div>
<div class="form-check ms-3">
<!-- input -->
<input type="radio" class="form-check-input" id="checkoutFormDebit" name="checkoutFormDebit" required="" />
<!-- label -->
<label class="form-check-label" for="checkoutFormDebit">Debit card</label>
</div>
</div>
</div>
<div class="mb-3 col-12 col-lg-6 col-md-12">
<!-- label -->
<label for="checkoutFormCard" class="form-label">Name on card</label>
<!-- input -->
<input id="checkoutFormCard" type="text" class="form-control" name="checkoutFormCard" placeholder="Name" required="" />
<div class="invalid-feedback">Please enter name on card</div>
</div>
<div class="mb-3 col-lg-6 col-md-12">
<!-- label -->
<label for="checkoutFormNumber" class="form-label">Card Number</label>
<!-- input -->
<input type="text" class="form-control cc-inputmask" id="checkoutFormNumber" placeholder="xxxx-xxxx-xxxx-xxxx" required="" inputmode="text" />
<div class="invalid-feedback">Please enter card number</div>
</div>
<div class="mb-3 col-12 col-lg-4 col-md-6">
<!-- label -->
<label class="form-label" for="checkoutExpiration">Expiration</label>
<!-- select -->
<select class="form-select" id="checkoutExpiration" required="">
<option selected="" disabled="" value="">MM/YY</option>
<option value="09/20">09/20</option>
<option value="10/20">10/20</option>
<option value="11/20">11/20</option>
</select>
<div id="invalidCheckFeedback4" class="invalid-feedback">You select expiration.</div>
</div>
<div class="mb-3 col-lg-4 col-md-6">
<!-- label -->
<label for="cvv" class="form-label">
CVV Code
<i
class="fas fa-question-circle ms-1"
data-bs-toggle="tooltip"
data-bs-placement="top"
title=""
data-bs-original-title="A 3 - digit number, typically printed on the back of a card."
></i>
</label>
<input type="text" class="cvv form-control" name="cvv" id="cvv" placeholder="xxx" required="" inputmode="text" />
<div id="invalidCheckFeedback3" class="invalid-feedback">You enter cvv code.</div>
</div>
<div class="col-12">
<!-- button -->
<button class="btn btn-primary" type="submit">Continue to checkout</button>
</div>
</form>
</div>
</div>Empty Cart
Your shopping cart is empty
Return to the store to add items for your delivery slot. Before proceed to checkout you must add some products to your shopping cart. You will find a lot of interesting products on our shop page.
Explore Products<!--start shop empty-->
<section class="py-6 py-lg-8 py-xxl-16">
<div class="container">
<div class="row">
<div class="offset-lg-3 col-lg-6 col-md-12 col-12 text-center">
<img src="../assets/images/bag.svg" alt="bag" class="img-fluid mb-4" />
<h2>Your shopping cart is empty</h2>
<p class="mb-4">
Return to the store to add items for your delivery slot. Before proceed to checkout you must add some products to your shopping cart. You will find a lot of
interesting products on our shop page.
</p>
<a href="#" class="btn btn-primary">Explore Products</a>
</div>
</div>
</div>
</section>
<!--end of shop empty-->Order Completed
Your order is completed!
Thank you for your ordering. We recieved your order and will begin processing it soon withing 3 to 5 business days. You will receive an email confirmation when your order is completed.
Shopping More View Order<!--start order completed -->
<section class="py-6 py-lg-8 py-xxl-16">
<div class="container">
<div class="row">
<div class="offset-lg-3 col-lg-6 col-md-12 col-12 text-center">
<svg
class="mb-4 css-i6dzq1"
viewBox="0 0 24 24"
width="104"
height="104"
stroke="#16D570"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
<h2>Your order is completed!</h2>
<p class="mb-4">
Thank you for your ordering. We recieved your order and will begin processing it soon withing 3 to 5 business days. You will receive an email confirmation when your
order is completed.
</p>
<a href="#" class="btn btn-primary">Shopping More</a>
<a href="#" class="btn btn-info ms-2">View Order</a>
</div>
</div>
</div>
</section>
<!--end of order completed-->