Category: Bootstrap 5

Vue 3 Single Page Ecommerce Template Free

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Single Page Ecommerce Template Free.

Guy’s in this post, we will do below things:

Bootstrap 5 Vue 3 Free Template Creation.
Vue 3 Bootstrap 5 Responsive Navbar.
Bootstrap 5 Carousel Slider in Vue 3.

Vuejs Free Templates

Vue 3 came and if you are new then you must check below link:
Vuejs Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can ~~skip~~ this first step if you already have vuejs fresh setup:

npm install -g @vue/cli

vue create vuetemplate

cd vuetemplate

npm run serve //http://localhost:8080/

2. Now friends, please download zip(in this zip file there are js, css, fonts and images for website template) file from below path and extract zip and get all the folders.

Create ‘assets’ folder inside vuetemplate/public folder.

Now please put that folders(which we will get from zip file) in “vuetemplate/public/assets” folder.

https://therichpost.com/jassashop2.zip

3. Now friends please add below inside vuetemplate/public/index.html file:

...
  <head>
  ...
    <!-- ===============================================-->
    <!--    Stylesheets-->
    <!-- ===============================================-->
    <link href="assets/css/theme.min.css" rel="stylesheet" />    
    <!-- ===============================================-->
    <!--    JavaScripts-->
    <!-- ===============================================-->
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    
    <script src="assets/js/theme.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet">
  </head>
 ...

4. Finally friends we need to add below code into our vuetemplate/src/App.vue file to get final output on web browser:

<template>
  <!-- ===============================================-->
   <!--    Main Content-->
   <!-- ===============================================-->
   <main class="main" id="top">
     <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll">
       <div class="container"><a class="navbar-brand d-inline-flex" href="#"><img class="d-inline-block" src="assets/img/gallery/logo.png" alt="logo" /><span class="text-1000 fs-0 fw-bold ms-2">Jassa</span></a><button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
         <div class="collapse navbar-collapse border-top border-lg-0 mt-4 mt-lg-0" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item px-2"><a class="nav-link fw-medium active" aria-current="page" href="#categoryWomen">Women</a></li>
             <li class="nav-item px-2"><a class="nav-link fw-medium" href="#header">Men</a></li>
             <li class="nav-item px-2"><a class="nav-link fw-medium" href="#collection">Collection</a></li>
             <li class="nav-item px-2"><a class="nav-link fw-medium" href="#outlet">Outlet</a></li>
           </ul>
           <form class="d-flex"><a class="text-1000" href="#!"><svg class="feather feather-phone me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
               </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-shopping-cart me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="9" cy="21" r="1"></circle>
                 <circle cx="20" cy="21" r="1"></circle>
                 <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
               </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-search me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="11" cy="11" r="8"></circle>
                 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
               </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-user me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                 <circle cx="12" cy="7" r="4"></circle>
               </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-heart me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
               </svg></a></form>
         </div>
       </div>
     </nav>
     <section class="py-11 bg-light-gradient border-bottom border-white border-5">
       <div class="bg-holder overlay overlay-light" style="background-image:url(assets/img/gallery/header-bg.png);background-size:cover;"></div>
       <!--/.bg-holder-->
       <div class="container">
         <div class="row flex-center">
           <div class="col-12 mb-10">
             <div class="d-flex align-items-center flex-column">
               <h1 class="fw-normal"> With an outstanding style, only for you</h1>
               <h1 class="fs-4 fs-lg-8 fs-md-6 fw-bold">Exclusively designed for you</h1>
             </div>
           </div>
         </div>
       </div>
     </section>

     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0" id="header" style="margin-top: -23rem !important;">
       <div class="container">
         <div class="row g-0">
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"> <img class="img-fluid" src="assets/img/gallery/her.png" width="790" alt="..." />
               <div class="card-img-overlay d-flex flex-center"> <a class="btn btn-lg btn-light" href="#!">For Her</a></div>
             </div>
           </div>
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"> <img class="img-fluid" src="assets/img/gallery/him.png" width="790" alt="..." />
               <div class="card-img-overlay d-flex flex-center"> <a class="btn btn-lg btn-light" href="#!">For Him </a></div>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->



     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0">
       <div class="container">
         <div class="row h-100">
           <div class="col-lg-7 mx-auto text-center mt-7 mb-5">
             <h5 class="fw-bold fs-3 fs-lg-5 lh-sm">Best Deals</h5>
           </div>
           <div class="col-12">
             <div class="carousel slide" id="carouselBestDeals" data-bs-touch="false" data-bs-interval="false">
               <div class="carousel-inner">
                 <div class="carousel-item active" data-bs-interval="10000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="5000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="3000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselBestDeals" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselBestDeals" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
               </div>
             </div>
           </div>
           <div class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->



     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section>
       <div class="container">
         <div class="row h-100 g-0">
           <div class="col-md-6">
             <div class="bg-300 p-4 h-100 d-flex flex-column justify-content-center">
               <h4 class="text-800">Exclusive collection 2021</h4>
               <h1 class="fw-semi-bold lh-sm fs-4 fs-lg-5 fs-xl-6">Be exclusive</h1>
               <p class="mb-5 fs-1">The best everyday option in a Super Saver range within a reasonable price. It is our responsibility to keep you 100 percent stylish. Be smart &amp; , trendy with us.</p>
               <div class="d-grid gap-2 d-md-block"><a class="btn btn-lg btn-dark" href="#" role="button">Explore</a></div>
             </div>
           </div>
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/outfit.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">Outfit<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                     </svg></a></div>
               </div>
             </div>
           </div>
         </div>
         <div class="row h-100 g-2 py-1">
           <div class="col-md-4">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/vanity-bag.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">Vanity Bags<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                     </svg></a></div>
               </div>
             </div>
           </div>
           <div class="col-md-4">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/hat.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">Hats<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                     </svg></a></div>
               </div>
             </div>
           </div>
           <div class="col-md-4">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/high-heels.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">High Heels<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                     </svg></a></div>
               </div>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->

     <section class="py-0">
       <div class="container">
         <div class="row h-100">
           <div class="col-lg-7 mx-auto text-center mb-6">
             <h5 class="fs-3 fs-lg-5 lh-sm mb-3">Checkout New Arrivals</h5>
           </div>
           <div class="col-12">
             <div class="carousel slide" id="carouselNewArrivals" data-bs-ride="carousel">
               <div class="carousel-inner">
                 <div class="carousel-item active" data-bs-interval="10000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Flat Hill Slingback</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Ocean Blue Ring</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Brown Leathered Wallet</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Silverside Wristwatch</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="5000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Flat Hill Slingback</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Ocean Blue Ring</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Brown Leathered Wallet</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Silverside Wristwatch</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="3000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Flat Hill Slingback</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Ocean Blue Ring</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Brown Leathered Wallet</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Silverside Wristwatch</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Flat Hill Slingback</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Ocean Blue Ring</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Brown Leathered Wallet</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Silverside Wristwatch</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselNewArrivals" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselNewArrivals" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>
     
     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section id="collection">
       <div class="container">
         <div class="row h-100 gx-2">
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/urban.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="p-5 p-md-2 p-xl-5">
                   <h1 class="fs-md-4 fs-lg-7 text-light">Urban Stories </h1>
                   <h5 class="fs-2 text-light">collection</h5>
                 </div>
               </div><a class="stretched-link" href="#!"></a>
             </div>
           </div>
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/country.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="p-5 p-md-2 p-xl-5 d-flex flex-column flex-end-center align-items-baseline h-100">
                   <h1 class="fs-md-4 fs-lg-7 text-light">Urban Stories </h1>
                   <h5 class="fs-2 text-light">collection</h5>
                 </div>
               </div><a class="stretched-link" href="#!"></a>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->

     <section>
       <div class="container">
         <div class="row h-100">
           <div class="col-lg-7 mx-auto text-center mb-6">
             <h5 class="fw-bold fs-3 fs-lg-5 lh-sm mb-3">Best Sellers</h5>
           </div>
           <div class="col-12">
             <div class="carousel slide" id="carouselBestSellers" data-bs-touch="false" data-bs-interval="false">
               <div class="carousel-inner">
                 <div class="carousel-item active" data-bs-interval="10000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="5000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="3000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselBestSellers" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselBestSellers" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>

     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0" id="outlet">
       <div class="container">
         <div class="row h-100 g-0">
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/summer.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient rounded-0">
                 <div class="p-5 p-md-2 p-xl-5 d-flex flex-column flex-end-center align-items-baseline h-100">
                   <h1 class="fs-md-4 fs-lg-7 text-light">Summer of '21 </h1>
                 </div>
               </div><a class="stretched-link" href="#!"></a>
             </div>
           </div>
           <div class="col-md-6 h-100">
             <div class="row h-100 g-0">
               <div class="col-md-6 h-100">
                 <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sunglasses.png" alt="..." />
                   <div class="card-img-overlay bg-dark-gradient rounded-0">
                     <div class="p-5 p-xl-5 p-md-0">
                       <h3 class="text-light">Sunglasses</h3>
                     </div>
                   </div><a class="stretched-link" href="#!"></a>
                 </div>
               </div>
               <div class="col-md-6">
                 <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/footwear.png" alt="..." />
                   <div class="card-img-overlay bg-dark-gradient rounded-0">
                     <div class="p-5 p-xl-5 p-md-0">
                       <h3 class="text-light">Footwear</h3>
                     </div>
                   </div><a class="stretched-link" href="#!"></a>
                 </div>
               </div>
               <div class="col-md-6">
                 <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/hat-black-border.png" alt="..." />
                   <div class="card-img-overlay bg-dark-gradient rounded-0">
                     <div class="p-5 p-xl-5 p-md-0">
                       <h3 class="text-light">Hat</h3>
                     </div>
                   </div><a class="stretched-link" href="#!"></a>
                 </div>
               </div>
               <div class="col-md-6">
                 <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/watches.png" alt="..." />
                   <div class="card-img-overlay bg-dark-gradient rounded-0">
                     <div class="p-5 p-xl-5 p-md-0">
                       <h3 class="text-light">Watches</h3>
                     </div>
                   </div><a class="stretched-link" href="#!"> </a>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->



     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section>
       <div class="container">
         <div class="row h-100 g-0">
           <div class="col-md-6">
             <div class="bg-300 p-4 h-100 d-flex flex-column justify-content-center">
               <h1 class="fw-semi-bold lh-sm fs-4 fs-lg-5 fs-xl-6">Gentle Formal Looks </h1>
               <p class="mb-5 fs-1">We provide the top formal apparel package to make your job look confident and comfortable. Stay connect.</p>
               <div class="d-grid gap-2 d-md-block"><a class="btn btn-lg btn-dark" href="#!" role="button">Explore Collection</a></div>
             </div>
           </div>
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sharp-dress.png" alt="..." /><a class="stretched-link" href="#!"></a></div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->



     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0 pb-8">
       <div class="container-fluid container-lg">
         <div class="row h-100 g-2 justify-content-center">
           <div class="col-sm-9 col-md-4 mb-3 mb-md-0 h-100">
             <div class="card card-span text-white h-100"><img class="img-card h-100" src="assets/img/gallery/shoes-blog-1.png" alt="..." />
               <div class="card-body px-xl-5 px-md-3 pt-0 pb-7">
                 <div class="d-flex justify-content-between align-items-center bg-100 mt-n5 me-auto"><img src="assets/img/gallery/author-1.png" width="60" alt="..." />
                   <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i data-feather="eye"> </i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i data-feather="heart"> </i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i data-feather="corner-up-right"> </i><span class="text-900 ms-2">14</span></span></div>
                 </div>
                 <h6 class="text-900 mt-3">Kelly Hudson . <span class="fw-normal">Fashion actiKelly Hudson . </span></h6>
                 <h3 class="fw-bold text-1000 mt-5 text-truncate">How important are shoes in your style?</h3>
                 <p class="text-900 mt-3">Is it possible to assess a person just on the basis of their footwear? Obviously, nobody should criticize, but certainly, shoes say a lot about someone. It matters for the outsiders that we meet every day...</p><a class="btn btn-lg text-900 fs-1 px-0 hvr-icon-forward" href="#!" role="button">Read more<svg class="bi bi-arrow-right-short hover-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                     <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                   </svg></a>
               </div>
             </div>
           </div>
           <div class="col-sm-9 col-md-4 mb-3 mb-md-0 h-100">
             <div class="card card-span text-white h-100"><img class="img-card h-100" src="assets/img/gallery/fashion-blog-2.png" alt="..." />
               <div class="card-body px-xl-5 px-md-3 pt-0 pb-7">
                 <div class="d-flex justify-content-between align-items-center bg-100 mt-n5 me-auto"><img src="assets/img/gallery/author-2.png" width="60" alt="..." />
                   <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i data-feather="eye"> </i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i data-feather="heart"> </i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i data-feather="corner-up-right"> </i><span class="text-900 ms-2">14</span></span></div>
                 </div>
                 <h6 class="text-900 mt-3">Rotondwa Johnny . <span class="fw-normal">Fashion activist </span></h6>
                 <h3 class="fw-bold text-1000 mt-5 text-truncate">Fashion trend forecast for Summer 2021</h3>
                 <p class="text-900 mt-3">While the fashion industry has had a calm year, this season has seen some beautiful pieces. Over the previous several weeks, commanding coats, and elegant face masks have ruled Fashion Weeks...</p><a class="btn btn-lg text-900 fs-1 px-0 hvr-icon-forward" href="#!" role="button">Read more<svg class="bi bi-arrow-right-short hover-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                     <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                   </svg></a>
               </div>
             </div>
           </div>
           <div class="col-sm-9 col-md-4 mb-3 mb-md-0 h-100">
             <div class="card card-span text-white h-100"><img class="img-card h-100" src="assets/img/gallery/spring-dress-blog-3.png" alt="..." />
               <div class="card-body px-xl-5 px-md-3 pt-0 pb-7">
                 <div class="d-flex justify-content-between align-items-center bg-100 mt-n5 me-auto"><img src="assets/img/gallery/author-3.png" width="60" alt="..." />
                   <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i data-feather="eye"> </i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i data-feather="heart"> </i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i data-feather="corner-up-right"> </i><span class="text-900 ms-2">14</span></span></div>
                 </div>
                 <h6 class="text-900 mt-3">Martin . <span class="fw-normal">Fashion activist </span></h6>
                 <h3 class="fw-bold text-1000 mt-5 text-truncate">Spring exclusive collection for Men &amp; Women</h3>
                 <p class="text-900 mt-3">Explore the first real-time photographic fashion magazine NOWFASHION to broadcast exclusive live fashion shows. Some of the most beautiful spring collection i want to share. See the....</p><a class="btn btn-lg text-900 fs-1 px-0 hvr-icon-forward" href="#!" role="button">Read more<svg class="bi bi-arrow-right-short hover-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                     <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                   </svg></a>
               </div>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->

     <section class="py-11">
       <div class="bg-holder overlay overlay-0" style="background-image:url(assets/img/gallery/cta.png);background-position:center;background-size:cover;"></div>
       <!--/.bg-holder-->
       <div class="container">
         <div class="row">
           <div class="col-12">
             <div class="carousel slide carousel-fade" id="carouseCta" data-bs-ride="carousel">
               <div class="carousel-inner">
                 <div class="carousel-item active" data-bs-interval="10000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-12">
                       <div class="text-light text-center py-2">
                         <h5 class="display-4 fw-normal text-400 fw-normal mb-4">visit our Outlets in</h5>
                         <h1 class="display-1 text-white fw-normal mb-8">London</h1><a class="btn btn-lg text-light fs-1" href="#!" role="button">See Addresses<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                             <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                           </svg></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="5000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-12">
                       <div class="text-light text-center py-2">
                         <h5 class="display-4 fw-normal text-400 fw-normal mb-4">visit our Outlets in</h5>
                         <h1 class="display-1 text-white fw-normal mb-8">Bristol</h1><a class="btn btn-lg text-light fs-1" href="#!" role="button">See Addresses<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                             <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                           </svg></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="3000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-12">
                       <div class="text-light text-center py-2">
                         <h5 class="display-4 fw-normal text-400 fw-normal mb-4">visit our Outlets in</h5>
                         <h1 class="display-1 text-white fw-normal mb-8">Birmingham</h1><a class="btn btn-lg text-light fs-1" href="#!" role="button">See Addresses<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                             <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                           </svg></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouseCta" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouseCta" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>

     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0 pt-7">
       <div class="container">
         <div class="row">
           <div class="col-6 col-lg-2 mb-3">
             <h5 class="lh-lg fw-bold text-1000">Company Info</h5>
             <ul class="list-unstyled mb-md-4 mb-lg-0">
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">About Us</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Affiliate</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Fashion Blogger</a></li>
             </ul>
           </div>
           <div class="col-6 col-lg-2 mb-3">
             <h5 class="lh-lg fw-bold text-1000">Help &amp; Support</h5>
             <ul class="list-unstyled mb-md-4 mb-lg-0">
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Shipping Info</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Refunds</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">How to Order</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">How to Track</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Size Guides</a></li>
             </ul>
           </div>
           <div class="col-6 col-lg-2 mb-3">
             <h5 class="lh-lg fw-bold text-1000">Customer Care</h5>
             <ul class="list-unstyled mb-md-4 mb-lg-0">
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Contact Us</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Payment Methods</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Bonus Point</a></li>
             </ul>
           </div>
           <div class="col-sm-6 col-lg-auto ms-auto">
             <h5 class="lh-lg fw-bold text-1000">Signup For The Latest News</h5>
             <div class="row input-group-icon mb-5">
               <div class="col-12"><input class="form-control input-box" type="email" placeholder="Enter Email" aria-label="email" /><svg class="bi bi-arrow-right-short input-box-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="#424242" viewBox="0 0 16 16">
                   <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                 </svg></div>
             </div>
             <p class="text-800"><svg class="feather feather-phone me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
               </svg><span class="text-800">+0000000000</span></p>
             <p class="text-800"><svg class="feather feather-mail me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                 <polyline points="22,6 12,13 2,6"></polyline>
               </svg><span class="text-800">therichposts@gmail.com</span></p>
           </div>
         </div>
         <div class="border-bottom border-3"></div>
         <div class="row flex-center my-3">
           <div class="col-md-6 order-1 order-md-0">
             <p class="my-2 text-1000 text-center text-md-start"> Made with <svg class="bi bi-suit-heart-fill" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="#EB6453" viewBox="0 0 16 16">
                 <path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"></path>
               </svg> by <a class="text-800" href="https://therichpost.com/" target="_blank">Jassa </a></p>
           </div>
           <div class="col-md-6">
             <div class="text-center text-md-end"><a href="#!"><span class="me-4" data-feather="facebook"></span></a><a href="#!"> <span class="me-4" data-feather="instagram"></span></a><a href="#!"> <span class="me-4" data-feather="youtube"></span></a><a href="#!"> <span class="me-4" data-feather="twitter"></span></a></div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->

   </main><!-- ===============================================-->
   <!--    End of Main Content-->
   <!-- ===============================================-->
