Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 15 Ecommerce Website Foot Store Free Download.

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

1. Angular15Basic Tutorials
2. Angular Ecommerce Free Templates

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 15 setup and for this we need to run below commands but if you already have angular 15 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 angularshop //Create new Angular Project

cd angularehop // Go inside the Angular Project Folder

ng add @ionic/angular

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

https://therichpost.com/ecomassetsfiles2.zip

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

<!-- 
    - #HEADER
  -->

  <header class="header" data-header>
    <div class="container">

      <div class="overlay" data-overlay [ngClass]="status ? 'active' : ''"></div>

      <a href="#" class="logo">
        <img src="assets/images/logo.svg" width="160" height="50" alt="Footcap logo">
      </a>

      <button class="nav-open-btn" data-nav-open-btn aria-label="Open Menu" (click)="addToggle()">
        <ion-icon name="menu-outline"></ion-icon>
      </button>

      <nav class="navbar" data-navbar [ngClass]="status ? 'active' : ''">

        <button class="nav-close-btn" data-nav-close-btn aria-label="Close Menu" (click)="addToggle()">
          <ion-icon name="close-outline"></ion-icon>
        </button>

        <a href="#" class="logo">
          <img src="assets/images/logo.svg" width="190" height="50" alt="Footcap logo">
        </a>

        <ul class="navbar-list">

          <li class="navbar-item">
            <a href="#" class="navbar-link">Home</a>
          </li>

          <li class="navbar-item">
            <a href="#" class="navbar-link">About</a>
          </li>

          <li class="navbar-item">
            <a href="#" class="navbar-link">Products</a>
          </li>

          <li class="navbar-item">
            <a href="#" class="navbar-link">Shop</a>
          </li>

          <li class="navbar-item">
            <a href="#" class="navbar-link">Blog</a>
          </li>

          <li class="navbar-item">
            <a href="#" class="navbar-link">Contact</a>
          </li>

        </ul>

        <ul class="nav-action-list">

          <li>
            <button class="nav-action-btn">
              <ion-icon name="search-outline" aria-hidden="true"></ion-icon>

              <span class="nav-action-text">Search</span>
            </button>
          </li>

          <li>
            <a href="#" class="nav-action-btn">
              <ion-icon name="person-outline" aria-hidden="true"></ion-icon>

              <span class="nav-action-text">Login / Register</span>
            </a>
          </li>

          <li>
            <button class="nav-action-btn">
              <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>

              <span class="nav-action-text">Wishlist</span>

              <data class="nav-action-badge" value="5" aria-hidden="true">5</data>
            </button>
          </li>

          <li>
            <button class="nav-action-btn">
              <ion-icon name="bag-outline" aria-hidden="true"></ion-icon>

              <data class="nav-action-text" value="318.00">Basket: <strong>$318.00</strong></data>

              <data class="nav-action-badge" value="4" aria-hidden="true">4</data>
            </button>
          </li>

        </ul>

      </nav>

    </div>
  </header>





  <main>
    <article>

      <!-- 
        - #HERO
      -->

      <section class="section hero" style="background-image: url('assets/images/hero-banner.png')">
        <div class="container">

          <h2 class="h1 hero-title">
            New Summer <strong>Shoes Collection</strong>
          </h2>

          <p class="hero-text">
            Competently expedite alternative benefits whereas leading-edge catalysts for change. Globally leverage
            existing an
            expanded array of leadership.
          </p>

          <button class="btn btn-primary">
            <span>Shop Now</span>

            <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
          </button>

        </div>
      </section>





      <!-- 
        - #COLLECTION
      -->

      <section class="section collection">
        <div class="container">

          <ul class="collection-list has-scrollbar">

            <li>
              <div class="collection-card" style="background-image: url('assets/images/collection-1.jpg')">
                <h3 class="h4 card-title">Men Collections</h3>

                <a href="#" class="btn btn-secondary">
                  <span>Explore All</span>

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                </a>
              </div>
            </li>

            <li>
              <div class="collection-card" style="background-image: url('assets/images/collection-2.jpg')">
                <h3 class="h4 card-title">Women Collections</h3>

                <a href="#" class="btn btn-secondary">
                  <span>Explore All</span>

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                </a>
              </div>
            </li>

            <li>
              <div class="collection-card" style="background-image: url('assets/images/collection-3.jpg')">
                <h3 class="h4 card-title">Sports Collections</h3>

                <a href="#" class="btn btn-secondary">
                  <span>Explore All</span>

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                </a>
              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #PRODUCT
      -->

      <section class="section product">
        <div class="container">

          <h2 class="h2 section-title">Bestsellers Products</h2>

          <ul class="filter-list">

            <li>
              <button class="filter-btn  active">All</button>
            </li>

            <li>
              <button class="filter-btn">Nike</button>
            </li>

            <li>
              <button class="filter-btn">Adidas</button>
            </li>

            <li>
              <button class="filter-btn">Puma</button>
            </li>

            <li>
              <button class="filter-btn">Bata</button>
            </li>

            <li>
              <button class="filter-btn">Apex</button>
            </li>

          </ul>

          <ul class="product-list">

            <li class="product-item">
              <div class="product-card" tabindex="0">

                <figure class="card-banner">
                  <img src="assets/images/product-1.jpg" width="312" height="350" loading="lazy"
                    alt="Running Sneaker Shoes" class="image-contain">

                  <div class="card-badge">New</div>

                  <ul class="card-action-list">

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-1">
                        <ion-icon name="cart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-2">
                        <ion-icon name="heart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-3">
                        <ion-icon name="eye-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-4">
                        <ion-icon name="repeat-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-4">Compare</div>
                    </li>

                  </ul>
                </figure>

                <div class="card-content">

                  <div class="card-cat">
                    <a href="#" class="card-cat-link">Men</a> /
                    <a href="#" class="card-cat-link">Women</a>
                  </div>

                  <h3 class="h3 card-title">
                    <a href="#">Running Sneaker Shoes</a>
                  </h3>

                  <data class="card-price" value="180.85">$180.85</data>

                </div>

              </div>
            </li>

            <li class="product-item">
              <div class="product-card" tabindex="0">

                <figure class="card-banner">
                  <img src="assets/images/product-2.jpg" width="312" height="350" loading="lazy"
                    alt="Leather Mens Slipper" class="image-contain">

                  <ul class="card-action-list">

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-1">
                        <ion-icon name="cart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-2">
                        <ion-icon name="heart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-3">
                        <ion-icon name="eye-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-4">
                        <ion-icon name="repeat-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-4">Compare</div>
                    </li>

                  </ul>
                </figure>

                <div class="card-content">

                  <div class="card-cat">
                    <a href="#" class="card-cat-link">Men</a> /
                    <a href="#" class="card-cat-link">Sports</a>
                  </div>

                  <h3 class="h3 card-title">
                    <a href="#">Leather Mens Slipper</a>
                  </h3>

                  <data class="card-price" value="190.85">$190.85</data>

                </div>

              </div>
            </li>

            <li class="product-item">
              <div class="product-card" tabindex="0">

                <figure class="card-banner">
                  <img src="assets/images/product-3.jpg" width="312" height="350" loading="lazy"
                    alt="Simple Fabric Shoe" class="image-contain">

                  <div class="card-badge">New</div>

                  <ul class="card-action-list">

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-1">
                        <ion-icon name="cart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-2">
                        <ion-icon name="heart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-3">
                        <ion-icon name="eye-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-4">
                        <ion-icon name="repeat-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-4">Compare</div>
                    </li>

                  </ul>
                </figure>

                <div class="card-content">

                  <div class="card-cat">
                    <a href="#" class="card-cat-link">Men</a> /
                    <a href="#" class="card-cat-link">Women</a>
                  </div>

                  <h3 class="h3 card-title">
                    <a href="#">Simple Fabric Shoe</a>
                  </h3>

                  <data class="card-price" value="160.85">$160.85</data>

                </div>

              </div>
            </li>

            <li class="product-item">
              <div class="product-card" tabindex="0">

                <figure class="card-banner">
                  <img src="assets/images/product-4.jpg" width="312" height="350" loading="lazy"
                    alt="Air Jordan 7 Retro " class="image-contain">

                  <div class="card-badge"> -25%</div>

                  <ul class="card-action-list">

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-1">
                        <ion-icon name="cart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-2">
                        <ion-icon name="heart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-3">
                        <ion-icon name="eye-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-4">
                        <ion-icon name="repeat-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-4">Compare</div>
                    </li>

                  </ul>
                </figure>

                <div class="card-content">

                  <div class="card-cat">
                    <a href="#" class="card-cat-link">Men</a> /
                    <a href="#" class="card-cat-link">Sports</a>
                  </div>

                  <h3 class="h3 card-title">
                    <a href="#">Air Jordan 7 Retro </a>
                  </h3>

                  <data class="card-price" value="170.85">$170.85 <del>$200.21</del></data>

                </div>

              </div>
            </li>

            <li class="product-item">
              <div class="product-card" tabindex="0">

                <figure class="card-banner">
                  <img src="assets/images/product-5.jpg" width="312" height="350" loading="lazy"
                    alt="Nike Air Max 270 SE" class="image-contain">

                  <div class="card-badge">New</div>

                  <ul class="card-action-list">

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-1">
                        <ion-icon name="cart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-2">
                        <ion-icon name="heart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-3">
                        <ion-icon name="eye-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-4">
                        <ion-icon name="repeat-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-4">Compare</div>
                    </li>

                  </ul>
                </figure>

                <div class="card-content">

                  <div class="card-cat">
                    <a href="#" class="card-cat-link">Men</a> /
                    <a href="#" class="card-cat-link">Women</a>
                  </div>

                  <h3 class="h3 card-title">
                    <a href="#">Nike Air Max 270 SE</a>
                  </h3>

                  <data class="card-price" value="120.85">$120.85</data>

                </div>

              </div>
            </li>

            <li class="product-item">
              <div class="product-card" tabindex="0">

                <figure class="card-banner">
                  <img src="assets/images/product-6.jpg" width="312" height="350" loading="lazy"
                    alt="Adidas Sneakers Shoes" class="image-contain">

                  <ul class="card-action-list">

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-1">
                        <ion-icon name="cart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-2">
                        <ion-icon name="heart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-3">
                        <ion-icon name="eye-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-4">
                        <ion-icon name="repeat-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-4">Compare</div>
                    </li>

                  </ul>
                </figure>

                <div class="card-content">

                  <div class="card-cat">
                    <a href="#" class="card-cat-link">Men</a> /
                    <a href="#" class="card-cat-link">Women</a>
                  </div>

                  <h3 class="h3 card-title">
                    <a href="#">Adidas Sneakers Shoes</a>
                  </h3>

                  <data class="card-price" value="100.85">$100.85</data>

                </div>

              </div>
            </li>

            <li class="product-item">
              <div class="product-card" tabindex="0">

                <figure class="card-banner">
                  <img src="assets/images/product-7.jpg" width="312" height="350" loading="lazy"
                    alt="Nike Basketball shoes" class="image-contain">

                  <ul class="card-action-list">

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-1">
                        <ion-icon name="cart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-2">
                        <ion-icon name="heart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-3">
                        <ion-icon name="eye-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-4">
                        <ion-icon name="repeat-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-4">Compare</div>
                    </li>

                  </ul>
                </figure>

                <div class="card-content">

                  <div class="card-cat">
                    <a href="#" class="card-cat-link">Men</a> /
                    <a href="#" class="card-cat-link">Sports</a>
                  </div>

                  <h3 class="h3 card-title">
                    <a href="#">Nike Basketball shoes</a>
                  </h3>

                  <data class="card-price" value="120.85">$120.85</data>

                </div>

              </div>
            </li>

            <li class="product-item">
              <div class="product-card" tabindex="0">

                <figure class="card-banner">
                  <img src="assets/images/product-8.jpg" width="312" height="350" loading="lazy"
                    alt="Simple Fabric Shoe" class="image-contain">

                  <ul class="card-action-list">

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-1">
                        <ion-icon name="cart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-2">
                        <ion-icon name="heart-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-3">
                        <ion-icon name="eye-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                    </li>

                    <li class="card-action-item">
                      <button class="card-action-btn" aria-labelledby="card-label-4">
                        <ion-icon name="repeat-outline"></ion-icon>
                      </button>

                      <div class="card-action-tooltip" id="card-label-4">Compare</div>
                    </li>

                  </ul>
                </figure>

                <div class="card-content">

                  <div class="card-cat">
                    <a href="#" class="card-cat-link">Men</a> /
                    <a href="#" class="card-cat-link">Women</a>
                  </div>

                  <h3 class="h3 card-title">
                    <a href="#">Simple Fabric Shoe</a>
                  </h3>

                  <data class="card-price" value="100.85">$100.85</data>

                </div>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #CTA
      -->

      <section class="section cta">
        <div class="container">

          <ul class="cta-list">

            <li>
              <div class="cta-card" style="background-image: url('assets/images/cta-1.jpg')">
                <p class="card-subtitle">Adidas Shoes</p>

                <h3 class="h2 card-title">The Summer Sale Off 50%</h3>

                <a href="#" class="btn btn-link">
                  <span>Shop Now</span>

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                </a>
              </div>
            </li>

            <li>
              <div class="cta-card" style="background-image: url('assets/images/cta-2.jpg')">
                <p class="card-subtitle">Nike Shoes</p>

                <h3 class="h2 card-title">Makes Yourself Keep Sporty</h3>

                <a href="#" class="btn btn-link">
                  <span>Shop Now</span>

                  <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
                </a>
              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #SPECIAL
      -->

      <section class="section special">
        <div class="container">

          <div class="special-banner" style="background-image: url('assets/images/special-banner.jpg')">
            <h2 class="h3 banner-title">New Trend Edition</h2>

            <a href="#" class="btn btn-link">
              <span>Explore All</span>

              <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
            </a>
          </div>

          <div class="special-product">

            <h2 class="h2 section-title">
              <span class="text">Nike Special</span>

              <span class="line"></span>
            </h2>

            <ul class="has-scrollbar">

              <li class="product-item">
                <div class="product-card" tabindex="0">

                  <figure class="card-banner">
                    <img src="assets/images/product-1.jpg" width="312" height="350" loading="lazy"
                      alt="Running Sneaker Shoes" class="image-contain">

                    <div class="card-badge">New</div>

                    <ul class="card-action-list">

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-1">
                          <ion-icon name="cart-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-2">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-3">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-4">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-4">Compare</div>
                      </li>

                    </ul>
                  </figure>

                  <div class="card-content">

                    <div class="card-cat">
                      <a href="#" class="card-cat-link">Men</a> /
                      <a href="#" class="card-cat-link">Women</a>
                    </div>

                    <h3 class="h3 card-title">
                      <a href="#">Running Sneaker Shoes</a>
                    </h3>

                    <data class="card-price" value="180.85">$180.85</data>

                  </div>

                </div>
              </li>

              <li class="product-item">
                <div class="product-card" tabindex="0">

                  <figure class="card-banner">
                    <img src="assets/images/product-2.jpg" width="312" height="350" loading="lazy"
                      alt="Leather Mens Slipper" class="image-contain">

                    <ul class="card-action-list">

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-1">
                          <ion-icon name="cart-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-2">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-3">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-4">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-4">Compare</div>
                      </li>

                    </ul>
                  </figure>

                  <div class="card-content">

                    <div class="card-cat">
                      <a href="#" class="card-cat-link">Men</a> /
                      <a href="#" class="card-cat-link">Sports</a>
                    </div>

                    <h3 class="h3 card-title">
                      <a href="#">Leather Mens Slipper</a>
                    </h3>

                    <data class="card-price" value="190.85">$190.85</data>

                  </div>

                </div>
              </li>

              <li class="product-item">
                <div class="product-card" tabindex="0">

                  <figure class="card-banner">
                    <img src="assets/images/product-3.jpg" width="312" height="350" loading="lazy"
                      alt="Simple Fabric Shoe" class="image-contain">

                    <div class="card-badge">New</div>

                    <ul class="card-action-list">

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-1">
                          <ion-icon name="cart-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-2">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-3">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-4">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-4">Compare</div>
                      </li>

                    </ul>
                  </figure>

                  <div class="card-content">

                    <div class="card-cat">
                      <a href="#" class="card-cat-link">Men</a> /
                      <a href="#" class="card-cat-link">Women</a>
                    </div>

                    <h3 class="h3 card-title">
                      <a href="#">Simple Fabric Shoe</a>
                    </h3>

                    <data class="card-price" value="160.85">$160.85</data>

                  </div>

                </div>
              </li>

              <li class="product-item">
                <div class="product-card" tabindex="0">

                  <figure class="card-banner">
                    <img src="assets/images/product-4.jpg" width="312" height="350" loading="lazy"
                      alt="Air Jordan 7 Retro " class="image-contain">

                    <div class="card-badge"> -25%</div>

                    <ul class="card-action-list">

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-1">
                          <ion-icon name="cart-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-1">Add to Cart</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-2">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-2">Add to Whishlist</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-3">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-3">Quick View</div>
                      </li>

                      <li class="card-action-item">
                        <button class="card-action-btn" aria-labelledby="card-label-4">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>

                        <div class="card-action-tooltip" id="card-label-4">Compare</div>
                      </li>

                    </ul>
                  </figure>

                  <div class="card-content">

                    <div class="card-cat">
                      <a href="#" class="card-cat-link">Men</a> /
                      <a href="#" class="card-cat-link">Sports</a>
                    </div>

                    <h3 class="h3 card-title">
                      <a href="#">Air Jordan 7 Retro </a>
                    </h3>

                    <data class="card-price" value="170.85">$170.85 <del>$200.21</del></data>

                  </div>

                </div>
              </li>

            </ul>

          </div>

        </div>
      </section>





      <!-- 
        - #SERVICE
      -->

      <section class="section service">
        <div class="container">

          <ul class="service-list">

            <li class="service-item">
              <div class="service-card">

                <div class="card-icon">
                  <img src="assets/images/service-1.png" width="53" height="28" loading="lazy" alt="Service icon">
                </div>

                <div>
                  <h3 class="h4 card-title">Free Shiping</h3>

                  <p class="card-text">
                    All orders over <span>$150</span>
                  </p>
                </div>

              </div>
            </li>

            <li class="service-item">
              <div class="service-card">

                <div class="card-icon">
                  <img src="assets/images/service-2.png" width="43" height="35" loading="lazy" alt="Service icon">
                </div>

                <div>
                  <h3 class="h4 card-title">Quick Payment</h3>

                  <p class="card-text">
                    100% secure payment
                  </p>
                </div>

              </div>
            </li>

            <li class="service-item">
              <div class="service-card">

                <div class="card-icon">
                  <img src="assets/images/service-3.png" width="40" height="40" loading="lazy" alt="Service icon">
                </div>

                <div>
                  <h3 class="h4 card-title">Free Returns</h3>

                  <p class="card-text">
                    Money back in 30 days
                  </p>
                </div>

              </div>
            </li>

            <li class="service-item">
              <div class="service-card">

                <div class="card-icon">
                  <img src="assets/images/service-4.png" width="40" height="40" loading="lazy" alt="Service icon">
                </div>

                <div>
                  <h3 class="h4 card-title">24/7 Support</h3>

                  <p class="card-text">
                    Get Quick Support
                  </p>
                </div>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #INSTA POST
      -->

      <section class="section insta-post">

        <ul class="insta-post-list has-scrollbar">

          <li class="insta-post-item">
            <img src="assets/images/insta-1.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
              class="insta-post-banner image-contain">

            <a href="#" class="insta-post-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li class="insta-post-item">
            <img src="assets/images/insta-2.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
              class="insta-post-banner image-contain">

            <a href="#" class="insta-post-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li class="insta-post-item">
            <img src="assets/images/insta-3.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
              class="insta-post-banner image-contain">

            <a href="#" class="insta-post-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li class="insta-post-item">
            <img src="assets/images/insta-4.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
              class="insta-post-banner image-contain">

            <a href="#" class="insta-post-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li class="insta-post-item">
            <img src="assets/images/insta-5.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
              class="insta-post-banner image-contain">

            <a href="#" class="insta-post-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li class="insta-post-item">
            <img src="assets/images/insta-6.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
              class="insta-post-banner image-contain">

            <a href="#" class="insta-post-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li class="insta-post-item">
            <img src="assets/images/insta-7.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
              class="insta-post-banner image-contain">

            <a href="#" class="insta-post-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

          <li class="insta-post-item">
            <img src="assets/images/insta-8.jpg" width="100" height="100" loading="lazy" alt="Instagram post"
              class="insta-post-banner image-contain">

            <a href="#" class="insta-post-link">
              <ion-icon name="logo-instagram"></ion-icon>
            </a>
          </li>

        </ul>

      </section>

    </article>
  </main>





  <!-- 
    - #FOOTER
  -->

  <footer class="footer">

    <div class="footer-top section">
      <div class="container">

        <div class="footer-brand">

          <a href="#" class="logo">
            <img src="assets/images/logo.svg" width="160" height="50" alt="Footcap logo">
          </a>

          <ul class="social-list">

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-facebook"></ion-icon>
              </a>
            </li>

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-twitter"></ion-icon>
              </a>
            </li>

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-pinterest"></ion-icon>
              </a>
            </li>

            <li>
              <a href="#" class="social-link">
                <ion-icon name="logo-linkedin"></ion-icon>
              </a>
            </li>

          </ul>

        </div>

        <div class="footer-link-box">

          <ul class="footer-list">

            <li>
              <p class="footer-list-title">Contact Us</p>
            </li>

            <li>
              <address class="footer-link">
                <ion-icon name="location"></ion-icon>

                <span class="footer-link-text">
                  1266 Ludhiana PUnjab, India
                </span>
              </address>
            </li>

            <li>
              <a href="tel:+557343673257" class="footer-link">
                <ion-icon name="call"></ion-icon>

                <span class="footer-link-text">+000000000</span>
              </a>
            </li>

            <li>
              <a href="mailto:footcap@help.com" class="footer-link">
                <ion-icon name="mail"></ion-icon>

                <span class="footer-link-text">therichposts@gmail.com</span>
              </a>
            </li>

          </ul>

          <ul class="footer-list">

            <li>
              <p class="footer-list-title">My Account</p>
            </li>

            <li>
              <a href="#" class="footer-link">
                <ion-icon name="chevron-forward-outline"></ion-icon>

                <span class="footer-link-text">My Account</span>
              </a>
            </li>

            <li>
              <a href="#" class="footer-link">
                <ion-icon name="chevron-forward-outline"></ion-icon>

                <span class="footer-link-text">View Cart</span>
              </a>
            </li>

            <li>
              <a href="#" class="footer-link">
                <ion-icon name="chevron-forward-outline"></ion-icon>

                <span class="footer-link-text">Wishlist</span>
              </a>
            </li>

            <li>
              <a href="#" class="footer-link">
                <ion-icon name="chevron-forward-outline"></ion-icon>

                <span class="footer-link-text">Compare</span>
              </a>
            </li>

            <li>
              <a href="#" class="footer-link">
                <ion-icon name="chevron-forward-outline"></ion-icon>

                <span class="footer-link-text">New Products</span>
              </a>
            </li>

          </ul>

          <div class="footer-list">

            <p class="footer-list-title">Opening Time</p>

            <table class="footer-table">
              <tbody>

                <tr class="table-row">
                  <th class="table-head" scope="row">Mon - Tue:</th>

                  <td class="table-data">8AM - 10PM</td>
                </tr>

                <tr class="table-row">
                  <th class="table-head" scope="row">Wed:</th>

                  <td class="table-data">8AM - 7PM</td>
                </tr>

                <tr class="table-row">
                  <th class="table-head" scope="row">Fri:</th>

                  <td class="table-data">7AM - 12PM</td>
                </tr>

                <tr class="table-row">
                  <th class="table-head" scope="row">Sat:</th>

                  <td class="table-data">9AM - 8PM</td>
                </tr>

                <tr class="table-row">
                  <th class="table-head" scope="row">Sun:</th>

                  <td class="table-data">Closed</td>
                </tr>

              </tbody>
            </table>

          </div>

          <div class="footer-list">

            <p class="footer-list-title">Newsletter</p>

            <p class="newsletter-text">
              Authoritatively morph 24/7 potentialities with error-free partnerships.
            </p>

            <form action="" class="newsletter-form">
              <input type="email" name="email" required placeholder="Email Address" class="newsletter-input">

              <button type="submit" class="btn btn-primary">Subscribe</button>
            </form>

          </div>

        </div>

      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          &copy; 2023 <a href="#" class="copyright-link">therichpost</a>. All Rights Reserved
        </p>

      </div>
    </div>

  </footer>

