Ecommerce

Grid

New

Life Hack - Coach

Rhianna Mcdougall

$16.99$20.99
6
Add to cart
Sale!

Learn Foucs - Coach

Maleeha Stanley

$20.99$20.99
6
Add to cart
New

Executive Focus

Arandeep Woodcock

$19.99$20.99
6
Add to cart 
<div class="row">
                                                            <div class="col-lg-4 col-md-6 col-12">
                                                               <div class="card mb-4">
                                                                  <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="" 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>
                                                            <div class="col-lg-4 col-md-6 col-12">
                                                               <div class="card mb-4">
                                                                  <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="" 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>
                                                            <div class="col-lg-4 col-md-6 col-12">
                                                               <div class="card mb-4">
                                                                  <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="" 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

Executive Focus - Focused Success

AuthorRhianna Mcdougall

$16.99$20.99
6
Add to cart

Effective Coach Focused Success

AuthorMaleeha Stanley

$20.99$30.99
6
Add to cart 
 <div class="row">
                                                            <div class="col-lg-12 col-md-12 col-12">
                                                                <div class="card mb-4">
                                                                    <div class="card-body">
                                                                        <div class="row align-items-center">
                                                                            <div class="col-lg-4 col-md-12 col-12 text-center">
                                                                                <div class="position-relative">
                                                                                    <div class="badge bg-primary-soft position-absolute left-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-12 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>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-12 col-12">
                                                                                <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 class="col-lg-12 col-md-12 col-12">
                                                                <div class="card">
                                                                    <div class="card-body">
                                                                        <div class="row align-items-center">

                                                                            <div class="col-lg-4 col-md-12 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-12 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>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-12 col-12 ">
                                                                                <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>

Product Details

Life Hack - Inspiring Motivatinal & Focused Success

by Greg McKeown

4.6 out of 5

2,693 customer ratings

5 Star
78%
4 Star
12%
3 Star
5%
2 Star
2%
1 Star
1%
See all customer reviews
2,693 ratings In Stock
$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, 2020)
  • 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. 

    <div class="row align-items-center">
                                                                <!-- image -->
                                                                <div class="col-lg-4 col-md-4 col-12">
                                                                    <img src="../assets/images/book.png" alt="" 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">
                                                                        <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, 2020)
                                                                            </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>
                                                                    <!-- 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>

Product Sidebar

Category

  • 2
  • 1
  • 3
  • 2
  • 1

Rating

  • 1
  • 4
  • 8
  • 23
  • 213 
<div class="row">
                                                            <div class="col-lg-3 col-md-5 col-12">
                                                               <div class="card rounded-3 mb-3">
                                                                  <div class="card-body p-4">
                                                                     <input id="price_ranger" type="text" value="">
                                                                  </div>
                                                               </div>
                                                               <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>
                                                               <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">
                                                                        <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>
                                                                        <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>
                                                                        <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>
                                                                        <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>
                                                                        <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
Life Hack - Inspiring Motivatinal & Focused Success
In Stock
$16
Learn Foucs - Coach
In 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="" class="" height="80"></a>
                                                                              <div class="ms-3">
                                                                                 <h5><a href="#" class="text-reset">Life Hack - Inspiring Motivatinal &amp; 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="" class="" 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">
                                                                           <input type="text" class="form-control" placeholder="Coupon Code">
                                                                        </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
  • Procees to checkout 
<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

Payment Method