</template>

<script>


export default {
  //
}
</script>

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

June 3, 2021

Angular 12 Best Ecommerce Template Free Download

Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 12 Best Ecommerce Template Free Download

In this post, guys we will cover below things:

Bootstrap 5 Angular 12 Free Template Creation.
Angular 12 Bootstrap 5 Responsive Navbar.
Bootstrap 5 Carousel Slider in Angular 12.

Angular Bootstrap Responsive Template

Angular12 came and Bootstrap5 also and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angularboot5 //Create new Angular Project

cd angularboot5 // Go inside the Angular Project Folder

2. Now friends, please download zip(in this zip file there are js, css and images for angular ecommerce template) file from below path and extract zip and please put all the zip file folders in “src/assets” folder(which we will get from zip file):

https://therichpost.com/jassashop2.zip

3. Now friends we just need to add below code into angularboot5/src/app/app.component.html file to get final out on the web browser:

<!-- ===============================================-->
   <!--    Main Content-->
   <!-- ===============================================-->
   <main class="main" id="top">
     <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll">
       <div class="container"><a class="navbar-brand d-inline-flex" href="#"><img class="d-inline-block" src="assets/img/gallery/logo.png" alt="logo" /><span class="text-1000 fs-0 fw-bold ms-2">Jassa</span></a><button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
         <div class="collapse navbar-collapse border-top border-lg-0 mt-4 mt-lg-0" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item px-2"><a class="nav-link fw-medium active" aria-current="page" href="#categoryWomen">Women</a></li>
             <li class="nav-item px-2"><a class="nav-link fw-medium" href="#header">Men</a></li>
             <li class="nav-item px-2"><a class="nav-link fw-medium" href="#collection">Collection</a></li>
             <li class="nav-item px-2"><a class="nav-link fw-medium" href="#outlet">Outlet</a></li>
           </ul>
           <form class="d-flex"><a class="text-1000" href="#!"><svg class="feather feather-phone me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
               </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-shopping-cart me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="9" cy="21" r="1"></circle>
                 <circle cx="20" cy="21" r="1"></circle>
                 <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
               </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-search me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="11" cy="11" r="8"></circle>
                 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
               </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-user me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                 <circle cx="12" cy="7" r="4"></circle>
               </svg></a><a class="text-1000" href="#!"> <svg class="feather feather-heart me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
               </svg></a></form>
         </div>
       </div>
     </nav>
     <section class="py-11 bg-light-gradient border-bottom border-white border-5">
       <div class="bg-holder overlay overlay-light" style="background-image:url(assets/img/gallery/header-bg.png);background-size:cover;"></div>
       <!--/.bg-holder-->
       <div class="container">
         <div class="row flex-center">
           <div class="col-12 mb-10">
             <div class="d-flex align-items-center flex-column">
               <h1 class="fw-normal"> With an outstanding style, only for you</h1>
               <h1 class="fs-4 fs-lg-8 fs-md-6 fw-bold">Exclusively designed for you</h1>
             </div>
           </div>
         </div>
       </div>
     </section>

     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0" id="header" style="margin-top: -23rem !important;">
       <div class="container">
         <div class="row g-0">
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"> <img class="img-fluid" src="assets/img/gallery/her.png" width="790" alt="..." />
               <div class="card-img-overlay d-flex flex-center"> <a class="btn btn-lg btn-light" href="#!">For Her</a></div>
             </div>
           </div>
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"> <img class="img-fluid" src="assets/img/gallery/him.png" width="790" alt="..." />
               <div class="card-img-overlay d-flex flex-center"> <a class="btn btn-lg btn-light" href="#!">For Him </a></div>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->



     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0">
       <div class="container">
         <div class="row h-100">
           <div class="col-lg-7 mx-auto text-center mt-7 mb-5">
             <h5 class="fw-bold fs-3 fs-lg-5 lh-sm">Best Deals</h5>
           </div>
           <div class="col-12">
             <div class="carousel slide" id="carouselBestDeals" data-bs-touch="false" data-bs-interval="false">
               <div class="carousel-inner">
                 <div class="carousel-item active" data-bs-interval="10000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="5000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="3000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/flat-hill.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Flat Hill Slingback</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/blue-ring.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Ocean Blue Ring</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wallet.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Brown Leathered Wallet</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/wrist-watch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Silverside Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$200</span><span class="text-primary">$175</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselBestDeals" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselBestDeals" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
               </div>
             </div>
           </div>
           <div class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->



     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section>
       <div class="container">
         <div class="row h-100 g-0">
           <div class="col-md-6">
             <div class="bg-300 p-4 h-100 d-flex flex-column justify-content-center">
               <h4 class="text-800">Exclusive collection 2021</h4>
               <h1 class="fw-semi-bold lh-sm fs-4 fs-lg-5 fs-xl-6">Be exclusive</h1>
               <p class="mb-5 fs-1">The best everyday option in a Super Saver range within a reasonable price. It is our responsibility to keep you 100 percent stylish. Be smart &amp; , trendy with us.</p>
               <div class="d-grid gap-2 d-md-block"><a class="btn btn-lg btn-dark" href="#" role="button">Explore</a></div>
             </div>
           </div>
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/outfit.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">Outfit<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                     </svg></a></div>
               </div>
             </div>
           </div>
         </div>
         <div class="row h-100 g-2 py-1">
           <div class="col-md-4">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/vanity-bag.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">Vanity Bags<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                     </svg></a></div>
               </div>
             </div>
           </div>
           <div class="col-md-4">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/hat.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">Hats<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                     </svg></a></div>
               </div>
             </div>
           </div>
           <div class="col-md-4">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/high-heels.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="d-flex align-items-end justify-content-center h-100"><a class="btn btn-lg text-light fs-1" href="#!" role="button">High Heels<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                       <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                     </svg></a></div>
               </div>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->

     <section class="py-0">
       <div class="container">
         <div class="row h-100">
           <div class="col-lg-7 mx-auto text-center mb-6">
             <h5 class="fs-3 fs-lg-5 lh-sm mb-3">Checkout New Arrivals</h5>
           </div>
           <div class="col-12">
             <div class="carousel slide" id="carouselNewArrivals" data-bs-ride="carousel">
               <div class="carousel-inner">
                 <div class="carousel-item active" data-bs-interval="10000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Flat Hill Slingback</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Ocean Blue Ring</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Brown Leathered Wallet</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Silverside Wristwatch</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="5000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Flat Hill Slingback</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Ocean Blue Ring</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Brown Leathered Wallet</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Silverside Wristwatch</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="3000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Flat Hill Slingback</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Ocean Blue Ring</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Brown Leathered Wallet</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Silverside Wristwatch</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/full-body.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Flat Hill Slingback</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/formal-coat.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Ocean Blue Ring</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/ocean-blue.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Brown Leathered Wallet</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-sm-6 col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sweater.png" alt="..." />
                         <div class="card-img-overlay bg-dark-gradient d-flex flex-column-reverse">
                           <h6 class="text-primary">$175</h6>
                           <p class="text-400 fs-1">Jumper set for Women</p>
                           <h4 class="text-light">Silverside Wristwatch</h4>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselNewArrivals" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselNewArrivals" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>
     
     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section id="collection">
       <div class="container">
         <div class="row h-100 gx-2">
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/urban.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="p-5 p-md-2 p-xl-5">
                   <h1 class="fs-md-4 fs-lg-7 text-light">Urban Stories </h1>
                   <h5 class="fs-2 text-light">collection</h5>
                 </div>
               </div><a class="stretched-link" href="#!"></a>
             </div>
           </div>
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/country.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient">
                 <div class="p-5 p-md-2 p-xl-5 d-flex flex-column flex-end-center align-items-baseline h-100">
                   <h1 class="fs-md-4 fs-lg-7 text-light">Urban Stories </h1>
                   <h5 class="fs-2 text-light">collection</h5>
                 </div>
               </div><a class="stretched-link" href="#!"></a>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->

     <section>
       <div class="container">
         <div class="row h-100">
           <div class="col-lg-7 mx-auto text-center mb-6">
             <h5 class="fw-bold fs-3 fs-lg-5 lh-sm mb-3">Best Sellers</h5>
           </div>
           <div class="col-12">
             <div class="carousel slide" id="carouselBestSellers" data-bs-touch="false" data-bs-interval="false">
               <div class="carousel-inner">
                 <div class="carousel-item active" data-bs-interval="10000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="5000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="3000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/handbag.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Marie Claire Handbag</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$399</span><span class="text-danger">$365</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/earrings.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red Gem Earrings</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$489</span><span class="text-danger">$466</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/lathered-wristwatch.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Black Leathered Wristwatch</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$799</span><span class="text-danger">$745</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                     <div class="col-md-3 mb-3 mb-md-0 h-100">
                       <div class="card card-span h-100 text-white"><img class="img-fluid h-100" src="assets/img/gallery/tie.png" alt="..." />
                         <div class="card-img-overlay ps-0"> </div>
                         <div class="card-body ps-0 bg-200">
                           <h5 class="fw-bold text-1000 text-truncate">Red-White Stripped Tie</h5>
                           <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$299</span><span class="text-danger">$243</span></div>
                         </div><a class="stretched-link" href="#"></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouselBestSellers" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselBestSellers" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>

     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0" id="outlet">
       <div class="container">
         <div class="row h-100 g-0">
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/summer.png" alt="..." />
               <div class="card-img-overlay bg-dark-gradient rounded-0">
                 <div class="p-5 p-md-2 p-xl-5 d-flex flex-column flex-end-center align-items-baseline h-100">
                   <h1 class="fs-md-4 fs-lg-7 text-light">Summer of '21 </h1>
                 </div>
               </div><a class="stretched-link" href="#!"></a>
             </div>
           </div>
           <div class="col-md-6 h-100">
             <div class="row h-100 g-0">
               <div class="col-md-6 h-100">
                 <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sunglasses.png" alt="..." />
                   <div class="card-img-overlay bg-dark-gradient rounded-0">
                     <div class="p-5 p-xl-5 p-md-0">
                       <h3 class="text-light">Sunglasses</h3>
                     </div>
                   </div><a class="stretched-link" href="#!"></a>
                 </div>
               </div>
               <div class="col-md-6">
                 <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/footwear.png" alt="..." />
                   <div class="card-img-overlay bg-dark-gradient rounded-0">
                     <div class="p-5 p-xl-5 p-md-0">
                       <h3 class="text-light">Footwear</h3>
                     </div>
                   </div><a class="stretched-link" href="#!"></a>
                 </div>
               </div>
               <div class="col-md-6">
                 <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/hat-black-border.png" alt="..." />
                   <div class="card-img-overlay bg-dark-gradient rounded-0">
                     <div class="p-5 p-xl-5 p-md-0">
                       <h3 class="text-light">Hat</h3>
                     </div>
                   </div><a class="stretched-link" href="#!"></a>
                 </div>
               </div>
               <div class="col-md-6">
                 <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/watches.png" alt="..." />
                   <div class="card-img-overlay bg-dark-gradient rounded-0">
                     <div class="p-5 p-xl-5 p-md-0">
                       <h3 class="text-light">Watches</h3>
                     </div>
                   </div><a class="stretched-link" href="#!"> </a>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->



     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section>
       <div class="container">
         <div class="row h-100 g-0">
           <div class="col-md-6">
             <div class="bg-300 p-4 h-100 d-flex flex-column justify-content-center">
               <h1 class="fw-semi-bold lh-sm fs-4 fs-lg-5 fs-xl-6">Gentle Formal Looks </h1>
               <p class="mb-5 fs-1">We provide the top formal apparel package to make your job look confident and comfortable. Stay connect.</p>
               <div class="d-grid gap-2 d-md-block"><a class="btn btn-lg btn-dark" href="#!" role="button">Explore Collection</a></div>
             </div>
           </div>
           <div class="col-md-6">
             <div class="card card-span h-100 text-white"><img class="card-img h-100" src="assets/img/gallery/sharp-dress.png" alt="..." /><a class="stretched-link" href="#!"></a></div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->



     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0 pb-8">
       <div class="container-fluid container-lg">
         <div class="row h-100 g-2 justify-content-center">
           <div class="col-sm-9 col-md-4 mb-3 mb-md-0 h-100">
             <div class="card card-span text-white h-100"><img class="img-card h-100" src="assets/img/gallery/shoes-blog-1.png" alt="..." />
               <div class="card-body px-xl-5 px-md-3 pt-0 pb-7">
                 <div class="d-flex justify-content-between align-items-center bg-100 mt-n5 me-auto"><img src="assets/img/gallery/author-1.png" width="60" alt="..." />
                   <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i data-feather="eye"> </i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i data-feather="heart"> </i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i data-feather="corner-up-right"> </i><span class="text-900 ms-2">14</span></span></div>
                 </div>
                 <h6 class="text-900 mt-3">Kelly Hudson . <span class="fw-normal">Fashion actiKelly Hudson . </span></h6>
                 <h3 class="fw-bold text-1000 mt-5 text-truncate">How important are shoes in your style?</h3>
                 <p class="text-900 mt-3">Is it possible to assess a person just on the basis of their footwear? Obviously, nobody should criticize, but certainly, shoes say a lot about someone. It matters for the outsiders that we meet every day...</p><a class="btn btn-lg text-900 fs-1 px-0 hvr-icon-forward" href="#!" role="button">Read more<svg class="bi bi-arrow-right-short hover-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                     <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                   </svg></a>
               </div>
             </div>
           </div>
           <div class="col-sm-9 col-md-4 mb-3 mb-md-0 h-100">
             <div class="card card-span text-white h-100"><img class="img-card h-100" src="assets/img/gallery/fashion-blog-2.png" alt="..." />
               <div class="card-body px-xl-5 px-md-3 pt-0 pb-7">
                 <div class="d-flex justify-content-between align-items-center bg-100 mt-n5 me-auto"><img src="assets/img/gallery/author-2.png" width="60" alt="..." />
                   <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i data-feather="eye"> </i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i data-feather="heart"> </i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i data-feather="corner-up-right"> </i><span class="text-900 ms-2">14</span></span></div>
                 </div>
                 <h6 class="text-900 mt-3">Rotondwa Johnny . <span class="fw-normal">Fashion activist </span></h6>
                 <h3 class="fw-bold text-1000 mt-5 text-truncate">Fashion trend forecast for Summer 2021</h3>
                 <p class="text-900 mt-3">While the fashion industry has had a calm year, this season has seen some beautiful pieces. Over the previous several weeks, commanding coats, and elegant face masks have ruled Fashion Weeks...</p><a class="btn btn-lg text-900 fs-1 px-0 hvr-icon-forward" href="#!" role="button">Read more<svg class="bi bi-arrow-right-short hover-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                     <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                   </svg></a>
               </div>
             </div>
           </div>
           <div class="col-sm-9 col-md-4 mb-3 mb-md-0 h-100">
             <div class="card card-span text-white h-100"><img class="img-card h-100" src="assets/img/gallery/spring-dress-blog-3.png" alt="..." />
               <div class="card-body px-xl-5 px-md-3 pt-0 pb-7">
                 <div class="d-flex justify-content-between align-items-center bg-100 mt-n5 me-auto"><img src="assets/img/gallery/author-3.png" width="60" alt="..." />
                   <div class="d-flex flex-1 justify-content-around"> <span class="text-900 text-center"><i data-feather="eye"> </i><span class="text-900 ms-2">35</span></span><span class="text-900 text-center"><i data-feather="heart"> </i><span class="text-900 ms-2">23</span></span><span class="text-900 text-center"><i data-feather="corner-up-right"> </i><span class="text-900 ms-2">14</span></span></div>
                 </div>
                 <h6 class="text-900 mt-3">Martin . <span class="fw-normal">Fashion activist </span></h6>
                 <h3 class="fw-bold text-1000 mt-5 text-truncate">Spring exclusive collection for Men &amp; Women</h3>
                 <p class="text-900 mt-3">Explore the first real-time photographic fashion magazine NOWFASHION to broadcast exclusive live fashion shows. Some of the most beautiful spring collection i want to share. See the....</p><a class="btn btn-lg text-900 fs-1 px-0 hvr-icon-forward" href="#!" role="button">Read more<svg class="bi bi-arrow-right-short hover-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
                     <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                   </svg></a>
               </div>
             </div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->

     <section class="py-11">
       <div class="bg-holder overlay overlay-0" style="background-image:url(assets/img/gallery/cta.png);background-position:center;background-size:cover;"></div>
       <!--/.bg-holder-->
       <div class="container">
         <div class="row">
           <div class="col-12">
             <div class="carousel slide carousel-fade" id="carouseCta" data-bs-ride="carousel">
               <div class="carousel-inner">
                 <div class="carousel-item active" data-bs-interval="10000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-12">
                       <div class="text-light text-center py-2">
                         <h5 class="display-4 fw-normal text-400 fw-normal mb-4">visit our Outlets in</h5>
                         <h1 class="display-1 text-white fw-normal mb-8">London</h1><a class="btn btn-lg text-light fs-1" href="#!" role="button">See Addresses<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                             <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                           </svg></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="5000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-12">
                       <div class="text-light text-center py-2">
                         <h5 class="display-4 fw-normal text-400 fw-normal mb-4">visit our Outlets in</h5>
                         <h1 class="display-1 text-white fw-normal mb-8">Bristol</h1><a class="btn btn-lg text-light fs-1" href="#!" role="button">See Addresses<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                             <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                           </svg></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="carousel-item" data-bs-interval="3000">
                   <div class="row h-100 align-items-center g-2">
                     <div class="col-12">
                       <div class="text-light text-center py-2">
                         <h5 class="display-4 fw-normal text-400 fw-normal mb-4">visit our Outlets in</h5>
                         <h1 class="display-1 text-white fw-normal mb-8">Birmingham</h1><a class="btn btn-lg text-light fs-1" href="#!" role="button">See Addresses<svg class="bi bi-arrow-right-short" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" viewBox="0 0 16 16">
                             <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                           </svg></a>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row"><button class="carousel-control-prev" type="button" data-bs-target="#carouseCta" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouseCta" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next </span></button></div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </section>

     <!-- ============================================-->
     <!-- <section> begin ============================-->
     <section class="py-0 pt-7">
       <div class="container">
         <div class="row">
           <div class="col-6 col-lg-2 mb-3">
             <h5 class="lh-lg fw-bold text-1000">Company Info</h5>
             <ul class="list-unstyled mb-md-4 mb-lg-0">
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">About Us</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Affiliate</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Fashion Blogger</a></li>
             </ul>
           </div>
           <div class="col-6 col-lg-2 mb-3">
             <h5 class="lh-lg fw-bold text-1000">Help &amp; Support</h5>
             <ul class="list-unstyled mb-md-4 mb-lg-0">
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Shipping Info</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Refunds</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">How to Order</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">How to Track</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Size Guides</a></li>
             </ul>
           </div>
           <div class="col-6 col-lg-2 mb-3">
             <h5 class="lh-lg fw-bold text-1000">Customer Care</h5>
             <ul class="list-unstyled mb-md-4 mb-lg-0">
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Contact Us</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Payment Methods</a></li>
               <li class="lh-lg"><a class="text-800 text-decoration-none" href="#!">Bonus Point</a></li>
             </ul>
           </div>
           <div class="col-sm-6 col-lg-auto ms-auto">
             <h5 class="lh-lg fw-bold text-1000">Signup For The Latest News</h5>
             <div class="row input-group-icon mb-5">
               <div class="col-12"><input class="form-control input-box" type="email" placeholder="Enter Email" aria-label="email" /><svg class="bi bi-arrow-right-short input-box-icon" xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="#424242" viewBox="0 0 16 16">
                   <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"> </path>
                 </svg></div>
             </div>
             <p class="text-800"><svg class="feather feather-phone me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
               </svg><span class="text-800">+0000000000</span></p>
             <p class="text-800"><svg class="feather feather-mail me-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                 <polyline points="22,6 12,13 2,6"></polyline>
               </svg><span class="text-800">therichposts@gmail.com</span></p>
           </div>
         </div>
         <div class="border-bottom border-3"></div>
         <div class="row flex-center my-3">
           <div class="col-md-6 order-1 order-md-0">
             <p class="my-2 text-1000 text-center text-md-start"> Made with&nbsp;<svg class="bi bi-suit-heart-fill" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="#EB6453" viewBox="0 0 16 16">
                 <path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"></path>
               </svg>&nbsp;by&nbsp;<a class="text-800" href="https://therichpost.com/" target="_blank">Jassa </a></p>
           </div>
           <div class="col-md-6">
             <div class="text-center text-md-end"><a href="#!"><span class="me-4" data-feather="facebook"></span></a><a href="#!"> <span class="me-4" data-feather="instagram"></span></a><a href="#!"> <span class="me-4" data-feather="youtube"></span></a><a href="#!"> <span class="me-4" data-feather="twitter"></span></a></div>
           </div>
         </div>
       </div><!-- end of .container-->
     </section><!-- <section> close ============================-->
     <!-- ============================================-->

   </main><!-- ===============================================-->
   <!--    End of Main Content-->
   <!-- ===============================================-->