4. Now guys please add the below code inside angularshop/src/index.html file to styles and scripts:

...
<head>
 ...
     <!--
    - favicon
    -->
    <link rel="shortcut icon" href="assets/images/logo/favicon.ico" type="image/x-icon">

    <!--
      - custom css link
    -->
    <link rel="stylesheet" href="assets/css/style-prefix.css">

   <link
    href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
    rel="stylesheet">

 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>
...

5. Now friends we just need to add below code into angularshop/src/app/app.component.ts file to get mobile button click functionality:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ecommerce';
  //Sidebar toggle show hide function
  status = false;
  addToggle()
  {
    this.status = !this.status;       
  }
}

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

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

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

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

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

Jassa

Thanks

Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular 15 Latest Free Ecommerce Responsive Website Template.

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

1. Angular15Basic Tutorials
2. Angular Ecommerce Free Templates

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 15 setup and for this we need to run below commands but if you already have angular 15 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 angularshop //Create new Angular Project

cd angularehop // Go inside the Angular Project Folder

ng add @ionic/angular

2. Now friends, here is git repo link(in this repo link there are js, css and images for angular ecommerce template) and please put all the repo folders in “src/assets” folder:

Git Repo Link

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

<header>

        <div class="header-top">

          <div class="container">

            <ul class="header-social-container">

              <li>
                <a href="#" class="social-link">
                  <ion-icon name="logo-facebook"></ion-icon>
                </a>
              </li>

              <li>
                <a href="#" class="social-link">
                  <ion-icon name="logo-twitter"></ion-icon>
                </a>
              </li>

              <li>
                <a href="#" class="social-link">
                  <ion-icon name="logo-instagram"></ion-icon>
                </a>
              </li>

              <li>
                <a href="#" class="social-link">
                  <ion-icon name="logo-linkedin"></ion-icon>
                </a>
              </li>

            </ul>

            <div class="header-alert-news">
              <p>
                <b>Free Shipping</b>
                This Week Order Over - $55
              </p>
            </div>

            <div class="header-top-actions">

              <select name="currency">

                <option value="usd">USD</option>
                <option value="eur">EUR</option>

              </select>

              <select name="language">

                <option value="en-US">English</option>
                <option value="es-ES">Espa&ntilde;ol</option>
                <option value="fr">Fran&ccedil;ais</option>

              </select>

            </div>

          </div>

        </div>

        <div class="header-main">

          <div class="container">

            <a href="#" class="header-logo">
              Ajooni
            </a>

            <div class="header-search-container">

              <input type="search" name="search" class="search-field" placeholder="Enter your product name..." />

              <button class="search-btn">
                <ion-icon name="search-outline"></ion-icon>
              </button>

            </div>

            <div class="header-user-actions">

              <button class="action-btn">
                <ion-icon name="person-outline"></ion-icon>
              </button>

              <button class="action-btn">
                <ion-icon name="heart-outline"></ion-icon>
                <span class="count">0</span>
              </button>

              <button class="action-btn">
                <ion-icon name="bag-handle-outline"></ion-icon>
                <span class="count">0</span>
              </button>

            </div>

          </div>

        </div>

        <nav class="desktop-navigation-menu">

          <div class="container">

            <ul class="desktop-menu-category-list">

              <li class="menu-category">
                <a href="#" class="menu-title">Home</a>
              </li>

              <li class="menu-category">
                <a href="#" class="menu-title">Categories</a>

                <div class="dropdown-panel">

                  <ul class="dropdown-panel-list">

                    <li class="menu-title">
                      <a href="#">Electronics</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Desktop</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Laptop</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Camera</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Tablet</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Headphone</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">
                        <img src="assets/images/electronics-banner-1.jpg" alt="headphone collection" width="250"
                          height="119" />
                      </a>
                    </li>

                  </ul>

                  <ul class="dropdown-panel-list">

                    <li class="menu-title">
                      <a href="#">Men's</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Formal</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Casual</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Sports</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Jacket</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Sunglasses</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">
                        <img src="assets/images/mens-banner.jpg" alt="men's fashion" width="250" height="119" />
                      </a>
                    </li>

                  </ul>

                  <ul class="dropdown-panel-list">

                    <li class="menu-title">
                      <a href="#">Women's</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Formal</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Casual</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Perfume</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Cosmetics</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Bags</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">
                        <img src="assets/images/womens-banner.jpg" alt="women's fashion" width="250" height="119" />
                      </a>
                    </li>

                  </ul>

                  <ul class="dropdown-panel-list">

                    <li class="menu-title">
                      <a href="#">Electronics</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Smart Watch</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Smart TV</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Keyboard</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Mouse</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">Microphone</a>
                    </li>

                    <li class="panel-list-item">
                      <a href="#">
                        <img src="assets/images/electronics-banner-2.jpg" alt="mouse collection" width="250" height="119" />
                      </a>
                    </li>

                  </ul>

                </div>
              </li>

              <li class="menu-category">
                <a href="#" class="menu-title">Men's</a>

                <ul class="dropdown-list">

                  <li class="dropdown-item">
                    <a href="#">Shirt</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Shorts & Jeans</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Safety Shoes</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Wallet</a>
                  </li>

                </ul>
              </li>

              <li class="menu-category">
                <a href="#" class="menu-title">Women's</a>

                <ul class="dropdown-list">

                  <li class="dropdown-item">
                    <a href="#">Dress & Frock</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Earrings</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Necklace</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Makeup Kit</a>
                  </li>

                </ul>
              </li>

              <li class="menu-category">
                <a href="#" class="menu-title">Jewelry</a>

                <ul class="dropdown-list">

                  <li class="dropdown-item">
                    <a href="#">Earrings</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Couple Rings</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Necklace</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Bracelets</a>
                  </li>

                </ul>
              </li>

              <li class="menu-category">
                <a href="#" class="menu-title">Perfume</a>

                <ul class="dropdown-list">

                  <li class="dropdown-item">
                    <a href="#">Clothes Perfume</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Deodorant</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Flower Fragrance</a>
                  </li>

                  <li class="dropdown-item">
                    <a href="#">Air Freshener</a>
                  </li>

                </ul>
              </li>

              <li class="menu-category">
                <a href="#" class="menu-title">Blog</a>
              </li>

              <li class="menu-category">
                <a href="#" class="menu-title">Hot Offers</a>
              </li>

            </ul>

          </div>

        </nav>

        <div class="mobile-bottom-navigation">

          <button class="action-btn" data-mobile-menu-open-btn>
            <ion-icon name="menu-outline"></ion-icon>
          </button>

          <button class="action-btn">
            <ion-icon name="bag-handle-outline"></ion-icon>

            <span class="count">0</span>
          </button>

          <button class="action-btn">
            <ion-icon name="home-outline"></ion-icon>
          </button>

          <button class="action-btn">
            <ion-icon name="heart-outline"></ion-icon>

            <span class="count">0</span>
          </button>

          <button class="action-btn" data-mobile-menu-open-btn>
            <ion-icon name="grid-outline"></ion-icon>
          </button>

        </div>

        <nav class="mobile-navigation-menu  has-scrollbar" data-mobile-menu>

          <div class="menu-top">
            <h2 class="menu-title">Menu</h2>

            <button class="menu-close-btn" data-mobile-menu-close-btn>
              <ion-icon name="close-outline"></ion-icon>
            </button>
          </div>

          <ul class="mobile-menu-category-list">

            <li class="menu-category">
              <a href="#" class="menu-title">Home</a>
            </li>

            <li class="menu-category">

              <button class="accordion-menu" data-accordion-btn>
                <p class="menu-title">Men's</p>

                <div>
                  <ion-icon name="add-outline" class="add-icon"></ion-icon>
                  <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                </div>
              </button>

              <ul class="submenu-category-list" data-accordion>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Shirt</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Shorts & Jeans</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Safety Shoes</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Wallet</a>
                </li>

              </ul>

            </li>

            <li class="menu-category">

              <button class="accordion-menu" data-accordion-btn>
                <p class="menu-title">Women's</p>

                <div>
                  <ion-icon name="add-outline" class="add-icon"></ion-icon>
                  <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                </div>
              </button>

              <ul class="submenu-category-list" data-accordion>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Dress & Frock</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Earrings</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Necklace</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Makeup Kit</a>
                </li>

              </ul>

            </li>

            <li class="menu-category">

              <button class="accordion-menu" data-accordion-btn>
                <p class="menu-title">Jewelry</p>

                <div>
                  <ion-icon name="add-outline" class="add-icon"></ion-icon>
                  <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                </div>
              </button>

              <ul class="submenu-category-list" data-accordion>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Earrings</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Couple Rings</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Necklace</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Bracelets</a>
                </li>

              </ul>

            </li>

            <li class="menu-category">

              <button class="accordion-menu" data-accordion-btn>
                <p class="menu-title">Perfume</p>

                <div>
                  <ion-icon name="add-outline" class="add-icon"></ion-icon>
                  <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                </div>
              </button>

              <ul class="submenu-category-list" data-accordion>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Clothes Perfume</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Deodorant</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Flower Fragrance</a>
                </li>

                <li class="submenu-category">
                  <a href="#" class="submenu-title">Air Freshener</a>
                </li>

              </ul>

            </li>

            <li class="menu-category">
              <a href="#" class="menu-title">Blog</a>
            </li>

            <li class="menu-category">
              <a href="#" class="menu-title">Hot Offers</a>
            </li>

          </ul>

          <div class="menu-bottom">

            <ul class="menu-category-list">

              <li class="menu-category">

                <button class="accordion-menu" data-accordion-btn>
                  <p class="menu-title">Language</p>

                  <ion-icon name="caret-back-outline" class="caret-back"></ion-icon>
                </button>

                <ul class="submenu-category-list" data-accordion>

                  <li class="submenu-category">
                    <a href="#" class="submenu-title">English</a>
                  </li>

                  <li class="submenu-category">
                    <a href="#" class="submenu-title">Espa&ntilde;ol</a>
                  </li>

                  <li class="submenu-category">
                    <a href="#" class="submenu-title">Fren&ccedil;h</a>
                  </li>

                </ul>

              </li>

              <li class="menu-category">
                <button class="accordion-menu" data-accordion-btn>
                  <p class="menu-title">Currency</p>
                  <ion-icon name="caret-back-outline" class="caret-back"></ion-icon>
                </button>

                <ul class="submenu-category-list" data-accordion>
                  <li class="submenu-category">
                    <a href="#" class="submenu-title">USD &dollar;</a>
                  </li>

                  <li class="submenu-category">
                    <a href="#" class="submenu-title">EUR &euro;</a>
                  </li>
                </ul>
              </li>

            </ul>

            <ul class="menu-social-container">

              <li>
                <a href="#" class="social-link">
                  <ion-icon name="logo-facebook"></ion-icon>
                </a>
              </li>

              <li>
                <a href="#" class="social-link">
                  <ion-icon name="logo-twitter"></ion-icon>
                </a>
              </li>

              <li>
                <a href="#" class="social-link">
                  <ion-icon name="logo-instagram"></ion-icon>
                </a>
              </li>

              <li>
                <a href="#" class="social-link">
                  <ion-icon name="logo-linkedin"></ion-icon>
                </a>
              </li>

            </ul>

          </div>

        </nav>

        </header>





        

        <main>

       
        <div class="banner">

          <div class="container">

            <div class="slider-container has-scrollbar">

              <div class="slider-item">

                <img src="assets/images/banner-1.jpg" alt="women's latest fashion sale" class="banner-img" />

                <div class="banner-content">

                  <p class="banner-subtitle">Trending item</p>

                  <h2 class="banner-title">Women's latest fashion sale</h2>

                  <p class="banner-text">
                    starting at &dollar; <b>20</b>.00
                  </p>

                  <a href="#" class="banner-btn">Shop now</a>

                </div>

              </div>

              <div class="slider-item">

                <img src="assets/images/banner-2.jpg" alt="modern sunglasses" class="banner-img" />

                <div class="banner-content">

                  <p class="banner-subtitle">Trending accessories</p>

                  <h2 class="banner-title">Modern sunglasses</h2>

                  <p class="banner-text">
                    starting at &dollar; <b>15</b>.00
                  </p>

                  <a href="#" class="banner-btn">Shop now</a>

                </div>

              </div>

              <div class="slider-item">

                <img src="assets/images/banner-3.jpg" alt="new fashion summer sale" class="banner-img" />

                <div class="banner-content">

                  <p class="banner-subtitle">Sale Offer</p>

                  <h2 class="banner-title">New fashion summer sale</h2>

                  <p class="banner-text">
                    starting at &dollar; <b>29</b>.99
                  </p>

                  <a href="#" class="banner-btn">Shop now</a>

                </div>

              </div>

            </div>

          </div>

        </div>





       

        <div class="category">

          <div class="container">

            <div class="category-item-container has-scrollbar">

              <div class="category-item">

                <div class="category-img-box">
                  <img src="assets/images/icons/dress.svg" alt="dress & frock" width="30" />
                </div>

                <div class="category-content-box">

                  <div class="category-content-flex">
                    <h3 class="category-item-title">Dress & frock</h3>

                    <p class="category-item-amount">(53)</p>
                  </div>

                  <a href="#" class="category-btn">Show all</a>

                </div>

              </div>

              <div class="category-item">

                <div class="category-img-box">
                  <img src="assets/images/icons/coat.svg" alt="winter wear" width="30" />
                </div>

                <div class="category-content-box">

                  <div class="category-content-flex">
                    <h3 class="category-item-title">Winter wear</h3>

                    <p class="category-item-amount">(58)</p>
                  </div>

                  <a href="#" class="category-btn">Show all</a>

                </div>

              </div>

              <div class="category-item">

                <div class="category-img-box">
                  <img src="assets/images/icons/glasses.svg" alt="glasses & lens" width="30" />
                </div>

                <div class="category-content-box">

                  <div class="category-content-flex">
                    <h3 class="category-item-title">Glasses & lens</h3>

                    <p class="category-item-amount">(68)</p>
                  </div>

                  <a href="#" class="category-btn">Show all</a>

                </div>

              </div>

              <div class="category-item">

                <div class="category-img-box">
                  <img src="assets/images/icons/shorts.svg" alt="shorts & jeans" width="30" />
                </div>

                <div class="category-content-box">

                  <div class="category-content-flex">
                    <h3 class="category-item-title">Shorts & jeans</h3>

                    <p class="category-item-amount">(84)</p>
                  </div>

                  <a href="#" class="category-btn">Show all</a>

                </div>

              </div>

              <div class="category-item">

                <div class="category-img-box">
                  <img src="assets/images/icons/tee.svg" alt="t-shirts" width="30" />
                </div>

                <div class="category-content-box">

                  <div class="category-content-flex">
                    <h3 class="category-item-title">T-shirts</h3>

                    <p class="category-item-amount">(35)</p>
                  </div>

                  <a href="#" class="category-btn">Show all</a>

                </div>

              </div>

              <div class="category-item">

                <div class="category-img-box">
                  <img src="assets/images/icons/jacket.svg" alt="jacket" width="30" />
                </div>

                <div class="category-content-box">

                  <div class="category-content-flex">
                    <h3 class="category-item-title">Jacket</h3>

                    <p class="category-item-amount">(16)</p>
                  </div>

                  <a href="#" class="category-btn">Show all</a>

                </div>

              </div>

              <div class="category-item">

                <div class="category-img-box">
                  <img src="assets/images/icons/watch.svg" alt="watch" width="30" />
                </div>

                <div class="category-content-box">

                  <div class="category-content-flex">
                    <h3 class="category-item-title">Watch</h3>

                    <p class="category-item-amount">(27)</p>
                  </div>

                  <a href="#" class="category-btn">Show all</a>

                </div>

              </div>

              <div class="category-item">

                <div class="category-img-box">
                  <img src="assets/images/icons/hat.svg" alt="hat & caps" width="30" />
                </div>

                <div class="category-content-box">

                  <div class="category-content-flex">
                    <h3 class="category-item-title">Hat & caps</h3>

                    <p class="category-item-amount">(39)</p>
                  </div>

                  <a href="#" class="category-btn">Show all</a>

                </div>

              </div>

            </div>

          </div>

        </div>





      

        <div class="product-container">

          <div class="container">


           

            <div class="sidebar  has-scrollbar" data-mobile-menu>

              <div class="sidebar-category">

                <div class="sidebar-top">
                  <h2 class="sidebar-title">Category</h2>

                  <button class="sidebar-close-btn" data-mobile-menu-close-btn>
                    <ion-icon name="close-outline"></ion-icon>
                  </button>
                </div>

                <ul class="sidebar-menu-category-list">

                  <li class="sidebar-menu-category">

                    <button class="sidebar-accordion-menu" data-accordion-btn>

                      <div class="menu-title-flex">
                        <img src="assets/images/icons/dress.svg" alt="clothes" width="20" height="20"
                          class="menu-title-img" />

                        <p class="menu-title">Clothes</p>
                      </div>

                      <div>
                        <ion-icon name="add-outline" class="add-icon"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                      </div>

                    </button>

                    <ul class="sidebar-submenu-category-list" data-accordion>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Shirt</p>
                          <data value="300" class="stock" title="Available Stock">300</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">shorts & jeans</p>
                          <data value="60" class="stock" title="Available Stock">60</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">jacket</p>
                          <data value="50" class="stock" title="Available Stock">50</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">dress & frock</p>
                          <data value="87" class="stock" title="Available Stock">87</data>
                        </a>
                      </li>

                    </ul>

                  </li>

                  <li class="sidebar-menu-category">

                    <button class="sidebar-accordion-menu" data-accordion-btn>

                      <div class="menu-title-flex">
                        <img src="assets/images/icons/shoes.svg" alt="footwear" class="menu-title-img" width="20"
                          height="20" />

                        <p class="menu-title">Footwear</p>
                      </div>

                      <div>
                        <ion-icon name="add-outline" class="add-icon"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                      </div>

                    </button>

                    <ul class="sidebar-submenu-category-list" data-accordion>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Sports</p>
                          <data value="45" class="stock" title="Available Stock">45</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Formal</p>
                          <data value="75" class="stock" title="Available Stock">75</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Casual</p>
                          <data value="35" class="stock" title="Available Stock">35</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Safety Shoes</p>
                          <data value="26" class="stock" title="Available Stock">26</data>
                        </a>
                      </li>

                    </ul>

                  </li>

                  <li class="sidebar-menu-category">

                    <button class="sidebar-accordion-menu" data-accordion-btn>

                      <div class="menu-title-flex">
                        <img src="assets/images/icons/jewelry.svg" alt="clothes" class="menu-title-img" width="20"
                          height="20" />

                        <p class="menu-title">Jewelry</p>
                      </div>

                      <div>
                        <ion-icon name="add-outline" class="add-icon"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                      </div>

                    </button>

                    <ul class="sidebar-submenu-category-list" data-accordion>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Earrings</p>
                          <data value="46" class="stock" title="Available Stock">46</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Couple Rings</p>
                          <data value="73" class="stock" title="Available Stock">73</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Necklace</p>
                          <data value="61" class="stock" title="Available Stock">61</data>
                        </a>
                      </li>

                    </ul>

                  </li>

                  <li class="sidebar-menu-category">

                    <button class="sidebar-accordion-menu" data-accordion-btn>

                      <div class="menu-title-flex">
                        <img src="assets/images/icons/perfume.svg" alt="perfume" class="menu-title-img" width="20"
                          height="20" />

                        <p class="menu-title">Perfume</p>
                      </div>

                      <div>
                        <ion-icon name="add-outline" class="add-icon"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                      </div>

                    </button>

                    <ul class="sidebar-submenu-category-list" data-accordion>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Clothes Perfume</p>
                          <data value="12" class="stock" title="Available Stock">12 pcs</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Deodorant</p>
                          <data value="60" class="stock" title="Available Stock">60 pcs</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">jacket</p>
                          <data value="50" class="stock" title="Available Stock">50 pcs</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">dress & frock</p>
                          <data value="87" class="stock" title="Available Stock">87 pcs</data>
                        </a>
                      </li>

                    </ul>

                  </li>

                  <li class="sidebar-menu-category">

                    <button class="sidebar-accordion-menu" data-accordion-btn>

                      <div class="menu-title-flex">
                        <img src="assets/images/icons/cosmetics.svg" alt="cosmetics" class="menu-title-img" width="20"
                          height="20" />

                        <p class="menu-title">Cosmetics</p>
                      </div>

                      <div>
                        <ion-icon name="add-outline" class="add-icon"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                      </div>

                    </button>

                    <ul class="sidebar-submenu-category-list" data-accordion>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Shampoo</p>
                          <data value="68" class="stock" title="Available Stock">68</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Sunscreen</p>
                          <data value="46" class="stock" title="Available Stock">46</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Body Wash</p>
                          <data value="79" class="stock" title="Available Stock">79</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Makeup Kit</p>
                          <data value="23" class="stock" title="Available Stock">23</data>
                        </a>
                      </li>

                    </ul>

                  </li>

                  <li class="sidebar-menu-category">

                    <button class="sidebar-accordion-menu" data-accordion-btn>

                      <div class="menu-title-flex">
                        <img src="assets/images/icons/glasses.svg" alt="glasses" class="menu-title-img" width="20"
                          height="20" />

                        <p class="menu-title">Glasses</p>
                      </div>

                      <div>
                        <ion-icon name="add-outline" class="add-icon"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                      </div>

                    </button>

                    <ul class="sidebar-submenu-category-list" data-accordion>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Sunglasses</p>
                          <data value="50" class="stock" title="Available Stock">50</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Lenses</p>
                          <data value="48" class="stock" title="Available Stock">48</data>
                        </a>
                      </li>

                    </ul>

                  </li>

                  <li class="sidebar-menu-category">

                    <button class="sidebar-accordion-menu" data-accordion-btn>

                      <div class="menu-title-flex">
                        <img src="assets/images/icons/bag.svg" alt="bags" class="menu-title-img" width="20" height="20" />

                        <p class="menu-title">Bags</p>
                      </div>

                      <div>
                        <ion-icon name="add-outline" class="add-icon"></ion-icon>
                        <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                      </div>

                    </button>

                    <ul class="sidebar-submenu-category-list" data-accordion>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Shopping Bag</p>
                          <data value="62" class="stock" title="Available Stock">62</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Gym Backpack</p>
                          <data value="35" class="stock" title="Available Stock">35</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Purse</p>
                          <data value="80" class="stock" title="Available Stock">80</data>
                        </a>
                      </li>

                      <li class="sidebar-submenu-category">
                        <a href="#" class="sidebar-submenu-title">
                          <p class="product-name">Wallet</p>
                          <data value="75" class="stock" title="Available Stock">75</data>
                        </a>
                      </li>

                    </ul>

                  </li>

                </ul>

              </div>

              <div class="product-showcase">

                <h3 class="showcase-heading">best sellers</h3>

                <div class="showcase-wrapper">

                  <div class="showcase-container">

                    <div class="showcase">

                      <a href="#" class="showcase-img-box">
                        <img src="assets/images/products/1.jpg" alt="baby fabric shoes" width="75" height="75"
                          class="showcase-img" />
                      </a>

                      <div class="showcase-content">

                        <a href="#">
                          <h4 class="showcase-title">baby fabric shoes</h4>
                        </a>

                        <div class="showcase-rating">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                        </div>

                        <div class="price-box">
                          <del>$5.00</del>
                          <p class="price">$4.00</p>
                        </div>

                      </div>

                    </div>

                    <div class="showcase">

                      <a href="#" class="showcase-img-box">
                        <img src="assets/images/products/2.jpg" alt="men's hoodies t-shirt" class="showcase-img"
                          width="75" height="75" />
                      </a>

                      <div class="showcase-content">

                        <a href="#">
                          <h4 class="showcase-title">men's hoodies t-shirt</h4>
                        </a>
                        <div class="showcase-rating">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star-half-outline"></ion-icon>
                        </div>

                        <div class="price-box">
                          <del>$17.00</del>
                          <p class="price">$7.00</p>
                        </div>

                      </div>

                    </div>

                    <div class="showcase">

                      <a href="#" class="showcase-img-box">
                        <img src="assets/images/products/3.jpg" alt="girls t-shirt" class="showcase-img" width="75"
                          height="75" />
                      </a>

                      <div class="showcase-content">

                        <a href="#">
                          <h4 class="showcase-title">girls t-shirt</h4>
                        </a>
                        <div class="showcase-rating">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star-half-outline"></ion-icon>
                        </div>

                        <div class="price-box">
                          <del>$5.00</del>
                          <p class="price">$3.00</p>
                        </div>

                      </div>

                    </div>

                    <div class="showcase">

                      <a href="#" class="showcase-img-box">
                        <img src="assets/images/products/4.jpg" alt="woolen hat for men" class="showcase-img" width="75"
                          height="75" />
                      </a>

                      <div class="showcase-content">

                        <a href="#">
                          <h4 class="showcase-title">woolen hat for men</h4>
                        </a>
                        <div class="showcase-rating">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                        </div>

                        <div class="price-box">
                          <del>$15.00</del>
                          <p class="price">$12.00</p>
                        </div>

                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>



            <div class="product-box">

             

              <div class="product-minimal">

                <div class="product-showcase">

                  <h2 class="title">New Arrivals</h2>

                  <div class="showcase-wrapper has-scrollbar">

                    <div class="showcase-container">

                      <div class="showcase">

                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/clothes-1.jpg" alt="relaxed short full sleeve t-shirt" width="70" class="showcase-img" />
                        </a>

                        <div class="showcase-content">

                          <a href="#">
                            <h4 class="showcase-title">Relaxed Short full Sleeve T-Shirt</h4>
                          </a>

                          <a href="#" class="showcase-category">Clothes</a>

                          <div class="price-box">
                            <p class="price">$45.00</p>
                            <del>$12.00</del>
                          </div>

                        </div>

                      </div>

                      <div class="showcase">
                      
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/clothes-2.jpg" alt="girls pink embro design top" class="showcase-img" width="70" />
                        </a>
                      
                        <div class="showcase-content">
                      
                          <a href="#">
                            <h4 class="showcase-title">Girls pnk Embro design Top</h4>
                          </a>
                      
                          <a href="#" class="showcase-category">Clothes</a>
                      
                          <div class="price-box">
                            <p class="price">$61.00</p>
                            <del>$9.00</del>
                          </div>
                      
                        </div>
                      
                      </div>

                      <div class="showcase">
                      
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/clothes-3.jpg" alt="black floral wrap midi skirt" class="showcase-img"
                            width="70" />
                        </a>
                      
                        <div class="showcase-content">
                      
                          <a href="#">
                            <h4 class="showcase-title">Black Floral Wrap Midi Skirt</h4>
                          </a>
                      
                          <a href="#" class="showcase-category">Clothes</a>
                      
                          <div class="price-box">
                            <p class="price">$76.00</p>
                            <del>$25.00</del>
                          </div>
                      
                        </div>
                      
                      </div>

                      <div class="showcase">
                      
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/shirt-1.jpg" alt="pure garment dyed cotton shirt" class="showcase-img"
                            width="70" />
                        </a>
                      
                        <div class="showcase-content">
                      
                          <a href="#">
                            <h4 class="showcase-title">Pure Garment Dyed Cotton Shirt</h4>
                          </a>
                      
                          <a href="#" class="showcase-category">Mens Fashion</a>
                      
                          <div class="price-box">
                            <p class="price">$68.00</p>
                            <del>$31.00</del>
                          </div>
                      
                        </div>
                      
                      </div>

                    </div>

                    <div class="showcase-container">
                    
                      <div class="showcase">
                    
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/jacket-5.jpg" alt="men yarn fleece full-zip jacket" class="showcase-img"
                            width="70" />
                        </a>
                    
                        <div class="showcase-content">
                    
                          <a href="#">
                            <h4 class="showcase-title">MEN Yarn Fleece Full-Zip Jacket</h4>
                          </a>
                    
                          <a href="#" class="showcase-category">Winter wear</a>
                    
                          <div class="price-box">
                            <p class="price">$61.00</p>
                            <del>$11.00</del>
                          </div>
                    
                        </div>
                    
                      </div>
                    
                      <div class="showcase">
                    
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/jacket-1.jpg" alt="mens winter leathers jackets" class="showcase-img"
                            width="70" />
                        </a>
                    
                        <div class="showcase-content">
                    
                          <a href="#">
                            <h4 class="showcase-title">Mens Winter Leathers Jackets</h4>
                          </a>
                    
                          <a href="#" class="showcase-category">Winter wear</a>
                    
                          <div class="price-box">
                            <p class="price">$32.00</p>
                            <del>$20.00</del>
                          </div>
                    
                        </div>
                    
                      </div>
                    
                      <div class="showcase">
                    
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/jacket-3.jpg" alt="mens winter leathers jackets" class="showcase-img"
                            width="70" />
                        </a>
                    
                        <div class="showcase-content">
                    
                          <a href="#">
                            <h4 class="showcase-title">Mens Winter Leathers Jackets</h4>
                          </a>
                    
                          <a href="#" class="showcase-category">Jackets</a>
                    
                          <div class="price-box">
                            <p class="price">$50.00</p>
                            <del>$25.00</del>
                          </div>
                    
                        </div>
                    
                      </div>
                    
                      <div class="showcase">
                    
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/shorts-1.jpg" alt="better basics french terry sweatshorts" class="showcase-img"
                            width="70" />
                        </a>
                    
                        <div class="showcase-content">
                    
                          <a href="#">
                            <h4 class="showcase-title">Better Basics French Terry Sweatshorts</h4>
                          </a>
                    
                          <a href="#" class="showcase-category">Shorts</a>
                    
                          <div class="price-box">
                            <p class="price">$20.00</p>
                            <del>$10.00</del>
                          </div>
                    
                        </div>
                    
                      </div>
                    
                    </div>

                  </div>

                </div>

                <div class="product-showcase">
                
                  <h2 class="title">Trending</h2>
                
                  <div class="showcase-wrapper  has-scrollbar">
                
                    <div class="showcase-container">
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/sports-1.jpg" alt="running & trekking shoes - white" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Running & Trekking Shoes - White</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Sports</a>
                
                          <div class="price-box">
                            <p class="price">$49.00</p>
                            <del>$15.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/sports-2.jpg" alt="trekking & running shoes - black" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Trekking & Running Shoes - black</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Sports</a>
                
                          <div class="price-box">
                            <p class="price">$78.00</p>
                            <del>$36.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/party-wear-1.jpg" alt="womens party wear shoes" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Womens Party Wear Shoes</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Party wear</a>
                
                          <div class="price-box">
                            <p class="price">$94.00</p>
                            <del>$42.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/sports-3.jpg" alt="sports claw women's shoes" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Sports Claw Women's Shoes</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Sports</a>
                
                          <div class="price-box">
                            <p class="price">$54.00</p>
                            <del>$65.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                    </div>
                
                    <div class="showcase-container">
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/sports-6.jpg" alt="air tekking shoes - white" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Air Trekking Shoes - white</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Sports</a>
                
                          <div class="price-box">
                            <p class="price">$52.00</p>
                            <del>$55.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/shoe-3.jpg" alt="Boot With Suede Detail" class="showcase-img" width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Boot With Suede Detail</h4>
                          </a>
                
                          <a href="#" class="showcase-category">boots</a>
                
                          <div class="price-box">
                            <p class="price">$20.00</p>
                            <del>$30.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/shoe-1.jpg" alt="men's leather formal wear shoes" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Men's Leather Formal Wear shoes</h4>
                          </a>
                
                          <a href="#" class="showcase-category">formal</a>
                
                          <div class="price-box">
                            <p class="price">$56.00</p>
                            <del>$78.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/shoe-2.jpg" alt="casual men's brown shoes" class="showcase-img" width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Casual Men's Brown shoes</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Casual</a>
                
                          <div class="price-box">
                            <p class="price">$50.00</p>
                            <del>$55.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                    </div>
                
                  </div>
                
                </div>

                <div class="product-showcase">
                
                  <h2 class="title">Top Rated</h2>
                
                  <div class="showcase-wrapper  has-scrollbar">
                
                    <div class="showcase-container">
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/watch-3.jpg" alt="pocket watch leather pouch" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Pocket Watch Leather Pouch</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Watches</a>
                
                          <div class="price-box">
                            <p class="price">$50.00</p>
                            <del>$34.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/jewellery-3.jpg" alt="silver deer heart necklace" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Silver Deer Heart Necklace</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Jewellery</a>
                
                          <div class="price-box">
                            <p class="price">$84.00</p>
                            <del>$30.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/perfume.jpg" alt="titan 100 ml womens perfume" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Titan 100 Ml Womens Perfume</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Perfume</a>
                
                          <div class="price-box">
                            <p class="price">$42.00</p>
                            <del>$10.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/belt.jpg" alt="men's leather reversible belt" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Men's Leather Reversible Belt</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Belt</a>
                
                          <div class="price-box">
                            <p class="price">$24.00</p>
                            <del>$10.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                    </div>
                
                    <div class="showcase-container">
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/jewellery-2.jpg" alt="platinum zircon classic ring" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">platinum Zircon Classic Ring</h4>
                          </a>
                
                          <a href="#" class="showcase-category">jewellery</a>
                
                          <div class="price-box">
                            <p class="price">$62.00</p>
                            <del>$65.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/watch-1.jpg" alt="smart watche vital plus" class="showcase-img" width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Smart watche Vital Plus</h4>
                          </a>
                
                          <a href="#" class="showcase-category">Watches</a>
                
                          <div class="price-box">
                            <p class="price">$56.00</p>
                            <del>$78.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/shampoo.jpg" alt="shampoo conditioner packs" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">shampoo conditioner packs</h4>
                          </a>
                
                          <a href="#" class="showcase-category">cosmetics</a>
                
                          <div class="price-box">
                            <p class="price">$20.00</p>
                            <del>$30.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                      <div class="showcase">
                
                        <a href="#" class="showcase-img-box">
                          <img src="assets/images/products/jewellery-1.jpg" alt="rose gold peacock earrings" class="showcase-img"
                            width="70" />
                        </a>
                
                        <div class="showcase-content">
                
                          <a href="#">
                            <h4 class="showcase-title">Rose Gold Peacock Earrings</h4>
                          </a>
                
                          <a href="#" class="showcase-category">jewellery</a>
                
                          <div class="price-box">
                            <p class="price">$20.00</p>
                            <del>$30.00</del>
                          </div>
                
                        </div>
                
                      </div>
                
                    </div>
                
                  </div>
                
                </div>

              </div>



           

              <div class="product-featured">

                <h2 class="title">Deal of the day</h2>

                <div class="showcase-wrapper has-scrollbar">

                  <div class="showcase-container">

                    <div class="showcase">
                      
                      <div class="showcase-banner">
                        <img src="assets/images/products/shampoo.jpg" alt="shampoo, conditioner & facewash packs" class="showcase-img" />
                      </div>

                      <div class="showcase-content">
                        
                        <div class="showcase-rating">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star-outline"></ion-icon>
                          <ion-icon name="star-outline"></ion-icon>
                        </div>

                        <a href="#">
                          <h3 class="showcase-title">shampoo, conditioner & facewash packs</h3>
                        </a>

                        <p class="showcase-desc">
                          Lorem ipsum dolor sit amet consectetur Lorem ipsum
                          dolor dolor sit amet consectetur Lorem ipsum dolor
                        </p>

                        <div class="price-box">
                          <p class="price">$150.00</p>

                          <del>$200.00</del>
                        </div>

                        <button class="add-cart-btn">add to cart</button>

                        <div class="showcase-status">
                          <div class="wrapper">
                            <p>
                              already sold: <b>20</b>
                            </p>

                            <p>
                              available: <b>40</b>
                            </p>
                          </div>

                          <div class="showcase-status-bar"></div>
                        </div>

                        <div class="countdown-box">

                          <p class="countdown-desc">
                            Hurry Up! Offer ends in:
                          </p>

                          <div class="countdown">

                            <div class="countdown-content">

                              <p class="display-number">360</p>

                              <p class="display-text">Days</p>

                            </div>

                            <div class="countdown-content">
                              <p class="display-number">24</p>
                              <p class="display-text">Hours</p>
                            </div>

                            <div class="countdown-content">
                              <p class="display-number">59</p>
                              <p class="display-text">Min</p>
                            </div>

                            <div class="countdown-content">
                              <p class="display-number">00</p>
                              <p class="display-text">Sec</p>
                            </div>

                          </div>

                        </div>

                      </div>

                    </div>

                  </div>

                  <div class="showcase-container">
                  
                    <div class="showcase">
                  
                      <div class="showcase-banner">
                        <img src="assets/images/products/jewellery-1.jpg" alt="Rose Gold diamonds Earring" class="showcase-img" />
                      </div>
                  
                      <div class="showcase-content">
                  
                        <div class="showcase-rating">
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star"></ion-icon>
                          <ion-icon name="star-outline"></ion-icon>
                          <ion-icon name="star-outline"></ion-icon>
                        </div>
                  
                        <h3 class="showcase-title">
                          <a href="#" class="showcase-title">Rose Gold diamonds Earring</a>
                        </h3>
                  
                        <p class="showcase-desc">
                          Lorem ipsum dolor sit amet consectetur Lorem ipsum
                          dolor dolor sit amet consectetur Lorem ipsum dolor
                        </p>
                  
                        <div class="price-box">
                          <p class="price">$1990.00</p>
                          <del>$2000.00</del>
                        </div>
                  
                        <button class="add-cart-btn">add to cart</button>
                  
                        <div class="showcase-status">
                          <div class="wrapper">
                            <p> already sold: <b>15</b> </p>
                  
                            <p> available: <b>40</b> </p>
                          </div>
                  
                          <div class="showcase-status-bar"></div>
                        </div>
                  
                        <div class="countdown-box">
                  
                          <p class="countdown-desc">Hurry Up! Offer ends in:</p>
                  
                          <div class="countdown">
                            <div class="countdown-content">
                              <p class="display-number">360</p>
                              <p class="display-text">Days</p>
                            </div>
                  
                            <div class="countdown-content">
                              <p class="display-number">24</p>
                              <p class="display-text">Hours</p>
                            </div>
                  
                            <div class="countdown-content">
                              <p class="display-number">59</p>
                              <p class="display-text">Min</p>
                            </div>
                  
                            <div class="countdown-content">
                              <p class="display-number">00</p>
                              <p class="display-text">Sec</p>
                            </div>
                          </div>
                  
                        </div>
                  
                      </div>
                  
                    </div>
                  
                  </div>

                </div>

              </div>



             

              <div class="product-main">

                <h2 class="title">New Products</h2>

                <div class="product-grid">

                  <div class="showcase">

                    <div class="showcase-banner">

                      <img src="assets/images/products/jacket-3.jpg" alt="Mens Winter Leathers Jackets" width="300" class="product-img default" />
                      <img src="assets/images/products/jacket-4.jpg" alt="Mens Winter Leathers Jackets" width="300" class="product-img hover" />

                      <p class="showcase-badge">15%</p>

                      <div class="showcase-actions">

                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>

                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>

                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>

                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>

                      </div>

                    </div>

                    <div class="showcase-content">

                      <a href="#" class="showcase-category">jacket</a>

                      <a href="#">
                        <h3 class="showcase-title">Mens Winter Leathers Jackets</h3>
                      </a>

                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>

                      <div class="price-box">
                        <p class="price">$48.00</p>
                        <del>$75.00</del>
                      </div>

                    </div>

                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/shirt-1.jpg" alt="Pure Garment Dyed Cotton Shirt" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/shirt-2.jpg" alt="Pure Garment Dyed Cotton Shirt" class="product-img hover"
                        width="300" />
                  
                      <p class="showcase-badge angle black">sale</p>
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">shirt</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Pure Garment Dyed Cotton Shirt</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$45.00</p>
                        <del>$56.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/jacket-5.jpg" alt="MEN Yarn Fleece Full-Zip Jacket" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/jacket-6.jpg" alt="MEN Yarn Fleece Full-Zip Jacket" class="product-img hover"
                        width="300" />
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">Jacket</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">MEN Yarn Fleece Full-Zip Jacket</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$58.00</p>
                        <del>$65.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/clothes-3.jpg" alt="Black Floral Wrap Midi Skirt" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/clothes-4.jpg" alt="Black Floral Wrap Midi Skirt" class="product-img hover"
                        width="300" />
                  
                      <p class="showcase-badge angle pink">new</p>
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">skirt</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Black Floral Wrap Midi Skirt</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$25.00</p>
                        <del>$35.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/shoe-2.jpg" alt="Casual Men's Brown shoes" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/shoe-2_1.jpg" alt="Casual Men's Brown shoes" class="product-img hover"
                        width="300" />
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">casual</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Casual Men's Brown shoes</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$99.00</p>
                        <del>$105.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/watch-3.jpg" alt="Pocket Watch Leather Pouch" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/watch-4.jpg" alt="Pocket Watch Leather Pouch" class="product-img hover"
                        width="300" />
                  
                      <p class="showcase-badge angle black">sale</p>
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">watches</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Pocket Watch Leather Pouch</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$150.00</p>
                        <del>$170.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/watch-1.jpg" alt="Smart watche Vital Plus" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/watch-2.jpg" alt="Smart watche Vital Plus" class="product-img hover" width="300" />
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">watches</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Smart watche Vital Plus</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$100.00</p>
                        <del>$120.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/party-wear-1.jpg" alt="Womens Party Wear Shoes" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/party-wear-2.jpg" alt="Womens Party Wear Shoes" class="product-img hover"
                        width="300" />
                  
                      <p class="showcase-badge angle black">sale</p>
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">party wear</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Womens Party Wear Shoes</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$25.00</p>
                        <del>$30.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/jacket-1.jpg" alt="Mens Winter Leathers Jackets" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/jacket-2.jpg" alt="Mens Winter Leathers Jackets" class="product-img hover"
                        width="300" />
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">jacket</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Mens Winter Leathers Jackets</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$32.00</p>
                        <del>$45.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/sports-2.jpg" alt="Trekking & Running Shoes - black" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/sports-4.jpg" alt="Trekking & Running Shoes - black" class="product-img hover"
                        width="300" />
                  
                      <p class="showcase-badge angle black">sale</p>
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">sports</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Trekking & Running Shoes - black</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$58.00</p>
                        <del>$64.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/shoe-1.jpg" alt="Men's Leather Formal Wear shoes" class="product-img default"
                        width="300" />
                      <img src="assets/images/products/shoe-1_1.jpg" alt="Men's Leather Formal Wear shoes" class="product-img hover"
                        width="300" />
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">formal</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Men's Leather Formal Wear shoes</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$50.00</p>
                        <del>$65.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                  <div class="showcase">
                  
                    <div class="showcase-banner">
                      <img src="assets/images/products/shorts-1.jpg" alt="Better Basics French Terry Sweatshorts"
                        class="product-img default" width="300" />
                      <img src="assets/images/products/shorts-2.jpg" alt="Better Basics French Terry Sweatshorts"
                        class="product-img hover" width="300" />
                  
                      <p class="showcase-badge angle black">sale</p>
                  
                      <div class="showcase-actions">
                        <button class="btn-action">
                          <ion-icon name="heart-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="eye-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="repeat-outline"></ion-icon>
                        </button>
                  
                        <button class="btn-action">
                          <ion-icon name="bag-add-outline"></ion-icon>
                        </button>
                      </div>
                    </div>
                  
                    <div class="showcase-content">
                      <a href="#" class="showcase-category">shorts</a>
                  
                      <h3>
                        <a href="#" class="showcase-title">Better Basics French Terry Sweatshorts</a>
                      </h3>
                  
                      <div class="showcase-rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                      </div>
                  
                      <div class="price-box">
                        <p class="price">$78.00</p>
                        <del>$85.00</del>
                      </div>
                  
                    </div>
                  
                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>





       

        <div>

          <div class="container">

            <div class="testimonials-box">

            

              <div class="testimonial">

                <h2 class="title">testimonial</h2>

                <div class="testimonial-card">

                  <img src="assets/images/testimonial-1.jpg" alt="alan doe" class="testimonial-banner" width="80" height="80" />

                  <p class="testimonial-name">Jassa Singh</p>

                  <p class="testimonial-title">CEO & Founder Invision</p>

                  <img src="assets/images/icons/quotes.svg" alt="quotation" class="quotation-img" width="26" />

                  <p class="testimonial-desc">
                    Lorem ipsum dolor sit amet consectetur Lorem ipsum
                    dolor dolor sit amet.
                  </p>

                </div>

              </div>



             

              <div class="cta-container">

                <img src="assets/images/cta-banner.jpg" alt="summer collection" class="cta-banner" />

                <a href="#" class="cta-content">

                  <p class="discount">25% Discount</p>

                  <h2 class="cta-title">Summer collection</h2>

                  <p class="cta-text">Starting @ $10</p>

                  <button class="cta-btn">Shop now</button>

                </a>

              </div>



             

              <div class="service">

                <h2 class="title">Our Services</h2>

                <div class="service-container">

                  <a href="#" class="service-item">

                    <div class="service-icon">
                      <ion-icon name="boat-outline"></ion-icon>
                    </div>

                    <div class="service-content">

                      <h3 class="service-title">Worldwide Delivery</h3>
                      <p class="service-desc">For Order Over $100</p>

                    </div>

                  </a>

                  <a href="#" class="service-item">
                  
                    <div class="service-icon">
                      <ion-icon name="rocket-outline"></ion-icon>
                    </div>
                  
                    <div class="service-content">
                  
                      <h3 class="service-title">Next Day delivery</h3>
                      <p class="service-desc">UK Orders Only</p>
                  
                    </div>
                  
                  </a>

                  <a href="#" class="service-item">
                  
                    <div class="service-icon">
                      <ion-icon name="call-outline"></ion-icon>
                    </div>
                  
                    <div class="service-content">
                  
                      <h3 class="service-title">Best Online Support</h3>
                      <p class="service-desc">Hours: 8AM - 11PM</p>
                  
                    </div>
                  
                  </a>

                  <a href="#" class="service-item">
                  
                    <div class="service-icon">
                      <ion-icon name="arrow-undo-outline"></ion-icon>
                    </div>
                  
                    <div class="service-content">
                  
                      <h3 class="service-title">Return Policy</h3>
                      <p class="service-desc">Easy & Free Return</p>
                  
                    </div>
                  
                  </a>

                  <a href="#" class="service-item">
                  
                    <div class="service-icon">
                      <ion-icon name="ticket-outline"></ion-icon>
                    </div>
                  
                    <div class="service-content">
                  
                      <h3 class="service-title">30% money back</h3>
                      <p class="service-desc">For Order Over $100</p>
                  
                    </div>
                  
                  </a>

                </div>

              </div>

            </div>

          </div>

        </div>





        <div class="blog">

          <div class="container">

            <div class="blog-container has-scrollbar">

              <div class="blog-card">

                <a href="#">
                  <img src="assets/images/blog-1.jpg" alt="Clothes Retail KPIs 2021 Guide for Clothes Executives" width="300" class="blog-banner" />
                </a>

                <div class="blog-content">

                  <a href="#" class="blog-category">Fashion</a>

                  <a href="#">
                    <h3 class="blog-title">Clothes Retail KPIs 2021 Guide for Clothes Executives.</h3>
                  </a>

                  <p class="blog-meta">
                    By <cite>Mr Admin</cite> / <time datetime="2022-04-06">Apr 06, 2022</time>
                  </p>

                </div>

              </div>

              <div class="blog-card">
              
                <a href="#">
                  <img src="assets/images/blog-2.jpg" alt="Curbside fashion Trends: How to Win the Pickup Battle."
                    class="blog-banner" width="300" />
                </a>
              
                <div class="blog-content">
              
                  <a href="#" class="blog-category">Clothes</a>
              
                  <h3>
                    <a href="#" class="blog-title">Curbside fashion Trends: How to Win the Pickup Battle.</a>
                  </h3>
              
                  <p class="blog-meta">
                    By <cite>Mr Robin</cite> / <time datetime="2022-01-18">Jan 18, 2022</time>
                  </p>
              
                </div>
              
              </div>

              <div class="blog-card">
              
                <a href="#">
                  <img src="assets/images/blog-3.jpg" alt="EBT vendors: Claim Your Share of SNAP Online Revenue."
                    class="blog-banner" width="300" />
                </a>
              
                <div class="blog-content">
              
                  <a href="#" class="blog-category">Shoes</a>
              
                  <h3>
                    <a href="#" class="blog-title">EBT vendors: Claim Your Share of SNAP Online Revenue.</a>
                  </h3>
              
                  <p class="blog-meta">
                    By <cite>Mr Selsa</cite> / <time datetime="2022-02-10">Feb 10, 2022</time>
                  </p>
              
                </div>
              
              </div>

              <div class="blog-card">
              
                <a href="#">
                  <img src="assets/images/blog-4.jpg" alt="Curbside fashion Trends: How to Win the Pickup Battle."
                    class="blog-banner" width="300" />
                </a>
              
                <div class="blog-content">
              
                  <a href="#" class="blog-category">Electronics</a>
              
                  <h3>
                    <a href="#" class="blog-title">Curbside fashion Trends: How to Win the Pickup Battle.</a>
                  </h3>
              
                  <p class="blog-meta">
                    By <cite>Mr Pawar</cite> / <time datetime="2022-03-15">Mar 15, 2022</time>
                  </p>
              
                </div>
              
              </div>

            </div>

          </div>

        </div>

        </main>





       
        <footer>

        <div class="footer-category">

          <div class="container">

            <h2 class="footer-category-title">Brand directory</h2>

            <div class="footer-category-box">

              <h3 class="category-box-title">Fashion :</h3>

              <a href="#" class="footer-category-link">T-shirt</a>
              <a href="#" class="footer-category-link">Shirts</a>
              <a href="#" class="footer-category-link">shorts & jeans</a>
              <a href="#" class="footer-category-link">jacket</a>
              <a href="#" class="footer-category-link">dress & frock</a>
              <a href="#" class="footer-category-link">innerwear</a>
              <a href="#" class="footer-category-link">hosiery</a>

            </div>

            <div class="footer-category-box">
              <h3 class="category-box-title">footwear :</h3>
            
              <a href="#" class="footer-category-link">sport</a>
              <a href="#" class="footer-category-link">formal</a>
              <a href="#" class="footer-category-link">Boots</a>
              <a href="#" class="footer-category-link">casual</a>
              <a href="#" class="footer-category-link">cowboy shoes</a>
              <a href="#" class="footer-category-link">safety shoes</a>
              <a href="#" class="footer-category-link">Party wear shoes</a>
              <a href="#" class="footer-category-link">Branded</a>
              <a href="#" class="footer-category-link">Firstcopy</a>
              <a href="#" class="footer-category-link">Long shoes</a>
            </div>

            <div class="footer-category-box">
              <h3 class="category-box-title">jewellery :</h3>
            
              <a href="#" class="footer-category-link">Necklace</a>
              <a href="#" class="footer-category-link">Earrings</a>
              <a href="#" class="footer-category-link">Couple rings</a>
              <a href="#" class="footer-category-link">Pendants</a>
              <a href="#" class="footer-category-link">Crystal</a>
              <a href="#" class="footer-category-link">Bangles</a>
              <a href="#" class="footer-category-link">bracelets</a>
              <a href="#" class="footer-category-link">nosepin</a>
              <a href="#" class="footer-category-link">chain</a>
              <a href="#" class="footer-category-link">Earrings</a>
              <a href="#" class="footer-category-link">Couple rings</a>
            </div>

            <div class="footer-category-box">
              <h3 class="category-box-title">cosmetics :</h3>
            
              <a href="#" class="footer-category-link">Shampoo</a>
              <a href="#" class="footer-category-link">Bodywash</a>
              <a href="#" class="footer-category-link">Facewash</a>
              <a href="#" class="footer-category-link">makeup kit</a>
              <a href="#" class="footer-category-link">liner</a>
              <a href="#" class="footer-category-link">lipstick</a>
              <a href="#" class="footer-category-link">prefume</a>
              <a href="#" class="footer-category-link">Body soap</a>
              <a href="#" class="footer-category-link">scrub</a>
              <a href="#" class="footer-category-link">hair gel</a>
              <a href="#" class="footer-category-link">hair colors</a>
              <a href="#" class="footer-category-link">hair dye</a>
              <a href="#" class="footer-category-link">sunscreen</a>
              <a href="#" class="footer-category-link">skin loson</a>
              <a href="#" class="footer-category-link">liner</a>
              <a href="#" class="footer-category-link">lipstick</a>
            </div>

          </div>

        </div>

        <div class="footer-nav">

          <div class="container">

            <ul class="footer-nav-list">

              <li class="footer-nav-item">
                <h2 class="nav-title">Popular Categories</h2>
              </li>

              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Fashion</a>
              </li>

              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Electronic</a>
              </li>

              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Cosmetic</a>
              </li>

              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Health</a>
              </li>

              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Watches</a>
              </li>

            </ul>

            <ul class="footer-nav-list">
            
              <li class="footer-nav-item">
                <h2 class="nav-title">Products</h2>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Prices drop</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">New products</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Best sales</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Contact us</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Sitemap</a>
              </li>
            
            </ul>

            <ul class="footer-nav-list">
            
              <li class="footer-nav-item">
                <h2 class="nav-title">Our Company</h2>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Delivery</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Legal Notice</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Terms and conditions</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">About us</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Secure payment</a>
              </li>
            
            </ul>

            <ul class="footer-nav-list">
            
              <li class="footer-nav-item">
                <h2 class="nav-title">Services</h2>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Prices drop</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">New products</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Best sales</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Contact us</a>
              </li>
            
              <li class="footer-nav-item">
                <a href="#" class="footer-nav-link">Sitemap</a>
              </li>
            
            </ul>

            <ul class="footer-nav-list">

              <li class="footer-nav-item">
                <h2 class="nav-title">Contact</h2>
              </li>

              <li class="footer-nav-item flex">
                <div class="icon-box">
                  <ion-icon name="location-outline"></ion-icon>
                </div>

                <address class="content">
                  1266 Ludhiana
                  Punjab, India
                </address>
              </li>

              <li class="footer-nav-item flex">
                <div class="icon-box">
                  <ion-icon name="call-outline"></ion-icon>
                </div>

                <a href="tel:+607936-8058" class="footer-nav-link">(000) 000-0000</a>
              </li>

              <li class="footer-nav-item flex">
                <div class="icon-box">
                  <ion-icon name="mail-outline"></ion-icon>
                </div>

                <a href="mailto:example@gmail.com" class="footer-nav-link">example@gmail.com</a>
              </li>

            </ul>

            <ul class="footer-nav-list">

              <li class="footer-nav-item">
                <h2 class="nav-title">Follow Us</h2>
              </li>

              <li>
                <ul class="social-link">

                  <li class="footer-nav-item">
                    <a href="#" class="footer-nav-link">
                      <ion-icon name="logo-facebook"></ion-icon>
                    </a>
                  </li>

                  <li class="footer-nav-item">
                    <a href="#" class="footer-nav-link">
                      <ion-icon name="logo-twitter"></ion-icon>
                    </a>
                  </li>

                  <li class="footer-nav-item">
                    <a href="#" class="footer-nav-link">
                      <ion-icon name="logo-linkedin"></ion-icon>
                    </a>
                  </li>

                  <li class="footer-nav-item">
                    <a href="#" class="footer-nav-link">
                      <ion-icon name="logo-instagram"></ion-icon>
                    </a>
                  </li>

                </ul>
              </li>

            </ul>

          </div>

        </div>

        <div class="footer-bottom">

          <div class="container">

            <img src="assets/images/payment.png" alt="payment method" class="payment-img" />

            <p class="copyright">
              Copyright &copy; <a href="#">Ajooni</a> all rights reserved.
            </p>

          </div>

        </div>

        </footer>

