Ecommerce

<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 badge-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 mr-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="ml-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 badge-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 mr-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="ml-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 badge-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 mr-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="ml-1">6</span>
                                                                        </div>
                                                                        <a href="#" class="btn btn-outline-primary btn-sm mt-3">Add to cart</a>
                                                                     </div>
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>

 <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 badge-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 ml-1">Rhianna Mcdougall</span></p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-12 col-12">
                                                                                <span class="text-dark mr-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="ml-1">6</span>
                                                                                </div>
                                                                                <a href="#!" class="btn btn-outline-primary btn-sm mr-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 ml-1 ">Maleeha Stanley</span></p>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-lg-4 col-md-12 col-12 ">
                                                                                <span class="text-dark mr-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="ml-1 ">6</span>
                                                                                </div>
                                                                                <a href="#! " class="btn btn-outline-primary btn-sm mr-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 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-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">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 pr-0">
                                                                                        <div class="font-12 text-dark">5 Star</div>
                                                                                    </div>
                                                                                    <div class="col-md-8 col-8 pr-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 pr-0">
                                                                                        <div class="font-12 text-dark">4 Star</div>
                                                                                    </div>
                                                                                    <div class="col-md-8 col-8 pr-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 pr-0">
                                                                                        <div class="font-12 text-dark">3 Star</div>
                                                                                    </div>
                                                                                    <div class="col-md-8 col-8 pr-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 pr-0">
                                                                                        <div class="font-12 text-dark">2 Star</div>
                                                                                    </div>
                                                                                    <div class="col-md-8 col-8 pr-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 pr-0">
                                                                                        <div class="font-12 text-dark">1 Star</div>
                                                                                    </div>
                                                                                    <div class="col-md-8 col-8 pr-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="#!" class="">See all customer reviews</a>
                                                                            </div>
                                                
                                                                        </div>
                                                                        <!-- rating -->
                                                                        <div>
                                                                            <span class="ml-2 font-12 text-dark"> 2,693 ratings</span>
                                                                            <span class="badge badge-success-soft text-uppercase ml-2">In Stock</span
                                                                        >
                                                                    </div>
                                                                </div>
                                                                        <hr class="my-4" />
                                                                        <div class="mb-3 font-20">
                                                                            <span class="text-dark mr-2">$16.99</span>
                                                                            <span class="text-muted"><s>$20.99</s></span>
                                                                        </div>
                                                                        <a href="shop-cart.html" class="btn btn-outline-primary mr-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 mr-1">Category:</span
                                                                            ><a href="#!" class="text-inherit ml-1">Motivational</a>
                                                                        </p>
                                                                        <p class="font-14">
                                                                            <span class="text-dark mr-1">Tags:</span
                                                                            ><a href="#!" class="text-inherit ml-1">life coach</a>,<a
                                                                                href="#!"
                                                                                class="text-inherit ml-1"
                                                                                >motivation</a
                                                                            >,<a href="#!" class="text-inherit ml-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>

<div class="row">
                                                            <div class="col-lg-3 col-md-5 col-12">
                                                               <div class="card rounded-lg mb-3">
                                                                  <div class="card-body p-4">
                                                                     <input id="price_ranger" type="text" value="">
                                                                  </div>
                                                               </div>
                                                               <div class="card rounded-lg 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="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="development">
                                                                              <label class="custom-control-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="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="motivational">
                                                                              <label class="custom-control-label" for="motivational">Motivational</label>
                                                                           </div>
                                                                           <div class="text-dark">
                                                                              1
                                                                           </div>
                                                                        </li>
                                                                        <li class="d-flex justify-content-between mb-2">
                                                                           <div class="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="lifeHack">
                                                                              <label class="custom-control-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="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="ceoCoach">
                                                                              <label class="custom-control-label" for="ceoCoach">CEO Coach</label>
                                                                           </div>
                                                                           <div class="text-dark">
                                                                              2
                                                                           </div>
                                                                        </li>
                                                                        <li class="d-flex justify-content-between">
                                                                           <div class="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="businessCoach">
                                                                              <label class="custom-control-label" for="businessCoach">Business Coach</label>
                                                                           </div>
                                                                           <div class="text-dark">
                                                                              1
                                                                           </div>
                                                                        </li>
                                                                     </ul>
                                                                  </div>
                                                               </div>
                                                               <div class="card rounded-lg 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="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="starOne">
                                                                              <label class="custom-control-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="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="starTwo">
                                                                              <label class="custom-control-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="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="starThree">
                                                                              <label class="custom-control-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="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="starFour">
                                                                              <label class="custom-control-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="custom-control custom-checkbox">
                                                                              <input type="checkbox" class="custom-control-input" id="starFive">
                                                                              <label class="custom-control-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>