4. Now friends we just need to add below code into angularboot5/src/index.html file to style and scripts:

<!DOCTYPE html>
<html lang="">
  <head>
   ...
    <!-- ===============================================-->
    <!--    Stylesheets-->
    <!-- ===============================================-->
    <link href="assets/css/theme.min.css" rel="stylesheet" />    
    <!-- ===============================================-->
    <!--    JavaScripts-->
    <!-- ===============================================-->
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    
    <script src="assets/js/theme.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet">
 
  </head>
...

Friends in the end must run ng serve command into your terminal to run the angular 12 project (localhost:4200).

Guys click here to check the Angular 12 Bootstrap 5 Free Templates.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

June 2, 2021

Vue 3 Bootstrap 5 Ecommerce Testing Project – Part 2 Single Item Page

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Bootstrap 5 Ecommerce Testing Project – Part 2 Single Item Page.

Guy’s before starting this please check the part 1 for basic setup. In part 3 we will do cart page.

Guy’s this post will be very helpful for the beginners. With this post we will learn how to do routing and linking.

Project Working

Vue 3 Project Folder Structure — **Vuejs Project Folder Structure for understanding**

Vue 3 and Bootstrap 5 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Now guy’s very first we need to run below command to set the routing in our project:

npm i vue-router@next

npm run serve

2. Now friends we need to create new folder `views` inside `src` folder and after it create new file `Home.vue` inside src/views folder and add below code inside it:

<template>
<header class="bg-dark py-5">
    <div class="container px-4 px-lg-5 my-5">
        <div class="text-center text-white">
            <h1 class="display-4 fw-bolder">Shop in style</h1>
            <p class="lead fw-normal text-white-50 mb-0">With this shop hompeage template</p>
        </div>
    </div>
  </header>
<!--main page-->
<section class="py-5">
    <div class="container px-4 px-lg-5 mt-5">
        <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <router-link to="/single"><h5 class="fw-bolder">Fancy Product</h5></router-link>
                            <!-- Product price-->
                            $40.00 - $80.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <router-link to="/single"><h5 class="fw-bolder">Fancy Product</h5></router-link>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$20.00</span>
                            $18.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <router-link to="/single"><h5 class="fw-bolder">Fancy Product</h5></router-link>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$50.00</span>
                            $25.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <router-link to="/single"><h5 class="fw-bolder">Fancy Product</h5></router-link>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            $40.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <router-link to="/single"><h5 class="fw-bolder">Fancy Product</h5></router-link>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$50.00</span>
                            $25.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <router-link to="/single"><h5 class="fw-bolder">Fancy Product</h5></router-link>
                            <!-- Product price-->
                            $120.00 - $280.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <router-link to="/single"><h5 class="fw-bolder">Fancy Product</h5></router-link>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$20.00</span>
                            $18.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <router-link to="/single"><h5 class="fw-bolder">Fancy Product</h5></router-link>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            $40.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </section>