4. Now guys please add the below code inside angularshop/src/index.html file to styles and scripts:

...
<head>
 ...
     <!--
    - favicon
    -->
    <link rel="shortcut icon" href="assets/images/logo/favicon.ico" type="image/x-icon">

    <!--
      - custom css link
    -->
    <link rel="stylesheet" href="assets/css/style-prefix.css">

    <!--
      - google font link
    -->
    <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=Poppins:wght@300;400;500;600;700;800;900&display=swap"
      rel="stylesheet">
 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>
...

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

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

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

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

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

Jassa

Thanks

Hello to all, welcome to therichpost.com. In this post, I will tell you, Create Your First Ecommerce Website with Angular 15.

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

1. Angular 15 Tutorials

Here is the code snippet and please use carefully:

1. Very first guys, here are common basics steps to add angular 15 application on your machine and also we must have latest nodejs version(14.17.0) installed for angular 15:

npm install -g @angular/cli

ng new angularform // Set Angular 15 Application on your pc

cd angularform // Go inside project folder

2. Now run below commands to set bootstrap 5 modules into our angular 15 application for responsiveness (optional):

npm install bootstrap

npm i @popperjs/core

npm i bootstrap-icons

3. Now friends we just need to add below code into angularform/angular.json file (optional):

"styles": [
              ...
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-icons/font/bootstrap-icons.css"
          ],