<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-0 border-top-0">Product</th>
                                                                           <th class="text-uppercase border-bottom-0 border-top-0">Price</th>
                                                                           <th class="border-bottom-0 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="ml-3">
                                                                                 <h5><a href="#!" class="text-reset">Life Hack - Inspiring Motivatinal &amp; Focused Success</a></h5>
                                                                                 <span class="badge badge-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">
                                                                              <a href="#!"> <img src="../assets/images/book-2.png" alt="" class="" height="80"></a>
                                                                              <div class="ml-3">
                                                                                 <h5><a href="#!" class="text-reset">Learn Foucs - Coach</a></h5>
                                                                                 <span class="badge badge-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 pr-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>

<div class="row">
                                                                <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="custom-control custom-radio mb-3">
                                                                                    <input type="radio" id="freeDelivery" name="customRadio" class="custom-control-input" checked>
                                                                                    <label class="custom-control-label" for="freeDelivery">
                                   Free - Standard delivery<br><small>Shipment may take 5-6 business days.</small>
        
                                </label>
                                                                                </div>
                                                                                <div class="custom-control custom-radio mb-3">
                                                                                    <input type="radio" id="expressDelivery" name="customRadio" class="custom-control-input">
                                                                                    <label class="custom-control-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">
                                                                                <a href="shop-checkout.html" type="button" class="btn btn-primary btn-block">Procees to checkout </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
        
                                                                </div>
                                                            </div>

  <!-- card -->
                                                                <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="form-group col-12 col-lg-6 col-md-12">
                                                                                <label class="font-14 text-dark" for="fname">First Name</label>
                                                                                <input type="text" id="fname" class="form-control" placeholder="First Name" required />
                                                                            </div>
                                                                            <div class="form-group col-12 col-lg-6 col-md-12">
                                                                                <label class="font-14 text-dark" for="lname">Last Name</label>
                                                                                <input type="text" id="lname" class="form-control" placeholder="Last Name" required />
                                                                            </div>
                                                                            <div class="form-group col-12 col-lg-6 col-md-12">
                                                                                <label class="font-14 text-dark" for="email">Email Address</label>
                                                                                <input class="form-control " type="email" placeholder="Email here" id="email" name="email" />
                                                                            </div>
                                                                            <div class="form-group col-12 col-lg-6 col-md-12">
                                                                                <label class="font-14 text-dark" for="phone">Phone</label>
                                                                                <input type="text" id="phone" class="form-control" placeholder="Phone" required />
                                                                            </div>
                                            
                                                                            <div class="form-group col-12 col-lg-6 col-md-12">
                                                                                <label class="font-14 text-dark" for="address">Street Address</label
                                                                                    >
                                                                                    <input
                                                                                        type="text"
                                                                                        id="address"
                                                                                        class="form-control"
                                                                                        placeholder="Address"
                                                                                        required
                                                                                    />
                                                                                </div>
                                                                                <div class="form-group col-12 col-lg-6 col-md-12">
                                                                                    <label class="font-14 text-dark" for="address2"
                                                                                        >Apt, suite, etc.</label
                                                                                    >
                                                                                    <input
                                                                                        type="text"
                                                                                        id="address2"
                                                                                        class="form-control"
                                                                                        placeholder="Address"
                                                                                        required
                                                                                    />
                                                                                </div>
                                                                                <div class="form-group col-12 col-lg-4 col-md-12">
                                                                                    <label class="font-14 text-dark">State</label>
                                                                                <select class="custom-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="form-group col-12 col-lg-4 col-md-12">
                                                                                <label class="font-14 text-dark">Country</label>
                                                                                <select class="custom-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="form-group col-12 col-lg-4 col-md-12">
                                                                                <label class="font-14 text-dark" for="zipcode">ZipCode</label>
                                                                                <input type="text" id="zipcode" class="form-control" placeholder="ex:000000" required />
                                                                            </div>
                                                                            <div class=" mt-3 col-12">
                                                                                <div class="custom-control custom-checkbox">
                                                                                    <input type="checkbox" class="custom-control-input" id="CheckboxOne" />
                                                                                    <label class="custom-control-label" for="CheckboxOne">Shipping address is the same as my billing
                                                                                            address</label
                                                                                        >
                                                                                    </div>
                                                                                    <div class="custom-control custom-checkbox mb-3">
                                                                                        <input
                                                                                            type="checkbox"
                                                                                            class="custom-control-input"
                                                                                            id="CheckboxTwo"
                                                                                        />
                                                                                        <label class="custom-control-label" for="CheckboxTwo"
                                                                                            >Save this information for next time</label
                                                                                        >
                                                                                    </div>
                                                                                </div>
                                                                            
                                                                    
                                                                            <div class="border-bottom pb-3 mt-4 mb-4 col-12 ">
                                                                                <h4 class="mb-0">Payment Method</h4>
                                                                            </div>
                                                                            <div class="col-12 mb-4">
                                                                            <div
                                                                                class="custom-control custom-radio custom-control-inline mr-1"
                                                                            >
                                                                                <input
                                                                                    type="radio"
                                                                                    id="paymentRadioOne"
                                                                                    name="paymentRadioOne"
                                                                                    class="custom-control-input" checked
                                                                                />
                                                                                <label class="custom-control-label" for="paymentRadioOne"
                                                                                    >Credit card</label
                                                                                >
                                                                            </div>
                                                                            <div
                                                                                class="custom-control custom-radio custom-control-inline mr-1"
                                                                            >
                                                                                <input
                                                                                    type="radio"
                                                                                    id="paymentRadioTwo"
                                                                                    name="paymentRadioOne"
                                                                                    class="custom-control-input"
                                                                                />
                                                                                <label class="custom-control-label" for="paymentRadioTwo"
                                                                                    >Debit card</label
                                                                                >
                                                                            </div>
                                                                        </div>
                                            
                                                                            
                                                                                <div class="form-group col-12 col-lg-6 col-md-12">
                                                                                    <label for="nameoncard" class="text-dark "
                                                                                        >Name on card</label
                                                                                    >
                                                                                    <input
                                                                                        id="nameoncard"
                                                                                        type="text"
                                                                                        class="form-control"
                                                                                        name="nameoncard"
                                                                                        placeholder="Name" required
                                                                                    />
                                                                                </div>
                                                                                <div class="form-group col-lg-6 col-md-12">
                                                                                    <label for="cc-mask" class="text-dark ">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="form-group col-12 col-lg-4 col-md-6">
                                                                                    <label class="font-14 text-dark">Expiration</label>
                                                                                    <select class="custom-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="form-group col-lg-4 col-md-6">
                                                                                    <div class="form-group">
                                                                                        <label for="cvv" class="text-dark ">CVV Code
                                                                                            <i
                                                                                                class="fas fa-question-circle ml-1"
                                                                                                data-toggle="tooltip"
                                                                                                data-placement="top"
                                                                                                title=""
                                                                                                data-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>
                                            
                                                                                <div class="col-12">
                                                                                    <button class="btn btn-primary" type="submit">
                                                                                        Continue to checkout
                                                                                    </button>
                                                                                </div>
                                                                        </form>
                                                                        </div>
                                                                    </div>

<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>

<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 ml-2">View Order</a>
                                                            </div>
                                                         </div>