<div class="card mb-4">
                                                                <!-- 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">
                                                                      <div class="mb-3 col-12 col-lg-6 col-md-12">
                                                                         <label class=" form-label" for="fname">First Name</label>
                                                                         <input type="text" id="fname" class="form-control" placeholder="First Name" required>
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-6 col-md-12">
                                                                         <label class=" form-label" for="lname">Last Name</label>
                                                                         <input type="text" id="lname" class="form-control" placeholder="Last Name" required>
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-6 col-md-12">
                                                                         <label class=" form-label" for="email">Email Address</label>
                                                                         <input class="form-control " type="email" placeholder="Email here" id="email" name="email" />
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-6 col-md-12">
                                                                         <label class=" form-label" for="phone">Phone</label>
                                                                         <input type="text" id="phone" class="form-control" placeholder="Phone" required>
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-6 col-md-12">
                                                                         <label class=" form-label" for="address">Street Address</label
                                                                            >
                                                                         <input
                                                                            type="text"
                                                                            id="address"
                                                                            class="form-control"
                                                                            placeholder="Address"
                                                                            required
                                                                            />
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-6 col-md-12">
                                                                         <label class=" form-label" for="address2"
                                                                            >Apt, suite, etc.</label
                                                                            >
                                                                         <input
                                                                            type="text"
                                                                            id="address2"
                                                                            class="form-control"
                                                                            placeholder="Address"
                                                                            required
                                                                            />
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-4 col-md-12">
                                                                         <label class=" form-label">State</label>
                                                                         <select class="form-select">
                                                                            <option selected>Select State</option>
                                                                            <option value="1">Gujarat</option>
                                                                            <option value="2">Rajshathan</option>
                                                                            <option value="3">Maharashtra</option>
                                                                         </select>
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-4 col-md-12">
                                                                         <label class="form-label">Country</label>
                                                                         <select class="form-select">
                                                                            <option selected>Select Country</option>
                                                                            <option value="1">India</option>
                                                                            <option value="2">UK</option>
                                                                            <option value="3">USA</option>
                                                                         </select>
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-4 col-md-12">
                                                                         <label class=" form-label" for="zipcode">ZipCode</label>
                                                                         <input type="text" id="zipcode" class="form-control" placeholder="ex:000000" required />
                                                                      </div>
                                                                      <div class="col-12">
                                                                         <div class="form-check custom-checkbox  mt-4 pt-4  border-top">
                                                                            <input type="checkbox" class="form-check-input" id="CheckboxOne" />
                                                                            <label class="form-check-label" for="CheckboxOne">Shipping address is the same as my billing
                                                                            address</label
                                                                               >
                                                                         </div>
                                                                         <div class="form-check custom-checkbox mb-3">
                                                                            <input
                                                                               type="checkbox"
                                                                               class="form-check-input"
                                                                               id="CheckboxTwo"
                                                                               />
                                                                            <label class="form-check-label" for="CheckboxTwo"
                                                                               >Save this information for next time</label
                                                                               >
                                                                         </div>
                                                                      </div>
                                                                      <div class="col-12 ">
                                                                         <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="form-check custom-radio form-check-inline me-1"
                                                                            >
                                                                            <input
                                                                               type="radio"
                                                                               id="paymentRadioOne"
                                                                               name="paymentRadioOne"
                                                                               class="form-check-input" checked
                                                                               />
                                                                            <label class="form-check-label" for="paymentRadioOne"
                                                                               >Credit card</label
                                                                               >
                                                                         </div>
                                                                         <div
                                                                            class="form-check custom-radio form-check-inline me-1"
                                                                            >
                                                                            <input
                                                                               type="radio"
                                                                               id="paymentRadioTwo"
                                                                               name="paymentRadioOne"
                                                                               class="form-check-input"
                                                                               />
                                                                            <label class="form-check-label" for="paymentRadioTwo"
                                                                               >Debit card</label
                                                                               >
                                                                         </div>
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-6 col-md-12">
                                                                         <label for="nameoncard" class="form-label "
                                                                            >Name on card</label
                                                                            >
                                                                         <input
                                                                            id="nameoncard"
                                                                            type="text"
                                                                            class="form-control"
                                                                            name="nameoncard"
                                                                            placeholder="Name" required
                                                                            />
                                                                      </div>
                                                                      <div class="mb-3 col-lg-6 col-md-12">
                                                                         <label for="cc-mask" class="form-label ">Card Number</label>
                                                                         <input type="text" class="form-control cc-inputmask" id="cc-mask" inputmode="text" placeholder="xxxx-xxxx-xxxx-xxxx" required />
                                                                      </div>
                                                                      <div class="mb-3 col-12 col-lg-4 col-md-6">
                                                                         <label class="form-label">Expiration</label>
                                                                         <select class="form-select">
                                                                            <option selected>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>
                                                                      <div class="mb-3 col-lg-4 col-md-6">
                                                                         <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="password" class="cc-inputmask form-control" name="cvv" id="cvv" placeholder="xxx" maxlength="3" required />
                                                                      </div>
                                                                      <div class="col-12">
                                                                         <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 
<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="" class="img-fluid mb-4">
                                                               <h2>Your shopping cart is empty</h2>
                                                               <p>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>

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 
<div class="row">
                                                            <div class="offset-lg-3 col-lg-6 col-md-12 col-12 text-center">
                                                               <svg class="mb-4" 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-3">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>

Design & Developed by Codescandy

Support