"scripts": [
              ...
                "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
           ]

4. Finally we will add below code into our angularform/src/app/app.component.html file:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Shop</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        Categories
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li><a class="dropdown-item" href="#">Men</a></li>
        <li><a class="dropdown-item" href="#">Women</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">Kids</a></li>
      </ul>
      </li>
      <li class="nav-item dropdown">
      <button type="button" class="btn btn-secondary position-relative" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
        <i class="bi bi-cart"></i>
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
          2+
          <span class="visually-hidden">unread messages</span>
        </span>
        </button>
      </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>

  <!--Mini Cart-->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Mini Cart</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="list-group">
      <li class="list-group-item"><img width="30" class="img-fluid me-1" src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/8.jpg" >Item 1 <i class="bi bi-x-circle-fill float-end"></i></li>
      <li class="list-group-item"><img width="30" class="img-fluid me-1" src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/7.jpg" >Item 2 <i class="bi bi-x-circle-fill float-end"></i></li>
      </ul>
      <button type="button" class="btn btn-primary mt-2 float-end">Checkout</button>
  </div>
  </div>
  <!--Mini Cart-->
  <div class="container-fluid" style="background-color: rgb(58, 175, 210);">
  <div class="container d-lg-flex justify-content-between align-items-center ps-lg-4">

    <div class="pb-lg-5 mb-lg-5 text-center text-lg-start text-lg-nowrap fw-bold">
      <h3 class="h2 text-light fw-bold pb-1 from-start">Has just arrived!</h3>
      <h2 class="text-light fw-bold display-5 from-start delay-1">Huge Summer Collection</h2>
      <p class="fs-lg text-light pb-3 from-start delay-2">Swimwear, Tops, Shorts, Sunglasses &amp; much more...</p>
      <div class="d-table scale-up delay-4 mx-auto mx-lg-0"><a class="btn btn-primary" href="shop-grid-ls.html">Shop Now<i class="ci-arrow-right ms-2 me-n1"></i></a></div>
    </div>
    
    <img class="img-fluid" src="fullwidthimage">
  </div>
  </div>

  <div class="container mt-5">
  <h3>Latest Products</h3>
  <div class="card-group row">
    <div class="card col-sm-4">
      <img src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/8.jpg" class="card-img-top" alt="...">
      <div class="card-body">
      <h5 class="card-title">Item 1</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
      <button class="btn btn-primary" type="button">Add to cart</button>
      </div>
    </div>
    <div class="card col-sm-4">
      <img src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/7.jpg" class="card-img-top" alt="...">
      <div class="card-body">
      <h5 class="card-title">Item 2</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <button class="btn btn-primary" type="button">Add to cart</button>
      </div>
    </div>
    <div class="card col-sm-4">
      <img src="https://therichpost.com/testjsonapi/wp-content/themes/testjsonapi/assets/images/items/6.jpg" class="card-img-top" alt="...">
      <div class="card-body">
      <h5 class="card-title">Item 3</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
      <button class="btn btn-primary" type="button">Add to cart</button>
      </div>
    </div>
    </div>
  
  </div>

  <div class="container-fluid mt-5" style="background-color: rgb(245, 177, 176);">
  <div class="container d-lg-flex justify-content-between align-items-center ps-lg-4">

    <div class="pb-lg-5 mb-lg-5 text-center text-lg-start text-lg-nowrap fw-bold">
      <h3 class="h2 text-light fw-bold pb-1 from-start">Hurry up! Limited time offer.</h3>
      <h2 class="text-light fw-bold display-5 from-start delay-1">Women Sportswear Sale</h2>
      <div class="d-table scale-up delay-4 mx-auto mx-lg-0"><a class="btn btn-primary" href="shop-grid-ls.html">Shop Now<i class="ci-arrow-right ms-2 me-n1"></i></a></div>
    </div>
    
    <img class="img-fluid" src="fullwidthimage">
  </div>
  </div>
  <div class="container-fluid bg-secondary p-3">
    <div class="container">
      <div class="fs-xs text-light opacity-50 text-center text-md-start">© All rights reserved. Made by <a class="text-light" href="https://therichpost.com/" target="_blank" rel="noopener">therichpost</a></div>
    </div>
  </div>

Now we are done friends and please run ng serve command to check the output in browser(locahost:4200) 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 please watch video above.

Guys 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