</template>

3. Now friends we need to create new file `Single.vue` inside src/views folder and add below code inside it:

<template>
    <!--single page-->
<section class="py-5">
    <div class="container px-4 px-lg-5 my-5">
        <div class="row gx-4 gx-lg-5 align-items-center">
            <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage600x700.jpg" alt="..."></div>
            <div class="col-md-6">
                <div class="small mb-1">SKU: BST-498</div>
                <h1 class="display-5 fw-bolder">Shop item template</h1>
                <div class="fs-5 mb-5">
                    <span class="text-decoration-line-through">$45.00</span>
                    <span>$40.00</span>
                </div>
                <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium at dolorem quidem modi. Nam sequi consequatur obcaecati excepturi alias magni, accusamus eius blanditiis delectus ipsam minima ea iste laborum vero?</p>
                <div class="d-flex">
                    <input class="form-control text-center me-3" id="inputQuantity" type="num" value="1" style="max-width: 3rem">
                    <button class="btn btn-outline-dark flex-shrink-0" type="button">
                        <i class="bi-cart-fill me-1"></i>
                        Add to cart
                    </button>
                </div>
            </div>
        </div>
    </div>
  </section>
  
  <section class="py-5 bg-light">
    <div class="container px-4 px-lg-5 mt-5">
        <h2 class="fw-bolder mb-4">Related products</h2>
        <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Fancy Product</h5></a>
                            <!-- Product price-->
                            $40.00 - $80.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Special Item</h5></a>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$20.00</span>
                            $18.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Sale Item</h5></a>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$50.00</span>
                            $25.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Popular Item</h5></a>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            $40.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </section>
</template>

4. Now friends we need to create new folder `router` inside `src` folder and after it create new file `index.js` inside src/router folder and add below code inside it:

import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import Single from "@/views/Single.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/single",
    name: "Single",
    component: Single,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

5. Now friends we need to add below code inside src/main.js file to call the routing:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

6. Now friends we need to add below code into src/App.vue file to check the final output on browser:

<template>
  <Header></Header>
  
     <router-view />
    
    <Footer></Footer>
</template>

<script>

//importing bootstrap 5 Modules
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import "./App.css";
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  
components: {
    Header,
    Footer
  }
  
}
</script>

7. Now friends we need to add below code inside `src/components/Header.vue`file for home page linking:

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container px-4 px-lg-5">
      <router-link class="navbar-brand" to="/">TheRich Shop</router-link>
      
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
               
                <li class="nav-item"><router-link class="nav-link active" to="/">Home</router-link></li>
                
             
            </ul>
          
                <button class="btn btn-outline-dark" type="submit">
                    <i class="bi-cart-fill me-1"></i>
                    Cart
                    <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
                </button>
           
        </div>
    </div>
  </nav>
</template>

Now we are done friends and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks.

June 2, 2021

Vue 3 Bootstrap 5 Ecommerce Testing Project – Part 1

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue 3 Bootstrap 5 Ecommerce Testing Project – Part 1.

Guy’s this post will be very helpful for the beginners. With this post we will learn how to create components and add components into components. This will also help for making well structure project.

Vuejs Tutorials

Vue 3 and Bootstrap 5 came and if you are new then you must check below two links:

Friends now I proceed onwards and here is the working code snippet and use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have bootstrap 5 modules in our Vue 3 application:

npm install -g @vue/cli

vue create vueboot5

cd vueboot5

npm i bootstrap

npm i @popperjs/core

npm run serve //http://localhost:8080/

2. Now friends we need to add below code into vueboot5/src/App.vue file to check the final output on browser:

<template>
  <Header></Header>
  
    <header class="bg-dark py-5">
    <div class="container px-4 px-lg-5 my-5">
        <div class="text-center text-white">
            <h1 class="display-4 fw-bolder">Shop in style</h1>
            <p class="lead fw-normal text-white-50 mb-0">With this shop hompeage template</p>
        </div>
    </div>
  </header>
<!--main page-->
<section class="py-5">
    <div class="container px-4 px-lg-5 mt-5">
        <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Fancy Product</h5></a>
                            <!-- Product price-->
                            $40.00 - $80.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Special Item</h5></a>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$20.00</span>
                            $18.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Sale Item</h5></a>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$50.00</span>
                            $25.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Popular Item</h5></a>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            $40.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Sale Item</h5></a>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$50.00</span>
                            $25.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Fancy Product</h5></a>
                            <!-- Product price-->
                            $120.00 - $280.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View options</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Sale badge-->
                    <div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Special Item</h5></a>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            <span class="text-muted text-decoration-line-through">$20.00</span>
                            $18.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
            <div class="col mb-5">
                <div class="card h-100">
                    <!-- Product image-->
                    <img class="card-img-top" src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="...">
                    <!-- Product details-->
                    <div class="card-body p-4">
                        <div class="text-center">
                            <!-- Product name-->
                            <a href="#" ><h5 class="fw-bolder">Popular Item</h5></a>
                            <!-- Product reviews-->
                            <div class="d-flex justify-content-center small text-warning mb-2">
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                                <div class="bi-star-fill"></div>
                            </div>
                            <!-- Product price-->
                            $40.00
                        </div>
                    </div>
                    <!-- Product actions-->
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">Add to cart</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </section>
    
    <Footer></Footer>
</template>

<script>

//importing bootstrap 5 Modules
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  
components: {
    Header,
    Footer
  }
  
}
</script>

3. Now friends we need to create new file `Header.vue` inside components folder and add below code inside it:

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container px-4 px-lg-5">
      <a class="navbar-brand" href="#">TheRich Shop</a>
      
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
               
                <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                
             
            </ul>
          
                <button class="btn btn-outline-dark" type="submit">
                    <i class="bi-cart-fill me-1"></i>
                    Cart
                    <span class="badge bg-dark text-white ms-1 rounded-pill">0</span>
                </button>
           
        </div>
    </div>
  </nav>
</template>

4. Now friends we need to create new file `Footer.vue` inside components folder and add below code inside it:

<template>
    <footer class="py-5 bg-dark">
        <div class="container"><p class="m-0 text-center text-white">Copyright © Your Website 2021</p></div>
    </footer>
</template>

5. Now friends we need code inside public/index.html file for bootstrap 5 icons and some custom style:

...
  <head>
   ...
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
      .card-body a{
        color: #212529;
        text-decoration: none;
      }
    </style>
  </head>
...

Now we are done friends and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Guy’s in next part we will do single product page.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

June 1, 2021

Angular 12 Filter Array Data Working Demo
Hello friends, welcome back to my blog. Today in this blog post will tell you, Angular 12 Filter Array Data Working Demo.

AngularArray Filters

Angular 12 Filter Array Data Working Demo

Angular 12 came and Bootstrap 5 also and if you are new then you must check below two links:
1. Angular12 Basic Tutorials
2. Bootstrap 5
Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
```
npm install -g @angular/cli 

ng new angularhooks //Create new Angular Project

cd angularhooks // Go inside the Angular Project Folder
```
2. (Optional, I am using for table better looks)Now friends we need to run below commands into our project terminal to install bootstrap 5 modules into our angular application:
```
npm install bootstrap
```
3. Now friends we just need to add below code into angularhooks/src/app/app.component.html file to get final out on the web browser:
```
<div class="container p-5">
  <h1 class="text-center mb-5">Therichpost.com</h1>
  <table class="table table-hover table-bordered p-5">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">City</th>
        <th scope="col">State</th>
      </tr>
    </thead>
    <tbody>
    
        <tr *ngFor="let result of dataa; let i = index">
        
        <td>{{result.id}}</td>
        <td>{{result.name}}</td>
        <td>{{result.city}}</td>
        <td>{{result.state}}</td>
      </tr>
           
        
        </tbody>
        </table>
        
   </div>
```
4. Now friends we just need to add below code into angularhooks/src/app/app.component.ts file:
```
...

export class AppComponent {
 ...
 dataa = [{ id: 1, name: 'Mike', city: 'philps', state: 'New York' }, 
        { id: 2, name: 'Steve', city: 'Square', state: 'Chicago' }, 
        { id: 3, name: 'Jhon', city: 'market', state: 'New York' }, 
        { id: 4, name: 'philps', city: 'booket', state: 'Texas' }, 
        { id: 5, name: 'smith', city: 'brookfield', state: 'Florida' }, 
        { id: 6, name: 'Broom', city: 'old street', state: 'Florida' }];
        
        ngOnInit(){

            //Fiter Data according to seleted city
            this.dataa = this.dataa.filter(data => data.state == "New York");
}
}
```
5. (Optional but must if install bootstrap 5)Guy’s now add below code into angularhooks/angular.json file:
```
"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              ...
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]
```
Friends in the end must run ng serve command into your terminal to run the angular 12 project(localhost:4200).

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks
June 1, 2021

Reactjs Map Arrays with Filter Working Demo

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Map Arrays with Filter Working Demo.

Reactjs Array Map Filter

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reacthooks

cd reacthooks

npm start

2. (Optional, I have used for better looks of table)Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install bootstrap --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our reacthooks/src/App.js file or if you have fresh setup then you can replace reacthooks/src/App.js file code with below code:

import React from "react";
//Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  var data = [{ id: 1, name: 'Mike', city: 'philps', state: 'New York' }, 
  { id: 2, name: 'Steve', city: 'Square', state: 'Chicago' }, 
  { id: 3, name: 'Jhon', city: 'market', state: 'New York' }, 
  { id: 4, name: 'philps', city: 'booket', state: 'Texas' }, 
  { id: 5, name: 'smith', city: 'brookfield', state: 'Florida' }, 
  { id: 6, name: 'Broom', city: 'old street', state: 'Florida' }];

  //Fiter data accroding to selected city
  data = data.filter(data => data.state == "New York");
  
 
  return (
    <div className="app container p-5">
      <h1 className="text-center mb-5">Therichpost.com</h1>
      <table class="table table-hover table-bordered p-5">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">City</th>
            <th scope="col">State</th>
          </tr>
        </thead>
        <tbody>
        {data.map(function({id, name, city, state}){
         
              return (
                <tr>
               
                <td>{id}</td>
                <td>{name}</td>
                <td>{city}</td>
                <td>{state}</td>
              </tr>
                );
            })}

            
            </tbody>
            </table>
            
       </div>
  );
}

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

June 1, 2021

Reactjs Bootstrap 5 Ecommerce Testing Project – Part 3 Checkout Page

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Bootstrap 5 Ecommerce Testing Project – Part 3 Checkout Page.

Guy’s before starting this post please check part 1 and part 2 for basics setup.

Bootstrap 5 Ecommerce Checkout Page

For reactjs and bootstrap5 new comers, please check the below links:

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Now guy’s we will create `Checkout.js` file inside src/views folder and add below code inside it:

import React from 'react';

class checkout extends React.Component
{
  render()
  {
    return (
        <div className="checkout">
         <section class="py-5">
                <div class="container px-4 px-lg-5 my-5">
                <div class="row">
                <div class="col-md-4 order-md-2 mb-4">
                    <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-muted">Your cart</span>
                    <span class="badge badge-secondary badge-pill">3</span>
                    </h4>
                    <ul class="list-group mb-3">
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                        <h6 class="my-0">Product name</h6>
                        <small class="text-muted">Brief description</small>
                        </div>
                        <span class="text-muted">$12</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                        <h6 class="my-0">Second product</h6>
                        <small class="text-muted">Brief description</small>
                        </div>
                        <span class="text-muted">$8</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                        <h6 class="my-0">Third item</h6>
                        <small class="text-muted">Brief description</small>
                        </div>
                        <span class="text-muted">$5</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between bg-light">
                        <div class="text-success">
                        <h6 class="my-0">Promo code</h6>
                        <small>EXAMPLECODE</small>
                        </div>
                        <span class="text-success">-$5</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>Total (USD)</span>
                        <strong>$20</strong>
                    </li>
                    </ul>

                    <form class="card p-2">
                    <div class="input-group">
                        <input type="text" class="form-control me-2" placeholder="Promo code"/>
                        <div class="input-group-append">
                        <button type="button" class="btn btn-dark px-4 rounded-pill">Redeem</button>
                        </div>
                    </div>
                    </form>
                </div>
                <div class="col-md-8 order-md-1">
                    <h4 class="mb-3">Billing address</h4>
                    <form class="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                        <label for="firstName" class="form-label">First name</label>
                        <input type="text" class="form-control" id="firstName" placeholder="" value="" required />
                        <div class="invalid-feedback">
                            Valid first name is required.
                        </div>
                        </div>
                        <div class="col-md-6 mb-3">
                        <label for="lastName" class="form-label">Last name</label>
                        <input type="text" class="form-control" id="lastName" placeholder="" value="" required />
                        <div class="invalid-feedback">
                            Valid last name is required.
                        </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">@</span>
                        </div>
                        <input type="text" class="form-control" id="username" placeholder="Username" required />
                        <div class="invalid-feedback">
                            Your username is required.
                        </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
                        <input type="email" class="form-control" id="email" placeholder="you@example.com" />
                        <div class="invalid-feedback">
                        Please enter a valid email address for shipping updates.
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="address" class="form-label">Address</label>
                        <input type="text" class="form-control" id="address" placeholder="1234 Main St" required />
                        <div class="invalid-feedback">
                        Please enter your shipping address.
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
                        <input type="text" class="form-control" id="address2" placeholder="Apartment or suite" />
                    </div>

                    <div class="row">
                        <div class="col-md-5 mb-3">
                        <label for="country" class="form-label">Country</label>
                        <select class="form-select d-block w-100" id="country" required>
                            <option value="">Choose...</option>
                            <option>United States</option>
                        </select>
                        <div class="invalid-feedback">
                            Please select a valid country.
                        </div>
                        </div>
                        <div class="col-md-4 mb-3">
                        <label for="state" class="form-label">State</label>
                        <select class="form-select d-block w-100" id="state" required>
                            <option value="">Choose...</option>
                            <option>California</option>
                        </select>
                        <div class="invalid-feedback">
                            Please provide a valid state.
                        </div>
                        </div>
                        <div class="col-md-3 mb-3">
                        <label for="zip" class="form-label">Zip</label>
                        <input type="text" class="form-control" id="zip" placeholder="" required />
                        <div class="invalid-feedback">
                            Zip code required.
                        </div>
                        </div>
                    </div>
                    <hr class="mb-4" />
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="same-address" />
                        <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="save-info" />
                        <label class="form-check-label" for="save-info">Save this information for next time</label>
                    </div>
                    <hr class="mb-4" />

                    <h4 class="mb-3">Payment</h4>

                    <div class="d-block my-3">
                        <div class="form-check">
                        <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required />
                        <label class="form-check-label" for="credit">Credit card</label>
                        </div>
                        <div class="form-check">
                        <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required />
                        <label class="form-check-label" for="debit">Debit card</label>
                        </div>
                        <div class="form-check">
                        <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required />
                        <label class="form-check-label" for="paypal">Paypal</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                        <label for="cc-name" class="form-label">Name on card</label>
                        <input type="text" class="form-control" id="cc-name" placeholder="" required />
                        <small class="text-muted">Full name as displayed on card</small>
                        <div class="invalid-feedback">
                            Name on card is required
                        </div>
                        </div>
                        <div class="col-md-6 mb-3">
                        <label for="cc-number" class="form-label">Credit card number</label>
                        <input type="text" class="form-control" id="cc-number" placeholder="" required />
                        <div class="invalid-feedback">
                            Credit card number is required
                        </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 mb-3">
                        <label for="cc-expiration" class="form-label">Expiration</label>
                        <input type="text" class="form-control" id="cc-expiration" placeholder="" required />
                        <div class="invalid-feedback">
                            Expiration date required
                        </div>
                        </div>
                        <div class="col-md-3 mb-3">
                        <label for="cc-expiration" class="form-label">CVV</label>
                        <input type="text" class="form-control" id="cc-cvv" placeholder="" required />
                        <div class="invalid-feedback">
                            Security code required
                        </div>
                        </div>
                    </div>
                    <hr class="mb-4" />
                    <button class="btn btn-dark px-4 rounded-pill" type="button">Place Order</button>
                    </form>
                </div>
                </div>
            </div>
            </section>
         
        </div>
      
    )
  }
}
export default checkout;

