Category: Angular

  • Angular Bootstrap Free Admin Dashboard Template

    Angular Bootstrap Free Admin Dashboard Template

    Hello friends, welcome back to my blog. Today this blog post will share you, Angular Bootstrap Free Admin Dashboard Template.


    Live Demo

    Angular Bootstrap Free Admin Dashboard Template
    Angular Bootstrap Free Admin Dashboard Template

    Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

    1. Angular 17 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 17 setup and for this we need to run below commands but if you already have angular 17 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 angularadmin //Create new Angular Project
    
    cd angularadmin // Go inside the Angular Project Folder

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

    <div class="wrapper">
        <nav class="topnav navbar navbar-light">
          <button type="button" class="navbar-toggler text-muted mt-2 p-0 mr-3 collapseSidebar">
            <i class="fe fe-menu navbar-toggler-icon"></i>
          </button>
          <form class="form-inline mr-auto searchform text-muted">
            <input class="form-control mr-sm-2 bg-transparent border-0 pl-4 text-muted" type="search" placeholder="Type something..." aria-label="Search">
          </form>
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link text-muted my-2" href="#" id="modeSwitcher" data-mode="light">
                <i class="fe fe-sun fe-16"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target=".modal-shortcut">
                <span class="fe fe-grid fe-16"></span>
              </a>
            </li>
            <li class="nav-item nav-notif">
              <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target=".modal-notif">
                <span class="fe fe-bell fe-16"></span>
                <span class="dot dot-md bg-success"></span>
              </a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle text-muted pr-0" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="avatar avatar-sm mt-2">
                  <img src="assets/images/face-1.jpg" alt="..." class="avatar-img rounded-circle">
                </span>
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Profile</a>
                <a class="dropdown-item" href="#">Settings</a>
                <a class="dropdown-item" href="#">Activities</a>
              </div>
            </li>
          </ul>
        </nav>
        <aside class="sidebar-left border-right bg-white shadow" id="leftSidebar" data-simplebar>
          <a href="#" class="btn collapseSidebar toggle-btn d-lg-none text-muted ml-2 mt-3" data-toggle="toggle">
            <i class="fe fe-x"><span class="sr-only"></span></i>
          </a>
          <nav class="vertnav navbar navbar-light">
            <!-- nav bar -->
            <div class="w-100 mb-4 d-flex">
              <a class="navbar-brand mx-auto mt-2 flex-fill text-center" href="#">
                <svg version="1.1" id="logo" class="navbar-brand-img brand-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve">
                  <g>
                    <polygon class="st0" points="78,105 15,105 24,87 87,87 	" />
                    <polygon class="st0" points="96,69 33,69 42,51 105,51 	" />
                    <polygon class="st0" points="78,33 15,33 24,15 87,15 	" />
                  </g>
                </svg>
              </a>
            </div>
            <ul class="navbar-nav flex-fill w-100 mb-2">
              <li class="nav-item dropdown">
                <a href="#dashboard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle nav-link">
                  <i class="fe fe-home fe-16"></i>
                  <span class="ml-3 item-text">Dashboard</span><span class="sr-only">(current)</span>
                </a>
                <ul class="collapse list-unstyled pl-4 w-100" id="dashboard">
                  <li class="nav-item active">
                    <a class="nav-link pl-3" href="#"><span class="ml-1 item-text">Default</span></a>
                  </li>
                 
                </ul>
              </li>
            </ul>
            
            <p class="text-muted nav-heading mt-4 mb-1">
              <span>Extra</span>
            </p>
            <ul class="navbar-nav flex-fill w-100 mb-2">
             
              <li class="nav-item dropdown">
                <a href="#auth" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle nav-link">
                  <i class="fe fe-shield fe-16"></i>
                  <span class="ml-3 item-text">Authentication</span>
                </a>
                <ul class="collapse list-unstyled pl-4 w-100" id="auth">
                  <a class="nav-link pl-3" href="#"><span class="ml-1">Login</span></a>
                  <a class="nav-link pl-3" href="#"><span class="ml-1">Register</span></a>
                 
                </ul>
              </li>
            </ul>
            <p class="text-muted nav-heading mt-4 mb-1">
              <span>Documentation</span>
            </p>
            <ul class="navbar-nav flex-fill w-100 mb-2">
              <li class="nav-item w-100">
                <a class="nav-link" href="#">
                  <i class="fe fe-help-circle fe-16"></i>
                  <span class="ml-3 item-text">Getting Start</span>
                </a>
              </li>
            </ul>
           
          </nav>
        </aside>
        <main role="main" class="main-content">
          <div class="container-fluid">
            <div class="row justify-content-center">
              <div class="col-12">
                <div class="row align-items-center mb-2">
                  <div class="col">
                    <h2 class="h5 page-title">Welcome!</h2>
                  </div>
                  <div class="col-auto">
                    <form class="form-inline">
                      <div class="form-group d-none d-lg-inline">
                        <label for="reportrange" class="sr-only">Date Ranges</label>
                        <div id="reportrange" class="px-2 py-2 text-muted">
                          <span class="small"></span>
                        </div>
                      </div>
                      <div class="form-group">
                        <button type="button" class="btn btn-sm"><span class="fe fe-refresh-ccw fe-16 text-muted"></span></button>
                        <button type="button" class="btn btn-sm mr-2"><span class="fe fe-filter fe-16 text-muted"></span></button>
                      </div>
                    </form>
                  </div>
                </div>
                <!-- widgets -->
                <div class="row my-4">
                  <div class="col-md-4">
                    <div class="card shadow mb-4">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col">
                            <small class="text-muted mb-1">Page Views</small>
                            <h3 class="card-title mb-0">1168</h3>
                            <p class="small text-muted mb-0"><span class="fe fe-arrow-down fe-12 text-danger"></span><span>-18.9% Last week</span></p>
                          </div>
                          <div class="col-4 text-right">
                            <span class="sparkline inlineline"></span>
                          </div>
                        </div> <!-- /. row -->
                      </div> <!-- /. card-body -->
                    </div> <!-- /. card -->
                  </div> <!-- /. col -->
                  <div class="col-md-4">
                    <div class="card shadow mb-4">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col">
                            <small class="text-muted mb-1">Conversion</small>
                            <h3 class="card-title mb-0">68</h3>
                            <p class="small text-muted mb-0"><span class="fe fe-arrow-up fe-12 text-warning"></span><span>+1.9% Last week</span></p>
                          </div>
                          <div class="col-4 text-right">
                            <span class="sparkline inlinepie"></span>
                          </div>
                        </div> <!-- /. row -->
                      </div> <!-- /. card-body -->
                    </div> <!-- /. card -->
                  </div> <!-- /. col -->
                  <div class="col-md-4">
                    <div class="card shadow mb-4">
                      <div class="card-body">
                        <div class="row align-items-center">
                          <div class="col">
                            <small class="text-muted mb-1">Visitors</small>
                            <h3 class="card-title mb-0">108</h3>
                            <p class="small text-muted mb-0"><span class="fe fe-arrow-up fe-12 text-success"></span><span>37.7% Last week</span></p>
                          </div>
                          <div class="col-4 text-right">
                            <span class="sparkline inlinebar"></span>
                          </div>
                        </div> <!-- /. row -->
                      </div> <!-- /. card-body -->
                    </div> <!-- /. card -->
                  </div> <!-- /. col -->
                </div> <!-- end section -->
                <!-- linechart -->
                <div class="my-4">
                  <div id="lineChart"></div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="card shadow mb-4">
                      <div class="card-header">
                        <strong>Goal</strong>
                      </div>
                      <div class="card-body px-4">
                        <div class="row border-bottom">
                          <div class="col-4 text-center mb-3">
                            <p class="mb-1 small text-muted">Completions</p>
                            <span class="h3">26</span><br />
                            <span class="small text-muted">+20%</span>
                            <span class="fe fe-arrow-up text-success fe-12"></span>
                          </div>
                          <div class="col-4 text-center mb-3">
                            <p class="mb-1 small text-muted">Goal Value</p>
                            <span class="h3">$260</span><br />
                            <span class="small text-muted">+6%</span>
                            <span class="fe fe-arrow-up text-success fe-12"></span>
                          </div>
                          <div class="col-4 text-center mb-3">
                            <p class="mb-1 small text-muted">Conversion</p>
                            <span class="h3">6%</span><br />
                            <span class="small text-muted">-2%</span>
                            <span class="fe fe-arrow-down text-danger fe-12"></span>
                          </div>
                        </div>
                        <table class="table table-borderless mt-3 mb-1 mx-n1 table-sm">
                          <thead>
                            <tr>
                              <th class="w-50">Goal</th>
                              <th class="text-right">Conversion</th>
                              <th class="text-right">Completions</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>Checkout</td>
                              <td class="text-right">5%</td>
                              <td class="text-right">260</td>
                            </tr>
                            <tr>
                              <td>Add to Cart</td>
                              <td class="text-right">55%</td>
                              <td class="text-right">1260</td>
                            </tr>
                            <tr>
                              <td>Contact</td>
                              <td class="text-right">18%</td>
                              <td class="text-right">460</td>
                            </tr>
                          </tbody>
                        </table>
                      </div> <!-- .card-body -->
                    </div> <!-- .card -->
                  </div> <!-- .col -->
                  <div class="col-md-6">
                    <div class="card shadow mb-4">
                      <div class="card-header">
                        <strong class="card-title">Top Selling</strong>
                        <a class="float-right small text-muted" href="#!">View all</a>
                      </div>
                      <div class="card-body">
                        <div class="list-group list-group-flush my-n3">
                          <div class="list-group-item">
                            <div class="row align-items-center">
                              <div class="col-3 col-md-2">
                                <img src="assets/images/p1.jpg" alt="..." class="thumbnail-sm">
                              </div>
                              <div class="col">
                                <strong>Fusion Backpack</strong>
                                <div class="my-0 text-muted small">Gear, Bags</div>
                              </div>
                              <div class="col-auto">
                                <strong>+85%</strong>
                                <div class="progress mt-2" style="height: 4px;">
                                  <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="list-group-item">
                            <div class="row align-items-center">
                              <div class="col-3 col-md-2">
                                <img src="assets/images/p2.jpg" alt="..." class="thumbnail-sm">
                              </div>
                              <div class="col">
                                <strong>Luma hoodies</strong>
                                <div class="my-0 text-muted small">Jackets, Men</div>
                              </div>
                              <div class="col-auto">
                                <strong>+75%</strong>
                                <div class="progress mt-2" style="height: 4px;">
                                  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="list-group-item">
                            <div class="row align-items-center">
                              <div class="col-3 col-md-2">
                                <img src="assets/images/p3.jpg" alt="..." class="thumbnail-sm">
                              </div>
                              <div class="col">
                                <strong>Luma shorts</strong>
                                <div class="my-0 text-muted small">Shorts, Men</div>
                              </div>
                              <div class="col-auto">
                                <strong>+62%</strong>
                                <div class="progress mt-2" style="height: 4px;">
                                  <div class="progress-bar" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="list-group-item">
                            <div class="row align-items-center">
                              <div class="col-3 col-md-2">
                                <img src="assets/images/p4.jpg" alt="..." class="thumbnail-sm">
                              </div>
                              <div class="col">
                                <strong>Brown Trousers</strong>
                                <div class="my-0 text-muted small">Trousers, Women</div>
                              </div>
                              <div class="col-auto">
                                <strong>+24%</strong>
                                <div class="progress mt-2" style="height: 4px;">
                                  <div class="progress-bar" role="progressbar" style="width: 24%" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div> <!-- / .list-group -->
                      </div> <!-- / .card-body -->
                    </div> <!-- .card -->
                  </div> <!-- .col -->
                </div> <!-- .row -->
                <div class="row">
                  <div class="col-md-4">
                    <div class="card shadow eq-card  mb-4">
                      <div class="card-header">
                        <strong>Region</strong>
                      </div>
                      <div class="card-body">
                        <div class="map-box my-5" style="position:relative; max-width: 320px; max-height: 200px; margin:0 auto;">
                          <div id="dataMapUSA"></div>
                        </div>
                        <div class="row align-items-bottom my-2">
                          <div class="col">
                            <p class="mb-0">France</p>
                            <span class="my-0 text-muted small">+10%</span>
                          </div>
                          <div class="col-auto text-right">
                            <p class="mb-0">118</p>
                            <div class="progress mt-2" style="height: 4px;">
                              <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                        </div>
                        <div class="row align-items-center my-2">
                          <div class="col">
                            <p class="mb-0">Netherlands</p>
                            <span class="my-0 text-muted small">+0.6%</span>
                          </div>
                          <div class="col-auto text-right">
                            <p class="mb-0">1008</p>
                            <div class="progress mt-2" style="height: 4px;">
                              <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                        </div>
                        <div class="row align-items-center my-2">
                          <div class="col">
                            <p class="mb-0">Italy</p>
                            <span class="my-0 text-muted small">+1.6%</span>
                          </div>
                          <div class="col-auto text-right">
                            <p class="mb-0">67</p>
                            <div class="progress mt-2" style="height: 4px;">
                              <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                        </div>
                        <div class="row align-items-center my-2">
                          <div class="col">
                            <p class="mb-0">Spain</p>
                            <span class="my-0 text-muted small">+118%</span>
                          </div>
                          <div class="col-auto text-right">
                            <p class="mb-0">186</p>
                            <div class="progress mt-2" style="height: 4px;">
                              <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> <!-- .col -->
                  <div class="col-md-4">
                    <div class="card shadow eq-card mb-4">
                      <div class="card-header">
                        <strong class="card-title">Traffic</strong>
                        <a class="float-right small text-muted" href="#!">View all</a>
                      </div>
                      <div class="card-body">
                        <div class="chart-box mb-3" style="min-height:180px;">
                          <div id="customAngle"></div>
                        </div> <!-- .col -->
                        <div class="mx-auto">
                          <div class="row align-items-center mb-2">
                            <div class="col">
                              <p class="mb-0">Direct</p>
                              <span class="my-0 text-muted small">+10%</span>
                            </div>
                            <div class="col-auto text-right">
                              <p class="mb-0">218</p>
                              <span class="dot dot-md bg-success"></span>
                            </div>
                          </div>
                          <div class="row align-items-center mb-2">
                            <div class="col">
                              <p class="mb-0">Organic Search</p>
                              <span class="my-0 text-muted small">+0.6%</span>
                            </div>
                            <div class="col-auto text-right">
                              <p class="mb-0">1002</p>
                              <span class="dot dot-md bg-warning"></span>
                            </div>
                          </div>
                          <div class="row align-items-center mb-2">
                            <div class="col">
                              <p class="mb-0">Referral</p>
                              <span class="my-0 text-muted small">+1.6%</span>
                            </div>
                            <div class="col-auto text-right">
                              <p class="mb-0">67</p>
                              <span class="dot dot-md bg-primary"></span>
                            </div>
                          </div>
                          <div class="row align-items-center">
                            <div class="col">
                              <p class="mb-0">Social</p>
                              <span class="my-0 text-muted small">+118%</span>
                            </div>
                            <div class="col-auto text-right">
                              <p class="mb-0">386</p>
                              <span class="dot dot-md bg-secondary"></span>
                            </div>
                          </div>
                        </div>
                      </div> <!-- .card-body -->
                    </div> <!-- .card -->
                  </div> <!-- .col-md -->
                  <div class="col-md-4">
                    <div class="card shadow eq-card mb-4">
                      <div class="card-header">
                        <strong>Browsers</strong>
                      </div>
                      <div class="card-body">
                        <div class="chart-box mt-3 mb-5">
                          <div id="radarChartWidget"></div>
                        </div> <!-- .col -->
                        <div class="mx-auto">
                          <div class="row align-items-center my-2">
                            <div class="col-6 col-xl-3 my-3">
                              <span class="mb-0">Safari</span>
                              <div class="progress my-2" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <div class="col-6 col-xl-3 my-3 text-right">
                              <span>118</span><br />
                              <span class="my-0 text-muted small">+10%</span>
                            </div>
                            <div class="col-6 col-xl-3 my-3">
                              <span class="mb-0">Chrome</span>
                              <div class="progress my-2" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 36%" aria-valuenow="36" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <div class="col-6 col-xl-3 my-3 text-right">
                              <span>1008</span><br />
                              <span class="my-0 text-muted small">+36%</span>
                            </div>
                            <div class="col-6 col-xl-3 my-3">
                              <span class="mb-0">Opera</span>
                              <div class="progress my-2" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <div class="col-6 col-xl-3 my-3 text-right">
                              <span>67</span><br />
                              <span class="my-0 text-muted small">+1.6%</span>
                            </div>
                            <div class="col-6 col-xl-3 my-3">
                              <span class="mb-0">Edge</span>
                              <div class="progress my-2" style="height: 4px;">
                                <div class="progress-bar" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <div class="col-6 col-xl-3 my-3 text-right">
                              <span>186</span><br />
                              <span class="my-0 text-muted small">+118%</span>
                            </div>
                          </div>
                        </div>
                      </div> <!-- .card-body -->
                    </div> <!-- .card -->
                  </div> <!-- .col -->
                </div>
              </div> <!-- /.col -->
            </div> <!-- .row -->
          </div> <!-- .container-fluid -->
          <div class="modal fade modal-notif modal-slide" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="defaultModalLabel">Notifications</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <div class="list-group list-group-flush my-n3">
                    <div class="list-group-item bg-transparent">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span class="fe fe-box fe-24"></span>
                        </div>
                        <div class="col">
                          <small><strong>Package has uploaded successfull</strong></small>
                          <div class="my-0 text-muted small">Package is zipped and uploaded</div>
                          <small class="badge badge-pill badge-light text-muted">1m ago</small>
                        </div>
                      </div>
                    </div>
                    <div class="list-group-item bg-transparent">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span class="fe fe-download fe-24"></span>
                        </div>
                        <div class="col">
                          <small><strong>Widgets are updated successfull</strong></small>
                          <div class="my-0 text-muted small">Just create new layout Index, form, table</div>
                          <small class="badge badge-pill badge-light text-muted">2m ago</small>
                        </div>
                      </div>
                    </div>
                    <div class="list-group-item bg-transparent">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span class="fe fe-inbox fe-24"></span>
                        </div>
                        <div class="col">
                          <small><strong>Notifications have been sent</strong></small>
                          <div class="my-0 text-muted small">Fusce dapibus, tellus ac cursus commodo</div>
                          <small class="badge badge-pill badge-light text-muted">30m ago</small>
                        </div>
                      </div> <!-- / .row -->
                    </div>
                    <div class="list-group-item bg-transparent">
                      <div class="row align-items-center">
                        <div class="col-auto">
                          <span class="fe fe-link fe-24"></span>
                        </div>
                        <div class="col">
                          <small><strong>Link was attached to menu</strong></small>
                          <div class="my-0 text-muted small">New layout has been attached to the menu</div>
                          <small class="badge badge-pill badge-light text-muted">1h ago</small>
                        </div>
                      </div>
                    </div> <!-- / .row -->
                  </div> <!-- / .list-group -->
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary btn-block" data-dismiss="modal">Clear All</button>
                </div>
              </div>
            </div>
          </div>
          <div class="modal fade modal-shortcut modal-slide" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="defaultModalLabel">Shortcuts</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body px-5">
                  <div class="row align-items-center">
                    <div class="col-6 text-center">
                      <div class="squircle bg-success justify-content-center">
                        <i class="fe fe-cpu fe-32 align-self-center text-white"></i>
                      </div>
                      <p>Control area</p>
                    </div>
                    <div class="col-6 text-center">
                      <div class="squircle bg-primary justify-content-center">
                        <i class="fe fe-activity fe-32 align-self-center text-white"></i>
                      </div>
                      <p>Activity</p>
                    </div>
                  </div>
                  <div class="row align-items-center">
                    <div class="col-6 text-center">
                      <div class="squircle bg-primary justify-content-center">
                        <i class="fe fe-droplet fe-32 align-self-center text-white"></i>
                      </div>
                      <p>Droplet</p>
                    </div>
                    <div class="col-6 text-center">
                      <div class="squircle bg-primary justify-content-center">
                        <i class="fe fe-upload-cloud fe-32 align-self-center text-white"></i>
                      </div>
                      <p>Upload</p>
                    </div>
                  </div>
                  <div class="row align-items-center">
                    <div class="col-6 text-center">
                      <div class="squircle bg-primary justify-content-center">
                        <i class="fe fe-users fe-32 align-self-center text-white"></i>
                      </div>
                      <p>Users</p>
                    </div>
                    <div class="col-6 text-center">
                      <div class="squircle bg-primary justify-content-center">
                        <i class="fe fe-settings fe-32 align-self-center text-white"></i>
                      </div>
                      <p>Settings</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main> <!-- main -->
      </div> <!-- .wrapper -->

    3. Now friends we just need to add below code into angularadmin/src/index.html file to call styles & scripts:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Ajooni Dashboard - A Bootstrap Dashboard Template</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    
     <!-- Simple bar CSS -->
     <link rel="stylesheet" href="assets/css/simplebar.css">
     <!-- Fonts CSS -->
     <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <!-- Icons CSS -->
     <link rel="stylesheet" href="assets/css/feather.css">
     <link rel="stylesheet" href="assets/css/select2.css">
     <link rel="stylesheet" href="assets/css/dropzone.css">
     <link rel="stylesheet" href="assets/css/uppy.min.css">
     <link rel="stylesheet" href="assets/css/jquery.steps.css">
     <link rel="stylesheet" href="assets/css/jquery.timepicker.css">
     <link rel="stylesheet" href="assets/css/quill.snow.css">
     <!-- Date Range Picker CSS -->
     <link rel="stylesheet" href="assets/css/daterangepicker.css">
     <!-- App CSS -->
     <link rel="stylesheet" href="assets/css/app-light.css" id="lightTheme">
     <link rel="stylesheet" href="assets/css/app-dark.css" id="darkTheme" disabled>
    </head>
    <body class="vertical  light  ">
      <app-root></app-root>
       
      <script src="assets/js/jquery.min.js"></script>
      <script src="assets/js/popper.min.js"></script>
      <script src="assets/js/moment.min.js"></script>
      <script src="assets/js/bootstrap.min.js"></script>
      <script src="assets/js/simplebar.min.js"></script>
      <script src='assets/js/daterangepicker.js'></script>
      <script src='assets/js/jquery.stickOnScroll.js'></script>
      <script src="assets/js/tinycolor-min.js"></script>
      <script src="assets/js/config.js"></script>
      <script src="assets/js/d3.min.js"></script>
      <script src="assets/js/topojson.min.js"></script>
      <script src="assets/js/datamaps.all.min.js"></script>
      <script src="assets/js/datamaps-zoomto.js"></script>
      <script src="assets/js/datamaps.custom.js"></script>
      <script src="assets/js/Chart.min.js"></script>
      <script>
        /* defind global options */
        Chart.defaults.global.defaultFontFamily = base.defaultFontFamily;
        Chart.defaults.global.defaultFontColor = colors.mutedColor;
      </script>
      <script src="assets/js/gauge.min.js"></script>
      <script src="assets/js/jquery.sparkline.min.js"></script>
      <script src="assets/js/apexcharts.min.js"></script>
      <script src="assets/js/apexcharts.custom.js"></script>
      <script src='assets/js/jquery.mask.min.js'></script>
      <script src='assets/js/select2.min.js'></script>
      <script src='assets/js/jquery.steps.min.js'></script>
      <script src='assets/js/jquery.validate.min.js'></script>
      <script src='assets/js/jquery.timepicker.js'></script>
      <script src='assets/js/dropzone.min.js'></script>
      <script src='assets/js/uppy.min.js'></script>
      <script src='assets/js/quill.min.js'></script>
      <script>
        $('.select2').select2(
        {
          theme: 'bootstrap4',
        });
        $('.select2-multi').select2(
        {
          multiple: true,
          theme: 'bootstrap4',
        });
        $('.drgpicker').daterangepicker(
        {
          singleDatePicker: true,
          timePicker: false,
          showDropdowns: true,
          locale:
          {
            format: 'MM/DD/YYYY'
          }
        });
        $('.time-input').timepicker(
        {
          'scrollDefault': 'now',
          'zindex': '9999' /* fix modal open */
        });
        /** date range picker */
        if ($('.datetimes').length)
        {
          $('.datetimes').daterangepicker(
          {
            timePicker: true,
            startDate: moment().startOf('hour'),
            endDate: moment().startOf('hour').add(32, 'hour'),
            locale:
            {
              format: 'M/DD hh:mm A'
            }
          });
        }
        var start = moment().subtract(29, 'days');
        var end = moment();
    
        function cb(start, end)
        {
          $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }
        $('#reportrange').daterangepicker(
        {
          startDate: start,
          endDate: end,
          ranges:
          {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          }
        }, cb);
        cb(start, end);
        $('.input-placeholder').mask("00/00/0000",
        {
          placeholder: "__/__/____"
        });
        $('.input-zip').mask('00000-000',
        {
          placeholder: "____-___"
        });
        $('.input-money').mask("#.##0,00",
        {
          reverse: true
        });
        $('.input-phoneus').mask('(000) 000-0000');
        $('.input-mixed').mask('AAA 000-S0S');
        $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
        {
          translation:
          {
            'Z':
            {
              pattern: /[0-9]/,
              optional: true
            }
          },
          placeholder: "___.___.___.___"
        });
        // editor
        var editor = document.getElementById('editor');
        if (editor)
        {
          var toolbarOptions = [
            [
            {
              'font': []
            }],
            [
            {
              'header': [1, 2, 3, 4, 5, 6, false]
            }],
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [
            {
              'header': 1
            },
            {
              'header': 2
            }],
            [
            {
              'list': 'ordered'
            },
            {
              'list': 'bullet'
            }],
            [
            {
              'script': 'sub'
            },
            {
              'script': 'super'
            }],
            [
            {
              'indent': '-1'
            },
            {
              'indent': '+1'
            }], // outdent/indent
            [
            {
              'direction': 'rtl'
            }], // text direction
            [
            {
              'color': []
            },
            {
              'background': []
            }], // dropdown with defaults from theme
            [
            {
              'align': []
            }],
            ['clean'] // remove formatting button
          ];
          var quill = new Quill(editor,
          {
            modules:
            {
              toolbar: toolbarOptions
            },
            theme: 'snow'
          });
        }
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function()
        {
          'use strict';
          window.addEventListener('load', function()
          {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form)
            {
              form.addEventListener('submit', function(event)
              {
                if (form.checkValidity() === false)
                {
                  event.preventDefault();
                  event.stopPropagation();
                }
                form.classList.add('was-validated');
              }, false);
            });
          }, false);
        })();
      </script>
      <script>
        var uptarg = document.getElementById('drag-drop-area');
        if (uptarg)
        {
          var uppy = Uppy.Core().use(Uppy.Dashboard,
          {
            inline: true,
            target: uptarg,
            proudlyDisplayPoweredByUppy: false,
            theme: 'dark',
            width: 770,
            height: 210,
            plugins: ['Webcam']
          }).use(Uppy.Tus,
          {
            endpoint: ''
          });
          uppy.on('complete', (result) =>
          {
            console.log('Upload complete! We’ve uploaded these files:', result.successful)
          });
        }
      </script>
      <script src="assets/js/apps.js"></script>
    </body>
    </html>

    5. Guys now here is the git repo link from where we will get images, fonts, css and js folder and place all the folder inside assets folder:

    Free Git Repo Link

    Friends in the end must run ng serve command into your terminal to run the angular 17 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

  • Angular 17 Dynamic Routing Working Tutorial

    Angular 17 Dynamic Routing Working Tutorial

    Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Angular 17 Dynamic Routing Working Tutorial

    Live Demo

    Angular 17 came and if you are new then you must check below two links:

    1. Angular 17 for beginners

    Friends now I proceed onwards and here is the working code snippet for Angular 17 Dynamic Routing Working Tutorial and please use carefully this to avoid the mistakes:

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

    Guys, you can skip this step if you already have angular 10 fresh setup:

    npm install -g @angular/cli 
    
    ng new dynamicrouting //Create new Angular Project
    
    cd dynamicrouting // Go inside the Angular Project Folder
    
    ng serve --open // Run and Open the Angular Project
    
    http://localhost:4200/ // Working Angular Project Url

    2. Now friends we need to run below commands to generate components users and userdetails:

    ng g component users
    
    ng g component userdetails
    
    ng serve --o

    3. Now friends we need to add below code into your src/app/app.routes.ts file:

    import { Routes } from '@angular/router';
    import {UsersComponent} from './users/users.component';
    import { UserDetailComponent } from './user-detail/user-detail.component';
    export const routes: Routes = [
          {
            path: 'user', title: 'User Page', component: UsersComponent,
          },
          {
            path: 'user-detail/:id', title: 'User Details Page', component: UserDetailComponent,
          }
    ];
    

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

     <div class="jumbotron text-center">
      <h1>Therichpost.com</h1>
    </div> 
    <nav class="navbar navbar-expand-sm bg-light">
      <ul class="nav nav-pills">
        <li class="nav-item"><a class="nav-link" routerLink="/">Home</a></li>
        <li class="nav-item"><a class="nav-link" routerLink="/user">users</a></li>
      </ul>
    </nav>
    <br>
    
    <div class="container-fluid">
    <h3><router-outlet></router-outlet></h3>
    </div>

    For bootstrap styling, you can follow this :- Add Bootstrap in Angular

    5. Now friends we need to add below code into src/app/users/users.component.html file:

    <h1>Users</h1>
    <ul class="nav nav-pills">
      <li class="nav-item"><a class="nav-link" routerLink="/user-detail/1">user1</a></li>
      <li class="nav-item"><a class="nav-link" routerLink="/user-detail/2">user2</a></li>
    </ul>

    6. Now friends we need to add below code into src/app/userdetails/userdetails.component.html file:

    <h2> User No: {{id}}</h2>

    7. Now friends we need to add below code into src/app/userdetails/userdetails.component.ts file:

    import { Component } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { ActivatedRoute } from '@angular/router';
    @Component({
      selector: 'app-user-detail',
      standalone: true,
      imports: [CommonModule],
      templateUrl: './user-detail.component.html',
      styleUrl: './user-detail.component.css'
    })
    export class UserDetailComponent {
      id : any;
        constructor(private activatedRoute: ActivatedRoute) {
       
      }
      ngOnInit() {
       
        this.id = this.activatedRoute.snapshot.paramMap.get('id');
        console.log(this.id);
      }
     
    }
    

    8. Guys we need to add important code inside src/app/users/users.component.ts file to make router link working:

    ...
    
    import { RouterLink, ActivatedRoute} from '@angular/router';
    
    ..
    @Component({
      ...
      imports: [CommonModule, RouterLink],
      ...
    })
    ...

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

  • Angular 17 Majestic Ecommerce Free Website Template

    Angular 17 Majestic Ecommerce Free Website Template

    Hello friends, welcome back to my blog. Today this blog post will share you, Angular 17 Majestic Ecommerce Free Website Template.


    Live Demo

    Angular 17 Majestic Ecommerce Free Website Template
    Angular 17 Majestic Ecommerce Free Website Template

    Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

    1. Angular 17 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 17 setup and for this we need to run below commands but if you already have angular 17 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 angulareco //Create new Angular Project
    
    cd angulareco // Go inside the Angular Project Folder

    2. Now friends we just need to add below code into angulareco/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/images/logo.png" alt="logo" /><span class="text-1000 fs-0 fw-bold ms-2">Majestic</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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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 id="categoryWomen">
              <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">Shop By Category</h5>
                  </div>
                  <div class="col-12">
                    <nav>
                      <div class="nav nav-tabs majestic-tabs mb-4 justify-content-center" id="nav-tab" role="tablist"><button class="nav-link active" id="nav-women-tab" data-bs-toggle="tab" data-bs-target="#nav-women" type="button" role="tab" aria-controls="nav-women" aria-selected="true">For Women</button><button class="nav-link" id="nav-men-tab" data-bs-toggle="tab" data-bs-target="#nav-men" type="button" role="tab" aria-controls="nav-men" aria-selected="false">For Men</button></div>
                      <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-women" role="tabpanel" aria-labelledby="nav-women-tab">
                          <ul class="nav nav-pills justify-content-center mb-5" id="pills-tab-women" role="tablist">
                            <li class="nav-item" role="presentation"><button class="nav-link active" id="pills-wtshirt-tab" data-bs-toggle="pill" data-bs-target="#pills-wtshirt" type="button" role="tab" aria-controls="pills-wtshirt" aria-selected="true">T-Shirt</button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-dresses-tab" data-bs-toggle="pill" data-bs-target="#pills-dresses" type="button" role="tab" aria-controls="pills-dresses" aria-selected="false">Shirt</button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-wshoes-tab" data-bs-toggle="pill" data-bs-target="#pills-wshoes" type="button" role="tab" aria-controls="pills-wshoes" aria-selected="false">Shoes</button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-wwatch-tab" data-bs-toggle="pill" data-bs-target="#pills-wwatch" type="button" role="tab" aria-controls="pills-wwatch" aria-selected="false">Watch </button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-wsunglasses-tab" data-bs-toggle="pill" data-bs-target="#pills-wsunglasses" type="button" role="tab" aria-controls="pills-wsunglasses" aria-selected="false">Sunglasses </button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-wbagpacks-tab" data-bs-toggle="pill" data-bs-target="#pills-wbagpacks" type="button" role="tab" aria-controls="pills-wbagpacks" aria-selected="false">Bagpacks </button></li>
                          </ul>
                          <div class="tab-content" id="pills-tabContentWomen">
                            <div class="tab-pane fade" id="pills-dresses" role="tabpanel" aria-labelledby="pills-dresses-tab">
                              <div class="carousel slide" id="carouselCategoryDresses" 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/images/shirt-1.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">Shirt</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/images/shirt-2.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">Gray Shirt</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/images/shirt-3.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">White Shirt</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/images/shirt-4.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 Shirt</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shirt-1.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">Shirt</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/images/shirt-2.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">Gray Shirt</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/images/shirt-3.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">White Shirt</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/images/shirt-4.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 Shirt</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shirt-1.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">Shirt</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/images/shirt-2.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">Gray Shirt</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/images/shirt-3.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">White Shirt</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/images/shirt-4.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 Shirt</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shirt-1.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">Shirt</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/images/shirt-2.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">Gray Shirt</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/images/shirt-3.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">White Shirt</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/images/shirt-4.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 Shirt</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategoryDresses" 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="#carouselCategoryDresses" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade show active" id="pills-wtshirt" role="tabpanel" aria-labelledby="pills-wtshirt-tab">
                              <div class="carousel slide" id="carouselCategoryWTshirt" 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/images/red-tshirt.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 T-Shirt</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/images/pink-tshirt.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">Pink T-Shirt</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/images/orange-tshirt.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">Orange T-Shirt</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/images/purple-tshirt.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">Purple T-Shirt</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/images/red-tshirt.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 T-Shirt</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/images/pink-tshirt.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">Pink T-Shirt</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/images/orange-tshirt.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">Orange T-Shirt</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/images/purple-tshirt.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">Purple T-Shirt</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/images/red-tshirt.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 T-Shirt</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/images/pink-tshirt.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">Pink T-Shirt</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/images/orange-tshirt.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">Orange T-Shirt</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/images/purple-tshirt.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">Purple T-Shirt</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/images/red-tshirt.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 T-Shirt</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/images/pink-tshirt.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">Pink T-Shirt</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/images/orange-tshirt.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">Orange T-Shirt</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/images/purple-tshirt.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">Purple T-Shirt</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="#carouselCategoryWTshirt" 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="#carouselCategoryWTshirt" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade" id="pills-wshoes" role="tabpanel" aria-labelledby="pills-wshoes-tab">
                              <div class="carousel slide" id="carouselCategoryWShoes" 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/images/shoe-1.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">Shoe</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/images/shoe-2.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-3.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">Shoe</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/images/shoe-4.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-1.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">Shoe</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/images/shoe-2.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-3.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">Shoe</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/images/shoe-4.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-1.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">Shoe</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/images/shoe-2.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-3.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">Shoe</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/images/shoe-4.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-1.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">Shoe</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/images/shoe-2.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-3.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">Shoe</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/images/shoe-4.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategoryWShoes" 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="#carouselCategoryWShoes" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade" id="pills-wwatch" role="tabpanel" aria-labelledby="pills-wwatch-tab">
                              <div class="carousel slide" id="carouselCategoryWwatch" 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/images/watch-1.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-2.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-3.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-4.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-1.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-2.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-3.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-4.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-1.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-2.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-3.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-4.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-1.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-2.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-3.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-4.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategoryWwatch" 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="#carouselCategoryWwatch" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade" id="pills-wsunglasses" role="tabpanel" aria-labelledby="pills-wsunglasses-tab">
                              <div class="carousel slide" id="carouselCategoryWSunglasses" 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/images/sunglass-1.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-2.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-3.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-4.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-5.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-6.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-7.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-8.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-5.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-6.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-7.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-8.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-5.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-6.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-7.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-8.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategoryWSunglasses" 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="#carouselCategoryWSunglasses" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade" id="pills-wbagpacks" role="tabpanel" aria-labelledby="pills-wbagpacks-tab">
                              <div class="carousel slide" id="carouselCategoryWBagpacks" 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/images/bagpacks-1.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-2.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-3.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-4.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-1.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-2.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-3.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-4.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-1.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-2.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-3.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-4.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-1.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-2.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-3.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-4.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategoryWBagpacks" 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="#carouselCategoryWBagpacks" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                          </div>
                        </div>
                        <div class="tab-pane fade" id="nav-men" role="tabpanel" aria-labelledby="nav-men-tab">
                          <ul class="nav nav-pills mb-5 justify-content-center" id="pills-tab-men" role="tablist">
                            <li class="nav-item" role="presentation"><button class="nav-link active" id="pills-tshirt-tab" data-bs-toggle="pill" data-bs-target="#pills-tshirt" type="button" role="tab" aria-controls="pills-tshirt" aria-selected="true">T-Shirt</button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-shirt-tab" data-bs-toggle="pill" data-bs-target="#pills-shirt" type="button" role="tab" aria-controls="pills-shirt" aria-selected="false">Shirt</button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-shoes-tab" data-bs-toggle="pill" data-bs-target="#pills-shoes" type="button" role="tab" aria-controls="pills-shoes" aria-selected="false">Shoes</button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-watch-tab" data-bs-toggle="pill" data-bs-target="#pills-watch" type="button" role="tab" aria-controls="pills-watch" aria-selected="false">Watch </button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-sunglasses-tab" data-bs-toggle="pill" data-bs-target="#pills-sunglasses" type="button" role="tab" aria-controls="pills-sunglasses" aria-selected="false">Sunglasses </button></li>
                            <li class="nav-item" role="presentation"><button class="nav-link" id="pills-bagpacks-tab" data-bs-toggle="pill" data-bs-target="#pills-bagpacks" type="button" role="tab" aria-controls="pills-bagpacks" aria-selected="false">Bagpacks </button></li>
                          </ul>
                          <div class="tab-content" id="pills-tabContentMen">
                            <div class="tab-pane fade show active" id="pills-tshirt" role="tabpanel" aria-labelledby="pills-tshirt-tab">
                              <div class="carousel slide" id="carouselCategoryTshirt" 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/images/white-tshirt.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">White T-Shirt</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/images/sky-tshirt.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">Sky T-Shirt</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/images/yellow-tshirt.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">Yellow T-Shirt</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/images/black-tshirt.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 T-Shirt</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/images/white-tshirt.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">White T-Shirt</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/images/sky-tshirt.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">Sky T-Shirt</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/images/yellow-tshirt.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">Yellow T-Shirt</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/images/black-tshirt.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 T-Shirt</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/images/white-tshirt.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">White T-Shirt</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/images/sky-tshirt.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">Sky T-Shirt</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/images/yellow-tshirt.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">Yellow T-Shirt</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/images/black-tshirt.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 T-Shirt</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/images/white-tshirt.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">White T-Shirt</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/images/sky-tshirt.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">Sky T-Shirt</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/images/yellow-tshirt.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">Yellow T-Shirt</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/images/black-tshirt.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 T-Shirt</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="#carouselCategoryTshirt" 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="#carouselCategoryTshirt" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade" id="pills-shirt" role="tabpanel" aria-labelledby="pills-shirt-tab">
                              <div class="carousel slide" id="carouselCategoryShirt" 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/images/shirt-5.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">Shirt</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/images/shirt-6.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">Gray Shirt</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/images/shirt-7.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">White Shirt</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/images/shirt-8.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 Shirt</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shirt-5.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">Shirt</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/images/shirt-6.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">Gray Shirt</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/images/shirt-7.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">White Shirt</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/images/shirt-8.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 Shirt</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shirt-5.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">Shirt</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/images/shirt-6.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">Gray Shirt</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/images/shirt-7.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">White Shirt</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/images/shirt-8.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 Shirt</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shirt-5.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">Shirt</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/images/shirt-6.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">Gray Shirt</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/images/shirt-7.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">White Shirt</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/images/shirt-8.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 Shirt</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategoryShirt" 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="#carouselCategoryShirt" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade" id="pills-shoes" role="tabpanel" aria-labelledby="pills-shoes-tab">
                              <div class="carousel slide" id="carouselCategoryShoes" 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/images/shoe-5.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">Shoe</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/images/shoe-6.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-7.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">Shoe</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/images/shoe-8.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-5.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">Shoe</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/images/shoe-6.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-7.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">Shoe</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/images/shoe-8.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-5.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">Shoe</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/images/shoe-6.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-7.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">Shoe</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/images/shoe-8.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-5.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">Shoe</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/images/shoe-6.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/shoe-7.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">Shoe</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/images/shoe-8.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">Shoe</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategoryShoes" 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="#carouselCategoryShoes" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade" id="pills-watch" role="tabpanel" aria-labelledby="pills-watch-tab">
                              <div class="carousel slide" id="carouselCategoryWatch" 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/images/watch-5.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-6.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-7.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-8.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-5.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-6.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-7.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-8.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-5.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-6.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-7.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-8.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-5.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-6.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-7.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/watch-8.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">Watch</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategoryWatch" 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="#carouselCategoryWatch" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade" id="pills-sunglasses" role="tabpanel" aria-labelledby="pills-sunglasses-tab">
                              <div class="carousel slide" id="carouselCategorySunglasses" 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/images/sunglass-5.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-6.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-7.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-8.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-5.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-6.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-7.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-8.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-5.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-6.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-7.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-8.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-5.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-6.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-7.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/sunglass-8.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">Sunglass</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategorySunglasses" 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="#carouselCategorySunglasses" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                            <div class="tab-pane fade" id="pills-bagpacks" role="tabpanel" aria-labelledby="pills-bagpacks-tab">
                              <div class="carousel slide" id="carouselCategoryBagpacks" 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/images/bagpacks-5.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-6.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-7.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-8.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-5.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-6.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-7.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-8.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-5.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-6.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-7.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-8.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-5.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-6.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-7.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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/images/bagpacks-8.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">Bagpacks</h5>
                                            <div class="fw-bold"><span class="text-600 me-2 text-decoration-line-through">$500</span><span class="text-primary">$275</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="#carouselCategoryBagpacks" 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="#carouselCategoryBagpacks" 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 class="col-12 d-flex justify-content-center mt-5"> <a class="btn btn-lg btn-dark" href="#!">View All </a></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </nav>
                  </div>
                </div>
              </div>
            </section>
      
            <!-- ============================================-->
            <!-- <section> begin ============================-->
            <section class="py-0" 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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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/images/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">+1111111</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">therichpost.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">therichpost </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. Guys we can call the scripts and styles inside angular.json file or index.file, so now friends we just need to add below code into angulareco/angular.json file to custom.js file working code:

    ...
     "styles": [
                  "src/styles.css",
                  "src/assets/css/theme.min.css"
                ],
                "scripts": [
                "assets/js/popper.min.js",
                "assets/js/bootstrap.min.js",
                "assets/js/is.min.js",
                "assets/js/feather.min.js",
                "assets/js/theme.js"
                ],
    ...

    5. Guys now here is the git repo link from where we will get images, fonts, css and js folder and place all the folder inside assets folder:

    Free Git Repo Link

    6. Now friends we just need to add below code into angulareco/src/imdex.html file:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Angular17</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    
     <!-- ===============================================-->
        <!--    Stylesheets-->
        <!-- ===============================================-->
        <link href="assets/css/theme.min.css" rel="stylesheet" />
    </head>
    <body>
      <app-root></app-root>
       
       <!-- ===============================================-->
        <!--    JavaScripts-->
        <!-- ===============================================-->
        <script src="assets/js/popper.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/is.min.js"></script>
        <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
        <script src="assets/js/feather.min.js"></script>
        <script>
          feather.replace();
        </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">
    </body>
    </html>
    
    

    Friends in the end must run ng serve command into your terminal to run the angular 17 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

  • How to pass the data from one component to another components in Angular 17?

    How to pass the data from one component to another components in Angular 17?

    Hello to all welcome back on my blog therichpost.com. Today in this blog post, I am going to tell you, How to pass the data from one component to another components in Angular 17?

    Guys in this post we will cover below things:

    1. Angular17 Routing.
    2. Responsive Navigation in Angular17 with Bootstrap 5.
    3. Create components in Angular.
    4. Create service file.
    Live Demo
    How to pass the data from one component to another components in Angular 17?
    How to pass the data from one component to another components in Angular 17?

    Guy’s Angular 17 came and if you are new in Angular 17 then please check the below link:

    1. Angular 17 Tutorials

    Guy’s here is working code snippet for Angular 17 Routing Tutorial and please follow it carefully to avoid the mistakes:

    1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 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 angularrouting //Create new Angular Project
    
    cd angularrouting // Go inside the Angular Project Folder

    2. Now guy’s, here we need to run below command into our project terminal to install bootstrap 5 module for styling and good looks into our angular application(optional) and service file for data sharing:

    npm install bootstrap 
    
    npm i @popperjs/core
    
    ng generate service data-sharing

    3. Now guy’s, here we need to run below commands into our project terminal to create home and about components for routing:

    ng g c home
    
    ng g c about

    4. Now guy’s, now we need to add below code into our angularrouting/angular.json file to add bootstrap style:

    ...
     "styles": [
                  "src/styles.css",
                  "node_modules/bootstrap/dist/css/bootstrap.min.css",
                  
                ],

    5. Now guy’s, now we need to add below code into our angularrouting/src/app/app-routes.ts file to make routes:

    import { Routes } from '@angular/router';
    import {HomeComponent} from './home/home.component';
    import {AboutComponent} from './about/about.component';
    export const routes: Routes = [
          {
            path: '', title: 'Home Page', component: HomeComponent,
          },
          {
            path: 'about', title: 'About Page', component: AboutComponent,
          },
    ];

    6. Now guys, now we need to add below code into our angularrouting/src/app/app.component.html file to set the angular frontend and call others components with routing:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" routerLink="/">Therichpost.com</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">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" routerLink="/">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLink="/about">About</a>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
    <div class="container p-5">
      <router-outlet></router-outlet>
    </div>

    7. Now guys, now we need to add below code into our angularrouting/src/app/app-component.ts file to make routing works:

    import { Component } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterLink, RouterOutlet } from '@angular/router';
    
    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [CommonModule, RouterOutlet, RouterLink],
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'angular17';
    }

    8. Now guys, now we need to add below code into our angularrouting/src/app/data-sharing.service.ts file to create data sharing variable:

    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root'
    })
    export class DataSharingService {
      sharedData: any;
      constructor() { }
    }
    

    9. Now guys, now we need to add below code into our angularrouting/src/app/home/home.component.ts file to value inside data sharing variable and we will call that inside about component:

    import { Component } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { DataSharingService } from '../data-sharing.service';
    @Component({
      selector: 'app-home',
      standalone: true,
      imports: [CommonModule],
      templateUrl: './home.component.html',
      styleUrl: './home.component.css'
    })
    export class HomeComponent {
      constructor(private dataSharingService: DataSharingService){
        this.dataSharingService.sharedData = 'Hello from Home Component';
      }
    }

    10. Now guys, now we need to add below code into our angularrouting/src/app/about/about.component.ts file to call the data sharing variable and and get value:

    import { Component } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { DataSharingService } from '../data-sharing.service';
    
    @Component({
      selector: 'app-about',
      standalone: true,
      imports: [CommonModule],
      templateUrl: './about.component.html',
      styleUrl: './about.component.css'
    })
    export class AboutComponent {
      receivedData: any;
      constructor(private dataSharingService: DataSharingService) {}
      ngOnInit() {
        this.receivedData = this.dataSharingService.sharedData;
      }
    }
    

    11. Now guys, now we need to add below code into our angularrouting/src/app/about/about.component.html file to show the value:

    <p>about works!</p>
    {{receivedData}}

    Guy’s in the end please run ng serve command to check the out 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.

  • Angular 17 Free FoodMart Ecommerce Website Template

    Angular 17 Free FoodMart Ecommerce Website Template

    Hello friends, welcome back to my blog. Today this blog post will share you, Angular 17 Free FoodMart Ecommerce Website Template.


    Live Demo

    Angular 17 Free FoodMart Ecommerce Website Template
    Angular 17 Free FoodMart Ecommerce Website Template

    Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

    1. Angular 17 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 17 setup and for this we need to run below commands but if you already have angular 17 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 angulareco //Create new Angular Project
    
    cd angulareco // Go inside the Angular Project Folder

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

    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <defs>
        <symbol xmlns="http://www.w3.org/2000/svg" id="link" viewBox="0 0 24 24">
          <path fill="currentColor" d="M12 19a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm5 0a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm0-4a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm-5 0a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm7-12h-1V2a1 1 0 0 0-2 0v1H8V2a1 1 0 0 0-2 0v1H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3Zm1 17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9h16Zm0-11H4V6a1 1 0 0 1 1-1h1v1a1 1 0 0 0 2 0V5h8v1a1 1 0 0 0 2 0V5h1a1 1 0 0 1 1 1ZM7 15a1 1 0 1 0-1-1a1 1 0 0 0 1 1Zm0 4a1 1 0 1 0-1-1a1 1 0 0 0 1 1Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="arrow-right" viewBox="0 0 24 24">
          <path fill="currentColor" d="M17.92 11.62a1 1 0 0 0-.21-.33l-5-5a1 1 0 0 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l5-5a1 1 0 0 0 .21-.33a1 1 0 0 0 0-.76Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="category" viewBox="0 0 24 24">
          <path fill="currentColor" d="M19 5.5h-6.28l-.32-1a3 3 0 0 0-2.84-2H5a3 3 0 0 0-3 3v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3Zm1 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-13a1 1 0 0 1 1-1h4.56a1 1 0 0 1 .95.68l.54 1.64a1 1 0 0 0 .95.68h7a1 1 0 0 1 1 1Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="calendar" viewBox="0 0 24 24">
          <path fill="currentColor" d="M19 4h-2V3a1 1 0 0 0-2 0v1H9V3a1 1 0 0 0-2 0v1H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm1 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7h16Zm0-9H4V7a1 1 0 0 1 1-1h2v1a1 1 0 0 0 2 0V6h6v1a1 1 0 0 0 2 0V6h2a1 1 0 0 1 1 1Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="heart" viewBox="0 0 24 24">
          <path fill="currentColor" d="M20.16 4.61A6.27 6.27 0 0 0 12 4a6.27 6.27 0 0 0-8.16 9.48l7.45 7.45a1 1 0 0 0 1.42 0l7.45-7.45a6.27 6.27 0 0 0 0-8.87Zm-1.41 7.46L12 18.81l-6.75-6.74a4.28 4.28 0 0 1 3-7.3a4.25 4.25 0 0 1 3 1.25a1 1 0 0 0 1.42 0a4.27 4.27 0 0 1 6 6.05Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="plus" viewBox="0 0 24 24">
          <path fill="currentColor" d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="minus" viewBox="0 0 24 24">
          <path fill="currentColor" d="M19 11H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="cart" viewBox="0 0 24 24">
          <path fill="currentColor" d="M8.5 19a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 8.5 19ZM19 16H7a1 1 0 0 1 0-2h8.491a3.013 3.013 0 0 0 2.885-2.176l1.585-5.55A1 1 0 0 0 19 5H6.74a3.007 3.007 0 0 0-2.82-2H3a1 1 0 0 0 0 2h.921a1.005 1.005 0 0 1 .962.725l.155.545v.005l1.641 5.742A3 3 0 0 0 7 18h12a1 1 0 0 0 0-2Zm-1.326-9l-1.22 4.274a1.005 1.005 0 0 1-.963.726H8.754l-.255-.892L7.326 7ZM16.5 19a1.5 1.5 0 1 0 1.5 1.5a1.5 1.5 0 0 0-1.5-1.5Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="check" viewBox="0 0 24 24">
          <path fill="currentColor" d="M18.71 7.21a1 1 0 0 0-1.42 0l-7.45 7.46l-3.13-3.14A1 1 0 1 0 5.29 13l3.84 3.84a1 1 0 0 0 1.42 0l8.16-8.16a1 1 0 0 0 0-1.47Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="trash" viewBox="0 0 24 24">
          <path fill="currentColor" d="M10 18a1 1 0 0 0 1-1v-6a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1ZM20 6h-4V5a3 3 0 0 0-3-3h-2a3 3 0 0 0-3 3v1H4a1 1 0 0 0 0 2h1v11a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8h1a1 1 0 0 0 0-2ZM10 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h-4Zm7 14a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8h10Zm-3-1a1 1 0 0 0 1-1v-6a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="star-outline" viewBox="0 0 15 15">
          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.5 9.804L5.337 11l.413-2.533L4 6.674l2.418-.37L7.5 4l1.082 2.304l2.418.37l-1.75 1.793L9.663 11L7.5 9.804Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="star-solid" viewBox="0 0 15 15">
          <path fill="currentColor" d="M7.953 3.788a.5.5 0 0 0-.906 0L6.08 5.85l-2.154.33a.5.5 0 0 0-.283.843l1.574 1.613l-.373 2.284a.5.5 0 0 0 .736.518l1.92-1.063l1.921 1.063a.5.5 0 0 0 .736-.519l-.373-2.283l1.574-1.613a.5.5 0 0 0-.283-.844L8.921 5.85l-.968-2.062Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="search" viewBox="0 0 24 24">
          <path fill="currentColor" d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 7-7a7 7 0 0 1-7 7Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="user" viewBox="0 0 24 24">
          <path fill="currentColor" d="M15.71 12.71a6 6 0 1 0-7.42 0a10 10 0 0 0-6.22 8.18a1 1 0 0 0 2 .22a8 8 0 0 1 15.9 0a1 1 0 0 0 1 .89h.11a1 1 0 0 0 .88-1.1a10 10 0 0 0-6.25-8.19ZM12 12a4 4 0 1 1 4-4a4 4 0 0 1-4 4Z"/>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" id="close" viewBox="0 0 15 15">
          <path fill="currentColor" d="M7.953 3.788a.5.5 0 0 0-.906 0L6.08 5.85l-2.154.33a.5.5 0 0 0-.283.843l1.574 1.613l-.373 2.284a.5.5 0 0 0 .736.518l1.92-1.063l1.921 1.063a.5.5 0 0 0 .736-.519l-.373-2.283l1.574-1.613a.5.5 0 0 0-.283-.844L8.921 5.85l-.968-2.062Z"/>
        </symbol>
      </defs>
    </svg>
    
    <div class="preloader-wrapper">
      <div class="preloader">
      </div>
    </div>
    
    <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasCart">
      <div class="offcanvas-header justify-content-center">
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div class="order-md-last">
          <h4 class="d-flex justify-content-between align-items-center mb-3">
            <span class="text-primary">Your cart</span>
            <span class="badge bg-primary rounded-pill">3</span>
          </h4>
          <ul class="list-group mb-3">
            <li class="list-group-item d-flex justify-content-between lh-sm">
              <div>
                <h6 class="my-0">Growers cider</h6>
                <small class="text-body-secondary">Brief description</small>
              </div>
              <span class="text-body-secondary">$12</span>
            </li>
            <li class="list-group-item d-flex justify-content-between lh-sm">
              <div>
                <h6 class="my-0">Fresh grapes</h6>
                <small class="text-body-secondary">Brief description</small>
              </div>
              <span class="text-body-secondary">$8</span>
            </li>
            <li class="list-group-item d-flex justify-content-between lh-sm">
              <div>
                <h6 class="my-0">Heinz tomato ketchup</h6>
                <small class="text-body-secondary">Brief description</small>
              </div>
              <span class="text-body-secondary">$5</span>
            </li>
            <li class="list-group-item d-flex justify-content-between">
              <span>Total (USD)</span>
              <strong>$20</strong>
            </li>
          </ul>
    
          <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
        </div>
      </div>
    </div>
    
    <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasSearch">
      <div class="offcanvas-header justify-content-center">
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <div class="order-md-last">
          <h4 class="d-flex justify-content-between align-items-center mb-3">
            <span class="text-primary">Search</span>
          </h4>
          <form role="search" action="#" method="get" class="d-flex mt-3 gap-0">
            <input class="form-control rounded-start rounded-0 bg-light" type="email" placeholder="What are you looking for?" aria-label="What are you looking for?">
            <button class="btn btn-dark rounded-end rounded-0" type="submit">Search</button>
          </form>
        </div>
      </div>
    </div>
    
    <header>
      <div class="container-fluid">
        <div class="row py-3 border-bottom">
          
          <div class="col-sm-4 col-lg-3 text-center text-sm-start">
            <div class="main-logo">
              <a href="#">
                <img src="assets/images/logo.png" alt="logo" class="img-fluid">
              </a>
            </div>
          </div>
          
          <div class="col-sm-6 offset-sm-2 offset-md-0 col-lg-5 d-none d-lg-block">
            <div class="search-bar row bg-light p-2 my-2 rounded-4">
              <div class="col-md-4 d-none d-md-block">
                <select class="form-select border-0 bg-transparent">
                  <option>All Categories</option>
                  <option>Groceries</option>
                  <option>Drinks</option>
                  <option>Chocolates</option>
                </select>
              </div>
              <div class="col-11 col-md-7">
                <form id="search-form" class="text-center" action="#" method="post">
                  <input type="text" class="form-control border-0 bg-transparent" placeholder="Search for more than 20,000 products">
                </form>
              </div>
              <div class="col-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 7-7a7 7 0 0 1-7 7Z"/></svg>
              </div>
            </div>
          </div>
          
          <div class="col-sm-8 col-lg-4 d-flex justify-content-end gap-5 align-items-center mt-4 mt-sm-0 justify-content-center justify-content-sm-end">
            <div class="support-box text-end d-none d-xl-block">
              <span class="fs-6 text-muted">For Support?</span>
              <h5 class="mb-0">+980-34984089</h5>
            </div>
    
            <ul class="d-flex justify-content-end list-unstyled m-0">
              <li>
                <a href="#" class="rounded-circle bg-light p-2 mx-1">
                  <svg width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#user"></use></svg>
                </a>
              </li>
              <li>
                <a href="#" class="rounded-circle bg-light p-2 mx-1">
                  <svg width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#heart"></use></svg>
                </a>
              </li>
              <li class="d-lg-none">
                <a href="#" class="rounded-circle bg-light p-2 mx-1" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart" aria-controls="offcanvasCart">
                  <svg width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#cart"></use></svg>
                </a>
              </li>
              <li class="d-lg-none">
                <a href="#" class="rounded-circle bg-light p-2 mx-1" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSearch" aria-controls="offcanvasSearch">
                  <svg width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#search"></use></svg>
                </a>
              </li>
            </ul>
    
            <div class="cart text-end d-none d-lg-block dropdown">
              <button class="border-0 bg-transparent d-flex flex-column gap-2 lh-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart" aria-controls="offcanvasCart">
                <span class="fs-6 text-muted dropdown-toggle">Your Cart</span>
                <span class="cart-total fs-5 fw-bold">$1290.00</span>
              </button>
            </div>
          </div>
    
        </div>
      </div>
      <div class="container-fluid">
        <div class="row py-3">
          <div class="d-flex  justify-content-center justify-content-sm-between align-items-center">
            <nav class="main-menu d-flex navbar navbar-expand-lg">
    
              <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
                aria-controls="offcanvasNavbar">
                <span class="navbar-toggler-icon"></span>
              </button>
    
              <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar">
    
                <div class="offcanvas-header justify-content-center">
                  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
    
                <div class="offcanvas-body">
              
                  <select class="filter-categories border-0 mb-0 me-5">
                    <option>Shop by Departments</option>
                    <option>Groceries</option>
                    <option>Drinks</option>
                    <option>Chocolates</option>
                  </select>
              
                  <ul class="navbar-nav justify-content-end menu-list list-unstyled d-flex gap-md-3 mb-0">
                    <li class="nav-item active">
                      <a href="#women" class="nav-link">Women</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a href="#men" class="nav-link">Men</a>
                    </li>
                    <li class="nav-item">
                      <a href="#kids" class="nav-link">Kids</a>
                    </li>
                    <li class="nav-item">
                      <a href="#accessories" class="nav-link">Accessories</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" role="button" id="pages" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
                      <ul class="dropdown-menu" aria-labelledby="pages">
                        <li><a href="#" class="dropdown-item">About Us <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">Shop <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">Single Product <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">Cart <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">Checkout <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">Blog <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">Single Post <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">Styles <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">Contact <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">Thank You <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">My Account <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                        <li><a href="#" class="dropdown-item">404 Error <span class="badge bg-success text-dark ms-2">PRO</span></a></li>
                      </ul>
                    </li>
                    <li class="nav-item">
                      <a href="#brand" class="nav-link">Brand</a>
                    </li>
                    <li class="nav-item">
                      <a href="#sale" class="nav-link">Sale</a>
                    </li>
                    <li class="nav-item">
                      <a href="#blog" class="nav-link">Blog</a>
                    </li>
                  </ul>
                
                </div>
    
              </div>
    
            </nav>
            <div class="d-none d-lg-block">
              <a href="https://therichpost.com" target="_blank" class="nav-link btn-coupon-code">
                <img src="assets/images/gift.svg" alt="gift icon">
                <strong class="ms-2 text-dark">Get PRO Version</strong>
              </a>
            </div>
          </div>
        </div>
      </div>
    </header>
    
    <section class="py-3" style="background-image: url('assets/images/background-pattern.jpg');background-repeat: no-repeat;background-size: cover;">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
    
            <div class="banner-blocks">
            
              <div class="banner-ad large bg-info block-1">
    
                <div class="swiper main-swiper">
                  <div class="swiper-wrapper">
                    
                    <div class="swiper-slide">
                      <div class="row banner-content p-5">
                        <div class="content-wrapper col-md-7">
                          <div class="categories my-3">100% natural</div>
                          <h3 class="display-4">Fresh Smoothie & Summer Juice</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim massa diam elementum.</p>
                          <a href="#" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1 px-4 py-3 mt-3">Shop Now</a>
                        </div>
                        <div class="img-wrapper col-md-5">
                          <img src="assets/images/product-thumb-1.png" alt="Product Thumbnail" class="img-fluid">
                        </div>
                      </div>
                    </div>
                    
                    <div class="swiper-slide">
                      <div class="row banner-content p-5">
                        <div class="content-wrapper col-md-7">
                          <div class="categories mb-3 pb-3">100% natural</div>
                          <h3 class="banner-title">Fresh Smoothie & Summer Juice</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim massa diam elementum.</p>
                          <a href="#" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1">Shop Collection</a>
                        </div>
                        <div class="img-wrapper col-md-5">
                          <img src="assets/images/product-thumb-1.png" alt="Product Thumbnail" class="img-fluid">
                        </div>
                      </div>
                    </div>
                    
                    <div class="swiper-slide">
                      <div class="row banner-content p-5">
                        <div class="content-wrapper col-md-7">
                          <div class="categories mb-3 pb-3">100% natural</div>
                          <h3 class="banner-title">Heinz Tomato Ketchup</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim massa diam elementum.</p>
                          <a href="#" class="btn btn-outline-dark btn-lg text-uppercase fs-6 rounded-1">Shop Collection</a>
                        </div>
                        <div class="img-wrapper col-md-5">
                          <img src="assets/images/product-thumb-2.png" alt="Product Thumbnail" class="img-fluid">
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="swiper-pagination"></div>
    
                </div>
              </div>
              
              <div class="banner-ad bg-success-subtle block-2" style="background:url('assets/images/ad-image-1.png') no-repeat;background-position: right bottom">
                <div class="row banner-content p-5">
    
                  <div class="content-wrapper col-md-7">
                    <div class="categories sale mb-3 pb-3">20% off</div>
                    <h3 class="banner-title">Fruits & Vegetables</h3>
                    <a href="#" class="d-flex align-items-center nav-link">Shop Collection <svg width="24" height="24"><use xlink:href="#arrow-right"></use></svg></a>
                  </div>
    
                </div>
              </div>
    
              <div class="banner-ad bg-danger block-3" style="background:url('assets/images/ad-image-2.png') no-repeat;background-position: right bottom">
                <div class="row banner-content p-5">
    
                  <div class="content-wrapper col-md-7">
                    <div class="categories sale mb-3 pb-3">15% off</div>
                    <h3 class="item-title">Baked Products</h3>
                    <a href="#" class="d-flex align-items-center nav-link">Shop Collection <svg width="24" height="24"><use xlink:href="#arrow-right"></use></svg></a>
                  </div>
    
                </div>
              </div>
    
            </div>
            <!-- / Banner Blocks -->
              
          </div>
        </div>
      </div>
    </section>
    
    <section class="py-5 overflow-hidden">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
    
            <div class="section-header d-flex flex-wrap justify-content-between mb-5">
              <h2 class="section-title">Category</h2>
    
              <div class="d-flex align-items-center">
                <a href="#" class="btn-link text-decoration-none">View All Categories →</a>
                <div class="swiper-buttons">
                  <button class="swiper-prev category-carousel-prev btn btn-yellow">❮</button>
                  <button class="swiper-next category-carousel-next btn btn-yellow">❯</button>
                </div>
              </div>
            </div>
            
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
    
            <div class="category-carousel swiper">
              <div class="swiper-wrapper">
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-vegetables-broccoli.png" alt="Category Thumbnail">
                  <h3 class="category-title">Fruits & Veges</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-bread-baguette.png" alt="Category Thumbnail">
                  <h3 class="category-title">Breads & Sweets</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-soft-drinks-bottle.png" alt="Category Thumbnail">
                  <h3 class="category-title">Fruits & Veges</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-wine-glass-bottle.png" alt="Category Thumbnail">
                  <h3 class="category-title">Beverages</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-animal-products-drumsticks.png" alt="Category Thumbnail">
                  <h3 class="category-title">Meat Products</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-bread-herb-flour.png" alt="Category Thumbnail">
                  <h3 class="category-title">Breads</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-vegetables-broccoli.png" alt="Category Thumbnail">
                  <h3 class="category-title">Fruits & Veges</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-bread-baguette.png" alt="Category Thumbnail">
                  <h3 class="category-title">Breads & Sweets</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-soft-drinks-bottle.png" alt="Category Thumbnail">
                  <h3 class="category-title">Fruits & Veges</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-wine-glass-bottle.png" alt="Category Thumbnail">
                  <h3 class="category-title">Beverages</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-animal-products-drumsticks.png" alt="Category Thumbnail">
                  <h3 class="category-title">Meat Products</h3>
                </a>
                <a href="#" class="nav-link category-item swiper-slide">
                  <img src="assets/images/icon-bread-herb-flour.png" alt="Category Thumbnail">
                  <h3 class="category-title">Breads</h3>
                </a>
                
              </div>
            </div>
    
          </div>
        </div>
      </div>
    </section>
    
    
    <section class="py-5 overflow-hidden">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
    
            <div class="section-header d-flex flex-wrap flex-wrap justify-content-between mb-5">
              
              <h2 class="section-title">Newly Arrived Brands</h2>
    
              <div class="d-flex align-items-center">
                <a href="#" class="btn-link text-decoration-none">View All Categories →</a>
                <div class="swiper-buttons">
                  <button class="swiper-prev brand-carousel-prev btn btn-yellow">❮</button>
                  <button class="swiper-next brand-carousel-next btn btn-yellow">❯</button>
                </div>  
              </div>
            </div>
            
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
    
            <div class="brand-carousel swiper">
              <div class="swiper-wrapper">
                
                <div class="swiper-slide">
                  <div class="card mb-3 p-3 rounded-4 shadow border-0">
                    <div class="row g-0">
                      <div class="col-md-4">
                        <img src="assets/images/product-thumb-11.jpg" class="img-fluid rounded" alt="Card title">
                      </div>
                      <div class="col-md-8">
                        <div class="card-body py-0">
                          <p class="text-muted mb-0">Amber Jar</p>
                          <h5 class="card-title">Honey best nectar you wish to get</h5>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="card mb-3 p-3 rounded-4 shadow border-0">
                    <div class="row g-0">
                      <div class="col-md-4">
                        <img src="assets/images/product-thumb-12.jpg" class="img-fluid rounded" alt="Card title">
                      </div>
                      <div class="col-md-8">
                        <div class="card-body py-0">
                          <p class="text-muted mb-0">Amber Jar</p>
                          <h5 class="card-title">Honey best nectar you wish to get</h5>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="card mb-3 p-3 rounded-4 shadow border-0">
                    <div class="row g-0">
                      <div class="col-md-4">
                        <img src="assets/images/product-thumb-13.jpg" class="img-fluid rounded" alt="Card title">
                      </div>
                      <div class="col-md-8">
                        <div class="card-body py-0">
                          <p class="text-muted mb-0">Amber Jar</p>
                          <h5 class="card-title">Honey best nectar you wish to get</h5>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="card mb-3 p-3 rounded-4 shadow border-0">
                    <div class="row g-0">
                      <div class="col-md-4">
                        <img src="assets/images/product-thumb-14.jpg" class="img-fluid rounded" alt="Card title">
                      </div>
                      <div class="col-md-8">
                        <div class="card-body py-0">
                          <p class="text-muted mb-0">Amber Jar</p>
                          <h5 class="card-title">Honey best nectar you wish to get</h5>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="card mb-3 p-3 rounded-4 shadow border-0">
                    <div class="row g-0">
                      <div class="col-md-4">
                        <img src="assets/images/product-thumb-11.jpg" class="img-fluid rounded" alt="Card title">
                      </div>
                      <div class="col-md-8">
                        <div class="card-body py-0">
                          <p class="text-muted mb-0">Amber Jar</p>
                          <h5 class="card-title">Honey best nectar you wish to get</h5>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="card mb-3 p-3 rounded-4 shadow border-0">
                    <div class="row g-0">
                      <div class="col-md-4">
                        <img src="assets/images/product-thumb-12.jpg" class="img-fluid rounded" alt="Card title">
                      </div>
                      <div class="col-md-8">
                        <div class="card-body py-0">
                          <p class="text-muted mb-0">Amber Jar</p>
                          <h5 class="card-title">Honey best nectar you wish to get</h5>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
              </div>
            </div>
    
          </div>
        </div>
      </div>
    </section>
    
    
    <section class="py-5">
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-md-12">
    
            <div class="bootstrap-tabs product-tabs">
              <div class="tabs-header d-flex justify-content-between border-bottom my-5">
                <h3>Trending Products</h3>
                <nav>
                  <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <a href="#" class="nav-link text-uppercase fs-6 active" id="nav-all-tab" data-bs-toggle="tab" data-bs-target="#nav-all">All</a>
                    <a href="#" class="nav-link text-uppercase fs-6" id="nav-fruits-tab" data-bs-toggle="tab" data-bs-target="#nav-fruits">Fruits & Veges</a>
                    <a href="#" class="nav-link text-uppercase fs-6" id="nav-juices-tab" data-bs-toggle="tab" data-bs-target="#nav-juices">Juices</a>
                  </div>
                </nav>
              </div>
              <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-all" role="tabpanel" aria-labelledby="nav-all-tab">
    
                  <div class="product-grid row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
                  
                    <div class="col">
                      <div class="product-item">
                        <span class="badge bg-success position-absolute m-3">-30%</span>
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <span class="badge bg-success position-absolute m-3">-30%</span>
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-biscuits.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-cucumber.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-milk.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-biscuits.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-cucumber.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-milk.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-biscuits.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                  </div>
                  <!-- / product-grid -->
                  
                </div>
    
                <div class="tab-pane fade" id="nav-fruits" role="tabpanel" aria-labelledby="nav-fruits-tab">
                  
                  <div class="product-grid row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
    
                    <div class="col">
                      <div class="product-item">
                        <span class="badge bg-success position-absolute m-3">-30%</span>
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-cucumber.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <span class="badge bg-success position-absolute m-3">-30%</span>
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-milk.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
                  
                    <div class="col">
                      <div class="product-item">
                        <span class="badge bg-success position-absolute m-3">-30%</span>
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-orange-juice.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-raspberries.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                  </div>
                  <!-- / product-grid -->
    
                </div>
                <div class="tab-pane fade" id="nav-juices" role="tabpanel" aria-labelledby="nav-juices-tab">
    
                  <div class="product-grid row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-cucumber.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-milk.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
                  
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-tomatoes.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-tomatoketchup.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                    <div class="col">
                      <div class="product-item">
                        <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                        <figure>
                          <a href="#" title="Product Title">
                            <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                          </a>
                        </figure>
                        <h3>Sunstar Fresh Melon Juice</h3>
                        <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                        <span class="price">$18.00</span>
                        <div class="d-flex align-items-center justify-content-between">
                          <div class="input-group product-qty">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                                    <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                                  </button>
                              </span>
                              <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                              <span class="input-group-btn">
                                  <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                      <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                                  </button>
                              </span>
                          </div>
                          <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                        </div>
                      </div>
                    </div>
    
                  </div>
                  <!-- / product-grid -->
                  
                </div>
                
              </div>
            </div>
    
          </div>
        </div>
      </div>
    </section>
    
    <section class="py-5">
      <div class="container-fluid">
        <div class="row">
          
          <div class="col-md-6">
            <div class="banner-ad bg-danger mb-3" style="background: url('assets/images/ad-image-3.png');background-repeat: no-repeat;background-position: right bottom;">
              <div class="banner-content p-5">
    
                <div class="categories text-primary fs-3 fw-bold">Upto 25% Off</div>
                <h3 class="banner-title">Luxa Dark Chocolate</h3>
                <p>Very tasty & creamy vanilla flavour creamy muffins.</p>
                <a href="#" class="btn btn-dark text-uppercase">Show Now</a>
    
              </div>
            
            </div>
          </div>
          <div class="col-md-6">
            <div class="banner-ad bg-info" style="background: url('assets/images/ad-image-4.png');background-repeat: no-repeat;background-position: right bottom;">
              <div class="banner-content p-5">
    
                <div class="categories text-primary fs-3 fw-bold">Upto 25% Off</div>
                <h3 class="banner-title">Creamy Muffins</h3>
                <p>Very tasty & creamy vanilla flavour creamy muffins.</p>
                <a href="#" class="btn btn-dark text-uppercase">Show Now</a>
    
              </div>
            
            </div>
          </div>
             
        </div>
      </div>
    </section>
    
    <section class="py-5 overflow-hidden">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
    
            <div class="section-header d-flex flex-wrap justify-content-between my-5">
              
              <h2 class="section-title">Best selling products</h2>
    
              <div class="d-flex align-items-center">
                <a href="#" class="btn-link text-decoration-none">View All Categories →</a>
                <div class="swiper-buttons">
                  <button class="swiper-prev products-carousel-prev btn btn-primary">❮</button>
                  <button class="swiper-next products-carousel-next btn btn-primary">❯</button>
                </div>  
              </div>
            </div>
            
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
    
            <div class="products-carousel swiper">
              <div class="swiper-wrapper">
                
                <div class="product-item swiper-slide">
                  <span class="badge bg-success position-absolute m-3">-15%</span>
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoes.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <span class="badge bg-success position-absolute m-3">-15%</span>
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoketchup.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <span class="badge bg-success position-absolute m-3">-15%</span>
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <span class="badge bg-success position-absolute m-3">-15%</span>
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoes.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoketchup.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
                
              </div>
            </div>
            <!-- / products-carousel -->
    
          </div>
        </div>
      </div>
    </section>
    
    <section class="py-5">
      <div class="container-fluid">
    
        <div class="bg-secondary py-5 my-5 rounded-5" style="background: url('assets/images/bg-leaves-img-pattern.png') no-repeat;">
          <div class="container my-5">
            <div class="row">
              <div class="col-md-6 p-5">
                <div class="section-header">
                  <h2 class="section-title display-4">Get <span class="text-primary">25% Discount</span> on your first purchase</h2>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dictumst amet, metus, sit massa posuere maecenas. At tellus ut nunc amet vel egestas.</p>
              </div>
              <div class="col-md-6 p-5">
                <form>
                  <div class="mb-3">
                    <label for="name" class="form-label">Name</label>
                    <input type="text"
                      class="form-control form-control-lg" name="name" id="name" placeholder="Name">
                  </div>
                  <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control form-control-lg" name="email" id="email" placeholder="abc@mail.com">
                  </div>
                  <div class="form-check form-check-inline mb-3">
                    <label class="form-check-label" for="subscribe">
                    <input class="form-check-input" type="checkbox" id="subscribe" value="subscribe">
                    Subscribe to the newsletter</label>
                  </div>
                  <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-dark btn-lg">Submit</button>
                  </div>
                </form>
                
              </div>
              
            </div>
            
          </div>
        </div>
        
      </div>
    </section>
    
    <section class="py-5 overflow-hidden">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
    
            <div class="section-header d-flex justify-content-between">
              
              <h2 class="section-title">Most popular products</h2>
    
              <div class="d-flex align-items-center">
                <a href="#" class="btn-link text-decoration-none">View All Categories →</a>
                <div class="swiper-buttons">
                  <button class="swiper-prev products-carousel-prev btn btn-primary">❮</button>
                  <button class="swiper-next products-carousel-next btn btn-primary">❯</button>
                </div>  
              </div>
            </div>
            
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
    
            <div class="products-carousel swiper">
              <div class="swiper-wrapper">
                
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoes.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoketchup.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoes.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoketchup.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
                
              </div>
            </div>
            <!-- / products-carousel -->
    
          </div>
        </div>
      </div>
    </section>
    
    <section class="py-5 overflow-hidden">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
    
            <div class="section-header d-flex justify-content-between">
              
              <h2 class="section-title">Just arrived</h2>
    
              <div class="d-flex align-items-center">
                <a href="#" class="btn-link text-decoration-none">View All Categories →</a>
                <div class="swiper-buttons">
                  <button class="swiper-prev products-carousel-prev btn btn-primary">❮</button>
                  <button class="swiper-next products-carousel-next btn btn-primary">❯</button>
                </div>  
              </div>
            </div>
            
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
    
            <div class="products-carousel swiper">
              <div class="swiper-wrapper">
                
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoes.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoketchup.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoes.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-tomatoketchup.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
    
                <div class="product-item swiper-slide">
                  <a href="#" class="btn-wishlist"><svg width="24" height="24"><use xlink:href="#heart"></use></svg></a>
                  <figure>
                    <a href="#" title="Product Title">
                      <img src="assets/images/thumb-bananas.png" alt="Product Thumbnail" class="tab-image">
                    </a>
                  </figure>
                  <h3>Sunstar Fresh Melon Juice</h3>
                  <span class="qty">1 Unit</span><span class="rating"><svg width="24" height="24" class="text-primary"><use xlink:href="#star-solid"></use></svg> 4.5</span>
                  <span class="price">$18.00</span>
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="input-group product-qty">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-left-minus btn btn-danger btn-number" data-type="minus">
                              <svg width="16" height="16"><use xlink:href="#minus"></use></svg>
                            </button>
                        </span>
                        <input type="text" name="quantity" class="form-control input-number quantity" value="1">
                        <span class="input-group-btn">
                            <button type="button" class="quantity-right-plus btn btn-success btn-number" data-type="plus">
                                <svg width="16" height="16"><use xlink:href="#plus"></use></svg>
                            </button>
                        </span>
                    </div>
                    <a href="#" class="nav-link">Add to Cart <svg width="18" height="18"><use xlink:href="#cart"></use></svg></a>
                  </div>
                </div>
                
              </div>
            </div>
            <!-- / products-carousel -->
    
          </div>
        </div>
      </div>
    </section>
    
    <section id="latest-blog" class="py-5">
      <div class="container-fluid">
        <div class="row">
          <div class="section-header d-flex align-items-center justify-content-between my-5">
            <h2 class="section-title">Our Recent Blog</h2>
            <div class="btn-wrap align-right">
              <a href="#" class="d-flex align-items-center nav-link">Read All Articles <svg width="24" height="24"><use xlink:href="#arrow-right"></use></svg></a>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <article class="post-item card border-0 shadow-sm p-3">
              <div class="image-holder zoom-effect">
                <a href="#">
                  <img src="assets/images/post-thumb-1.jpg" alt="post" class="card-img-top">
                </a>
              </div>
              <div class="card-body">
                <div class="post-meta d-flex text-uppercase gap-3 my-2 align-items-center">
                  <div class="meta-date"><svg width="16" height="16"><use xlink:href="#calendar"></use></svg>22 Aug 2021</div>
                  <div class="meta-categories"><svg width="16" height="16"><use xlink:href="#category"></use></svg>tips & tricks</div>
                </div>
                <div class="post-header">
                  <h3 class="post-title">
                    <a href="#" class="text-decoration-none">Top 10 casual look ideas to dress up your kids</a>
                  </h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipi elit. Aliquet eleifend viverra enim tincidunt donec quam. A in arcu, hendrerit neque dolor morbi...</p>
                </div>
              </div>
            </article>
          </div>
          <div class="col-md-4">
            <article class="post-item card border-0 shadow-sm p-3">
              <div class="image-holder zoom-effect">
                <a href="#">
                  <img src="assets/images/post-thumb-2.jpg" alt="post" class="card-img-top">
                </a>
              </div>
              <div class="card-body">
                <div class="post-meta d-flex text-uppercase gap-3 my-2 align-items-center">
                  <div class="meta-date"><svg width="16" height="16"><use xlink:href="#calendar"></use></svg>25 Aug 2021</div>
                  <div class="meta-categories"><svg width="16" height="16"><use xlink:href="#category"></use></svg>trending</div>
                </div>
                <div class="post-header">
                  <h3 class="post-title">
                    <a href="#" class="text-decoration-none">Latest trends of wearing street wears supremely</a>
                  </h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipi elit. Aliquet eleifend viverra enim tincidunt donec quam. A in arcu, hendrerit neque dolor morbi...</p>
                </div>
              </div>
            </article>
          </div>
          <div class="col-md-4">
            <article class="post-item card border-0 shadow-sm p-3">
              <div class="image-holder zoom-effect">
                <a href="#">
                  <img src="assets/images/post-thumb-3.jpg" alt="post" class="card-img-top">
                </a>
              </div>
              <div class="card-body">
                <div class="post-meta d-flex text-uppercase gap-3 my-2 align-items-center">
                  <div class="meta-date"><svg width="16" height="16"><use xlink:href="#calendar"></use></svg>28 Aug 2021</div>
                  <div class="meta-categories"><svg width="16" height="16"><use xlink:href="#category"></use></svg>inspiration</div>
                </div>
                <div class="post-header">
                  <h3 class="post-title">
                    <a href="#" class="text-decoration-none">10 Different Types of comfortable clothes ideas for women</a>
                  </h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipi elit. Aliquet eleifend viverra enim tincidunt donec quam. A in arcu, hendrerit neque dolor morbi...</p>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>
    
    <section class="py-5 my-5">
      <div class="container-fluid">
    
        <div class="bg-warning py-5 rounded-5" style="background: url('assets/images/bg-pattern-2.png') no-repeat;">
          <div class="container">
            <div class="row">
              <div class="col-md-4">
                <img src="assets/images/phone.png" alt="phone" class="image-float img-fluid">
              </div>
              <div class="col-md-8">
                <h2 class="my-5">Shop faster with foodmart App</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis sed ptibus liberolectus nonet psryroin. Amet sed lorem posuere sit iaculis amet, ac urna. Adipiscing fames semper erat ac in suspendisse iaculis. Amet blandit tortor praesent ante vitae. A, enim pretiummi senectus magna. Sagittis sed ptibus liberolectus non et psryroin.</p>
                <div class="d-flex gap-2 flex-wrap">
                  <img src="assets/images/app-store.jpg" alt="app-store">
                  <img src="assets/images/google-play.jpg" alt="google-play">
                </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </section>
    
    <section class="py-5">
      <div class="container-fluid">
        <h2 class="my-5">People are also looking for</h2>
        <a href="#" class="btn btn-warning me-2 mb-2">Blue diamon almonds</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Angie’s Boomchickapop Corn</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Salty kettle Corn</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Chobani Greek Yogurt</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Sweet Vanilla Yogurt</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Foster Farms Takeout Crispy wings</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Warrior Blend Organic</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Chao Cheese Creamy</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Chicken meatballs</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Blue diamon almonds</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Angie’s Boomchickapop Corn</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Salty kettle Corn</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Chobani Greek Yogurt</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Sweet Vanilla Yogurt</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Foster Farms Takeout Crispy wings</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Warrior Blend Organic</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Chao Cheese Creamy</a>
        <a href="#" class="btn btn-warning me-2 mb-2">Chicken meatballs</a>
      </div>
    </section>
    
    <section class="py-5">
      <div class="container-fluid">
        <div class="row row-cols-1 row-cols-sm-3 row-cols-lg-5">
          <div class="col">
            <div class="card mb-3 border-0">
              <div class="row">
                <div class="col-md-2 text-dark">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M21.5 15a3 3 0 0 0-1.9-2.78l1.87-7a1 1 0 0 0-.18-.87A1 1 0 0 0 20.5 4H6.8l-.33-1.26A1 1 0 0 0 5.5 2h-2v2h1.23l2.48 9.26a1 1 0 0 0 1 .74H18.5a1 1 0 0 1 0 2h-13a1 1 0 0 0 0 2h1.18a3 3 0 1 0 5.64 0h2.36a3 3 0 1 0 5.82 1a2.94 2.94 0 0 0-.4-1.47A3 3 0 0 0 21.5 15Zm-3.91-3H9L7.34 6H19.2ZM9.5 20a1 1 0 1 1 1-1a1 1 0 0 1-1 1Zm8 0a1 1 0 1 1 1-1a1 1 0 0 1-1 1Z"/></svg>
                </div>
                <div class="col-md-10">
                  <div class="card-body p-0">
                    <h5>Free delivery</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipi elit.</p>
                  </div>
                </div>
              </div>
              </div>
          </div>
          <div class="col">
            <div class="card mb-3 border-0">
              <div class="row">
                <div class="col-md-2 text-dark">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M19.63 3.65a1 1 0 0 0-.84-.2a8 8 0 0 1-6.22-1.27a1 1 0 0 0-1.14 0a8 8 0 0 1-6.22 1.27a1 1 0 0 0-.84.2a1 1 0 0 0-.37.78v7.45a9 9 0 0 0 3.77 7.33l3.65 2.6a1 1 0 0 0 1.16 0l3.65-2.6A9 9 0 0 0 20 11.88V4.43a1 1 0 0 0-.37-.78ZM18 11.88a7 7 0 0 1-2.93 5.7L12 19.77l-3.07-2.19A7 7 0 0 1 6 11.88v-6.3a10 10 0 0 0 6-1.39a10 10 0 0 0 6 1.39Zm-4.46-2.29l-2.69 2.7l-.89-.9a1 1 0 0 0-1.42 1.42l1.6 1.6a1 1 0 0 0 1.42 0L15 11a1 1 0 0 0-1.42-1.42Z"/></svg>
                </div>
                <div class="col-md-10">
                  <div class="card-body p-0">
                    <h5>100% secure payment</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipi elit.</p>
                  </div>
                </div>
              </div>
              </div>
          </div>
          <div class="col">
            <div class="card mb-3 border-0">
              <div class="row">
                <div class="col-md-2 text-dark">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 5H2a1 1 0 0 0-1 1v4a3 3 0 0 0 2 2.82V22a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-9.18A3 3 0 0 0 23 10V6a1 1 0 0 0-1-1Zm-7 2h2v3a1 1 0 0 1-2 0Zm-4 0h2v3a1 1 0 0 1-2 0ZM7 7h2v3a1 1 0 0 1-2 0Zm-3 4a1 1 0 0 1-1-1V7h2v3a1 1 0 0 1-1 1Zm10 10h-4v-2a2 2 0 0 1 4 0Zm5 0h-3v-2a4 4 0 0 0-8 0v2H5v-8.18a3.17 3.17 0 0 0 1-.6a3 3 0 0 0 4 0a3 3 0 0 0 4 0a3 3 0 0 0 4 0a3.17 3.17 0 0 0 1 .6Zm2-11a1 1 0 0 1-2 0V7h2ZM4.3 3H20a1 1 0 0 0 0-2H4.3a1 1 0 0 0 0 2Z"/></svg>
                </div>
                <div class="col-md-10">
                  <div class="card-body p-0">
                    <h5>Quality guarantee</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipi elit.</p>
                  </div>
                </div>
              </div>
              </div>
          </div>
          <div class="col">
            <div class="card mb-3 border-0">
              <div class="row">
                <div class="col-md-2 text-dark">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 8.35a3.07 3.07 0 0 0-3.54.53a3 3 0 0 0 0 4.24L11.29 16a1 1 0 0 0 1.42 0l2.83-2.83a3 3 0 0 0 0-4.24A3.07 3.07 0 0 0 12 8.35Zm2.12 3.36L12 13.83l-2.12-2.12a1 1 0 0 1 0-1.42a1 1 0 0 1 1.41 0a1 1 0 0 0 1.42 0a1 1 0 0 1 1.41 0a1 1 0 0 1 0 1.42ZM12 2A10 10 0 0 0 2 12a9.89 9.89 0 0 0 2.26 6.33l-2 2a1 1 0 0 0-.21 1.09A1 1 0 0 0 3 22h9a10 10 0 0 0 0-20Zm0 18H5.41l.93-.93a1 1 0 0 0 0-1.41A8 8 0 1 1 12 20Z"/></svg>
                </div>
                <div class="col-md-10">
                  <div class="card-body p-0">
                    <h5>guaranteed savings</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipi elit.</p>
                  </div>
                </div>
              </div>
              </div>
          </div>
          <div class="col">
            <div class="card mb-3 border-0">
              <div class="row">
                <div class="col-md-2 text-dark">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M18 7h-.35A3.45 3.45 0 0 0 18 5.5a3.49 3.49 0 0 0-6-2.44A3.49 3.49 0 0 0 6 5.5A3.45 3.45 0 0 0 6.35 7H6a3 3 0 0 0-3 3v2a1 1 0 0 0 1 1h1v6a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-6h1a1 1 0 0 0 1-1v-2a3 3 0 0 0-3-3Zm-7 13H8a1 1 0 0 1-1-1v-6h4Zm0-9H5v-1a1 1 0 0 1 1-1h5Zm0-4H9.5A1.5 1.5 0 1 1 11 5.5Zm2-1.5A1.5 1.5 0 1 1 14.5 7H13ZM17 19a1 1 0 0 1-1 1h-3v-7h4Zm2-8h-6V9h5a1 1 0 0 1 1 1Z"/></svg>
                </div>
                <div class="col-md-10">
                  <div class="card-body p-0">
                    <h5>Daily offers</h5>
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipi elit.</p>
                  </div>
                </div>
              </div>
              </div>
          </div>
        </div>
      </div>
    </section>
    
    <footer class="py-5">
      <div class="container-fluid">
        <div class="row">
    
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="footer-menu">
              <img src="assets/images/logo.png" alt="logo">
              <div class="social-links mt-5">
                <ul class="d-flex list-unstyled gap-2">
                  <li>
                    <a href="#" class="btn btn-outline-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M15.12 5.32H17V2.14A26.11 26.11 0 0 0 14.26 2c-2.72 0-4.58 1.66-4.58 4.7v2.62H6.61v3.56h3.07V22h3.68v-9.12h3.06l.46-3.56h-3.52V7.05c0-1.05.28-1.73 1.76-1.73Z"/></svg>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="btn btn-outline-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M22.991 3.95a1 1 0 0 0-1.51-.86a7.48 7.48 0 0 1-1.874.794a5.152 5.152 0 0 0-3.374-1.242a5.232 5.232 0 0 0-5.223 5.063a11.032 11.032 0 0 1-6.814-3.924a1.012 1.012 0 0 0-.857-.365a.999.999 0 0 0-.785.5a5.276 5.276 0 0 0-.242 4.769l-.002.001a1.041 1.041 0 0 0-.496.89a3.042 3.042 0 0 0 .027.439a5.185 5.185 0 0 0 1.568 3.312a.998.998 0 0 0-.066.77a5.204 5.204 0 0 0 2.362 2.922a7.465 7.465 0 0 1-3.59.448A1 1 0 0 0 1.45 19.3a12.942 12.942 0 0 0 7.01 2.061a12.788 12.788 0 0 0 12.465-9.363a12.822 12.822 0 0 0 .535-3.646l-.001-.2a5.77 5.77 0 0 0 1.532-4.202Zm-3.306 3.212a.995.995 0 0 0-.234.702c.01.165.009.331.009.488a10.824 10.824 0 0 1-.454 3.08a10.685 10.685 0 0 1-10.546 7.93a10.938 10.938 0 0 1-2.55-.301a9.48 9.48 0 0 0 2.942-1.564a1 1 0 0 0-.602-1.786a3.208 3.208 0 0 1-2.214-.935q.224-.042.445-.105a1 1 0 0 0-.08-1.943a3.198 3.198 0 0 1-2.25-1.726a5.3 5.3 0 0 0 .545.046a1.02 1.02 0 0 0 .984-.696a1 1 0 0 0-.4-1.137a3.196 3.196 0 0 1-1.425-2.673c0-.066.002-.133.006-.198a13.014 13.014 0 0 0 8.21 3.48a1.02 1.02 0 0 0 .817-.36a1 1 0 0 0 .206-.867a3.157 3.157 0 0 1-.087-.729a3.23 3.23 0 0 1 3.226-3.226a3.184 3.184 0 0 1 2.345 1.02a.993.993 0 0 0 .921.298a9.27 9.27 0 0 0 1.212-.322a6.681 6.681 0 0 1-1.026 1.524Z"/></svg>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="btn btn-outline-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M23 9.71a8.5 8.5 0 0 0-.91-4.13a2.92 2.92 0 0 0-1.72-1A78.36 78.36 0 0 0 12 4.27a78.45 78.45 0 0 0-8.34.3a2.87 2.87 0 0 0-1.46.74c-.9.83-1 2.25-1.1 3.45a48.29 48.29 0 0 0 0 6.48a9.55 9.55 0 0 0 .3 2a3.14 3.14 0 0 0 .71 1.36a2.86 2.86 0 0 0 1.49.78a45.18 45.18 0 0 0 6.5.33c3.5.05 6.57 0 10.2-.28a2.88 2.88 0 0 0 1.53-.78a2.49 2.49 0 0 0 .61-1a10.58 10.58 0 0 0 .52-3.4c.04-.56.04-3.94.04-4.54ZM9.74 14.85V8.66l5.92 3.11c-1.66.92-3.85 1.96-5.92 3.08Z"/></svg>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="btn btn-outline-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M17.34 5.46a1.2 1.2 0 1 0 1.2 1.2a1.2 1.2 0 0 0-1.2-1.2Zm4.6 2.42a7.59 7.59 0 0 0-.46-2.43a4.94 4.94 0 0 0-1.16-1.77a4.7 4.7 0 0 0-1.77-1.15a7.3 7.3 0 0 0-2.43-.47C15.06 2 14.72 2 12 2s-3.06 0-4.12.06a7.3 7.3 0 0 0-2.43.47a4.78 4.78 0 0 0-1.77 1.15a4.7 4.7 0 0 0-1.15 1.77a7.3 7.3 0 0 0-.47 2.43C2 8.94 2 9.28 2 12s0 3.06.06 4.12a7.3 7.3 0 0 0 .47 2.43a4.7 4.7 0 0 0 1.15 1.77a4.78 4.78 0 0 0 1.77 1.15a7.3 7.3 0 0 0 2.43.47C8.94 22 9.28 22 12 22s3.06 0 4.12-.06a7.3 7.3 0 0 0 2.43-.47a4.7 4.7 0 0 0 1.77-1.15a4.85 4.85 0 0 0 1.16-1.77a7.59 7.59 0 0 0 .46-2.43c0-1.06.06-1.4.06-4.12s0-3.06-.06-4.12ZM20.14 16a5.61 5.61 0 0 1-.34 1.86a3.06 3.06 0 0 1-.75 1.15a3.19 3.19 0 0 1-1.15.75a5.61 5.61 0 0 1-1.86.34c-1 .05-1.37.06-4 .06s-3 0-4-.06a5.73 5.73 0 0 1-1.94-.3a3.27 3.27 0 0 1-1.1-.75a3 3 0 0 1-.74-1.15a5.54 5.54 0 0 1-.4-1.9c0-1-.06-1.37-.06-4s0-3 .06-4a5.54 5.54 0 0 1 .35-1.9A3 3 0 0 1 5 5a3.14 3.14 0 0 1 1.1-.8A5.73 5.73 0 0 1 8 3.86c1 0 1.37-.06 4-.06s3 0 4 .06a5.61 5.61 0 0 1 1.86.34a3.06 3.06 0 0 1 1.19.8a3.06 3.06 0 0 1 .75 1.1a5.61 5.61 0 0 1 .34 1.9c.05 1 .06 1.37.06 4s-.01 3-.06 4ZM12 6.87A5.13 5.13 0 1 0 17.14 12A5.12 5.12 0 0 0 12 6.87Zm0 8.46A3.33 3.33 0 1 1 15.33 12A3.33 3.33 0 0 1 12 15.33Z"/></svg>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="btn btn-outline-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M1.04 17.52q.1-.16.32-.02a21.308 21.308 0 0 0 10.88 2.9a21.524 21.524 0 0 0 7.74-1.46q.1-.04.29-.12t.27-.12a.356.356 0 0 1 .47.12q.17.24-.11.44q-.36.26-.92.6a14.99 14.99 0 0 1-3.84 1.58A16.175 16.175 0 0 1 12 22a16.017 16.017 0 0 1-5.9-1.09a16.246 16.246 0 0 1-4.98-3.07a.273.273 0 0 1-.12-.2a.215.215 0 0 1 .04-.12Zm6.02-5.7a4.036 4.036 0 0 1 .68-2.36A4.197 4.197 0 0 1 9.6 7.98a10.063 10.063 0 0 1 2.66-.66q.54-.06 1.76-.16v-.34a3.562 3.562 0 0 0-.28-1.72a1.5 1.5 0 0 0-1.32-.6h-.16a2.189 2.189 0 0 0-1.14.42a1.64 1.64 0 0 0-.62 1a.508.508 0 0 1-.4.46L7.8 6.1q-.34-.08-.34-.36a.587.587 0 0 1 .02-.14a3.834 3.834 0 0 1 1.67-2.64A6.268 6.268 0 0 1 12.26 2h.5a5.054 5.054 0 0 1 3.56 1.18a3.81 3.81 0 0 1 .37.43a3.875 3.875 0 0 1 .27.41a2.098 2.098 0 0 1 .18.52q.08.34.12.47a2.856 2.856 0 0 1 .06.56q.02.43.02.51v4.84a2.868 2.868 0 0 0 .15.95a2.475 2.475 0 0 0 .29.62q.14.19.46.61a.599.599 0 0 1 .12.32a.346.346 0 0 1-.16.28q-1.66 1.44-1.8 1.56a.557.557 0 0 1-.58.04q-.28-.24-.49-.46t-.3-.32a4.466 4.466 0 0 1-.29-.39q-.2-.29-.28-.39a4.91 4.91 0 0 1-2.2 1.52a6.038 6.038 0 0 1-1.68.2a3.505 3.505 0 0 1-2.53-.95a3.553 3.553 0 0 1-.99-2.69Zm3.44-.4a1.895 1.895 0 0 0 .39 1.25a1.294 1.294 0 0 0 1.05.47a1.022 1.022 0 0 0 .17-.02a1.022 1.022 0 0 1 .15-.02a2.033 2.033 0 0 0 1.3-1.08a3.13 3.13 0 0 0 .33-.83a3.8 3.8 0 0 0 .12-.73q.01-.28.01-.92v-.5a7.287 7.287 0 0 0-1.76.16a2.144 2.144 0 0 0-1.76 2.22Zm8.4 6.44a.626.626 0 0 1 .12-.16a3.14 3.14 0 0 1 .96-.46a6.52 6.52 0 0 1 1.48-.22a1.195 1.195 0 0 1 .38.02q.9.08 1.08.3a.655.655 0 0 1 .08.36v.14a4.56 4.56 0 0 1-.38 1.65a3.84 3.84 0 0 1-1.06 1.53a.302.302 0 0 1-.18.08a.177.177 0 0 1-.08-.02q-.12-.06-.06-.22a7.632 7.632 0 0 0 .74-2.42a.513.513 0 0 0-.08-.32q-.2-.24-1.12-.24q-.34 0-.8.04q-.5.06-.92.12a.232.232 0 0 1-.16-.04a.065.065 0 0 1-.02-.08a.153.153 0 0 1 .02-.06Z"/></svg>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
    
          <div class="col-md-2 col-sm-6">
            <div class="footer-menu">
              <h5 class="widget-title">Ultras</h5>
              <ul class="menu-list list-unstyled">
                <li class="menu-item">
                  <a href="#" class="nav-link">About us</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Conditions </a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Our Journals</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Careers</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Affiliate Programme</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Ultras Press</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-2 col-sm-6">
            <div class="footer-menu">
              <h5 class="widget-title">Customer Service</h5>
              <ul class="menu-list list-unstyled">
                <li class="menu-item">
                  <a href="#" class="nav-link">FAQ</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Contact</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Privacy Policy</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Returns & Refunds</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Cookie Guidelines</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Delivery Information</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-2 col-sm-6">
            <div class="footer-menu">
              <h5 class="widget-title">Customer Service</h5>
              <ul class="menu-list list-unstyled">
                <li class="menu-item">
                  <a href="#" class="nav-link">FAQ</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Contact</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Privacy Policy</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Returns & Refunds</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Cookie Guidelines</a>
                </li>
                <li class="menu-item">
                  <a href="#" class="nav-link">Delivery Information</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="footer-menu">
              <h5 class="widget-title">Subscribe Us</h5>
              <p>Subscribe to our newsletter to get updates about our grand offers.</p>
              <form class="d-flex mt-3 gap-0" action="#">
                <input class="form-control rounded-start rounded-0 bg-light" type="email" placeholder="Email Address" aria-label="Email Address">
                <button class="btn btn-dark rounded-end rounded-0" type="submit">Subscribe</button>
              </form>
            </div>
          </div>
          
        </div>
      </div>
    </footer>
    <div id="footer-bottom">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6 copyright">
            <p>© 2023 Foodmart. All rights reserved.</p>
          </div>
          <div class="col-md-6 credit-link text-start text-md-end">
            <p>Free HTML Template by <a href="https://therichpost.com">Jassa</a></p>
          </div>
        </div>
      </div>
    </div>

    4. Now friends we just need to add below code into angulareco/angular.json file to custom.js file working code:

    ...
     "styles": [
                  "src/styles.css",
    "assets/css/vendor.css",
    "assets/css/style.css"
                
                 
                ],
                "scripts": [
                "assets/js/jquery-1.11.0.min.js",
    "assets/js/plugins.js",
    "assets/js/script.js"
    
                ]
    ...

     

    5. Guys now here is the git repo link from where we will get images, fonts, css and js folder and place all the folder inside assets folder:

    Free Git Repo Link

    6. Now friends we just need to add below code into angulareco/src/imdex.html file:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Angular17</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
        
    
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    </head>
    <body>
      <app-root></app-root>
       
        <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
       
    </body>
    </html>
    
    

    Friends in the end must run ng serve command into your terminal to run the angular 17 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

  • ANGULAR 17 Datatable with Dynamic Data & Get data from selected row

    ANGULAR 17 Datatable with Dynamic Data & Get data from selected row

    Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, ANGULAR 17 Datatable with Dynamic Data & Get data from selected row

    Live Demo
    ANGULAR 17 Datatable with Dynamic Data & Get data from selected row
    ANGULAR 17 Datatable with Dynamic Data & Get data from selected row

    Angular 17 came and if you are new then you must check below link:

    1. Angular 17 Basic Tutorials
    2. Datatable

    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 17 setup and for this we need to run below commands but if you already have angular 17 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 angulardatatable //Create new Angular Project
    
    cd angulardatatable // Go inside the Angular Project Folder

    2. Now friends, here we need to run below commands into our project terminal to install datatable modules, bootstrap(for good looks), jquery  modules into our angular application:

    I am also adding bootstrap to make datatable looks good.

    npm install jquery --save 
    npm install datatables.net --save 
    npm install datatables.net-dt --save 
    npm install angular-datatables --save 
    npm install @types/jquery --save-dev 
    npm install @types/datatables.net --save-dev 
    npm install bootstrap --save 
    npm i @popperjs/core 
    npm install datatables.net-buttons --save 
    npm install datatables.net-buttons-dt --save 
    npm install @types/datatables.net-buttons --save-dev 
    npm install jszip --save

    3. After done with commands add below code into you angular.json file:

    ...
    "styles": [
                  "src/styles.css",
                  "node_modules/datatables.net-dt/css/jquery.dataTables.css",
                  "node_modules/bootstrap/dist/css/bootstrap.min.css"
                ],
                "scripts": [
                  "node_modules/jquery/dist/jquery.js",
                  "node_modules/datatables.net/js/jquery.dataTables.js",
                  "node_modules/bootstrap/dist/js/bootstrap.min.js",
                  "node_modules/jszip/dist/jszip.js",
                  "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
                  "node_modules/datatables.net-buttons/js/buttons.colVis.js",
                  "node_modules/datatables.net-buttons/js/buttons.flash.js",
                  "node_modules/datatables.net-buttons/js/buttons.html5.js",
                  "node_modules/datatables.net-buttons/js/buttons.print.js"
                ]
    ...

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

    import { Component } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterOutlet } from '@angular/router';
    import {DataTablesModule} from 'angular-datatables';
    import { HttpClientModule } from '@angular/common/http';
    import { HttpClient } from '@angular/common/http';
    
    @Component({
      selector: 'app-root',
      standalone: true,
      imports: [CommonModule, RouterOutlet, DataTablesModule, HttpClientModule],
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'angular17';
      data:any;
      constructor(private http: HttpClient){
      //get request from web api
      this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(data => {
      
        this.data = data;
      setTimeout(()=>{   
         $('#datatableexample').DataTable( {
          pagingType: 'full_numbers',
          pageLength: 5,
          processing: true,
          lengthMenu : [5, 10, 25],
      } );
      }, 1);
            }, error => console.error(error));
    }
    getName(name:any)
    {
      alert(name)
    }
    }

    6. Now friends we need to add below code into app.component.html file to get final output on web browser:

    <div class="container p-5">
      <table class="table table-striped table-bordered table-sm row-border hover" id="datatableexample">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
           
          </tr>
        </thead>
        <tbody>
         <tr *ngFor="let group of data">
               <td>{{group.id}}<input (click)="getName(group.name)" name="flexRadioDefault" id={{group.id}} class="form-check-input" type="radio"></td>
               <td>{{group.name}}</td>
               <td>{{group.email}}</td>
              
           </tr>
        </tbody>
      </table>
    </div>

    Now we are done friends and please run ng serve command and if you have any kind of query then please do 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

  • Angular 17 Free Organic Veggies & Fruits Foods Ecommerce Template

    Angular 17 Free Organic Veggies & Fruits Foods Ecommerce Template

    Hello friends, welcome back to my blog. Today this blog post will share you, Angular 17 Free Organic Veggies & Fruits Foods Ecommerce Template.


    Live Demo

    Angular 17 Free Organic Veggies & Fruits Foods Ecommerce Template
    Angular 17 Free Organic Veggies & Fruits Foods Ecommerce Template

    Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

    1. Angular 17 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 17 setup and for this we need to run below commands but if you already have angular 17 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 angulareco //Create new Angular Project
    
    cd angulareco // Go inside the Angular Project Folder

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

     <!-- Spinner Start -->
     <div id="spinner" class="w-100 vh-100 bg-white position-fixed translate-middle top-50 start-50 d-flex align-items-center justify-content-center">
      <div class="spinner-grow text-primary" role="status"></div>
    </div>
    <!-- Spinner End -->
    
    
    <!-- Navbar start -->
    <div class="container-fluid fixed-top">
      <div class="container topbar bg-primary d-none d-lg-block">
          <div class="d-flex justify-content-between">
              <div class="top-info ps-2">
                  <small class="me-3"><i class="fas fa-map-marker-alt me-2 text-secondary"></i> <a href="#" class="text-white">123 Street, New York</a></small>
                  <small class="me-3"><i class="fas fa-envelope me-2 text-secondary"></i><a href="#" class="text-white">https://therichpost.com</a></small>
              </div>
              <div class="top-link pe-2">
                  <a href="#" class="text-white"><small class="text-white mx-2">Privacy Policy</small>/</a>
                  <a href="#" class="text-white"><small class="text-white mx-2">Terms of Use</small>/</a>
                  <a href="#" class="text-white"><small class="text-white ms-2">Sales and Refunds</small></a>
              </div>
          </div>
      </div>
      <div class="container px-0">
          <nav class="navbar navbar-light bg-white navbar-expand-xl">
              <a href="#" class="navbar-brand"><h1 class="text-primary display-6">Fruitables</h1></a>
              <button class="navbar-toggler py-2 px-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                  <span class="fa fa-bars text-primary"></span>
              </button>
              <div class="collapse navbar-collapse bg-white" id="navbarCollapse">
                  <div class="navbar-nav mx-auto">
                      <a href="#" class="nav-item nav-link active">Home</a>
                      <a href="#" class="nav-item nav-link">Shop</a>
                      <a href="#" class="nav-item nav-link">Shop Detail</a>
                      <div class="nav-item dropdown">
                          <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Pages</a>
                          <div class="dropdown-menu m-0 bg-secondary rounded-0">
                              <a href="#" class="dropdown-item">Cart</a>
                              <a href="#" class="dropdown-item">Chackout</a>
                              <a href="#" class="dropdown-item">Testimonial</a>
                              <a href="#" class="dropdown-item">404 Page</a>
                          </div>
                      </div>
                      <a href="#" class="nav-item nav-link">Contact</a>
                  </div>
                  <div class="d-flex m-3 me-0">
                      <button class="btn-search btn border border-secondary btn-md-square rounded-circle bg-white me-4" data-bs-toggle="modal" data-bs-target="#searchModal"><i class="fas fa-search text-primary"></i></button>
                      <a href="#" class="position-relative me-4 my-auto">
                          <i class="fa fa-shopping-bag fa-2x"></i>
                          <span class="position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1" style="top: -5px; left: 15px; height: 20px; min-width: 20px;">3</span>
                      </a>
                      <a href="#" class="my-auto">
                          <i class="fas fa-user fa-2x"></i>
                      </a>
                  </div>
              </div>
          </nav>
      </div>
    </div>
    <!-- Navbar End -->
    
    
    <!-- Modal Search Start -->
    <div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-fullscreen">
          <div class="modal-content rounded-0">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Search by keyword</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body d-flex align-items-center">
                  <div class="input-group w-75 mx-auto d-flex">
                      <input type="search" class="form-control p-3" placeholder="keywords" aria-describedby="search-icon-1">
                      <span id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></span>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!-- Modal Search End -->
    
    
    <!-- Hero Start -->
    <div class="container-fluid py-5 mb-5 hero-header">
      <div class="container py-5">
          <div class="row g-5 align-items-center">
              <div class="col-md-12 col-lg-7">
                  <h4 class="mb-3 text-secondary">100% Organic Foods</h4>
                  <h1 class="mb-5 display-3 text-primary">Organic Veggies & Fruits Foods</h1>
                  <div class="position-relative mx-auto">
                      <input class="form-control border-2 border-secondary w-75 py-3 px-4 rounded-pill" type="number" placeholder="Search">
                      <button type="submit" class="btn btn-primary border-2 border-secondary py-3 px-4 position-absolute rounded-pill text-white h-100" style="top: 0; right: 25%;">Submit Now</button>
                  </div>
              </div>
              <div class="col-md-12 col-lg-5">
                  <div id="carouselId" class="carousel slide position-relative" data-bs-ride="carousel">
                      <div class="carousel-inner" role="listbox">
                          <div class="carousel-item active rounded">
                              <img src="assets/images/hero-img-1.png" class="img-fluid w-100 h-100 bg-secondary rounded" alt="First slide">
                              <a href="#" class="btn px-4 py-2 text-white rounded">Fruites</a>
                          </div>
                          <div class="carousel-item rounded">
                              <img src="assets/images/hero-img-2.jpg" class="img-fluid w-100 h-100 rounded" alt="Second slide">
                              <a href="#" class="btn px-4 py-2 text-white rounded">Vesitables</a>
                          </div>
                      </div>
                      <button class="carousel-control-prev" type="button" data-bs-target="#carouselId" 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="#carouselId" 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>
    <!-- Hero End -->
    
    
    <!-- Featurs Section Start -->
    <div class="container-fluid featurs py-5">
      <div class="container py-5">
          <div class="row g-4">
              <div class="col-md-6 col-lg-3">
                  <div class="featurs-item text-center rounded bg-light p-4">
                      <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
                          <i class="fas fa-car-side fa-3x text-white"></i>
                      </div>
                      <div class="featurs-content text-center">
                          <h5>Free Shipping</h5>
                          <p class="mb-0">Free on order over $300</p>
                      </div>
                  </div>
              </div>
              <div class="col-md-6 col-lg-3">
                  <div class="featurs-item text-center rounded bg-light p-4">
                      <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
                          <i class="fas fa-user-shield fa-3x text-white"></i>
                      </div>
                      <div class="featurs-content text-center">
                          <h5>Security Payment</h5>
                          <p class="mb-0">100% security payment</p>
                      </div>
                  </div>
              </div>
              <div class="col-md-6 col-lg-3">
                  <div class="featurs-item text-center rounded bg-light p-4">
                      <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
                          <i class="fas fa-exchange-alt fa-3x text-white"></i>
                      </div>
                      <div class="featurs-content text-center">
                          <h5>30 Day Return</h5>
                          <p class="mb-0">30 day money guarantee</p>
                      </div>
                  </div>
              </div>
              <div class="col-md-6 col-lg-3">
                  <div class="featurs-item text-center rounded bg-light p-4">
                      <div class="featurs-icon btn-square rounded-circle bg-secondary mb-5 mx-auto">
                          <i class="fa fa-phone-alt fa-3x text-white"></i>
                      </div>
                      <div class="featurs-content text-center">
                          <h5>24/7 Support</h5>
                          <p class="mb-0">Support every time fast</p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!-- Featurs Section End -->
    
    
    <!-- Fruits Shop Start-->
    <div class="container-fluid fruite py-5">
      <div class="container py-5">
          <div class="tab-class text-center">
              <div class="row g-4">
                  <div class="col-lg-4 text-start">
                      <h1>Our Organic Products</h1>
                  </div>
                  <div class="col-lg-8 text-end">
                      <ul class="nav nav-pills d-inline-flex text-center mb-5">
                          <li class="nav-item">
                              <a class="d-flex m-2 py-2 bg-light rounded-pill active" data-bs-toggle="pill" href="#tab-1">
                                  <span class="text-dark" style="width: 130px;">All Products</span>
                              </a>
                          </li>
                          <li class="nav-item">
                              <a class="d-flex py-2 m-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-2">
                                  <span class="text-dark" style="width: 130px;">Vegetables</span>
                              </a>
                          </li>
                          <li class="nav-item">
                              <a class="d-flex m-2 py-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-3">
                                  <span class="text-dark" style="width: 130px;">Fruits</span>
                              </a>
                          </li>
                          <li class="nav-item">
                              <a class="d-flex m-2 py-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-4">
                                  <span class="text-dark" style="width: 130px;">Bread</span>
                              </a>
                          </li>
                          <li class="nav-item">
                              <a class="d-flex m-2 py-2 bg-light rounded-pill" data-bs-toggle="pill" href="#tab-5">
                                  <span class="text-dark" style="width: 130px;">Meat</span>
                              </a>
                          </li>
                      </ul>
                  </div>
              </div>
              <div class="tab-content">
                  <div id="tab-1" class="tab-pane fade show p-0 active">
                      <div class="row g-4">
                          <div class="col-lg-12">
                              <div class="row g-4">
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Grapes</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Grapes</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Raspberries</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-4.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Apricots</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-3.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Banana</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Oranges</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Raspberries</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Grapes</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div id="tab-2" class="tab-pane fade show p-0">
                      <div class="row g-4">
                          <div class="col-lg-12">
                              <div class="row g-4">
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Grapes</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Raspberries</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div id="tab-3" class="tab-pane fade show p-0">
                      <div class="row g-4">
                          <div class="col-lg-12">
                              <div class="row g-4">
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Oranges</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Apple</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div id="tab-4" class="tab-pane fade show p-0">
                      <div class="row g-4">
                          <div class="col-lg-12">
                              <div class="row g-4">
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Grapes</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-4.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Apricots</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div id="tab-5" class="tab-pane fade show p-0">
                      <div class="row g-4">
                          <div class="col-lg-12">
                              <div class="row g-4">
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-3.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Banana</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-2.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Raspberries</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-lg-4 col-xl-3">
                                      <div class="rounded position-relative fruite-item">
                                          <div class="fruite-img">
                                              <img src="assets/images/fruite-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
                                          </div>
                                          <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">Fruits</div>
                                          <div class="p-4 border border-secondary border-top-0 rounded-bottom">
                                              <h4>Oranges</h4>
                                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                                              <div class="d-flex justify-content-between flex-lg-wrap">
                                                  <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                                                  <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>      
      </div>
    </div>
    <!-- Fruits Shop End-->
    
    
    <!-- Featurs Start -->
    <div class="container-fluid service py-5">
      <div class="container py-5">
          <div class="row g-4 justify-content-center">
              <div class="col-md-6 col-lg-4">
                  <a href="#">
                      <div class="service-item bg-secondary rounded border border-secondary">
                          <img src="assets/images/featur-1.jpg" class="img-fluid rounded-top w-100" alt="">
                          <div class="px-4 rounded-bottom">
                              <div class="service-content bg-primary text-center p-4 rounded">
                                  <h5 class="text-white">Fresh Apples</h5>
                                  <h3 class="mb-0">20% OFF</h3>
                              </div>
                          </div>
                      </div>
                  </a>
              </div>
              <div class="col-md-6 col-lg-4">
                  <a href="#">
                      <div class="service-item bg-dark rounded border border-dark">
                          <img src="assets/images/featur-2.jpg" class="img-fluid rounded-top w-100" alt="">
                          <div class="px-4 rounded-bottom">
                              <div class="service-content bg-light text-center p-4 rounded">
                                  <h5 class="text-primary">Tasty Fruits</h5>
                                  <h3 class="mb-0">Free delivery</h3>
                              </div>
                          </div>
                      </div>
                  </a>
              </div>
              <div class="col-md-6 col-lg-4">
                  <a href="#">
                      <div class="service-item bg-primary rounded border border-primary">
                          <img src="assets/images/featur-3.jpg" class="img-fluid rounded-top w-100" alt="">
                          <div class="px-4 rounded-bottom">
                              <div class="service-content bg-secondary text-center p-4 rounded">
                                  <h5 class="text-white">Exotic Vegitable</h5>
                                  <h3 class="mb-0">Discount 30$</h3>
                              </div>
                          </div>
                      </div>
                  </a>
              </div>
          </div>
      </div>
    </div>
    <!-- Featurs End -->
    <!-- Vesitable Shop Start-->
    <div class="container-fluid vesitable py-5">
      <div class="container py-5">
          <h1 class="mb-0">Fresh Organic Vegetables</h1>
          <div class="owl-carousel vegetable-carousel justify-content-center">
              <div class="border border-primary rounded position-relative vesitable-item">
                  <div class="vesitable-img">
                      <img src="assets/images/vegetable-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
                  </div>
                  <div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">Vegetable</div>
                  <div class="p-4 rounded-bottom">
                      <h4>Parsely</h4>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                      <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="border border-primary rounded position-relative vesitable-item">
                  <div class="vesitable-img">
                      <img src="assets/images/vegetable-item-1.jpg" class="img-fluid w-100 rounded-top" alt="">
                  </div>
                  <div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">Vegetable</div>
                  <div class="p-4 rounded-bottom">
                      <h4>Parsely</h4>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                      <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">$4.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="border border-primary rounded position-relative vesitable-item">
                  <div class="vesitable-img">
                      <img src="assets/images/vegetable-item-3.png" class="img-fluid w-100 rounded-top bg-light" alt="">
                  </div>
                  <div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">Vegetable</div>
                  <div class="p-4 rounded-bottom">
                      <h4>Banana</h4>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                      <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="border border-primary rounded position-relative vesitable-item">
                  <div class="vesitable-img">
                      <img src="assets/images/vegetable-item-4.jpg" class="img-fluid w-100 rounded-top" alt="">
                  </div>
                  <div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">Vegetable</div>
                  <div class="p-4 rounded-bottom">
                      <h4>Bell Papper</h4>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                      <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="border border-primary rounded position-relative vesitable-item">
                  <div class="vesitable-img">
                      <img src="assets/images/vegetable-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                  </div>
                  <div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">Vegetable</div>
                  <div class="p-4 rounded-bottom">
                      <h4>Potatoes</h4>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                      <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="border border-primary rounded position-relative vesitable-item">
                  <div class="vesitable-img">
                      <img src="assets/images/vegetable-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
                  </div>
                  <div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">Vegetable</div>
                  <div class="p-4 rounded-bottom">
                      <h4>Parsely</h4>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                      <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="border border-primary rounded position-relative vesitable-item">
                  <div class="vesitable-img">
                      <img src="assets/images/vegetable-item-5.jpg" class="img-fluid w-100 rounded-top" alt="">
                  </div>
                  <div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">Vegetable</div>
                  <div class="p-4 rounded-bottom">
                      <h4>Potatoes</h4>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                      <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="border border-primary rounded position-relative vesitable-item">
                  <div class="vesitable-img">
                      <img src="assets/images/vegetable-item-6.jpg" class="img-fluid w-100 rounded-top" alt="">
                  </div>
                  <div class="text-white bg-primary px-3 py-1 rounded position-absolute" style="top: 10px; right: 10px;">Vegetable</div>
                  <div class="p-4 rounded-bottom">
                      <h4>Parsely</h4>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod te incididunt</p>
                      <div class="d-flex justify-content-between flex-lg-wrap">
                          <p class="text-dark fs-5 fw-bold mb-0">$7.99 / kg</p>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!-- Vesitable Shop End -->
    
    
    <!-- Banner Section Start-->
    <div class="container-fluid banner bg-secondary my-5">
      <div class="container py-5">
          <div class="row g-4 align-items-center">
              <div class="col-lg-6">
                  <div class="py-4">
                      <h1 class="display-3 text-white">Fresh Exotic Fruits</h1>
                      <p class="fw-normal display-3 text-dark mb-4">in Our Store</p>
                      <p class="mb-4 text-dark">The generated Lorem Ipsum is therefore always free from repetition injected humour, or non-characteristic words etc.</p>
                      <a href="#" class="banner-btn btn border-2 border-white rounded-pill text-dark py-3 px-5">BUY</a>
                  </div>
              </div>
              <div class="col-lg-6">
                  <div class="position-relative">
                      <img src="assets/images/baner-1.png" class="img-fluid w-100 rounded" alt="">
                      <div class="d-flex align-items-center justify-content-center bg-white rounded-circle position-absolute" style="width: 140px; height: 140px; top: 0; left: 0;">
                          <h1 style="font-size: 100px;">1</h1>
                          <div class="d-flex flex-column">
                              <span class="h2 mb-0">50$</span>
                              <span class="h4 text-muted mb-0">kg</span>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!-- Banner Section End -->
    
    
    <!-- Bestsaler Product Start -->
    <div class="container-fluid py-5">
      <div class="container py-5">
          <div class="text-center mx-auto mb-5" style="max-width: 700px;">
              <h1 class="display-4">Bestseller Products</h1>
              <p>Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
          </div>
          <div class="row g-4">
              <div class="col-lg-6 col-xl-4">
                  <div class="p-4 rounded bg-light">
                      <div class="row align-items-center">
                          <div class="col-6">
                              <img src="assets/images/best-product-1.jpg" class="img-fluid rounded-circle w-100" alt="">
                          </div>
                          <div class="col-6">
                              <a href="#" class="h5">Organic Tomato</a>
                              <div class="d-flex my-3">
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star"></i>
                              </div>
                              <h4 class="mb-3">3.12 $</h4>
                              <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-lg-6 col-xl-4">
                  <div class="p-4 rounded bg-light">
                      <div class="row align-items-center">
                          <div class="col-6">
                              <img src="assets/images/best-product-2.jpg" class="img-fluid rounded-circle w-100" alt="">
                          </div>
                          <div class="col-6">
                              <a href="#" class="h5">Organic Tomato</a>
                              <div class="d-flex my-3">
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star"></i>
                              </div>
                              <h4 class="mb-3">3.12 $</h4>
                              <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-lg-6 col-xl-4">
                  <div class="p-4 rounded bg-light">
                      <div class="row align-items-center">
                          <div class="col-6">
                              <img src="assets/images/best-product-3.jpg" class="img-fluid rounded-circle w-100" alt="">
                          </div>
                          <div class="col-6">
                              <a href="#" class="h5">Organic Tomato</a>
                              <div class="d-flex my-3">
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star"></i>
                              </div>
                              <h4 class="mb-3">3.12 $</h4>
                              <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-lg-6 col-xl-4">
                  <div class="p-4 rounded bg-light">
                      <div class="row align-items-center">
                          <div class="col-6">
                              <img src="assets/images/best-product-4.jpg" class="img-fluid rounded-circle w-100" alt="">
                          </div>
                          <div class="col-6">
                              <a href="#" class="h5">Organic Tomato</a>
                              <div class="d-flex my-3">
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star"></i>
                              </div>
                              <h4 class="mb-3">3.12 $</h4>
                              <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-lg-6 col-xl-4">
                  <div class="p-4 rounded bg-light">
                      <div class="row align-items-center">
                          <div class="col-6">
                              <img src="assets/images/best-product-5.jpg" class="img-fluid rounded-circle w-100" alt="">
                          </div>
                          <div class="col-6">
                              <a href="#" class="h5">Organic Tomato</a>
                              <div class="d-flex my-3">
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star"></i>
                              </div>
                              <h4 class="mb-3">3.12 $</h4>
                              <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-lg-6 col-xl-4">
                  <div class="p-4 rounded bg-light">
                      <div class="row align-items-center">
                          <div class="col-6">
                              <img src="assets/images/best-product-6.jpg" class="img-fluid rounded-circle w-100" alt="">
                          </div>
                          <div class="col-6">
                              <a href="#" class="h5">Organic Tomato</a>
                              <div class="d-flex my-3">
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star"></i>
                              </div>
                              <h4 class="mb-3">3.12 $</h4>
                              <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="col-md-6 col-lg-6 col-xl-3">
                  <div class="text-center">
                      <img src="assets/images/fruite-item-1.jpg" class="img-fluid rounded" alt="">
                      <div class="py-4">
                          <a href="#" class="h5">Organic Tomato</a>
                          <div class="d-flex my-3 justify-content-center">
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star"></i>
                          </div>
                          <h4 class="mb-3">3.12 $</h4>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="col-md-6 col-lg-6 col-xl-3">
                  <div class="text-center">
                      <img src="assets/images/fruite-item-2.jpg" class="img-fluid rounded" alt="">
                      <div class="py-4">
                          <a href="#" class="h5">Organic Tomato</a>
                          <div class="d-flex my-3 justify-content-center">
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star"></i>
                          </div>
                          <h4 class="mb-3">3.12 $</h4>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="col-md-6 col-lg-6 col-xl-3">
                  <div class="text-center">
                      <img src="assets/images/fruite-item-3.jpg" class="img-fluid rounded" alt="">
                      <div class="py-4">
                          <a href="#" class="h5">Organic Tomato</a>
                          <div class="d-flex my-3 justify-content-center">
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star"></i>
                          </div>
                          <h4 class="mb-3">3.12 $</h4>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
              <div class="col-md-6 col-lg-6 col-xl-3">
                  <div class="text-center">
                      <img src="assets/images/fruite-item-4.jpg" class="img-fluid rounded" alt="">
                      <div class="py-2">
                          <a href="#" class="h5">Organic Tomato</a>
                          <div class="d-flex my-3 justify-content-center">
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star text-primary"></i>
                              <i class="fas fa-star"></i>
                          </div>
                          <h4 class="mb-3">3.12 $</h4>
                          <a href="#" class="btn border border-secondary rounded-pill px-3 text-primary"><i class="fa fa-shopping-bag me-2 text-primary"></i> Add to cart</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!-- Bestsaler Product End -->
    
    
    <!-- Fact Start -->
    <div class="container-fluid py-5">
      <div class="container">
          <div class="bg-light p-5 rounded">
              <div class="row g-4 justify-content-center">
                  <div class="col-md-6 col-lg-6 col-xl-3">
                      <div class="counter bg-white rounded p-5">
                          <i class="fa fa-users text-secondary"></i>
                          <h4>satisfied customers</h4>
                          <h1>1963</h1>
                      </div>
                  </div>
                  <div class="col-md-6 col-lg-6 col-xl-3">
                      <div class="counter bg-white rounded p-5">
                          <i class="fa fa-users text-secondary"></i>
                          <h4>quality of service</h4>
                          <h1>99%</h1>
                      </div>
                  </div>
                  <div class="col-md-6 col-lg-6 col-xl-3">
                      <div class="counter bg-white rounded p-5">
                          <i class="fa fa-users text-secondary"></i>
                          <h4>quality certificates</h4>
                          <h1>33</h1>
                      </div>
                  </div>
                  <div class="col-md-6 col-lg-6 col-xl-3">
                      <div class="counter bg-white rounded p-5">
                          <i class="fa fa-users text-secondary"></i>
                          <h4>Available Products</h4>
                          <h1>789</h1>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!-- Fact Start -->
    
    
    <!-- Tastimonial Start -->
    <div class="container-fluid testimonial py-5">
      <div class="container py-5">
          <div class="testimonial-header text-center">
              <h4 class="text-primary">Our Testimonial</h4>
              <h1 class="display-5 mb-5 text-dark">Our Client Saying!</h1>
          </div>
          <div class="owl-carousel testimonial-carousel">
              <div class="testimonial-item img-border-radius bg-light rounded p-4">
                  <div class="position-relative">
                      <i class="fa fa-quote-right fa-2x text-secondary position-absolute" style="bottom: 30px; right: 0;"></i>
                      <div class="mb-4 pb-4 border-bottom border-secondary">
                          <p class="mb-0">Lorem Ipsum is simply dummy text of the printing Ipsum has been the industry's standard dummy text ever since the 1500s,
                          </p>
                      </div>
                      <div class="d-flex align-items-center flex-nowrap">
                          <div class="bg-secondary rounded">
                              <img src="assets/images/testimonial-1.jpg" class="img-fluid rounded" style="width: 100px; height: 100px;" alt="">
                          </div>
                          <div class="ms-4 d-block">
                              <h4 class="text-dark">Client Name</h4>
                              <p class="m-0 pb-3">Profession</p>
                              <div class="d-flex pe-5">
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star"></i>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="testimonial-item img-border-radius bg-light rounded p-4">
                  <div class="position-relative">
                      <i class="fa fa-quote-right fa-2x text-secondary position-absolute" style="bottom: 30px; right: 0;"></i>
                      <div class="mb-4 pb-4 border-bottom border-secondary">
                          <p class="mb-0">Lorem Ipsum is simply dummy text of the printing Ipsum has been the industry's standard dummy text ever since the 1500s,
                          </p>
                      </div>
                      <div class="d-flex align-items-center flex-nowrap">
                          <div class="bg-secondary rounded">
                              <img src="assets/images/testimonial-1.jpg" class="img-fluid rounded" style="width: 100px; height: 100px;" alt="">
                          </div>
                          <div class="ms-4 d-block">
                              <h4 class="text-dark">Client Name</h4>
                              <p class="m-0 pb-3">Profession</p>
                              <div class="d-flex pe-5">
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="testimonial-item img-border-radius bg-light rounded p-4">
                  <div class="position-relative">
                      <i class="fa fa-quote-right fa-2x text-secondary position-absolute" style="bottom: 30px; right: 0;"></i>
                      <div class="mb-4 pb-4 border-bottom border-secondary">
                          <p class="mb-0">Lorem Ipsum is simply dummy text of the printing Ipsum has been the industry's standard dummy text ever since the 1500s,
                          </p>
                      </div>
                      <div class="d-flex align-items-center flex-nowrap">
                          <div class="bg-secondary rounded">
                              <img src="assets/images/testimonial-1.jpg" class="img-fluid rounded" style="width: 100px; height: 100px;" alt="">
                          </div>
                          <div class="ms-4 d-block">
                              <h4 class="text-dark">Client Name</h4>
                              <p class="m-0 pb-3">Profession</p>
                              <div class="d-flex pe-5">
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                                  <i class="fas fa-star text-primary"></i>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!-- Tastimonial End -->
    
    
    <!-- Footer Start -->
    <div class="container-fluid bg-dark text-white-50 footer pt-5 mt-5">
      <div class="container py-5">
          <div class="pb-4 mb-4" style="border-bottom: 1px solid rgba(226, 175, 24, 0.5) ;">
              <div class="row g-4">
                  <div class="col-lg-3">
                      <a href="#">
                          <h1 class="text-primary mb-0">Fruitables</h1>
                          <p class="text-secondary mb-0">Fresh products</p>
                      </a>
                  </div>
                  <div class="col-lg-6">
                      <div class="position-relative mx-auto">
                          <input class="form-control border-0 w-100 py-3 px-4 rounded-pill" type="number" placeholder="Your Email">
                          <button type="submit" class="btn btn-primary border-0 border-secondary py-3 px-4 position-absolute rounded-pill text-white" style="top: 0; right: 0;">Subscribe Now</button>
                      </div>
                  </div>
                  <div class="col-lg-3">
                      <div class="d-flex justify-content-end pt-3">
                          <a class="btn  btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i class="fab fa-twitter"></i></a>
                          <a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i class="fab fa-facebook-f"></i></a>
                          <a class="btn btn-outline-secondary me-2 btn-md-square rounded-circle" href=""><i class="fab fa-youtube"></i></a>
                          <a class="btn btn-outline-secondary btn-md-square rounded-circle" href=""><i class="fab fa-linkedin-in"></i></a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="row g-5">
              <div class="col-lg-3 col-md-6">
                  <div class="footer-item">
                      <h4 class="text-light mb-3">Why People Like us!</h4>
                      <p class="mb-4">typesetting, remaining essentially unchanged. It was 
                          popularised in the 1960s with the like Aldus PageMaker including of Lorem Ipsum.</p>
                      <a href="" class="btn border-secondary py-2 px-4 rounded-pill text-primary">Read More</a>
                  </div>
              </div>
              <div class="col-lg-3 col-md-6">
                  <div class="d-flex flex-column text-start footer-item">
                      <h4 class="text-light mb-3">Shop Info</h4>
                      <a class="btn-link" href="">About Us</a>
                      <a class="btn-link" href="">Contact Us</a>
                      <a class="btn-link" href="">Privacy Policy</a>
                      <a class="btn-link" href="">Terms & Condition</a>
                      <a class="btn-link" href="">Return Policy</a>
                      <a class="btn-link" href="">FAQs & Help</a>
                  </div>
              </div>
              <div class="col-lg-3 col-md-6">
                  <div class="d-flex flex-column text-start footer-item">
                      <h4 class="text-light mb-3">Account</h4>
                      <a class="btn-link" href="">My Account</a>
                      <a class="btn-link" href="">Shop details</a>
                      <a class="btn-link" href="">Shopping Cart</a>
                      <a class="btn-link" href="">Wishlist</a>
                      <a class="btn-link" href="">Order History</a>
                      <a class="btn-link" href="">International Orders</a>
                  </div>
              </div>
              <div class="col-lg-3 col-md-6">
                  <div class="footer-item">
                      <h4 class="text-light mb-3">Contact</h4>
                      <p>Address: 1429 Netus Rd, NY 48247</p>
                      <p>Email: https://therichpost.com</p>
                      <p>Phone: +0123 4567 8910</p>
                      <p>Payment Accepted</p>
                      <img src="assets/images/payment.png" class="img-fluid" alt="">
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!-- Footer End -->
    
    <!-- Copyright Start -->
    <div class="container-fluid copyright bg-dark py-4">
      <div class="container">
          <div class="row">
              <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                  <span class="text-light"><a href="#"><i class="fas fa-copyright text-light me-2"></i>Your Site Name</a>, All right reserved.</span>
              </div>
              <div class="col-md-6 my-auto text-center text-md-end text-white">
                 
                  Designed By <a class="border-bottom" href="https://therichpost.com">HTML Codex</a> Distributed By <a class="border-bottom" href="https://therichpost.com">Jassa</a>
              </div>
          </div>
      </div>
    </div>
    <!-- Copyright End -->
    
    
    
    <!-- Back to Top -->
    <a href="#" class="btn btn-primary border-3 border-primary rounded-circle back-to-top"><i class="fa fa-arrow-up"></i></a>

    4. Now friends we just need to add below code into angulareco/angular.json file to custom.js file working code:

    ...
     "styles": [
                  "src/styles.css",
    "assets/css/lightbox.min.css",
    "assets/css/owl.carousel.min.css",
    "assets/css/bootstrap.min.css",
    "assets/css/style.css"
                
                 
                ],
                "scripts": [
                "assets/js/easing.min.js",
    "assets/js/waypoints.min.js",
    "assets/js/lightbox.min.js",
    "assets/js/owl.carousel.min.js",
    "assets/js/main.js"
    
                ]
    ...

    5. Guys now here is the git repo link from where we will get images, fonts, css and js folder and place all the folder inside assets folder:

    Free Git Repo Link

    6. Now friends we just need to add below code into angulareco/src/imdex.html file:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Angular17</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@600;800&display=swap" rel="stylesheet"> 
    
      <!-- Icon Font Stylesheet -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">
    
    
    </head>
    <body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
      <app-root></app-root>
       <!-- JavaScript Libraries -->
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
      
    </body>
    </html>
    
    

    Friends in the end must run ng serve command into your terminal to run the angular 17 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

  • Angular 17 Responsive Ecommerce Free Template

    Angular 17 Responsive Ecommerce Free Template

    Hello friends, welcome back to my blog. Today this blog post will share you, Angular 17 Responsive Ecommerce Free Template.


    Live Demo

    Angular 17 Responsive Ecommerce Free Template
    Angular 17 Responsive Ecommerce Free Template

    Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

    1. Angular 17 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 17 setup and for this we need to run below commands but if you already have angular 17 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 angulareco //Create new Angular Project
    
    cd angulareco // Go inside the Angular Project Folder

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

    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <title>Search</title>
        <path fill="currentColor" d="M19 3C13.488 3 9 7.488 9 13c0 2.395.84 4.59 2.25 6.313L3.281 27.28l1.439 1.44l7.968-7.969A9.922 9.922 0 0 0 19 23c5.512 0 10-4.488 10-10S24.512 3 19 3zm0 2c4.43 0 8 3.57 8 8s-3.57 8-8 8s-8-3.57-8-8s3.57-8 8-8z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="user" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="cart" viewBox="0 0 16 16">
        <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
      </symbol>
      <svg xmlns="http://www.w3.org/2000/svg" id="chevron-left" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
      </svg>
      <symbol xmlns="http://www.w3.org/2000/svg" id="chevron-right" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="cart-outline" viewBox="0 0 16 16">
        <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="quality" viewBox="0 0 16 16">
        <path d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z" />
        <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="price-tag" viewBox="0 0 16 16">
        <path d="M6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0z" />
        <path d="M2 1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 1 6.586V2a1 1 0 0 1 1-1zm0 5.586 7 7L13.586 9l-7-7H2v4.586z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="shield-plus" viewBox="0 0 16 16">
        <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z" />
        <path d="M8 4.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V9a.5.5 0 0 1-1 0V7.5H6a.5.5 0 0 1 0-1h1.5V5a.5.5 0 0 1 .5-.5z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="star-empty" viewBox="0 0 16 16">
        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="star-half" viewBox="0 0 16 16">
        <path d="M5.354 5.119 7.538.792A.516.516 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.537.537 0 0 1 16 6.32a.548.548 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.52.52 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.58.58 0 0 1 .085-.302.513.513 0 0 1 .37-.245l4.898-.696zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.565.565 0 0 1 .162-.505l2.907-2.77-4.052-.576a.525.525 0 0 1-.393-.288L8.001 2.223 8 2.226v9.8z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="quote" viewBox="0 0 24 24">
        <path fill="currentColor" d="m15 17l2-4h-4V6h7v7l-2 4h-3Zm-9 0l2-4H4V6h7v7l-2 4H6Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="facebook" viewBox="0 0 24 24">
        <path fill="currentColor" d="M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5a1 1 0 0 1 1-1h3v-4h-3a5 5 0 0 0-5 5v2.01h-2l-.396 3.98h2.396v8.01Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="youtube" viewBox="0 0 32 32">
        <path fill="currentColor" d="M29.41 9.26a3.5 3.5 0 0 0-2.47-2.47C24.76 6.2 16 6.2 16 6.2s-8.76 0-10.94.59a3.5 3.5 0 0 0-2.47 2.47A36.13 36.13 0 0 0 2 16a36.13 36.13 0 0 0 .59 6.74a3.5 3.5 0 0 0 2.47 2.47c2.18.59 10.94.59 10.94.59s8.76 0 10.94-.59a3.5 3.5 0 0 0 2.47-2.47A36.13 36.13 0 0 0 30 16a36.13 36.13 0 0 0-.59-6.74ZM13.2 20.2v-8.4l7.27 4.2Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="twitter" viewBox="0 0 256 256">
        <path fill="currentColor" d="m245.66 77.66l-29.9 29.9C209.72 177.58 150.67 232 80 232c-14.52 0-26.49-2.3-35.58-6.84c-7.33-3.67-10.33-7.6-11.08-8.72a8 8 0 0 1 3.85-11.93c.26-.1 24.24-9.31 39.47-26.84a110.93 110.93 0 0 1-21.88-24.2c-12.4-18.41-26.28-50.39-22-98.18a8 8 0 0 1 13.65-4.92c.35.35 33.28 33.1 73.54 43.72V88a47.87 47.87 0 0 1 14.36-34.3A46.87 46.87 0 0 1 168.1 40a48.66 48.66 0 0 1 41.47 24H240a8 8 0 0 1 5.66 13.66Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="instagram" viewBox="0 0 256 256">
        <path fill="currentColor" d="M128 80a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48Zm0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32Zm48-136H80a56.06 56.06 0 0 0-56 56v96a56.06 56.06 0 0 0 56 56h96a56.06 56.06 0 0 0 56-56V80a56.06 56.06 0 0 0-56-56Zm40 152a40 40 0 0 1-40 40H80a40 40 0 0 1-40-40V80a40 40 0 0 1 40-40h96a40 40 0 0 1 40 40ZM192 76a12 12 0 1 1-12-12a12 12 0 0 1 12 12Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="linkedin" viewBox="0 0 24 24">
        <path fill="currentColor" d="M6.94 5a2 2 0 1 1-4-.002a2 2 0 0 1 4 .002zM7 8.48H3V21h4V8.48zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91l.04-1.68z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="nav-icon" viewBox="0 0 16 16">
        <path d="M14 10.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0 0 1h7a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0 0 1h11a.5.5 0 0 0 .5-.5z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="close" viewBox="0 0 16 16">
        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="navbar-icon" viewBox="0 0 16 16">
        <path d="M14 10.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0 0 1h7a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0 0 1h11a.5.5 0 0 0 .5-.5z" />
      </symbol>
    </svg>  
    
    <div class="search-popup">
        <div class="search-popup-container">
    
          <form role="search" method="get" class="search-form" action="">
            <input type="search" id="search-form" class="search-field" placeholder="Type and press enter" value="" name="s" />
            <button type="submit" class="search-submit"><svg class="search"><use xlink:href="#search"></use></svg></button>
          </form>
    
          <h5 class="cat-list-title">Browse Categories</h5>
          
          <ul class="cat-list">
            <li class="cat-list-item">
              <a href="#" title="Mobile Phones">Mobile Phones</a>
            </li>
            <li class="cat-list-item">
              <a href="#" title="Smart Watches">Smart Watches</a>
            </li>
            <li class="cat-list-item">
              <a href="#" title="Headphones">Headphones</a>
            </li>
            <li class="cat-list-item">
              <a href="#" title="Accessories">Accessories</a>
            </li>
            <li class="cat-list-item">
              <a href="#" title="Monitors">Monitors</a>
            </li>
            <li class="cat-list-item">
              <a href="#" title="Speakers">Speakers</a>
            </li>
            <li class="cat-list-item">
              <a href="#" title="Memory Cards">Memory Cards</a>
            </li>
          </ul>
    
        </div>
    </div>
    
    <header id="header" class="site-header header-scrolled position-fixed text-black bg-light">
      <nav id="header-nav" class="navbar navbar-expand-lg px-3 mb-3">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">
            <img src="assets/images/main-logo.png" class="logo">
          </a>
          <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <svg class="navbar-icon">
              <use xlink:href="#navbar-icon"></use>
            </svg>
          </button>
          <div class="offcanvas offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
            <div class="offcanvas-header px-4 pb-0">
              <a class="navbar-brand" href="#">
                <img src="assets/images/main-logo.png" class="logo">
              </a>
              <button type="button" class="btn-close btn-close-black" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
            </div>
            <div class="offcanvas-body">
              <ul id="navbar" class="navbar-nav text-uppercase justify-content-end align-items-center flex-grow-1 pe-3">
                <li class="nav-item">
                  <a class="nav-link me-4 active" href="#">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link me-4" href="#company-services">Services</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link me-4" href="#mobile-products">Products</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link me-4" href="#smart-watches">Watches</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link me-4" href="#yearly-sale">Sale</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link me-4" href="#latest-blog">Blog</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link me-4 dropdown-toggle link-dark" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Pages</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#" class="dropdown-item">About</a>
                    </li>
                    <li>
                      <a href="#" class="dropdown-item">Blog</a>
                    </li>
                    <li>
                      <a href="#" class="dropdown-item">Shop</a>
                    </li>
                    <li>
                      <a href="#" class="dropdown-item">Cart</a>
                    </li>
                    <li>
                      <a href="#" class="dropdown-item">Checkout</a>
                    </li>
                    <li>
                      <a href="#" class="dropdown-item">Single Post</a>
                    </li>
                    <li>
                      <a href="#" class="dropdown-item">Single Product</a>
                    </li>
                    <li>
                      <a href="#" class="dropdown-item">Contact</a>
                    </li>
                  </ul>
                </li>
                <li class="nav-item">
                  <div class="user-items ps-5">
                    <ul class="d-flex justify-content-end list-unstyled">
                      <li class="search-item pe-3">
                        <a href="#" class="search-button">
                          <svg class="search">
                            <use xlink:href="#search"></use>
                          </svg>
                        </a>
                      </li>
                      <li class="pe-3">
                        <a href="#">
                          <svg class="user">
                            <use xlink:href="#user"></use>
                          </svg>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <svg class="cart">
                            <use xlink:href="#cart"></use>
                          </svg>
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <section id="billboard" class="position-relative overflow-hidden bg-light-blue">
      <div class="swiper main-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="container">
              <div class="row d-flex align-items-center">
                <div class="col-md-6">
                  <div class="banner-content">
                    <h1 class="display-2 text-uppercase text-dark pb-5">Your Products Are Great.</h1>
                    <a href="#" class="btn btn-medium btn-dark text-uppercase btn-rounded-none">Shop Product</a>
                  </div>
                </div>
                <div class="col-md-5">
                  <div class="image-holder">
                    <img src="assets/images/banner-image.png" alt="banner">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="container">
              <div class="row d-flex flex-wrap align-items-center">
                <div class="col-md-6">
                  <div class="banner-content">
                    <h1 class="display-2 text-uppercase text-dark pb-5">Technology Hack You Won't Get</h1>
                    <a href="#" class="btn btn-medium btn-dark text-uppercase btn-rounded-none">Shop Product</a>
                  </div>
                </div>
                <div class="col-md-5">
                  <div class="image-holder">
                    <img src="assets/images/banner-image.png" alt="banner">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-icon swiper-arrow swiper-arrow-prev">
        <svg class="chevron-left">
          <use xlink:href="#chevron-left" />
        </svg>
      </div>
      <div class="swiper-icon swiper-arrow swiper-arrow-next">
        <svg class="chevron-right">
          <use xlink:href="#chevron-right" />
        </svg>
      </div>
    </section>
    <section id="company-services" class="padding-large">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-md-6 pb-3">
            <div class="icon-box d-flex">
              <div class="icon-box-icon pe-3 pb-3">
                <svg class="cart-outline">
                  <use xlink:href="#cart-outline" />
                </svg>
              </div>
              <div class="icon-box-content">
                <h3 class="card-title text-uppercase text-dark">Free delivery</h3>
                <p>Consectetur adipi elit lorem ipsum dolor sit amet.</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 pb-3">
            <div class="icon-box d-flex">
              <div class="icon-box-icon pe-3 pb-3">
                <svg class="quality">
                  <use xlink:href="#quality" />
                </svg>
              </div>
              <div class="icon-box-content">
                <h3 class="card-title text-uppercase text-dark">Quality guarantee</h3>
                <p>Dolor sit amet orem ipsu mcons ectetur adipi elit.</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 pb-3">
            <div class="icon-box d-flex">
              <div class="icon-box-icon pe-3 pb-3">
                <svg class="price-tag">
                  <use xlink:href="#price-tag" />
                </svg>
              </div>
              <div class="icon-box-content">
                <h3 class="card-title text-uppercase text-dark">Daily offers</h3>
                <p>Amet consectetur adipi elit loreme ipsum dolor sit.</p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 pb-3">
            <div class="icon-box d-flex">
              <div class="icon-box-icon pe-3 pb-3">
                <svg class="shield-plus">
                  <use xlink:href="#shield-plus" />
                </svg>
              </div>
              <div class="icon-box-content">
                <h3 class="card-title text-uppercase text-dark">100% secure payment</h3>
                <p>Rem Lopsum dolor sit amet, consectetur adipi elit.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="mobile-products" class="product-store position-relative padding-large no-padding-top">
      <div class="container">
        <div class="row">
          <div class="display-header d-flex justify-content-between pb-3">
            <h2 class="display-7 text-dark text-uppercase">Mobile Products</h2>
            <div class="btn-right">
              <a href="#" class="btn btn-medium btn-normal text-uppercase">Go to Shop</a>
            </div>
          </div>
          <div class="swiper product-swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item1.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">Iphone 10</a>
                    </h3>
                    <span class="item-price text-primary">$980</span>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item2.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">Iphone 11</a>
                    </h3>
                    <span class="item-price text-primary">$1100</span>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item3.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">Iphone 8</a>
                    </h3>
                    <span class="item-price text-primary">$780</span>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item4.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">Iphone 13</a>
                    </h3>
                    <span class="item-price text-primary">$1500</span>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item5.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">Iphone 12</a>
                    </h3>
                    <span class="item-price text-primary">$1300</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination position-absolute text-center"></div>
    </section>
    <section id="smart-watches" class="product-store padding-large position-relative">
      <div class="container">
        <div class="row">
          <div class="display-header d-flex justify-content-between pb-3">
            <h2 class="display-7 text-dark text-uppercase">Smart Watches</h2>
            <div class="btn-right">
              <a href="#" class="btn btn-medium btn-normal text-uppercase">Go to Shop</a>
            </div>
          </div>
          <div class="swiper product-watch-swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item6.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">Pink watch</a>
                    </h3>
                    <span class="item-price text-primary">$870</span>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item7.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">Heavy watch</a>
                    </h3>
                    <span class="item-price text-primary">$680</span>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item8.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">spotted watch</a>
                    </h3>
                    <span class="item-price text-primary">$750</span>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item9.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between align-items-baseline pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">black watch</a>
                    </h3>
                    <span class="item-price text-primary">$650</span>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="product-card position-relative">
                  <div class="image-holder">
                    <img src="assets/images/product-item10.jpg" alt="product-item" class="img-fluid">
                  </div>
                  <div class="cart-concern position-absolute">
                    <div class="cart-button d-flex">
                      <a href="#" class="btn btn-medium btn-black">Add to Cart<svg class="cart-outline"><use xlink:href="#cart-outline"></use></svg></a>
                    </div>
                  </div>
                  <div class="card-detail d-flex justify-content-between pt-3">
                    <h3 class="card-title text-uppercase">
                      <a href="#">black watch</a>
                    </h3>
                    <span class="item-price text-primary">$750</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination position-absolute text-center"></div>
    </section>
    <section id="yearly-sale" class="bg-light-blue overflow-hidden mt-5 padding-xlarge" style="background-image: url('assets/images/single-image1.png');background-position: right; background-repeat: no-repeat;">
      <div class="row d-flex flex-wrap align-items-center">
        <div class="col-md-6 col-sm-12">
          <div class="text-content offset-4 padding-medium">
            <h3>10% off</h3>
            <h2 class="display-2 pb-5 text-uppercase text-dark">New year sale</h2>
            <a href="#" class="btn btn-medium btn-dark text-uppercase btn-rounded-none">Shop Sale</a>
          </div>
        </div>
        <div class="col-md-6 col-sm-12">
          
        </div>
      </div>
    </section>
    <section id="latest-blog" class="padding-large">
      <div class="container">
        <div class="row">
          <div class="display-header d-flex justify-content-between pb-3">
            <h2 class="display-7 text-dark text-uppercase">Latest Posts</h2>
            <div class="btn-right">
              <a href="#" class="btn btn-medium btn-normal text-uppercase">Read Blog</a>
            </div>
          </div>
          <div class="post-grid d-flex flex-wrap justify-content-between">
            <div class="col-lg-4 col-sm-12">
              <div class="card border-none me-3">
                <div class="card-image">
                  <img src="assets/images/post-item1.jpg" alt="" class="img-fluid">
                </div>
              </div>
              <div class="card-body text-uppercase">
                <div class="card-meta text-muted">
                  <span class="meta-date">feb 22, 2023</span>
                  <span class="meta-category">- Gadgets</span>
                </div>
                <h3 class="card-title">
                  <a href="#">Get some cool gadgets in 2023</a>
                </h3>
              </div>
            </div>
            <div class="col-lg-4 col-sm-12">
              <div class="card border-none me-3">
                <div class="card-image">
                  <img src="assets/images/post-item2.jpg" alt="" class="img-fluid">
                </div>
              </div>
              <div class="card-body text-uppercase">
                <div class="card-meta text-muted">
                  <span class="meta-date">feb 25, 2023</span>
                  <span class="meta-category">- Technology</span>
                </div>
                <h3 class="card-title">
                  <a href="#">Technology Hack You Won't Get</a>
                </h3>
              </div>
            </div>
            <div class="col-lg-4 col-sm-12">
              <div class="card border-none me-3">
                <div class="card-image">
                  <img src="assets/images/post-item3.jpg" alt="" class="img-fluid">
                </div>
              </div>
              <div class="card-body text-uppercase">
                <div class="card-meta text-muted">
                  <span class="meta-date">feb 22, 2023</span>
                  <span class="meta-category">- Camera</span>
                </div>
                <h3 class="card-title">
                  <a href="#">Top 10 Small Camera In The World</a>
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="testimonials" class="position-relative">
      <div class="container">
        <div class="row">
          <div class="review-content position-relative">
            <div class="swiper-icon swiper-arrow swiper-arrow-prev position-absolute d-flex align-items-center">
              <svg class="chevron-left">
                <use xlink:href="#chevron-left" />
              </svg>
            </div>
            <div class="swiper testimonial-swiper">
              <div class="quotation text-center">
                <svg class="quote">
                  <use xlink:href="#quote" />
                </svg>
              </div>
              <div class="swiper-wrapper">
                <div class="swiper-slide text-center d-flex justify-content-center">
                  <div class="review-item col-md-10">
                    <i class="icon icon-review"></i>
                    <blockquote>“Tempus oncu enim pellen tesque este pretium in neque, elit morbi sagittis lorem habi mattis Pellen tesque pretium feugiat vel morbi suspen dise sagittis lorem habi tasse morbi.”</blockquote>
                    <div class="rating">
                      <svg class="star star-fill">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star star-fill">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star star-fill">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star star-half">
                        <use xlink:href="#star-half"></use>
                      </svg>
                      <svg class="star star-empty">
                        <use xlink:href="#star-empty"></use>
                      </svg>
                    </div>
                    <div class="author-detail">
                      <div class="name text-dark text-uppercase pt-2">Emma Chamberlin</div>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide text-center d-flex justify-content-center">
                  <div class="review-item col-md-10">
                    <i class="icon icon-review"></i>
                    <blockquote>“A blog is a digital publication that can complement a website or exist independently. A blog may include articles, short posts, listicles, infographics, videos, and other digital content.”</blockquote>
                    <div class="rating">
                      <svg class="star star-fill">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star star-fill">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star star-fill">
                        <use xlink:href="#star-fill"></use>
                      </svg>
                      <svg class="star star-half">
                        <use xlink:href="#star-half"></use>
                      </svg>
                      <svg class="star star-empty">
                        <use xlink:href="#star-empty"></use>
                      </svg>
                    </div>
                    <div class="author-detail">
                      <div class="name text-dark text-uppercase pt-2">Jennie Rose</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-icon swiper-arrow swiper-arrow-next position-absolute d-flex align-items-center">
              <svg class="chevron-right">
                <use xlink:href="#chevron-right" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </section>
    <section id="subscribe" class="container-grid padding-large position-relative overflow-hidden">
      <div class="container">
        <div class="row">
          <div class="subscribe-content bg-dark d-flex flex-wrap justify-content-center align-items-center padding-medium">
            <div class="col-md-6 col-sm-12">
              <div class="display-header pe-3">
                <h2 class="display-7 text-uppercase text-light">Subscribe Us Now</h2>
                <p>Get latest news, updates and deals directly mailed to your inbox.</p>
              </div>
            </div>
            <div class="col-md-5 col-sm-12">
              <form class="subscription-form validate">
                <div class="input-group flex-wrap">
                  <input class="form-control btn-rounded-none" type="email" name="EMAIL" placeholder="Your email address here" required="">
                  <button class="btn btn-medium btn-primary text-uppercase btn-rounded-none" type="submit" name="subscribe">Subscribe</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="instagram" class="padding-large overflow-hidden no-padding-top">
      <div class="container">
        <div class="row">
          <div class="display-header text-uppercase text-dark text-center pb-3">
            <h2 class="display-7">Shop Our Insta</h2>
          </div>
          <div class="d-flex flex-wrap">
            <figure class="instagram-item pe-2">
              <a href="https://therichpost.com/" class="image-link position-relative">
                <img src="assets/images/insta-item1.jpg" alt="instagram" class="insta-image">
                <div class="icon-overlay position-absolute d-flex justify-content-center">
                  <svg class="instagram">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </figure>
            <figure class="instagram-item pe-2">
              <a href="https://therichpost.com/" class="image-link position-relative">
                <img src="assets/images/insta-item2.jpg" alt="instagram" class="insta-image">
                <div class="icon-overlay position-absolute d-flex justify-content-center">
                  <svg class="instagram">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </figure>
            <figure class="instagram-item pe-2">
              <a href="https://therichpost.com/" class="image-link position-relative">
                <img src="assets/images/insta-item3.jpg" alt="instagram" class="insta-image">
                <div class="icon-overlay position-absolute d-flex justify-content-center">
                  <svg class="instagram">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </figure>
            <figure class="instagram-item pe-2">
              <a href="https://therichpost.com/" class="image-link position-relative">
                <img src="assets/images/insta-item4.jpg" alt="instagram" class="insta-image">
                <div class="icon-overlay position-absolute d-flex justify-content-center">
                  <svg class="instagram">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </figure>
            <figure class="instagram-item pe-2">
              <a href="https://therichpost.com/" class="image-link position-relative">
                <img src="assets/images/insta-item5.jpg" alt="instagram" class="insta-image">
                <div class="icon-overlay position-absolute d-flex justify-content-center">
                  <svg class="instagram">
                    <use xlink:href="#instagram"></use>
                  </svg>
                </div>
              </a>
            </figure>
          </div>
        </div>
      </div>
    </section>
    <footer id="footer" class="overflow-hidden">
      <div class="container">
        <div class="row">
          <div class="footer-top-area">
            <div class="row d-flex flex-wrap justify-content-between">
              <div class="col-lg-3 col-sm-6 pb-3">
                <div class="footer-menu">
                  <img src="assets/images/main-logo.png" alt="logo">
                  <p>Nisi, purus vitae, ultrices nunc. Sit ac sit suscipit hendrerit. Gravida massa volutpat aenean odio erat nullam fringilla.</p>
                  <div class="social-links">
                    <ul class="d-flex list-unstyled">
                      <li>
                        <a href="#">
                          <svg class="facebook">
                            <use xlink:href="#facebook" />
                          </svg>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <svg class="instagram">
                            <use xlink:href="#instagram" />
                          </svg>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <svg class="twitter">
                            <use xlink:href="#twitter" />
                          </svg>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <svg class="linkedin">
                            <use xlink:href="#linkedin" />
                          </svg>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <svg class="youtube">
                            <use xlink:href="#youtube" />
                          </svg>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-lg-2 col-sm-6 pb-3">
                <div class="footer-menu text-uppercase">
                  <h5 class="widget-title pb-2">Quick Links</h5>
                  <ul class="menu-list list-unstyled text-uppercase">
                    <li class="menu-item pb-2">
                      <a href="#">Home</a>
                    </li>
                    <li class="menu-item pb-2">
                      <a href="#">About</a>
                    </li>
                    <li class="menu-item pb-2">
                      <a href="#">Shop</a>
                    </li>
                    <li class="menu-item pb-2">
                      <a href="#">Blogs</a>
                    </li>
                    <li class="menu-item pb-2">
                      <a href="#">Contact</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6 pb-3">
                <div class="footer-menu text-uppercase">
                  <h5 class="widget-title pb-2">Help & Info Help</h5>
                  <ul class="menu-list list-unstyled">
                    <li class="menu-item pb-2">
                      <a href="#">Track Your Order</a>
                    </li>
                    <li class="menu-item pb-2">
                      <a href="#">Returns Policies</a>
                    </li>
                    <li class="menu-item pb-2">
                      <a href="#">Shipping + Delivery</a>
                    </li>
                    <li class="menu-item pb-2">
                      <a href="#">Contact Us</a>
                    </li>
                    <li class="menu-item pb-2">
                      <a href="#">Faqs</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6 pb-3">
                <div class="footer-menu contact-item">
                  <h5 class="widget-title text-uppercase pb-2">Contact Us</h5>
                  <p>Do you have any queries or suggestions? <a href="mailto:">therichpost.com</a>
                  </p>
                  <p>If you need support? Just give us a call. <a href="">+55 111 222 333 44</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr>
    </footer>
    <div id="footer-bottom">
      <div class="container">
        <div class="row d-flex flex-wrap justify-content-between">
          <div class="col-md-4 col-sm-6">
            <div class="Shipping d-flex">
              <p>We ship with:</p>
              <div class="card-wrap ps-2">
                <img src="assets/images/dhl.png" alt="visa">
                <img src="assets/images/shippingcard.png" alt="mastercard">
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="payment-method d-flex">
              <p>Payment options:</p>
              <div class="card-wrap ps-2">
                <img src="assets/images/visa.jpg" alt="visa">
                <img src="assets/images/mastercard.jpg" alt="mastercard">
                <img src="assets/images/paypal.jpg" alt="paypal">
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6">
            <div class="copyright">
              <p>© Free2023 MiniStore. Love by <a href="https://therichpost.com/">therichpost.com</a> Distribution by <a href="https://therichpost.com">Jassa</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    4. Now friends we just need to add below code into angulareco/angular.json file to custom.js file working code:

    ...
     "styles": [
                  "src/styles.css",
    "assets/css/bootstrap.min.css",
    "assets/css/style.css"
                
                 
                ],
                "scripts": [
                "assets/js/modernizr.js",
    "assets/js/jquery-1.11.0.min.js",
    "assets/js/bootstrap.bundle.min.js",
    "assets/js/plugins.js",
    "assets/js/script.js",
    
                ]
    ...

    5. Guys now here is the git repo link from where we will get images, fonts, css and js folder and place all the folder inside assets folder:

    Free Git Repo Link

    6. Now friends we just need to add below code into angulareco/src/imdex.html file:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Angular17</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    
    
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    
    </head>
    <body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
      <app-root></app-root>
     
      <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
     
    </body>
    </html>
    
    

    Friends in the end must run ng serve command into your terminal to run the angular 17 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

  • Angular 17 Monster Bootstrap Free Admin Dashboard Template

    Angular 17 Monster Bootstrap Free Admin Dashboard Template

    Hello friends, welcome back to my blog. Today this blog post will share you, Angular 17 Monster Bootstrap Free Admin Dashboard Template.


    Live Demo

    Angular 17 Monster Bootstrap Free Admin Dashboard Template
    Angular 17 Monster Bootstrap Free Admin Dashboard Template

    Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

    1. Angular 17 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 17 setup and for this we need to run below commands but if you already have angular 17 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 angularadmin //Create new Angular Project
    
    cd angularadmin // Go inside the Angular Project Folder

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

    <!-- ============================================================== -->
       <!-- Preloader - style you can find in spinners.css -->
       <!-- ============================================================== -->
       <div class="preloader">
         <div class="lds-ripple">
           <div class="lds-pos"></div>
           <div class="lds-pos"></div>
         </div>
       </div>
       <!-- ============================================================== -->
       <!-- Main wrapper - style you can find in pages.scss -->
       <!-- ============================================================== -->
       <div
         id="main-wrapper"
         data-layout="vertical"
         data-navbarbg="skin6"
         data-sidebartype="full"
         data-sidebar-position="absolute"
         data-header-position="absolute"
         data-boxed-layout="full"
       >
         <!-- ============================================================== -->
         <!-- Topbar header - style you can find in pages.scss -->
         <!-- ============================================================== -->
         <header class="topbar" data-navbarbg="skin6">
           <nav class="navbar top-navbar navbar-expand-md navbar-dark">
             <div class="navbar-header" data-logobg="skin6">
               <!-- ============================================================== -->
               <!-- Logo -->
               <!-- ============================================================== -->
               <a class="navbar-brand" href="#">
                 <!-- Logo icon -->
                 <b class="logo-icon">
                   <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                   <!-- Dark Logo icon -->
                   <img
                     src="assets/images/logo-icon.png"
                     alt="homepage"
                     class="dark-logo"
                   />
                 </b>
                 <!--End Logo icon -->
                 <!-- Logo text -->
                 <span class="logo-text">
                   <!-- dark Logo text -->
                   <img
                     src="assets/images/logo-text.png"
                     alt="homepage"
                     class="dark-logo"
                   />
                 </span>
               </a>
               <!-- ============================================================== -->
               <!-- End Logo -->
               <!-- ============================================================== -->
               <!-- ============================================================== -->
               <!-- toggle and nav items -->
               <!-- ============================================================== -->
               <a
                 class="
                   nav-toggler
                   waves-effect waves-light
                   text-dark
                   d-block d-md-none
                 "
                 href="javascript:void(0)"
                 ><i class="ti-menu ti-close"></i
               ></a>
             </div>
             <!-- ============================================================== -->
             <!-- End Logo -->
             <!-- ============================================================== -->
             <div
               class="navbar-collapse collapse"
               id="navbarSupportedContent"
               data-navbarbg="skin5"
             >
               <!-- ============================================================== -->
               <!-- toggle and nav items -->
               <!-- ============================================================== -->
               <ul class="navbar-nav me-auto mt-md-0">
                 <!-- ============================================================== -->
                 <!-- Search -->
                 <!-- ============================================================== -->
    
                 <li class="nav-item hidden-sm-down">
                   <form class="app-search ps-3">
                     <input
                       type="text"
                       class="form-control"
                       placeholder="Search for..."
                     />
                     <a class="srh-btn"
                       ><i class="mdi mdi-magnify fs-4 lh-sm"></i
                     ></a>
                   </form>
                 </li>
               </ul>
    
               <!-- ============================================================== -->
               <!-- Right side toggle and nav items -->
               <!-- ============================================================== -->
               <ul class="navbar-nav">
                 <!-- ============================================================== -->
                 <!-- User profile and search -->
                 <!-- ============================================================== -->
                 <li class="nav-item dropdown">
                   <a
                     class="nav-link dropdown-toggle waves-effect waves-dark"
                     href="#"
                     id="navbarDropdown"
                     role="button"
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
                     <img
                       src="assets/images/1.jpg"
                       alt="user"
                       class="profile-pic me-2"
                     />Markarn Doe
                   </a>
                   <ul
                     class="dropdown-menu show"
                     aria-labelledby="navbarDropdown"
                   ></ul>
                 </li>
               </ul>
             </div>
           </nav>
         </header>
         <!-- ============================================================== -->
         <!-- End Topbar header -->
         <!-- ============================================================== -->
         <!-- ============================================================== -->
         <!-- Left Sidebar - style you can find in sidebar.scss  -->
         <!-- ============================================================== -->
         <aside class="left-sidebar" data-sidebarbg="skin6">
           <!-- Sidebar scroll-->
           <div class="scroll-sidebar">
             <!-- Sidebar navigation-->
             <nav class="sidebar-nav">
               <ul id="sidebarnav">
                 <!-- User Profile-->
                 <li class="sidebar-item">
                   <a
                     class="sidebar-link waves-effect waves-dark sidebar-link"
                     href="#"
                     aria-expanded="false"
                     ><i
                       class="me-3 mdi mdi-view-dashboard fs-3"
                       aria-hidden="true"
                     ></i
                     ><span class="hide-menu">Dashboard</span></a
                   >
                 </li>
                 <li class="sidebar-item">
                   <a
                     class="sidebar-link waves-effect waves-dark sidebar-link"
                     href="#"
                     aria-expanded="false"
                   >
                     <i
                       class="me-3 mdi mdi-account-network fs-3"
                       aria-hidden="true"
                     ></i
                     ><span class="hide-menu">Profile</span></a
                   >
                 </li>
                 <li class="sidebar-item">
                   <a
                     class="sidebar-link waves-effect waves-dark sidebar-link"
                     href="#"
                     aria-expanded="false"
                     ><i
                       class="me-3 mdi mdi-border-all fs-3"
                       aria-hidden="true"
                     ></i
                     ><span class="hide-menu">Table</span></a
                   >
                 </li>
                 <li class="sidebar-item">
                   <a
                     class="sidebar-link waves-effect waves-dark sidebar-link"
                     href="#"
                     aria-expanded="false"
                     ><i class="me-3 mdi mdi-face fs-3" aria-hidden="true"></i
                     ><span class="hide-menu">Icon</span></a
                   >
                 </li>
                 <li class="sidebar-item">
                   <a
                     class="sidebar-link waves-effect waves-dark sidebar-link"
                     href="#"
                     aria-expanded="false"
                     ><i class="me-3 mdi mdi-earth fs-3" aria-hidden="true"></i
                     ><span class="hide-menu">Google Map</span></a
                   >
                 </li>
                 <li class="sidebar-item">
                   <a
                     class="sidebar-link waves-effect waves-dark sidebar-link"
                     href="#"
                     aria-expanded="false"
                     ><i class="me-3 mdi mdi-file fs-3" aria-hidden="true"></i
                     ><span class="hide-menu">Blank</span></a
                   >
                 </li>
                 <li class="sidebar-item">
                   <a
                     class="sidebar-link waves-effect waves-dark sidebar-link"
                     href="#"
                     aria-expanded="false"
                     ><i
                       class="me-3 mdi mdi-alert-outline fs-3"
                       aria-hidden="true"
                     ></i
                     ><span class="hide-menu">Error 404</span></a
                   >
                 </li>
                 <li class="text-center p-20 upgrade-btn">
                   <a
                     href="https://therichpost.com"
                     class="btn btn-danger text-white mt-4"
                     target="_blank"
                     >Upgrade to Pro</a
                   >
                 </li>
               </ul>
             </nav>
             <!-- End Sidebar navigation -->
           </div>
           <!-- End Sidebar scroll-->
         </aside>
         <!-- ============================================================== -->
         <!-- End Left Sidebar - style you can find in sidebar.scss  -->
         <!-- ============================================================== -->
         <!-- ============================================================== -->
         <!-- Page wrapper  -->
         <!-- ============================================================== -->
         <div class="page-wrapper">
           <!-- ============================================================== -->
           <!-- Bread crumb and right sidebar toggle -->
           <!-- ============================================================== -->
           <div class="page-breadcrumb">
             <div class="row align-items-center">
               <div class="col-md-6 col-8 align-self-center">
                 <h3 class="page-title mb-0 p-0">Dashboard</h3>
                 <div class="d-flex align-items-center">
                   <nav aria-label="breadcrumb">
                     <ol class="breadcrumb">
                       <li class="breadcrumb-item"><a href="#">Home</a></li>
                       <li class="breadcrumb-item active" aria-current="page">
                         Dashboard
                       </li>
                     </ol>
                   </nav>
                 </div>
               </div>
               <div class="col-md-6 col-4 align-self-center">
                 <div class="text-end upgrade-btn">
                   <a
                     href="https://therichpost.com"
                     class="btn btn-success d-none d-md-inline-block text-white"
                     target="_blank"
                     >Upgrade to Pro</a
                   >
                 </div>
               </div>
             </div>
           </div>
           <!-- ============================================================== -->
           <!-- End Bread crumb and right sidebar toggle -->
           <!-- ============================================================== -->
           <!-- ============================================================== -->
           <!-- Container fluid  -->
           <!-- ============================================================== -->
           <div class="container-fluid">
             <!-- ============================================================== -->
             <!-- Sales chart -->
             <!-- ============================================================== -->
             <div class="row">
               <!-- Column -->
               <div class="col-sm-6">
                 <div class="card">
                   <div class="card-body">
                     <h4 class="card-title">Daily Sales</h4>
                     <div class="text-end">
                       <h2 class="font-light mb-0">
                         <i class="mdi mdi-arrow-up fs-2 text-success"></i> $120
                       </h2>
                       <span class="text-muted">Todays Income</span>
                     </div>
                     <span class="text-success">80%</span>
                     <div class="progress">
                       <div
                         class="progress-bar bg-success"
                         role="progressbar"
                         style="width: 80%; height: 6px"
                         aria-valuenow="25"
                         aria-valuemin="0"
                         aria-valuemax="100"
                       ></div>
                     </div>
                   </div>
                 </div>
               </div>
               <!-- Column -->
               <!-- Column -->
               <div class="col-sm-6">
                 <div class="card">
                   <div class="card-body">
                     <h4 class="card-title">Weekly Sales</h4>
                     <div class="text-end">
                       <h2 class="font-light mb-0">
                         <i class="mdi mdi-arrow-up fs-2 text-info"></i> $5,000
                       </h2>
                       <span class="text-muted">Todays Income</span>
                     </div>
                     <span class="text-info">30%</span>
                     <div class="progress">
                       <div
                         class="progress-bar bg-info"
                         role="progressbar"
                         style="width: 30%; height: 6px"
                         aria-valuenow="25"
                         aria-valuemin="0"
                         aria-valuemax="100"
                       ></div>
                     </div>
                   </div>
                 </div>
               </div>
               <!-- Column -->
             </div>
             <!-- ============================================================== -->
             <!-- Sales chart -->
             <!-- ============================================================== -->
             <div class="row">
               <!-- column -->
               <div class="col-sm-12">
                 <div class="card">
                   <div class="card-body">
                     <h4 class="card-title">Revenue Statistics</h4>
                     <div class="flot-chart">
                       <div
                         class="flot-chart-content"
                         id="flot-line-chart"
                         style="padding: 0px; position: relative"
                       >
                         <canvas class="flot-base w-100" height="400"></canvas>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
               <!-- column -->
             </div>
             <!-- ============================================================== -->
             <!-- Table -->
             <!-- ============================================================== -->
             <div class="row">
               <div class="col-sm-12">
                 <div class="card">
                   <div class="card-body">
                     <div class="d-md-flex">
                       <h4
                         class="
                           card-title
                           col-md-10
                           mb-md-0 mb-3
                           align-self-center
                         "
                       >
                         Projects of the Month
                       </h4>
                       <div class="col-md-2 ms-auto">
                         <select class="form-select shadow-none col-md-2 ml-auto">
                           <option selected>January</option>
                           <option value="1">February</option>
                           <option value="2">March</option>
                           <option value="3">April</option>
                         </select>
                       </div>
                     </div>
                     <div class="table-responsive mt-5">
                       <table class="table stylish-table no-wrap">
                         <thead>
                           <tr>
                             <th class="border-top-0" colspan="2">Assigned</th>
                             <th class="border-top-0">Name</th>
                             <th class="border-top-0">Budget</th>
                           </tr>
                         </thead>
                         <tbody>
                           <tr>
                             <td style="width: 50px">
                               <span class="round">S</span>
                             </td>
                             <td class="align-middle">
                               <h6>Sunil Joshi</h6>
                               <small class="text-muted">Web Designer</small>
                             </td>
                             <td class="align-middle">Elite Admin</td>
                             <td class="align-middle">$3.9K</td>
                           </tr>
                           <tr class="active">
                             <td>
                               <span class="round"
                                 ><img
                                   src="assets/images/2.jpg"
                                   alt="user"
                                   width="50"
                               /></span>
                             </td>
                             <td class="align-middle">
                               <h6>Andrew</h6>
                               <small class="text-muted">Project Manager</small>
                             </td>
                             <td class="align-middle">Real Homes</td>
                             <td class="align-middle">$23.9K</td>
                           </tr>
                           <tr>
                             <td><span class="round round-success">B</span></td>
                             <td class="align-middle">
                               <h6>Bhavesh patel</h6>
                               <small class="text-muted">Developer</small>
                             </td>
                             <td class="align-middle">MedicalPro Theme</td>
                             <td class="align-middle">$12.9K</td>
                           </tr>
                           <tr>
                             <td><span class="round round-primary">N</span></td>
                             <td class="align-middle">
                               <h6>Nirav Joshi</h6>
                               <small class="text-muted">Frontend Eng</small>
                             </td>
                             <td class="align-middle">Elite Admin</td>
                             <td class="align-middle">$10.9K</td>
                           </tr>
                           <tr>
                             <td><span class="round round-warning">M</span></td>
                             <td class="align-middle">
                               <h6>Micheal Doe</h6>
                               <small class="text-muted">Content Writer</small>
                             </td>
                             <td class="align-middle">Helping Hands</td>
                             <td class="align-middle">$12.9K</td>
                           </tr>
                           <tr>
                             <td><span class="round round-danger">N</span></td>
                             <td class="align-middle">
                               <h6>Johnathan</h6>
                               <small class="text-muted">Graphic</small>
                             </td>
                             <td class="align-middle">Digital Agency</td>
                             <td class="align-middle">$2.6K</td>
                           </tr>
                         </tbody>
                       </table>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- ============================================================== -->
             <!-- Table -->
             <!-- ============================================================== -->
             <!-- ============================================================== -->
             <!-- Recent blogss -->
             <!-- ============================================================== -->
             <div class="row justify-content-center">
               <!-- Column -->
               <div class="col-lg-4 col-md-6">
                 <div class="card">
                   <img
                     class="card-img-top img-responsive"
                     src="assets/images/img1.jpg"
                     alt="Card"
                   />
                   <div class="card-body">
                     <ul class="list-inline d-flex align-items-center">
                       <li class="ps-0">20 May 2023</li>
                       <li class="ms-auto">
                         <a href="javascript:void(0)" class="link">3 Comment</a>
                       </li>
                     </ul>
                     <h3 class="font-normal">
                       Featured Hydroflora Pots Garden &amp; Outdoors
                     </h3>
                   </div>
                 </div>
               </div>
               <!-- Column -->
               <!-- Column -->
               <div class="col-lg-4 col-md-6">
                 <div class="card">
                   <img
                     class="card-img-top img-responsive"
                     src="assets/images/img2.jpg"
                     alt="Card"
                   />
                   <div class="card-body">
                     <ul class="list-inline d-flex align-items-center">
                       <li class="ps-0">20 May 2023</li>
                       <li class="ms-auto">
                         <a href="javascript:void(0)" class="link">3 Comment</a>
                       </li>
                     </ul>
                     <h3 class="font-normal">
                       Featured Hydroflora Pots Garden &amp; Outdoors
                     </h3>
                   </div>
                 </div>
               </div>
               <!-- Column -->
               <!-- Column -->
               <div class="col-lg-4 col-md-6">
                 <div class="card">
                   <img
                     class="card-img-top img-responsive"
                     src="assets/images/img4.jpg"
                     alt="Card"
                   />
                   <div class="card-body">
                     <ul class="list-inline d-flex align-items-center">
                       <li class="ps-0">20 May 2023</li>
                       <li class="ms-auto">
                         <a href="javascript:void(0)" class="link">3 Comment</a>
                       </li>
                     </ul>
                     <h3 class="font-normal">
                       Featured Hydroflora Pots Garden &amp; Outdoors
                     </h3>
                   </div>
                 </div>
               </div>
               <!-- Column -->
             </div>
             <!-- ============================================================== -->
             <!-- Recent blogss -->
             <!-- ============================================================== -->
           </div>
           <!-- ============================================================== -->
           <!-- End Container fluid  -->
           <!-- ============================================================== -->
           <!-- ============================================================== -->
           <!-- footer -->
           <!-- ============================================================== -->
           <footer class="footer text-center">
             © 2023 Free
             <a href="https://www.therichpost.com/">therichpost.com</a>
           </footer>
           <!-- ============================================================== -->
           <!-- End footer -->
           <!-- ============================================================== -->
         </div>
         <!-- ============================================================== -->
         <!-- End Page wrapper  -->
         <!-- ============================================================== -->
       </div>

    4. Now friends we just need to add below code into angularadmin/angular.json file to custom.js file working code:

    ...
     "styles": [
                  "src/styles.css",
    "assets/css/chartist.min.css",
    "assets/css/style.min.css"
                
                 
                ],
                "scripts": [
                "assets/js/jquery.min.js",
    "assets/js/bootstrap.bundle.min.js",
    "assets/js/app-style-switcher.js",
    "assets/js/waves.js",
    "assets/js/sidebarmenu.js",
    "assets/js/custom.js",
    "assets/js/jquery.flot.js",
    "assets/js/jquery.flot.tooltip.min.js",
    "assets/js/dashboard1.js"
                ]
    ...

    5. Guys now here is the git repo link from where we will get images, fonts, css and js folder and place all the folder inside assets folder:

    Free Git Repo Link

    Friends in the end must run ng serve command into your terminal to run the angular 17 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

  • Angular 17 Material Admin Dashboard Template Free

    Angular 17 Material Admin Dashboard Template Free

    Hello friends, welcome back to my blog. Today this blog post will share you, Angular 17 Material Admin Dashboard Template Free.


    Live Demo

    Angular 17 Material Admin Dashboard Template Free
    Angular 17 Material Admin Dashboard Template Free

    Angular 17 came and Bootstrap 5 also. If you are new then you must check below two links:

    1. Angular 17 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 17 setup and for this we need to run below commands but if you already have angular 17 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 angularadmin //Create new Angular Project
    
    cd angularadmin // Go inside the Angular Project Folder

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

    <aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3   bg-gradient-dark" id="sidenav-main">
      <div class="sidenav-header">
      <i class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none" aria-hidden="true" id="iconSidenav"></i>
      <a class="navbar-brand m-0" href="#" target="_blank">
      <img src="assets/images/logo-ct.png" class="navbar-brand-img h-100" alt="main_logo">
      <span class="ms-1 font-weight-bold text-white">Material Dashboard 2</span>
      </a>
      </div>
      <hr class="horizontal light mt-0 mb-2">
      <div class="collapse navbar-collapse  w-auto " id="sidenav-collapse-main">
      <ul class="navbar-nav">
      <li class="nav-item">
      <a class="nav-link text-white active bg-gradient-primary" href="#">
      <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
      <i class="material-icons opacity-10">dashboard</i>
      </div>
      <span class="nav-link-text ms-1">Dashboard</span>
      </a>
      </li>
      <li class="nav-item">
      <a class="nav-link text-white " href="#">
      <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
      <i class="material-icons opacity-10">table_view</i>
      </div>
      <span class="nav-link-text ms-1">Tables</span>
      </a>
      </li>
      <li class="nav-item">
      <a class="nav-link text-white " href="#">
      <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
      <i class="material-icons opacity-10">receipt_long</i>
      </div>
      <span class="nav-link-text ms-1">Billing</span>
      </a>
      </li>
      <li class="nav-item">
      <a class="nav-link text-white " href="#">
      <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
      <i class="material-icons opacity-10">view_in_ar</i>
      </div>
      <span class="nav-link-text ms-1">Virtual Reality</span>
      </a>
      </li>
      <li class="nav-item">
      <a class="nav-link text-white " href="#">
      <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
      <i class="material-icons opacity-10">format_textdirection_r_to_l</i>
      </div>
      <span class="nav-link-text ms-1">RTL</span>
      </a>
      </li>
      <li class="nav-item">
      <a class="nav-link text-white " href="#">
      <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
      <i class="material-icons opacity-10">notifications</i>
      </div>
      <span class="nav-link-text ms-1">Notifications</span>
      </a>
      </li>
      <li class="nav-item mt-3">
      <h6 class="ps-4 ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">Account pages</h6>
      </li>
      <li class="nav-item">
      <a class="nav-link text-white " href="#">
      <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
      <i class="material-icons opacity-10">person</i>
      </div>
      <span class="nav-link-text ms-1">Profile</span>
      </a>
      </li>
      <li class="nav-item">
      <a class="nav-link text-white " href="#">
      <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
      <i class="material-icons opacity-10">login</i>
      </div>
      <span class="nav-link-text ms-1">Sign In</span>
      </a>
      </li>
      <li class="nav-item">
      <a class="nav-link text-white " href="#">
      <div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
      <i class="material-icons opacity-10">assignment</i>
      </div>
      <span class="nav-link-text ms-1">Sign Up</span>
      </a>
      </li>
      </ul>
      </div>
      <div class="sidenav-footer position-absolute w-100 bottom-0 ">
      <div class="mx-3">
      <a class="btn btn-outline-primary mt-4 w-100" href="https://therichpost.com" type="button">Documentation</a>
      <a class="btn bg-gradient-primary w-100" href="https://therichpost.com" type="button">Upgrade to pro</a>
      </div>
      </div>
      </aside>
      <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
      
      <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur" data-scroll="true">
      <div class="container-fluid py-1 px-3">
      <nav aria-label="breadcrumb">
      <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
      <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
      <li class="breadcrumb-item text-sm text-dark active" aria-current="page">Dashboard</li>
      </ol>
      <h6 class="font-weight-bolder mb-0">Dashboard</h6>
      </nav>
      <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
      <div class="ms-md-auto pe-md-3 d-flex align-items-center">
      <div class="input-group input-group-outline">
      <label class="form-label">Type here...</label>
      <input type="text" class="form-control">
      </div>
      </div>
      <ul class="navbar-nav  justify-content-end">
      <li class="nav-item d-flex align-items-center">
      <a class="btn btn-outline-primary btn-sm mb-0 me-3" target="_blank" href="https://therichpost.com">Online Builder</a>
      </li>
      <li class="mt-2">
      <a class="github-button" href="https://therichpost.com" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star creativetimofficial/material-dashboard on GitHub">Star</a>
      </li>
      <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
      <a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
      <div class="sidenav-toggler-inner">
      <i class="sidenav-toggler-line"></i>
      <i class="sidenav-toggler-line"></i>
      <i class="sidenav-toggler-line"></i>
      </div>
      </a>
      </li>
      <li class="nav-item px-3 d-flex align-items-center">
      <a href="javascript:;" class="nav-link text-body p-0">
      <i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
      </a>
      </li>
      <li class="nav-item dropdown pe-2 d-flex align-items-center">
      <a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
      <i class="fa fa-bell cursor-pointer"></i>
      </a>
      <ul class="dropdown-menu  dropdown-menu-end  px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
      <li class="mb-2">
      <a class="dropdown-item border-radius-md" href="javascript:;">
      <div class="d-flex py-1">
      <div class="my-auto">
      <img src="assets/images/team-2.jpg" class="avatar avatar-sm  me-3 ">
      </div>
      <div class="d-flex flex-column justify-content-center">
      <h6 class="text-sm font-weight-normal mb-1">
      <span class="font-weight-bold">New message</span> from Laur
      </h6>
      <p class="text-xs text-secondary mb-0">
      <i class="fa fa-clock me-1"></i>
      13 minutes ago
      </p>
      </div>
      </div>
      </a>
      </li>
      <li class="mb-2">
      <a class="dropdown-item border-radius-md" href="javascript:;">
      <div class="d-flex py-1">
      <div class="my-auto">
      <img src="assets/images/logo-spotify.svg" class="avatar avatar-sm bg-gradient-dark  me-3 ">
      </div>
      <div class="d-flex flex-column justify-content-center">
      <h6 class="text-sm font-weight-normal mb-1">
      <span class="font-weight-bold">New album</span> by Travis Scott
      </h6>
      <p class="text-xs text-secondary mb-0">
      <i class="fa fa-clock me-1"></i>
      1 day
      </p>
      </div>
      </div>
      </a>
      </li>
      <li>
      <a class="dropdown-item border-radius-md" href="javascript:;">
      <div class="d-flex py-1">
      <div class="avatar avatar-sm bg-gradient-secondary  me-3  my-auto">
      <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <title>credit-card</title>
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
      <g transform="translate(1716.000000, 291.000000)">
      <g transform="translate(453.000000, 454.000000)">
      <path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
      <path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
      </g>
      </g>
      </g>
      </g>
      </svg>
      </div>
      <div class="d-flex flex-column justify-content-center">
      <h6 class="text-sm font-weight-normal mb-1">
      Payment successfully completed
      </h6>
      <p class="text-xs text-secondary mb-0">
      <i class="fa fa-clock me-1"></i>
      2 days
      </p>
      </div>
      </div>
      </a>
      </li>
      </ul>
      </li>
      <li class="nav-item d-flex align-items-center">
      <a href="#" class="nav-link text-body font-weight-bold px-0">
      <i class="fa fa-user me-sm-1"></i>
      <span class="d-sm-inline d-none">Sign In</span>
      </a>
      </li>
      </ul>
      </div>
      </div>
      </nav>
      
      <div class="container-fluid py-4">
      <div class="row">
      <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
      <div class="card">
      <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
      <i class="material-icons opacity-10">weekend</i>
      </div>
      <div class="text-end pt-1">
      <p class="text-sm mb-0 text-capitalize">Today's Money</p>
      <h4 class="mb-0">$53k</h4>
      </div>
      </div>
      <hr class="dark horizontal my-0">
      <div class="card-footer p-3">
      <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+55% </span>than last week</p>
      </div>
      </div>
      </div>
      <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
      <div class="card">
      <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
      <i class="material-icons opacity-10">person</i>
      </div>
      <div class="text-end pt-1">
      <p class="text-sm mb-0 text-capitalize">Today's Users</p>
      <h4 class="mb-0">2,300</h4>
      </div>
      </div>
      <hr class="dark horizontal my-0">
      <div class="card-footer p-3">
      <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+3% </span>than last month</p>
      </div>
      </div>
      </div>
      <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
      <div class="card">
      <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute">
      <i class="material-icons opacity-10">person</i>
      </div>
      <div class="text-end pt-1">
      <p class="text-sm mb-0 text-capitalize">New Clients</p>
      <h4 class="mb-0">3,462</h4>
      </div>
      </div>
      <hr class="dark horizontal my-0">
      <div class="card-footer p-3">
      <p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday</p>
      </div>
      </div>
      </div>
      <div class="col-xl-3 col-sm-6">
      <div class="card">
      <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute">
      <i class="material-icons opacity-10">weekend</i>
      </div>
      <div class="text-end pt-1">
      <p class="text-sm mb-0 text-capitalize">Sales</p>
      <h4 class="mb-0">$103,430</h4>
      </div>
      </div>
      <hr class="dark horizontal my-0">
      <div class="card-footer p-3">
      <p class="mb-0"><span class="text-success text-sm font-weight-bolder">+5% </span>than yesterday</p>
      </div>
      </div>
      </div>
      </div>
      <div class="row mt-4">
      <div class="col-lg-4 col-md-6 mt-4 mb-4">
      <div class="card z-index-2 ">
      <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
      <div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
      <div class="chart">
      <canvas id="chart-bars" class="chart-canvas" height="170"></canvas>
      </div>
      </div>
      </div>
      <div class="card-body">
      <h6 class="mb-0 ">Website Views</h6>
      <p class="text-sm ">Last Campaign Performance</p>
      <hr class="dark horizontal">
      <div class="d-flex ">
      <i class="material-icons text-sm my-auto me-1">schedule</i>
      <p class="mb-0 text-sm"> campaign sent 2 days ago </p>
      </div>
      </div>
      </div>
      </div>
      <div class="col-lg-4 col-md-6 mt-4 mb-4">
      <div class="card z-index-2  ">
      <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
      <div class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1">
      <div class="chart">
      <canvas id="chart-line" class="chart-canvas" height="170"></canvas>
      </div>
      </div>
      </div>
      <div class="card-body">
      <h6 class="mb-0 "> Daily Sales </h6>
      <p class="text-sm "> (<span class="font-weight-bolder">+15%</span>) increase in today sales. </p>
      <hr class="dark horizontal">
      <div class="d-flex ">
      <i class="material-icons text-sm my-auto me-1">schedule</i>
      <p class="mb-0 text-sm"> updated 4 min ago </p>
      </div>
      </div>
      </div>
      </div>
      <div class="col-lg-4 mt-4 mb-3">
      <div class="card z-index-2 ">
      <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2 bg-transparent">
      <div class="bg-gradient-dark shadow-dark border-radius-lg py-3 pe-1">
      <div class="chart">
      <canvas id="chart-line-tasks" class="chart-canvas" height="170"></canvas>
      </div>
      </div>
      </div>
      <div class="card-body">
      <h6 class="mb-0 ">Completed Tasks</h6>
      <p class="text-sm ">Last Campaign Performance</p>
      <hr class="dark horizontal">
      <div class="d-flex ">
      <i class="material-icons text-sm my-auto me-1">schedule</i>
      <p class="mb-0 text-sm">just updated</p>
      </div>
      </div>
      </div>
      </div>
      </div>
      <div class="row mb-4">
      <div class="col-lg-8 col-md-6 mb-md-0 mb-4">
      <div class="card">
      <div class="card-header pb-0">
      <div class="row">
      <div class="col-lg-6 col-7">
      <h6>Projects</h6>
      <p class="text-sm mb-0">
      <i class="fa fa-check text-info" aria-hidden="true"></i>
      <span class="font-weight-bold ms-1">30 done</span> this month
      </p>
      </div>
      <div class="col-lg-6 col-5 my-auto text-end">
      <div class="dropdown float-lg-end pe-4">
      <a class="cursor-pointer" id="dropdownTable" data-bs-toggle="dropdown" aria-expanded="false">
      <i class="fa fa-ellipsis-v text-secondary"></i>
      </a>
      <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable">
      <li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
      <li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
      <li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
      </ul>
      </div>
      </div>
      </div>
      </div>
      <div class="card-body px-0 pb-2">
      <div class="table-responsive">
      <table class="table align-items-center mb-0">
      <thead>
      <tr>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Companies</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Members</th>
      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Budget</th>
      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Completion</th>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td>
      <div class="d-flex px-2 py-1">
      <div>
      <img src="assets/images/logo-xd.svg" class="avatar avatar-sm me-3" alt="xd">
      </div>
      <div class="d-flex flex-column justify-content-center">
      <h6 class="mb-0 text-sm">Material XD Version</h6>
      </div>
      </div>
      </td>
      <td>
      <div class="avatar-group mt-2">
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
      <img src="assets/images/team-3.jpg" alt="team1">
      </a>
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
      <img src="assets/images/team-2.jpg" alt="team2">
      </a>
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
      <img src="assets/images/team-3.jpg" alt="team3">
      </a>
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
      <img src="assets/images/team-4.jpg" alt="team4">
      </a>
      </div>
      </td>
      <td class="align-middle text-center text-sm">
      <span class="text-xs font-weight-bold"> $14,000 </span>
      </td>
      <td class="align-middle">
      <div class="progress-wrapper w-75 mx-auto">
      <div class="progress-info">
      <div class="progress-percentage">
      <span class="text-xs font-weight-bold">60%</span>
      </div>
      </div>
      <div class="progress">
      <div class="progress-bar bg-gradient-info w-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      </div>
      </td>
      </tr>
      <tr>
      <td>
      <div class="d-flex px-2 py-1">
      <div>
      <img src="assets/images/logo-atlassian.svg" class="avatar avatar-sm me-3" alt="atlassian">
      </div>
      <div class="d-flex flex-column justify-content-center">
      <h6 class="mb-0 text-sm">Add Progress Track</h6>
      </div>
      </div>
      </td>
      <td>
      <div class="avatar-group mt-2">
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
      <img src="assets/images/team-2.jpg" alt="team5">
      </a>
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
      <img src="assets/images/team-4.jpg" alt="team6">
      </a>
      </div>
      </td>
      <td class="align-middle text-center text-sm">
      <span class="text-xs font-weight-bold"> $3,000 </span>
      </td>
      <td class="align-middle">
      <div class="progress-wrapper w-75 mx-auto">
      <div class="progress-info">
      <div class="progress-percentage">
      <span class="text-xs font-weight-bold">10%</span>
      </div>
      </div>
      <div class="progress">
      <div class="progress-bar bg-gradient-info w-10" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      </div>
      </td>
      </tr>
      <tr>
      <td>
      <div class="d-flex px-2 py-1">
      <div>
      <img src="assets/images/logo-slack.svg" class="avatar avatar-sm me-3" alt="team7">
      </div>
      <div class="d-flex flex-column justify-content-center">
      <h6 class="mb-0 text-sm">Fix Platform Errors</h6>
      </div>
      </div>
      </td>
      <td>
      <div class="avatar-group mt-2">
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
      <img src="assets/images/team-3.jpg" alt="team8">
      </a>
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
      <img src="assets/images/team-1.jpg" alt="team9">
      </a>
      </div>
      </td>
      <td class="align-middle text-center text-sm">
      <span class="text-xs font-weight-bold"> Not set </span>
      </td>
      <td class="align-middle">
      <div class="progress-wrapper w-75 mx-auto">
      <div class="progress-info">
      <div class="progress-percentage">
      <span class="text-xs font-weight-bold">100%</span>
      </div>
      </div>
      <div class="progress">
      <div class="progress-bar bg-gradient-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      </div>
      </td>
      </tr>
      <tr>
      <td>
      <div class="d-flex px-2 py-1">
      <div>
      <img src="assets/images/logo-spotify.svg" class="avatar avatar-sm me-3" alt="spotify">
      </div>
      <div class="d-flex flex-column justify-content-center">
      <h6 class="mb-0 text-sm">Launch our Mobile App</h6>
      </div>
      </div>
      </td>
      <td>
      <div class="avatar-group mt-2">
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
      <img src="assets/images/team-4.jpg" alt="user1">
      </a>
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
      <img src="assets/images/team-3.jpg" alt="user2">
      </a>
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
      <img src="assets/images/team-4.jpg" alt="user3">
      </a>
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
      <img src="assets/images/team-1.jpg" alt="user4">
      </a>
      </div>
      </td>
      <td class="align-middle text-center text-sm">
      <span class="text-xs font-weight-bold"> $20,500 </span>
      </td>
      <td class="align-middle">
      <div class="progress-wrapper w-75 mx-auto">
      <div class="progress-info">
      <div class="progress-percentage">
      <span class="text-xs font-weight-bold">100%</span>
      </div>
      </div>
      <div class="progress">
      <div class="progress-bar bg-gradient-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      </div>
      </td>
      </tr>
      <tr>
      <td>
      <div class="d-flex px-2 py-1">
      <div>
      <img src="assets/images/logo-jira.svg" class="avatar avatar-sm me-3" alt="jira">
      </div>
      <div class="d-flex flex-column justify-content-center">
      <h6 class="mb-0 text-sm">Add the New Pricing Page</h6>
      </div>
      </div>
      </td>
      <td>
      <div class="avatar-group mt-2">
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
      <img src="assets/images/team-4.jpg" alt="user5">
      </a>
      </div>
      </td>
      <td class="align-middle text-center text-sm">
      <span class="text-xs font-weight-bold"> $500 </span>
      </td>
      <td class="align-middle">
      <div class="progress-wrapper w-75 mx-auto">
      <div class="progress-info">
      <div class="progress-percentage">
      <span class="text-xs font-weight-bold">25%</span>
      </div>
      </div>
      <div class="progress">
      <div class="progress-bar bg-gradient-info w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="25"></div>
      </div>
      </div>
      </td>
      </tr>
      <tr>
      <td>
      <div class="d-flex px-2 py-1">
      <div>
      <img src="assets/images/logo-invision.svg" class="avatar avatar-sm me-3" alt="invision">
      </div>
      <div class="d-flex flex-column justify-content-center">
      <h6 class="mb-0 text-sm">Redesign New Online Shop</h6>
      </div>
      </div>
      </td>
      <td>
      <div class="avatar-group mt-2">
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
      <img src="assets/images/team-2.jpg" alt="user6">
      </a>
      <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
      <img src="assets/images/team-4.jpg" alt="user7">
      </a>
      </div>
      </td>
      <td class="align-middle text-center text-sm">
      <span class="text-xs font-weight-bold"> $2,000 </span>
      </td>
      <td class="align-middle">
      <div class="progress-wrapper w-75 mx-auto">
      <div class="progress-info">
      <div class="progress-percentage">
      <span class="text-xs font-weight-bold">40%</span>
      </div>
      </div>
      <div class="progress">
      <div class="progress-bar bg-gradient-info w-40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
      </div>
      </div>
      </td>
      </tr>
      </tbody>
      </table>
      </div>
      </div>
      </div>
      </div>
      <div class="col-lg-4 col-md-6">
      <div class="card h-100">
      <div class="card-header pb-0">
      <h6>Orders overview</h6>
      <p class="text-sm">
      <i class="fa fa-arrow-up text-success" aria-hidden="true"></i>
      <span class="font-weight-bold">24%</span> this month
      </p>
      </div>
      <div class="card-body p-3">
      <div class="timeline timeline-one-side">
      <div class="timeline-block mb-3">
      <span class="timeline-step">
      <i class="material-icons text-success text-gradient">notifications</i>
      </span>
      <div class="timeline-content">
      <h6 class="text-dark text-sm font-weight-bold mb-0">$2400, Design changes</h6>
      <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">22 DEC 7:20 PM</p>
      </div>
      </div>
      <div class="timeline-block mb-3">
      <span class="timeline-step">
      <i class="material-icons text-danger text-gradient">code</i>
      </span>
      <div class="timeline-content">
      <h6 class="text-dark text-sm font-weight-bold mb-0">New order #1832412</h6>
      <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 11 PM</p>
      </div>
      </div>
      <div class="timeline-block mb-3">
      <span class="timeline-step">
      <i class="material-icons text-info text-gradient">shopping_cart</i>
      </span>
      <div class="timeline-content">
      <h6 class="text-dark text-sm font-weight-bold mb-0">Server payments for April</h6>
      <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 9:34 PM</p>
      </div>
      </div>
      <div class="timeline-block mb-3">
      <span class="timeline-step">
      <i class="material-icons text-warning text-gradient">credit_card</i>
      </span>
      <div class="timeline-content">
      <h6 class="text-dark text-sm font-weight-bold mb-0">New card added for order #4395133</h6>
      <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">20 DEC 2:20 AM</p>
      </div>
      </div>
      <div class="timeline-block mb-3">
      <span class="timeline-step">
      <i class="material-icons text-primary text-gradient">key</i>
      </span>
      <div class="timeline-content">
      <h6 class="text-dark text-sm font-weight-bold mb-0">Unlock packages for development</h6>
      <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">18 DEC 4:54 AM</p>
      </div>
      </div>
      <div class="timeline-block">
      <span class="timeline-step">
      <i class="material-icons text-dark text-gradient">payments</i>
      </span>
      <div class="timeline-content">
      <h6 class="text-dark text-sm font-weight-bold mb-0">New order #9583120</h6>
      <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">17 DEC</p>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      <footer class="footer py-4  ">
      <div class="container-fluid">
      <div class="row align-items-center justify-content-lg-between">
      <div class="col-lg-6 mb-lg-0 mb-4">
      <div class="copyright text-center text-sm text-muted text-lg-start">
      made with <i class="fa fa-heart"></i> by
      <a href="https://therichpost.com" class="font-weight-bold" target="_blank">Jassa</a>
      for a better web.
      </div>
      </div>
      <div class="col-lg-6">
      <ul class="nav nav-footer justify-content-center justify-content-lg-end">
      <li class="nav-item">
      <a href="https://therichpost.com" class="nav-link text-muted" target="_blank">Therichpost</a>
      </li>
      <li class="nav-item">
      <a href="https://therichpost.com" class="nav-link text-muted" target="_blank">About Us</a>
      </li>
      <li class="nav-item">
      <a href="https://therichpost.com" class="nav-link text-muted" target="_blank">Blog</a>
      </li>
      <li class="nav-item">
      <a href="https://therichpost.com" class="nav-link pe-0 text-muted" target="_blank">License</a>
      </li>
      </ul>
      </div>
      </div>
      </div>
      </footer>
      </div>
      </main>
      <div class="fixed-plugin">
      <a class="fixed-plugin-button text-dark position-fixed px-3 py-2">
      <i class="material-icons py-2">settings</i>
      </a>
      <div class="card shadow-lg">
      <div class="card-header pb-0 pt-3">
      <div class="float-start">
      <h5 class="mt-3 mb-0">Material UI Configurator</h5>
      <p>See our dashboard options.</p>
      </div>
      <div class="float-end mt-4">
      <button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
      <i class="material-icons">clear</i>
      </button>
      </div>
      
      </div>
      <hr class="horizontal dark my-1">
      <div class="card-body pt-sm-3 pt-0">
      
      <div>
      <h6 class="mb-0">Sidebar Colors</h6>
      </div>
      <a href="javascript:void(0)" class="switch-trigger background-color">
      <div class="badge-colors my-2 text-start">
      <span class="badge filter bg-gradient-primary active" data-color="primary" onclick="sidebarColor(this)"></span>
      <span class="badge filter bg-gradient-dark" data-color="dark" onclick="sidebarColor(this)"></span>
      <span class="badge filter bg-gradient-info" data-color="info" onclick="sidebarColor(this)"></span>
      <span class="badge filter bg-gradient-success" data-color="success" onclick="sidebarColor(this)"></span>
      <span class="badge filter bg-gradient-warning" data-color="warning" onclick="sidebarColor(this)"></span>
      <span class="badge filter bg-gradient-danger" data-color="danger" onclick="sidebarColor(this)"></span>
      </div>
      </a>
      
      <div class="mt-3">
      <h6 class="mb-0">Sidenav Type</h6>
      <p class="text-sm">Choose between 2 different sidenav types.</p>
      </div>
      <div class="d-flex">
      <button class="btn bg-gradient-dark px-3 mb-2 active" data-class="bg-gradient-dark" onclick="sidebarType(this)">Dark</button>
      <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent" onclick="sidebarType(this)">Transparent</button>
      <button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-white" onclick="sidebarType(this)">White</button>
      </div>
      <p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
      
      <div class="mt-3 d-flex">
      <h6 class="mb-0">Navbar Fixed</h6>
      <div class="form-check form-switch ps-0 ms-auto my-auto">
      <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed" onclick="navbarFixed(this)">
      </div>
      </div>
      <hr class="horizontal dark my-3">
      <div class="mt-2 d-flex">
      <h6 class="mb-0">Light / Dark</h6>
      <div class="form-check form-switch ps-0 ms-auto my-auto">
      <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version" onclick="darkMode(this)">
      </div>
      </div>
      <hr class="horizontal dark my-sm-4">
      <a class="btn bg-gradient-info w-100" href="https:/therichpost.com">Free Download</a>
      <a class="btn btn-outline-dark w-100" href="https:/therichpost.com">View documentation</a>
      <div class="w-100 text-center">
      <a class="github-button" href="https:/therichpost.com" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star creativetimofficial/material-dashboard on GitHub">Star</a>
      <h6 class="mt-3">Thank you for sharing!</h6>
      <a href="#" class="btn btn-dark mb-0 me-2" target="_blank">
      <i class="fab fa-twitter me-1" aria-hidden="true"></i> Tweet
      </a>
      <a href="#" class="btn btn-dark mb-0 me-2" target="_blank">
      <i class="fab fa-facebook-square me-1" aria-hidden="true"></i> Share
      </a>
      </div>
      </div>
      </div>
      </div>

    4. Now friends we just need to add below code into angularadmin/angular.json file to custom.js file working code:

    ...
     "styles": [
                  "src/styles.css",
    "assets/css/nucleo-icons.css",
    "assets/css/nucleo-svg.css",
    "assets/css/material-dashboard.min.css?v=3.1.0"
                
                 
                ],
                "scripts": [
                "assets/js/popper.min.js",
    "assets/js/bootstrap.min.js",
    "assets/js/perfect-scrollbar.min.js",
    "assets/js/smooth-scrollbar.min.js",
    "assets/js/chartjs.min.js",
    "assets/js/material-dashboard.min.js"
                ]
    ...

    5. Guys now here is the git repo link from where we will get images, fonts, css and js folder and place all the folder inside assets folder:

    Free Git Repo Link

    6. Now friends we just need to add below code into angularadmin/src/index.html file:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Angular17</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    
    
      <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
    
     
      
      <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
      
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
      
     
      
      <style>
          .async-hide {
            opacity: 0 !important
          }
        </style>
    </head>
    <body class="g-sidenav-show  bg-gray-200">
      <app-root></app-root>
      <script>
          var ctx = document.getElementById("chart-bars").getContext("2d");
      
          new Chart(ctx, {
            type: "bar",
            data: {
              labels: ["M", "T", "W", "T", "F", "S", "S"],
              datasets: [{
                label: "Sales",
                tension: 0.4,
                borderWidth: 0,
                borderRadius: 4,
                borderSkipped: false,
                backgroundColor: "rgba(255, 255, 255, .8)",
                data: [50, 20, 10, 22, 50, 10, 40],
                maxBarThickness: 6
              }, ],
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  display: false,
                }
              },
              interaction: {
                intersect: false,
                mode: 'index',
              },
              scales: {
                y: {
                  grid: {
                    drawBorder: false,
                    display: true,
                    drawOnChartArea: true,
                    drawTicks: false,
                    borderDash: [5, 5],
                    color: 'rgba(255, 255, 255, .2)'
                  },
                  ticks: {
                    suggestedMin: 0,
                    suggestedMax: 500,
                    beginAtZero: true,
                    padding: 10,
                    font: {
                      size: 14,
                      weight: 300,
                      family: "Roboto",
                      style: 'normal',
                      lineHeight: 2
                    },
                    color: "#fff"
                  },
                },
                x: {
                  grid: {
                    drawBorder: false,
                    display: true,
                    drawOnChartArea: true,
                    drawTicks: false,
                    borderDash: [5, 5],
                    color: 'rgba(255, 255, 255, .2)'
                  },
                  ticks: {
                    display: true,
                    color: '#f8f9fa',
                    padding: 10,
                    font: {
                      size: 14,
                      weight: 300,
                      family: "Roboto",
                      style: 'normal',
                      lineHeight: 2
                    },
                  }
                },
              },
            },
          });
      
      
          var ctx2 = document.getElementById("chart-line").getContext("2d");
      
          new Chart(ctx2, {
            type: "line",
            data: {
              labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
              datasets: [{
                label: "Mobile apps",
                tension: 0,
                borderWidth: 0,
                pointRadius: 5,
                pointBackgroundColor: "rgba(255, 255, 255, .8)",
                pointBorderColor: "transparent",
                borderColor: "rgba(255, 255, 255, .8)",
                borderColor: "rgba(255, 255, 255, .8)",
                borderWidth: 4,
                backgroundColor: "transparent",
                fill: true,
                data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
                maxBarThickness: 6
      
              }],
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  display: false,
                }
              },
              interaction: {
                intersect: false,
                mode: 'index',
              },
              scales: {
                y: {
                  grid: {
                    drawBorder: false,
                    display: true,
                    drawOnChartArea: true,
                    drawTicks: false,
                    borderDash: [5, 5],
                    color: 'rgba(255, 255, 255, .2)'
                  },
                  ticks: {
                    display: true,
                    color: '#f8f9fa',
                    padding: 10,
                    font: {
                      size: 14,
                      weight: 300,
                      family: "Roboto",
                      style: 'normal',
                      lineHeight: 2
                    },
                  }
                },
                x: {
                  grid: {
                    drawBorder: false,
                    display: false,
                    drawOnChartArea: false,
                    drawTicks: false,
                    borderDash: [5, 5]
                  },
                  ticks: {
                    display: true,
                    color: '#f8f9fa',
                    padding: 10,
                    font: {
                      size: 14,
                      weight: 300,
                      family: "Roboto",
                      style: 'normal',
                      lineHeight: 2
                    },
                  }
                },
              },
            },
          });
      
          var ctx3 = document.getElementById("chart-line-tasks").getContext("2d");
      
          new Chart(ctx3, {
            type: "line",
            data: {
              labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
              datasets: [{
                label: "Mobile apps",
                tension: 0,
                borderWidth: 0,
                pointRadius: 5,
                pointBackgroundColor: "rgba(255, 255, 255, .8)",
                pointBorderColor: "transparent",
                borderColor: "rgba(255, 255, 255, .8)",
                borderWidth: 4,
                backgroundColor: "transparent",
                fill: true,
                data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
                maxBarThickness: 6
      
              }],
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  display: false,
                }
              },
              interaction: {
                intersect: false,
                mode: 'index',
              },
              scales: {
                y: {
                  grid: {
                    drawBorder: false,
                    display: true,
                    drawOnChartArea: true,
                    drawTicks: false,
                    borderDash: [5, 5],
                    color: 'rgba(255, 255, 255, .2)'
                  },
                  ticks: {
                    display: true,
                    padding: 10,
                    color: '#f8f9fa',
                    font: {
                      size: 14,
                      weight: 300,
                      family: "Roboto",
                      style: 'normal',
                      lineHeight: 2
                    },
                  }
                },
                x: {
                  grid: {
                    drawBorder: false,
                    display: false,
                    drawOnChartArea: false,
                    drawTicks: false,
                    borderDash: [5, 5]
                  },
                  ticks: {
                    display: true,
                    color: '#f8f9fa',
                    padding: 10,
                    font: {
                      size: 14,
                      weight: 300,
                      family: "Roboto",
                      style: 'normal',
                      lineHeight: 2
                    },
                  }
                },
              },
            },
          });
        </script>
      <script>
          var win = navigator.platform.indexOf('Win') > -1;
          if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
              damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
          }
        </script>
      
      <script async defer src="https://buttons.github.io/buttons.js"></script>
      
     
    </body>
    </html>
    
    

    Friends in the end must run ng serve command into your terminal to run the angular 17 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