2. Guy’s for the main output, we need to add below code into our src/App.js file or if you have fresh setup then you can replace src/App.js file code with below code:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './App.css';
import { BrowserRouter as Router, Route, Link  } from 'react-router-dom'
import Header from './layouts/Header'; //Include Heder
import Footer from './layouts/Footer'; //Include Footer
import Home from './views/Home'; //Iclude Home
import Single from './views/Single'; //Include Single
import Cart from './views/Cart'; //Include Cart
import Checkout from './views/Checkout'; //Include Checkout

function App() {
  return (
    <div className="App">
     
      <Router>
          <Header></Header>
          <Route exact path='/' component={Home} />
          <Route exact path='/home' component={Home} />
          <Route exact path='/singleitem' component={Single} />
          <Route exact path='/cart' component={Cart} />
          <Route exact path='/checkout' component={Checkout} />
      </Router>
     <Footer></Footer>
    </div>
  );
}

export default App;

3. Now guy’s we need to below code inside src/views/Cart.js file for checkout page linking(check highlighted line number):

import React from 'react';
import { Link } from 'react-router-dom';
class Cart extends React.Component
{
  render()
  {
    return (
        <div className="single">
         
         <section class="py-5">
                <div class="container px-4 px-lg-5 my-5">
                <div class="row">
                <div class="col-lg-12 p-5 bg-white rounded shadow-sm mb-5">

                   
                    <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col" class="border-0 bg-light">
                            <div class="p-2 px-3 text-uppercase">Product</div>
                            </th>
                            <th scope="col" class="border-0 bg-light">
                            <div class="py-2 text-uppercase">Price</div>
                            </th>
                            <th scope="col" class="border-0 bg-light">
                            <div class="py-2 text-uppercase">Quantity</div>
                            </th>
                            <th scope="col" class="border-0 bg-light">
                            <div class="py-2 text-uppercase">Remove</div>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row" class="border-0">
                            <div class="p-2">
                                <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm" />
                                <div class="ms-3 d-inline-block align-middle">
                                <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block align-middle">Product 1</a></h5>
                                </div>
                            </div>
                            </th>
                            <td class="border-0 align-middle"><strong>$79.00</strong></td>
                            <td class="border-0 align-middle"><strong>3</strong></td>
                            <td class="border-0 align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a></td>
                        </tr>
                        <tr>
                            <th scope="row">
                            <div class="p-2">
                                <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm" />
                                <div class="ms-3 d-inline-block align-middle">
                                <h5 class="mb-0"><a href="#" class="text-dark d-inline-block">Product 2</a></h5>
                                </div>
                            </div>
                            </th>
                            <td class="align-middle"><strong>$79.00</strong></td>
                            <td class="align-middle"><strong>3</strong></td>
                            <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                            <div class="p-2">
                                <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm" />
                                <div class="ms-3 d-inline-block align-middle">
                                <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block">Product 3</a></h5>
                                </div>
                            </div>
                            </th>
                            <td class="align-middle"><strong>$79.00</strong></td>
                            <td class="align-middle"><strong>3</strong></td>
                            <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    </div>
                   
                </div>
                </div>

                <div class="row py-5 p-4 bg-white rounded shadow-sm">
                <div class="col-lg-6">
                    <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Coupon code</div>
                    <div class="p-4">
                    <p class="mb-4"><em>If you have a coupon code, please enter it in the box below</em></p>
                    <div class="input-group mb-4 border rounded-pill p-2">
                        <input type="text" placeholder="Apply coupon" aria-describedby="button-addon3" class="form-control border-0" />
                        <div class="input-group-append border-0">
                        <button id="button-addon3" type="button" class="btn btn-dark px-4 rounded-pill"><i class="fa fa-gift mr-2"></i>Apply coupon</button>
                        </div>
                    </div>
                    </div>
                    <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Instructions for seller</div>
                    <div class="p-4">
                    <p class="mb-4"><em>If you have some information for the seller you can leave them in the box below</em></p>
                    <textarea name="" cols="30" rows="2" class="form-control"></textarea>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Order summary </div>
                    <div class="p-4">
                    <p class="mb-4"><em>Shipping and additional costs are calculated based on values you have entered.</em></p>
                    <ul class="list-unstyled mb-4">
                        <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Order Subtotal </strong><strong>$390.00</strong></li>
                        <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Shipping and handling</strong><strong>$10.00</strong></li>
                        <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Tax</strong><strong>$0.00</strong></li>
                        <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Total</strong>
                        <h5 class="fw-bold">$400.00</h5>
                        </li>
                    </ul><Link class="btn btn-dark rounded-pill py-2 d-md-block" to={'/checkout'}>Procceed to checkout</Link>
                    </div>
                </div>
                </div>

            </div>
            </section>
        </div>
      
    )
  }
}
export default Cart;

Now we are done friends and in next part we will do thank you page. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

June 1, 2021

Angular 12 Bootstrap 5 Ecommerce Testing Project – Part 4 Checkout Page

Hello to all welcome back on my blog therichpost.com. Today in this blog post, I am going to tell you, Angular 12 Bootstrap 5 Ecommerce Testing Project – Part 4 Checkout Page.

Guys before starting this please check part 1, part 2 and part 3 for basic setup like project setup, bootstrap installation, components building.

Post working information and working video:

In this post, we will make bootstrap 5 responsive checkout page.
In next part, we will do thank you page.

Angular Ecommerce Project Checkout Page

Guys Angular12 and Bootstrap5 came and if you are new in both or want to learn more about them then please check below tutorial links:

Guy’s here is working code snippet and please follow it carefully to avoid the mistakes:

1. Guy’s very first we need to run below command into our project terminal to generate checkout files:

ng g c checkout

ng serve --o //run project

2. Now guy’s, now we need to add below code into our angularecom/src/app/app-routing.module.ts file to checkout page route:

...
import { CheckoutComponent } from './checkout/checkout.component';

const routes: Routes = [
    ...
    { path: 'checkout', component: CheckoutComponent }
];

3. Now guy’s, now we need to add below code into our angularecom/src/app/cart/cart.component.html file(check highlighted text) to checkout page link:

<section class="py-5">
    <div class="container px-4 px-lg-5 my-5">
    <div class="row">
      <div class="col-lg-12 p-5 bg-white rounded shadow-sm mb-5">

        <!-- Shopping cart table -->
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th scope="col" class="border-0 bg-light">
                  <div class="p-2 px-3 text-uppercase">Product</div>
                </th>
                <th scope="col" class="border-0 bg-light">
                  <div class="py-2 text-uppercase">Price</div>
                </th>
                <th scope="col" class="border-0 bg-light">
                  <div class="py-2 text-uppercase">Quantity</div>
                </th>
                <th scope="col" class="border-0 bg-light">
                  <div class="py-2 text-uppercase">Remove</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row" class="border-0">
                  <div class="p-2">
                    <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm">
                    <div class="ms-3 d-inline-block align-middle">
                      <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block align-middle">Product 1</a></h5>
                    </div>
                  </div>
                </th>
                <td class="border-0 align-middle"><strong>$79.00</strong></td>
                <td class="border-0 align-middle"><strong>3</strong></td>
                <td class="border-0 align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a></td>
              </tr>
              <tr>
                <th scope="row">
                  <div class="p-2">
                    <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm">
                    <div class="ms-3 d-inline-block align-middle">
                      <h5 class="mb-0"><a href="#" class="text-dark d-inline-block">Product 2</a></h5>
                    </div>
                  </div>
                </th>
                <td class="align-middle"><strong>$79.00</strong></td>
                <td class="align-middle"><strong>3</strong></td>
                <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                </td>
              </tr>
              <tr>
                <th scope="row">
                  <div class="p-2">
                    <img src="https://therichpost.com/wp-content/uploads/2021/05/dummyimage400x300.jpg" alt="" width="70" class="img-fluid rounded shadow-sm">
                    <div class="ms-3 d-inline-block align-middle">
                      <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block">Product 3</a></h5>
                    </div>
                  </div>
                  <td class="align-middle"><strong>$79.00</strong></td>
                  <td class="align-middle"><strong>3</strong></td>
                  <td class="align-middle"><a href="#" class="text-dark"><i class="bi bi-trash"></i></a>
                  </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- End -->
      </div>
    </div>

    <div class="row py-5 p-4 bg-white rounded shadow-sm">
      <div class="col-lg-6">
        <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Coupon code</div>
        <div class="p-4">
          <p class="mb-4"><em>If you have a coupon code, please enter it in the box below</em></p>
          <div class="input-group mb-4 border rounded-pill p-2">
            <input type="text" placeholder="Apply coupon" aria-describedby="button-addon3" class="form-control border-0">
            <div class="input-group-append border-0">
              <button id="button-addon3" type="button" class="btn btn-dark px-4 rounded-pill"><i class="fa fa-gift mr-2"></i>Apply coupon</button>
            </div>
          </div>
        </div>
        <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Instructions for seller</div>
        <div class="p-4">
          <p class="mb-4"><em>If you have some information for the seller you can leave them in the box below</em></p>
          <textarea name="" cols="30" rows="2" class="form-control"></textarea>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="bg-light rounded-pill px-4 py-3 text-uppercase fw-bold">Order summary </div>
        <div class="p-4">
          <p class="mb-4"><em>Shipping and additional costs are calculated based on values you have entered.</em></p>
          <ul class="list-unstyled mb-4">
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Order Subtotal </strong><strong>$390.00</strong></li>
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Shipping and handling</strong><strong>$10.00</strong></li>
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Tax</strong><strong>$0.00</strong></li>
            <li class="d-flex justify-content-between py-3 border-bottom"><strong class="text-muted">Total</strong>
              <h5 class="fw-bold">$400.00</h5>
            </li>
          </ul><a [routerLink]="['/checkout']" class="btn btn-dark rounded-pill py-2 d-md-block">Procceed to checkout</a>
        </div>
      </div>
    </div>

  </div>
  </section>

4. Now guy’s, now we need to add below code into our angularecom/src/app/checkout/checkout.component.html file:

<section class="py-5">
    <div class="container px-4 px-lg-5 my-5">
    <div class="row">
      <div class="col-md-4 order-md-2 mb-4">
        <h4 class="d-flex justify-content-between align-items-center mb-3">
          <span class="text-muted">Your cart</span>
          <span class="badge badge-secondary badge-pill">3</span>
        </h4>
        <ul class="list-group mb-3">
          <li class="list-group-item d-flex justify-content-between lh-condensed">
            <div>
              <h6 class="my-0">Product name</h6>
              <small class="text-muted">Brief description</small>
            </div>
            <span class="text-muted">$12</span>
          </li>
          <li class="list-group-item d-flex justify-content-between lh-condensed">
            <div>
              <h6 class="my-0">Second product</h6>
              <small class="text-muted">Brief description</small>
            </div>
            <span class="text-muted">$8</span>
          </li>
          <li class="list-group-item d-flex justify-content-between lh-condensed">
            <div>
              <h6 class="my-0">Third item</h6>
              <small class="text-muted">Brief description</small>
            </div>
            <span class="text-muted">$5</span>
          </li>
          <li class="list-group-item d-flex justify-content-between bg-light">
            <div class="text-success">
              <h6 class="my-0">Promo code</h6>
              <small>EXAMPLECODE</small>
            </div>
            <span class="text-success">-$5</span>
          </li>
          <li class="list-group-item d-flex justify-content-between">
            <span>Total (USD)</span>
            <strong>$20</strong>
          </li>
        </ul>

        <form class="card p-2">
          <div class="input-group">
            <input type="text" class="form-control me-2" placeholder="Promo code"/>
            <div class="input-group-append">
              <button type="button" class="btn btn-dark px-4 rounded-pill">Redeem</button>
            </div>
          </div>
        </form>
      </div>
      <div class="col-md-8 order-md-1">
        <h4 class="mb-3">Billing address</h4>
        <form class="needs-validation" novalidate>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="firstName" class="form-label">First name</label>
              <input type="text" class="form-control" id="firstName" placeholder="" value="" required />
              <div class="invalid-feedback">
                Valid first name is required.
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <label for="lastName" class="form-label">Last name</label>
              <input type="text" class="form-control" id="lastName" placeholder="" value="" required />
              <div class="invalid-feedback">
                Valid last name is required.
              </div>
            </div>
          </div>

          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">@</span>
              </div>
              <input type="text" class="form-control" id="username" placeholder="Username" required />
              <div class="invalid-feedback">
                Your username is required.
              </div>
            </div>
          </div>

          <div class="mb-3">
            <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
            <input type="email" class="form-control" id="email" placeholder="you@example.com" />
            <div class="invalid-feedback">
              Please enter a valid email address for shipping updates.
            </div>
          </div>

          <div class="mb-3">
            <label for="address" class="form-label">Address</label>
            <input type="text" class="form-control" id="address" placeholder="1234 Main St" required />
            <div class="invalid-feedback">
              Please enter your shipping address.
            </div>
          </div>

          <div class="mb-3">
            <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label>
            <input type="text" class="form-control" id="address2" placeholder="Apartment or suite" />
          </div>

          <div class="row">
            <div class="col-md-5 mb-3">
              <label for="country" class="form-label">Country</label>
              <select class="form-select d-block w-100" id="country" required>
                <option value="">Choose...</option>
                <option>United States</option>
              </select>
              <div class="invalid-feedback">
                Please select a valid country.
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <label for="state" class="form-label">State</label>
              <select class="form-select d-block w-100" id="state" required>
                <option value="">Choose...</option>
                <option>California</option>
              </select>
              <div class="invalid-feedback">
                Please provide a valid state.
              </div>
            </div>
            <div class="col-md-3 mb-3">
              <label for="zip" class="form-label">Zip</label>
              <input type="text" class="form-control" id="zip" placeholder="" required />
              <div class="invalid-feedback">
                Zip code required.
              </div>
            </div>
          </div>
          <hr class="mb-4" />
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="same-address" />
            <label class="form-check-label" for="same-address">Shipping address is the same as my billing address</label>
          </div>
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="save-info" />
            <label class="form-check-label" for="save-info">Save this information for next time</label>
          </div>
          <hr class="mb-4" />

          <h4 class="mb-3">Payment</h4>

          <div class="d-block my-3">
            <div class="form-check">
              <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required />
              <label class="form-check-label" for="credit">Credit card</label>
            </div>
            <div class="form-check">
              <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required />
              <label class="form-check-label" for="debit">Debit card</label>
            </div>
            <div class="form-check">
              <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required />
              <label class="form-check-label" for="paypal">Paypal</label>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="cc-name" class="form-label">Name on card</label>
              <input type="text" class="form-control" id="cc-name" placeholder="" required />
              <small class="text-muted">Full name as displayed on card</small>
              <div class="invalid-feedback">
                Name on card is required
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <label for="cc-number" class="form-label">Credit card number</label>
              <input type="text" class="form-control" id="cc-number" placeholder="" required />
              <div class="invalid-feedback">
                Credit card number is required
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3 mb-3">
              <label for="cc-expiration" class="form-label">Expiration</label>
              <input type="text" class="form-control" id="cc-expiration" placeholder="" required />
              <div class="invalid-feedback">
                Expiration date required
              </div>
            </div>
            <div class="col-md-3 mb-3">
              <label for="cc-expiration" class="form-label">CVV</label>
              <input type="text" class="form-control" id="cc-cvv" placeholder="" required />
              <div class="invalid-feedback">
                Security code required
              </div>
            </div>
          </div>
          <hr class="mb-4" />
          <button class="btn btn-dark px-4 rounded-pill" type="button">Place Order</button>
        </form>
      </div>
    </div>
  </div>
  </section>

Guy’s in the end please run ng serve command(if forgot) to check the output on browser(localhost:4200) and if you will have any query then feel free to comment below.

Guy’s I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

June 1, 2021

Laravel 8 Ecommerce Template Free – Jassa Shop

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Laravel 8 Ecommerce Template Free – Jassa Shop.

Laravel 8 Website

Guys please check below link for more laravel 8 posts:

Laravel 8

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Now friends, here is the complete working code snippet and I have added inside my laravel 8: projectname/resources/views/ welcome.blade.php file for showing you working example but you can add according to your requirement:

I have added bootstrap 5 live cdn’s for template working

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ecommerce Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<style>
body, ul, li, p, a, label, input, div {
    font-family: 'Roboto', sans-serif;
    font-size: 18px !important;
    font-weight: 300 !important;
  }
  .h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 48px !important;
    font-weight: 200 !important;
  }
  .h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 30px !important;
    font-weight: 300;
  }
  .h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px !important;
  }
  /* General */
  .logo { font-weight: 500 !important;}
  .text-warning {  color: #ede861 !important;}
  .text-muted { color: #bcbcbc !important;}
  .text-success { color: #59ab6e !important;}
  .text-light { color: #cfd6e1 !important;}
  .bg-dark { background-color: #212934 !important;}
  .bg-light { background-color: #e9eef5 !important;}
  .bg-black { background-color: #1d242d !important;}
  .bg-success { background-color: #59ab6e !important;}
  .btn-success {
    background-color: #59ab6e !important;
    border-color: #56ae6c !important;
  }
  .pagination .page-link:hover {color: #000;}
  .pagination .page-link:hover, .pagination .page-link.active {
    background-color: #69bb7e;
    color: #fff;
  }
  /* Nav */
  #templatemo_nav_top { min-height: 40px;}
  #templatemo_nav_top * { font-size: 12px !important;}
  #templatemo_main_nav a { color: #212934;}
  #templatemo_main_nav a:hover { color: #69bb7e;}
  #templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}
  
  /* Hero Carousel */
  #template-mo-jassa-hero-carousel { background: #efefef !important;}
  /* Accordion */
  .templatemo-accordion a { color: #000;}
  .templatemo-accordion a:hover { color: #333d4a;}
  /* Shop */
  .shop-top-menu a:hover { color: #69bb7e !important;}
  /* Product */
  .product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
  .product-wap .product-color-dot.color-dot-red { background:#f71515;}
  .product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
  .product-wap .product-color-dot.color-dot-black { background:#000000;}
  .product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
  .product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
  .card.product-wap .card .product-overlay {
    background: rgba(0,0,0,.2);
    visibility: hidden;
    opacity: 0;
    transition: .3s;
  }
  .card.product-wap:hover .card .product-overlay {
    visibility: visible;
    opacity: 1;
  }
  .card.product-wap a { color: #000;}
  #carousel-related-product .slick-slide:focus { outline: none !important;}
  #carousel-related-product .slick-dots li button:before {
    font-size: 15px;
    margin-top: 20px;
  }
  /* Brand */
  .brand-img {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: .5s;
  }
  .brand-img:hover {
    filter: grayscale(0%);
    opacity: 1;
  }
  /* Carousel Hero */
  #template-mo-jassa-hero-carousel .carousel-indicators li {
    margin-top: -50px;
    background-color: #59ab6e;
  }
  #template-mo-jassa-hero-carousel .carousel-control-next i,
  #template-mo-jassa-hero-carousel .carousel-control-prev i {
    color: #59ab6e !important;
    font-size: 2.8em !important;
  }
  /* Carousel Brand */
  .tempaltemo-carousel .h1 {
    font-size: .5em !important;
    color: #000 !important;
  }
  /* Services */
  .services-icon-wap {transition: .3s;}
  .services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
  .services-icon-wap:hover {background: #69bb7e;}
  /* Contact map */
  .leaflet-control a, .leaflet-control { font-size: 10px !important;}
  .form-control { border: 1px solid #e8e8e8;}
  /* Footer */
  #tempaltemo_footer a { color: #dcdde1;}
  #tempaltemo_footer a:hover { color: #68bb7d;}
  #tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
  #tempaltemo_footer ul.footer-icons li {
    width: 2.6em;
    height: 2.6em;
    line-height: 2.6em;
  }
  #tempaltemo_footer ul.footer-icons li:hover {
    background-color: #cfd6e1;
    transition: .5s;
  }
  #tempaltemo_footer ul.footer-icons li:hover i {
    color: #212934;
    transition: .5s;
  }
  #tempaltemo_footer .border-light { border-color: #2d343f !important;}
  /*
  // Extra small devices (portrait phones, less than 576px)
  // No media query since this is the default in Bootstrap
  */
  /* Small devices (landscape phones, 576px and up)*/
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
    font-size: 12px !important;
  }
  .product-wap .product-color-dot {
    width: 6px;
    height: 6px;
  }
  
  @media (min-width: 576px) {
    .tempaltemo-carousel .h1 { font-size: 1em !important;}
  }
  
  /*// Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) {
    #templatemo_main_nav .navbar-nav {max-width: 450px;}
   }
  
  /* Large devices (desktops, 992px and up)*/
  @media (min-width: 992px) {
    #templatemo_main_nav .navbar-nav {max-width: 550px;}
    #template-mo-jassa-hero-carousel .carousel-item {min-height: 30rem !important;}
    .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
    .product-wap .product-color-dot {
      width: 12px;
      height: 12px;
    }
  }
  
  /* Extra large devices (large desktops, 1200px and up)*/
  @media (min-width: 1200px) {}
</style>
</head>
<body>

 <!-- Start Top Nav -->
 <nav class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block" id="templatemo_nav_top">
  <div class="container text-light">
      <div class="w-100 d-flex justify-content-between">
          <div>
              <i class="fa fa-envelope mx-2"></i>
              <a class="navbar-sm-brand text-light text-decoration-none" href="#">info@company.com</a>
              <i class="fa fa-phone mx-2"></i>
              <a class="navbar-sm-brand text-light text-decoration-none" href="#">010-000-0000</a>
          </div>
          <div>
              <a class="text-light" href="#" target="_blank" rel="sponsored"><i class="fab fa-facebook-f fa-sm fa-fw me-2"></i></a>
              <a class="text-light" href="#" target="_blank"><i class="fab fa-instagram fa-sm fa-fw me-2"></i></a>
              <a class="text-light" href="#" target="_blank"><i class="fab fa-twitter fa-sm fa-fw me-2"></i></a>
              <a class="text-light" href="#" target="_blank"><i class="fab fa-linkedin fa-sm fa-fw"></i></a>
          </div>
      </div>
  </div>
</nav>
<!-- Close Top Nav -->


<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light shadow">
  <div class="container d-flex justify-content-between align-items-center">

      <a class="navbar-brand text-success logo h1 align-self-center" href="#">
          Jassa
      </a>

      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#templatemo_main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

      <div class="align-self-center collapse navbar-collapse flex-fill  d-lg-flex justify-content-lg-between" id="templatemo_main_nav">
          <div class="flex-fill">
              <ul class="nav navbar-nav d-flex justify-content-between mx-lg-auto">
                  <li class="nav-item">
                      <a class="nav-link" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Shop</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Contact</a>
                  </li>
              </ul>
          </div>
          <div class="navbar align-self-center d-flex">
              <div class="d-lg-none flex-sm-fill mt-3 mb-4 col-7 col-sm-auto pr-3">
                  <div class="input-group">
                      <input type="text" class="form-control" id="inputMobileSearch" placeholder="Search ...">
                      <div class="input-group-text">
                          <i class="fa fa-fw fa-search"></i>
                      </div>
                  </div>
              </div>
              <a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#templatemo_search">
                  <i class="fa fa-fw fa-search text-dark mr-2"></i>
              </a>
              <a class="nav-icon position-relative text-decoration-none" href="#">
                  <i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
                  <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
              </a>
              <a class="nav-icon position-relative text-decoration-none" href="#">
                  <i class="fa fa-fw fa-user text-dark mr-3"></i>
                  <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">+99</span>
              </a>
          </div>
      </div>

  </div>
</nav>
<!-- Close Header -->

<!-- Modal -->
<div class="modal fade bg-white" id="templatemo_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
      <div class="w-100 pt-1 mb-5 text-right">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="" method="get" class="modal-content modal-body border-0 p-0">
          <div class="input-group mb-2">
              <input type="text" class="form-control" id="inputModalSearch" name="q" placeholder="Search ...">
              <button type="submit" class="input-group-text bg-success text-light">
                  <i class="fa fa-fw fa-search text-white"></i>
              </button>
          </div>
      </form>
  </div>
</div>



<!-- Start Banner Hero -->
<div id="template-mo-jassa-hero-carousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
      <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
      <div class="carousel-item active">
          <div class="container">
              <div class="row p-5">
                  <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                      <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_01.jpg" alt="">
                  </div>
                  <div class="col-lg-6 mb-0 d-flex align-items-center">
                      <div class="text-align-left align-self-center">
                          <h1 class="h1 text-success"><b>Jassa</b> eCommerce</h1>
                          <h3 class="h2">Lorem Ipsum Lorem Ipsum</h3>
                          <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="carousel-item">
          <div class="container">
              <div class="row p-5">
                  <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                      <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_02.jpg" alt="">
                  </div>
                  <div class="col-lg-6 mb-0 d-flex align-items-center">
                      <div class="text-align-left">
                          <h1 class="h1">Lorem Ipsum</h1>
                          <h3 class="h2">Lorem Ipsum Lorem Ipsum</h3>
                          <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="carousel-item">
          <div class="container">
              <div class="row p-5">
                  <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                      <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_03.jpg" alt="">
                  </div>
                  <div class="col-lg-6 mb-0 d-flex align-items-center">
                      <div class="text-align-left">
                          <h1 class="h1">Lorem Ipsum</h1>
                          <h3 class="h2">Lorem Ipsum Lorem Ipsum </h3>
                          <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#template-mo-jassa-hero-carousel" role="button" data-bs-slide="prev">
      <i class="fas fa-chevron-left"></i>
  </a>
  <a class="carousel-control-next text-decoration-none w-auto pe-3" href="#template-mo-jassa-hero-carousel" role="button" data-bs-slide="next">
      <i class="fas fa-chevron-right"></i>
  </a>
</div>
<!-- End Banner Hero -->


<!-- Start Categories of The Month -->
<section class="container py-5">
  <div class="row text-center pt-3">
      <div class="col-lg-6 m-auto">
          <h1 class="h1">Categories of The Month</h1>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          </p>
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-4 p-5 mt-3">
          <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_01.jpg" class="rounded-circle img-fluid border"></a>
          <h5 class="text-center mt-3 mb-3">Watches</h5>
          <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
      </div>
      <div class="col-12 col-md-4 p-5 mt-3">
          <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_02.jpg" class="rounded-circle img-fluid border"></a>
          <h2 class="h5 text-center mt-3 mb-3">Shoes</h2>
          <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
      </div>
      <div class="col-12 col-md-4 p-5 mt-3">
          <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_03.jpg" class="rounded-circle img-fluid border"></a>
          <h2 class="h5 text-center mt-3 mb-3">Accessories</h2>
          <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
      </div>
  </div>
</section>
<!-- End Categories of The Month -->


<!-- Start Featured Product -->
<section class="bg-light">
  <div class="container py-5">
      <div class="row text-center py-3">
          <div class="col-lg-6 m-auto">
              <h1 class="h1">Featured Product</h1>
              <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                when an unknown printer took a galley of type and scrambled it to make a type specimen book.
              </p>
          </div>
      </div>
      <div class="row">
          <div class="col-12 col-md-4 mb-4">
              <div class="card h-100">
                  <a href="#">
                      <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_01.jpg" class="card-img-top" alt="...">
                  </a>
                  <div class="card-body">
                      <ul class="list-unstyled d-flex justify-content-between">
                          <li>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                          </li>
                          <li class="text-muted text-right">$240.00</li>
                      </ul>
                      <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                      <p class="card-text">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
                      </p>
                      <p class="text-muted">Reviews (24)</p>
                  </div>
              </div>
          </div>
          <div class="col-12 col-md-4 mb-4">
              <div class="card h-100">
                  <a href="#">
                      <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_02.jpg" class="card-img-top" alt="...">
                  </a>
                  <div class="card-body">
                      <ul class="list-unstyled d-flex justify-content-between">
                          <li>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                              <i class="text-muted fa fa-star"></i>
                          </li>
                          <li class="text-muted text-right">$480.00</li>
                      </ul>
                      <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                      <p class="card-text">
                        Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum
                      </p>
                      <p class="text-muted">Reviews (48)</p>
                  </div>
              </div>
          </div>
          <div class="col-12 col-md-4 mb-4">
              <div class="card h-100">
                  <a href="#">
                      <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_03.jpg" class="card-img-top" alt="...">
                  </a>
                  <div class="card-body">
                      <ul class="list-unstyled d-flex justify-content-between">
                          <li>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                              <i class="text-warning fa fa-star"></i>
                          </li>
                          <li class="text-muted text-right">$360.00</li>
                      </ul>
                      <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                      <p class="card-text">
                        Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum.
                      </p>
                      <p class="text-muted">Reviews (74)</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>
<!-- End Featured Product -->


<!-- Start Footer -->
<footer class="bg-dark" id="tempaltemo_footer">
  <div class="container">
      <div class="row">

          <div class="col-md-4 pt-5">
              <h2 class="h2 text-success border-bottom pb-3 border-light logo">Jassa Shop</h2>
              <ul class="list-unstyled text-light footer-link-list">
                  <li>
                      <i class="fas fa-map-marker-alt fa-fw"></i>
                      India
                  </li>
                  <li>
                      <i class="fa fa-phone fa-fw"></i>
                      <a class="text-decoration-none" href="#">000-000-0000</a>
                  </li>
                  <li>
                      <i class="fa fa-envelope fa-fw"></i>
                      <a class="text-decoration-none" href="#">info@company.com</a>
                  </li>
              </ul>
          </div>

          <div class="col-md-4 pt-5">
              <h2 class="h2 text-light border-bottom pb-3 border-light">Products</h2>
              <ul class="list-unstyled text-light footer-link-list">
                  <li><a class="text-decoration-none" href="#">Luxury</a></li>
                  <li><a class="text-decoration-none" href="#">Sport Wear</a></li>
                  <li><a class="text-decoration-none" href="#">Men's Shoes</a></li>
                  <li><a class="text-decoration-none" href="#">Women's Shoes</a></li>
                  <li><a class="text-decoration-none" href="#">Popular Dress</a></li>
                  <li><a class="text-decoration-none" href="#">Gym Accessories</a></li>
                  <li><a class="text-decoration-none" href="#">Sport Shoes</a></li>
              </ul>
          </div>

          <div class="col-md-4 pt-5">
              <h2 class="h2 text-light border-bottom pb-3 border-light">Further Info</h2>
              <ul class="list-unstyled text-light footer-link-list">
                  <li><a class="text-decoration-none" href="#">Home</a></li>
                  <li><a class="text-decoration-none" href="#">About Us</a></li>
                  <li><a class="text-decoration-none" href="#">Shop Locations</a></li>
                  <li><a class="text-decoration-none" href="#">FAQs</a></li>
                  <li><a class="text-decoration-none" href="#">Contact</a></li>
              </ul>
          </div>

      </div>

      <div class="row text-light mb-4">
          <div class="col-12 mb-3">
              <div class="w-100 my-3 border-top border-light"></div>
          </div>
          <div class="col-auto me-auto">
              <ul class="list-inline text-left footer-icons">
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-facebook-f fa-lg fa-fw"></i></a>
                  </li>
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-instagram fa-lg fa-fw"></i></a>
                  </li>
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-twitter fa-lg fa-fw"></i></a>
                  </li>
                  <li class="list-inline-item border border-light rounded-circle text-center">
                      <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-linkedin fa-lg fa-fw"></i></a>
                  </li>
              </ul>
          </div>
          <div class="col-auto">
              <label class="sr-only" for="subscribeEmail">Email address</label>
              <div class="input-group mb-2">
                  <input type="text" class="form-control bg-dark border-light" id="subscribeEmail" placeholder="Email address">
                  <div class="input-group-text btn-success text-light">Subscribe</div>
              </div>
          </div>
      </div>
  </div>

  <div class="w-100 bg-black py-3">
      <div class="container">
          <div class="row pt-2">
              <div class="col-12">
                  <p class="text-left text-light">
                      Copyright &copy; 2021 Company Name 
                      | Designed by <a rel="sponsored" href="#" target="_blank">Jassa</a>
                  </p>
              </div>
          </div>
      </div>
  </div>

</footer>
<!-- End Footer -->
</body>
</html>

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements. Guy’s I will come with more demos.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks

May 27, 2021

Reactjs Ecommerce Template Free – Jassa Shop

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Ecommerce Template Free – Jassa Shop.

Guys in this post we will below things:

React js Bootstrap 5 Responsive Template Creation.
Implement Bootstrap 5 Carousel Slider in Reactjs Application.
Implement Bootstrap 5 Toggle Navigation in Reactjs Application.
Reactjs Bootstrap 5 Ecommerce Beautiful Shop Template.

React Free Templates

For reactjs and bootstrap 5 new comers, please check the below link:

Reactjs Basic Tutorials

Bootstrap 5 Tutorials

Friends now I proceed onwards and here is the working code snippet for react ecommerce template free and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reactboot5

cd reactboot5

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install bootstrap@next --save

npm i @popperjs/core

npm start //For start project again

3. Finally for the main output, we need to add below code into our reactboot5/src/App.js file or if you have fresh setup then you can replace reactboot5/src/App.js file code with below code:

import React from 'react';

import './App.css';

//Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';


export default function App() {
 

  return (
    <div className="app">
      
        <nav class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block" id="templatemo_nav_top">
          <div class="container text-light">
              <div class="w-100 d-flex justify-content-between">
                  <div>
                      <i class="fa fa-envelope mx-2"></i>
                      <a class="navbar-sm-brand text-light text-decoration-none" href="#">info@company.com</a>
                      <i class="fa fa-phone mx-2"></i>
                      <a class="navbar-sm-brand text-light text-decoration-none" href="#">010-000-0000</a>
                  </div>
                  <div>
                      <a class="text-light" href="#" target="_blank" rel="sponsored"><i class="fab fa-facebook-f fa-sm fa-fw me-2"></i></a>
                      <a class="text-light" href="#" target="_blank"><i class="fab fa-instagram fa-sm fa-fw me-2"></i></a>
                      <a class="text-light" href="#" target="_blank"><i class="fab fa-twitter fa-sm fa-fw me-2"></i></a>
                      <a class="text-light" href="#" target="_blank"><i class="fab fa-linkedin fa-sm fa-fw"></i></a>
                  </div>
              </div>
          </div>
        </nav>
       
        <nav class="navbar navbar-expand-lg navbar-light shadow">
          <div class="container d-flex justify-content-between align-items-center">

              <a class="navbar-brand text-success logo h1 align-self-center" href="#">
                  Jassa
              </a>

              <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#templatemo_main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>

              <div class="align-self-center collapse navbar-collapse flex-fill  d-lg-flex justify-content-lg-between" id="templatemo_main_nav">
                  <div class="flex-fill">
                      <ul class="nav navbar-nav d-flex justify-content-between mx-lg-auto">
                          <li class="nav-item">
                              <a class="nav-link" href="#">Home</a>
                          </li>
                          <li class="nav-item">
                              <a class="nav-link" href="#">About</a>
                          </li>
                          <li class="nav-item">
                              <a class="nav-link" href="#">Shop</a>
                          </li>
                          <li class="nav-item">
                              <a class="nav-link" href="#">Contact</a>
                          </li>
                      </ul>
                  </div>
                  <div class="navbar align-self-center d-flex">
                      <div class="d-lg-none flex-sm-fill mt-3 mb-4 col-7 col-sm-auto pr-3">
                          <div class="input-group">
                              <input type="text" class="form-control" id="inputMobileSearch" placeholder="Search ..." />
                              <div class="input-group-text">
                                  <i class="fa fa-fw fa-search"></i>
                              </div>
                          </div>
                      </div>
                      <a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#templatemo_search">
                          <i class="fa fa-fw fa-search text-dark mr-2"></i>
                      </a>
                      <a class="nav-icon position-relative text-decoration-none" href="#">
                          <i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
                          <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
                      </a>
                      <a class="nav-icon position-relative text-decoration-none" href="#">
                          <i class="fa fa-fw fa-user text-dark mr-3"></i>
                          <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">+99</span>
                      </a>
                  </div>
              </div>

          </div>
        </nav>
       
        <div class="modal fade bg-white" id="templatemo_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
              <div class="w-100 pt-1 mb-5 text-right">
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <form action="" method="get" class="modal-content modal-body border-0 p-0">
                  <div class="input-group mb-2">
                      <input type="text" class="form-control" id="inputModalSearch" name="q" placeholder="Search ..." />
                      <button type="submit" class="input-group-text bg-success text-light">
                          <i class="fa fa-fw fa-search text-white"></i>
                      </button>
                  </div>
              </form>
          </div>
        </div>



      
        <div id="template-mo-jassa-hero-carousel" class="carousel slide" data-bs-ride="carousel">
          <ol class="carousel-indicators">
              <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="0" class="active"></li>
              <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="1"></li>
              <li data-bs-target="#template-mo-jassa-hero-carousel" data-bs-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
              <div class="carousel-item active">
                  <div class="container">
                      <div class="row p-5">
                          <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                              <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_01.jpg" alt="" />
                          </div>
                          <div class="col-lg-6 mb-0 d-flex align-items-center">
                              <div class="text-align-left align-self-center">
                                  <h1 class="h1 text-success"><b>Jassa</b> eCommerce</h1>
                                  <h3 class="h2">Lorem Ipsum Lorem Ipsum</h3>
                                  <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                  </p>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="carousel-item">
                  <div class="container">
                      <div class="row p-5">
                          <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                              <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_02.jpg" alt="" />
                          </div>
                          <div class="col-lg-6 mb-0 d-flex align-items-center">
                              <div class="text-align-left">
                                  <h1 class="h1">Lorem Ipsum</h1>
                                  <h3 class="h2">Lorem Ipsum Lorem Ipsum</h3>
                                  <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                  </p>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="carousel-item">
                  <div class="container">
                      <div class="row p-5">
                          <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
                              <img class="img-fluid" src="https://therichpost.com/wp-content/uploads/2021/05/banner_img_03.jpg" alt="" />
                          </div>
                          <div class="col-lg-6 mb-0 d-flex align-items-center">
                              <div class="text-align-left">
                                  <h1 class="h1">Lorem Ipsum</h1>
                                  <h3 class="h2">Lorem Ipsum Lorem Ipsum </h3>
                                  <p>
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                  </p>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#template-mo-jassa-hero-carousel" role="button" data-bs-slide="prev">
              <i class="fas fa-chevron-left"></i>
          </a>
          <a class="carousel-control-next text-decoration-none w-auto pe-3" href="#template-mo-jassa-hero-carousel" role="button" data-bs-slide="next">
              <i class="fas fa-chevron-right"></i>
          </a>
        </div>
        
        <section class="container py-5">
          <div class="row text-center pt-3">
              <div class="col-lg-6 m-auto">
                  <h1 class="h1">Categories of The Month</h1>
                  <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                  </p>
              </div>
          </div>
          <div class="row">
              <div class="col-12 col-md-4 p-5 mt-3">
                  <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_01.jpg" class="rounded-circle img-fluid border" /></a>
                  <h5 class="text-center mt-3 mb-3">Watches</h5>
                  <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
              </div>
              <div class="col-12 col-md-4 p-5 mt-3">
                  <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_02.jpg" class="rounded-circle img-fluid border" /></a>
                  <h2 class="h5 text-center mt-3 mb-3">Shoes</h2>
                  <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
              </div>
              <div class="col-12 col-md-4 p-5 mt-3">
                  <a href="#"><img src="https://therichpost.com/wp-content/uploads/2021/05/category_img_03.jpg" class="rounded-circle img-fluid border" /></a>
                  <h2 class="h5 text-center mt-3 mb-3">Accessories</h2>
                  <p class="text-center"><a class="btn btn-success">Go Shop</a></p>
              </div>
          </div>
        </section>
        
        <section class="bg-light">
          <div class="container py-5">
              <div class="row text-center py-3">
                  <div class="col-lg-6 m-auto">
                      <h1 class="h1">Featured Product</h1>
                      <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                      </p>
                  </div>
              </div>
              <div class="row">
                  <div class="col-12 col-md-4 mb-4">
                      <div class="card h-100">
                          <a href="#">
                              <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_01.jpg" class="card-img-top" alt="..." />
                          </a>
                          <div class="card-body">
                              <ul class="list-unstyled d-flex justify-content-between">
                                  <li>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-muted fa fa-star"></i>
                                      <i class="text-muted fa fa-star"></i>
                                  </li>
                                  <li class="text-muted text-right">$240.00</li>
                              </ul>
                              <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                              <p class="card-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
                              </p>
                              <p class="text-muted">Reviews (24)</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-12 col-md-4 mb-4">
                      <div class="card h-100">
                          <a href="#">
                              <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_02.jpg" class="card-img-top" alt="..." />
                          </a>
                          <div class="card-body">
                              <ul class="list-unstyled d-flex justify-content-between">
                                  <li>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-muted fa fa-star"></i>
                                      <i class="text-muted fa fa-star"></i>
                                  </li>
                                  <li class="text-muted text-right">$480.00</li>
                              </ul>
                              <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                              <p class="card-text">
                                Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum
                              </p>
                              <p class="text-muted">Reviews (48)</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-12 col-md-4 mb-4">
                      <div class="card h-100">
                          <a href="#">
                              <img src="https://therichpost.com/wp-content/uploads/2021/05/feature_prod_03.jpg" class="card-img-top" alt="..." />
                          </a>
                          <div class="card-body">
                              <ul class="list-unstyled d-flex justify-content-between">
                                  <li>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-warning fa fa-star"></i>
                                      <i class="text-warning fa fa-star"></i>
                                  </li>
                                  <li class="text-muted text-right">$360.00</li>
                              </ul>
                              <a href="#" class="h2 text-decoration-none text-dark">Lorem Ipsum</a>
                              <p class="card-text">
                                Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum.
                              </p>
                              <p class="text-muted">Reviews (74)</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
        </section>
       
        <footer class="bg-dark" id="tempaltemo_footer">
          <div class="container">
              <div class="row">

                  <div class="col-md-4 pt-5">
                      <h2 class="h2 text-success border-bottom pb-3 border-light logo">Jassa Shop</h2>
                      <ul class="list-unstyled text-light footer-link-list">
                          <li>
                              <i class="fas fa-map-marker-alt fa-fw"></i>
                              India
                          </li>
                          <li>
                              <i class="fa fa-phone fa-fw"></i>
                              <a class="text-decoration-none" href="#">000-000-0000</a>
                          </li>
                          <li>
                              <i class="fa fa-envelope fa-fw"></i>
                              <a class="text-decoration-none" href="#">info@company.com</a>
                          </li>
                      </ul>
                  </div>

                  <div class="col-md-4 pt-5">
                      <h2 class="h2 text-light border-bottom pb-3 border-light">Products</h2>
                      <ul class="list-unstyled text-light footer-link-list">
                          <li><a class="text-decoration-none" href="#">Luxury</a></li>
                          <li><a class="text-decoration-none" href="#">Sport Wear</a></li>
                          <li><a class="text-decoration-none" href="#">Men's Shoes</a></li>
                          <li><a class="text-decoration-none" href="#">Women's Shoes</a></li>
                          <li><a class="text-decoration-none" href="#">Popular Dress</a></li>
                          <li><a class="text-decoration-none" href="#">Gym Accessories</a></li>
                          <li><a class="text-decoration-none" href="#">Sport Shoes</a></li>
                      </ul>
                  </div>

                  <div class="col-md-4 pt-5">
                      <h2 class="h2 text-light border-bottom pb-3 border-light">Further Info</h2>
                      <ul class="list-unstyled text-light footer-link-list">
                          <li><a class="text-decoration-none" href="#">Home</a></li>
                          <li><a class="text-decoration-none" href="#">About Us</a></li>
                          <li><a class="text-decoration-none" href="#">Shop Locations</a></li>
                          <li><a class="text-decoration-none" href="#">FAQs</a></li>
                          <li><a class="text-decoration-none" href="#">Contact</a></li>
                      </ul>
                  </div>

              </div>

              <div class="row text-light mb-4">
                  <div class="col-12 mb-3">
                      <div class="w-100 my-3 border-top border-light"></div>
                  </div>
                  <div class="col-auto me-auto">
                      <ul class="list-inline text-left footer-icons">
                          <li class="list-inline-item border border-light rounded-circle text-center">
                              <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-facebook-f fa-lg fa-fw"></i></a>
                          </li>
                          <li class="list-inline-item border border-light rounded-circle text-center">
                              <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-instagram fa-lg fa-fw"></i></a>
                          </li>
                          <li class="list-inline-item border border-light rounded-circle text-center">
                              <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-twitter fa-lg fa-fw"></i></a>
                          </li>
                          <li class="list-inline-item border border-light rounded-circle text-center">
                              <a class="text-light text-decoration-none" target="_blank" href="#"><i class="fab fa-linkedin fa-lg fa-fw"></i></a>
                          </li>
                      </ul>
                  </div>
                  <div class="col-auto">
                      <label class="sr-only" for="subscribeEmail">Email address</label>
                      <div class="input-group mb-2">
                          <input type="text" class="form-control bg-dark border-light" id="subscribeEmail" placeholder="Email address" />
                          <div class="input-group-text btn-success text-light">Subscribe</div>
                      </div>
                  </div>
              </div>
          </div>

          <div class="w-100 bg-black py-3">
              <div class="container">
                  <div class="row pt-2">
                      <div class="col-12">
                          <p class="text-left text-light">
                              Copyright &copy; 2021 Company Name 
                              | Designed by <a rel="sponsored" href="#" target="_blank">Jassa</a>
                          </p>
                      </div>
                  </div>
              </div>
          </div>

        </footer>
    </div>
  );
}

4. Now we need to add below code into our reactboot5/src/App.css file:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
body, ul, li, p, a, label, input, div {
    font-family: 'Roboto', sans-serif;
    font-size: 18px !important;
    font-weight: 300 !important;
  }
  .h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 48px !important;
    font-weight: 200 !important;
  }
  .h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 30px !important;
    font-weight: 300;
  }
  .h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 22px !important;
  }
  /* General */
  .logo { font-weight: 500 !important;}
  .text-warning {  color: #ede861 !important;}
  .text-muted { color: #bcbcbc !important;}
  .text-success { color: #59ab6e !important;}
  .text-light { color: #cfd6e1 !important;}
  .bg-dark { background-color: #212934 !important;}
  .bg-light { background-color: #e9eef5 !important;}
  .bg-black { background-color: #1d242d !important;}
  .bg-success { background-color: #59ab6e !important;}
  .btn-success {
    background-color: #59ab6e !important;
    border-color: #56ae6c !important;
  }
  .pagination .page-link:hover {color: #000;}
  .pagination .page-link:hover, .pagination .page-link.active {
    background-color: #69bb7e;
    color: #fff;
  }
  /* Nav */
  #templatemo_nav_top { min-height: 40px;}
  #templatemo_nav_top * { font-size: 12px !important;}
  #templatemo_main_nav a { color: #212934;}
  #templatemo_main_nav a:hover { color: #69bb7e;}
  #templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}
  
  /* Hero Carousel */
  #template-mo-jassa-hero-carousel { background: #efefef !important;}
  /* Accordion */
  .templatemo-accordion a { color: #000;}
  .templatemo-accordion a:hover { color: #333d4a;}
  /* Shop */
  .shop-top-menu a:hover { color: #69bb7e !important;}
  /* Product */
  .product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
  .product-wap .product-color-dot.color-dot-red { background:#f71515;}
  .product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
  .product-wap .product-color-dot.color-dot-black { background:#000000;}
  .product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
  .product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
  .card.product-wap .card .product-overlay {
    background: rgba(0,0,0,.2);
    visibility: hidden;
    opacity: 0;
    transition: .3s;
  }
  .card.product-wap:hover .card .product-overlay {
    visibility: visible;
    opacity: 1;
  }
  .card.product-wap a { color: #000;}
  #carousel-related-product .slick-slide:focus { outline: none !important;}
  #carousel-related-product .slick-dots li button:before {
    font-size: 15px;
    margin-top: 20px;
  }
  /* Brand */
  .brand-img {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: .5s;
  }
  .brand-img:hover {
    filter: grayscale(0%);
    opacity: 1;
  }
  /* Carousel Hero */
  #template-mo-jassa-hero-carousel .carousel-indicators li {
    margin-top: -50px;
    background-color: #59ab6e;
  }
  #template-mo-jassa-hero-carousel .carousel-control-next i,
  #template-mo-jassa-hero-carousel .carousel-control-prev i {
    color: #59ab6e !important;
    font-size: 2.8em !important;
  }
  /* Carousel Brand */
  .tempaltemo-carousel .h1 {
    font-size: .5em !important;
    color: #000 !important;
  }
  /* Services */
  .services-icon-wap {transition: .3s;}
  .services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
  .services-icon-wap:hover {background: #69bb7e;}
  /* Contact map */
  .leaflet-control a, .leaflet-control { font-size: 10px !important;}
  .form-control { border: 1px solid #e8e8e8;}
  /* Footer */
  #tempaltemo_footer a { color: #dcdde1;}
  #tempaltemo_footer a:hover { color: #68bb7d;}
  #tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
  #tempaltemo_footer ul.footer-icons li {
    width: 2.6em;
    height: 2.6em;
    line-height: 2.6em;
  }
  #tempaltemo_footer ul.footer-icons li:hover {
    background-color: #cfd6e1;
    transition: .5s;
  }
  #tempaltemo_footer ul.footer-icons li:hover i {
    color: #212934;
    transition: .5s;
  }
  #tempaltemo_footer .border-light { border-color: #2d343f !important;}
  /*
  // Extra small devices (portrait phones, less than 576px)
  // No media query since this is the default in Bootstrap
  */
  /* Small devices (landscape phones, 576px and up)*/
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
    font-size: 12px !important;
  }
  .product-wap .product-color-dot {
    width: 6px;
    height: 6px;
  }
  
  @media (min-width: 576px) {
    .tempaltemo-carousel .h1 { font-size: 1em !important;}
  }
  
  /*// Medium devices (tablets, 768px and up)*/
  @media (min-width: 768px) {
    #templatemo_main_nav .navbar-nav {max-width: 450px;}
   }
  
  /* Large devices (desktops, 992px and up)*/
  @media (min-width: 992px) {
    #templatemo_main_nav .navbar-nav {max-width: 550px;}
    #template-mo-jassa-hero-carousel .carousel-item {min-height: 30rem !important;}
    .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
    .product-wap .product-color-dot {
      width: 12px;
      height: 12px;
    }
  }
  
  /* Extra large devices (large desktops, 1200px and up)*/
  @media (min-width: 1200px) {}

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

May 27, 2021

Category: Bootstrap 5

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

2. Now friends, please download zip(in this zip file there are js, css, fonts and images for website template) file from below path and extract zip and get all the folders.

Create ‘assets’ folder inside vuetemplate/public folder.

Now please put that folders(which we will get from zip file) in “vuetemplate/public/assets” folder.

3. Now friends please add below inside vuetemplate/public/index.html file:

4. Finally friends we need to add below code into our vuetemplate/src/App.vue file to get final output on web browser:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. Now friends, please download zip(in this zip file there are js, css and images for angular ecommerce template) file from below path and extract zip and please put all the zip file folders in “src/assets” folder(which we will get from zip file):

https://therichpost.com/jassashop2.zip

3. Now friends we just need to add below code into angularboot5/src/app/app.component.html file to get final out on the web browser:

4. Now friends we just need to add below code into angularboot5/src/index.html file to style and scripts:

1. Now guy’s very first we need to run below command to set the routing in our project:

2. Now friends we need to create new folder `views` inside `src` folder and after it create new file `Home.vue` inside src/views folder and add below code inside it:

3. Now friends we need to create new file `Single.vue` inside src/views folder and add below code inside it:

4. Now friends we need to create new folder `router` inside `src` folder and after it create new file `index.js` inside src/router folder and add below code inside it:

5. Now friends we need to add below code inside src/main.js file to call the routing:

6. Now friends we need to add below code into src/App.vue file to check the final output on browser:

7. Now friends we need to add below code inside `src/components/Header.vue`file for home page linking:

1. Firstly friends we need fresh vue 3 setup and for this we need to run below commands . Secondly we should also have latest node version installed on our system. With below we will have bootstrap 5 modules in our Vue 3 application:

2. Now friends we need to add below code into vueboot5/src/App.vue file to check the final output on browser:

3. Now friends we need to create new file `Header.vue` inside components folder and add below code inside it:

4. Now friends we need to create new file `Footer.vue` inside components folder and add below code inside it:

5. Now friends we need code inside public/index.html file for bootstrap 5 icons and some custom style:

1. Firstly friends we need fresh angular 12 setup and for this we need to run below commands but if you already have angular 12 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

2. (Optional, I am using for table better looks)Now friends we need to run below commands into our project terminal to install bootstrap 5 modules into our angular application:

3. Now friends we just need to add below code into angularhooks/src/app/app.component.html file to get final out on the web browser:

4. Now friends we just need to add below code into angularhooks/src/app/app.component.ts file:

5. (Optional but must if install bootstrap 5)Guy’s now add below code into angularhooks/angular.json file:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

2. (Optional, I have used for better looks of table)Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

3. Finally for the main output, we need to add below code into our reacthooks/src/App.js file or if you have fresh setup then you can replace reacthooks/src/App.js file code with below code:

1. Now guy’s we will create `Checkout.js` file inside src/views folder and add below code inside it:

2. Guy’s for the main output, we need to add below code into our src/App.js file or if you have fresh setup then you can replace src/App.js file code with below code:

3. Now guy’s we need to below code inside src/views/Cart.js file for checkout page linking(check highlighted line number):

1. Guy’s very first we need to run below command into our project terminal to generate checkout files:

2. Now guy’s, now we need to add below code into our angularecom/src/app/app-routing.module.ts file to checkout page route:

3. Now guy’s, now we need to add below code into our angularecom/src/app/cart/cart.component.html file(check highlighted text) to checkout page link:

4. Now guy’s, now we need to add below code into our angularecom/src/app/checkout/checkout.component.html file:

1. Now friends, here is the complete working code snippet and I have added inside my laravel 8: projectname/resources/views/ welcome.blade.php file for showing you working example but you can add according to your requirement:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

3. Finally for the main output, we need to add below code into our reactboot5/src/App.js file or if you have fresh setup then you can replace reactboot5/src/App.js file code with below code:

4. Now we need to add below code into our reactboot5/src/App.css file: