<?php
include "include/header.php";
?>

  <header class="header">

    <!-- ===== Header-1 Area (Start) ===== -->
    <div class="header-1">

      <!-- == Social == -->
      <ul class="social-contacts">
        <li><a href="#" class="fab fa-facebook-f"></a></li>
        <li><a href="#" class="fab fa-twitter"></a></li>
        <li><a href="#" class="fab fa-instagram"></a></li>
        <li><a href="#" class="fab fa-linkedin"></a></li>
      </ul>

    </div>
    <!-- ===== Header-1 Area (End) ===== -->

    <!-- ===== Header-2 Area (Start) ===== -->
    <div class="header-2">

      <!-- == Logo == -->
      <a class="logo" href="../../index-2.html">
        <img src="../../assets/images/Logo/Logo.png" alt="logo">
      </a>

      <div class="container">

        <!-- == Navbar == -->
        <nav class="navbar">

          <a class="nav-btn" href="../../index-2.html">home</a>

          <div class="dropdown-menu">
            <button class="nav-btn">about</button>
            <div class="dropdown-content">
              <a href="../About/About.html">about us</a>
              <a href="../About/Testimonials.html">testimonials</a>
              <a href="../About/FAQs.html">fAQs</a>
            </div>
          </div>

          <div class="dropdown-menu">
            <button class="nav-btn">Pages</button>
            <div class="dropdown-content">
              <a href="../Pages/Point-Table.html">Point Table</a>
              <a href="../Pages/Fixtures.html">Fixtures</a>
              <a href="../Pages/Fixture-Single.html">Fixture Single</a>
              <a href="../Pages/Portfolio.html">Portfolio</a>
              <a href="../Pages/Portfolio-Single.html">Portfolio Single</a>
              <a href="../Pages/Sponsors.html">Sponsors</a>
              <a href="../Pages/Login.html">login</a>
              <a href="../Pages/Register.html">register</a>
              <a href="../Pages/Reset-Password.html">forgot Password</a>
            </div>
          </div>

          <div class="dropdown-menu">
            <button class="nav-btn">team</button>
            <div class="dropdown-content">
              <a href="../Team/Team.html">team</a>
              <a href="../Team/Coaches.html">coaches</a>
              <a href="../Team/Coach-Single.html">coach single</a>
              <a href="../Team/Players.html">players</a>
              <a href="../Team/Player-Single.html">player single</a>
            </div>
          </div>

          <div class="dropdown-menu">
            <button class="nav-btn">Result</button>
            <div class="dropdown-content">
              <a href="../Result/Results.html">Results</a>
              <a href="../Result/Result-Single.html">Result Single</a>
            </div>
          </div>

          <div class="dropdown-menu">
            <button class="nav-btn">blog</button>
            <div class="dropdown-content">
              <a href="../Blog/Blog-Grid.html">blogs grid</a>
              <a href="../Blog/Blog-List.html">blogs list</a>
              <a href="../Blog/Blog-Single.html">blog Single</a>
            </div>
          </div>

          <div class="dropdown-menu">
            <button class="nav-btn">shop</button>
            <div class="dropdown-content">
              <a href="Shop-Grid.html">shop grid</a>
              <a href="Shop-List.html">shop list</a>
              <a href="Product-Single.html">product Single</a>
              <a href="Wishlist.html">wishlist</a>
              <a href="Cart.html">cart</a>
              <a href="Checkout.html">checkout</a>
            </div>
          </div>

          <a class="nav-btn" href="../Contact/Contact.html">contact</a>

        </nav> 

        <!-- == Icon Container == -->
        <div class="icon-container"> 
          <div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon -->
          <a href="Cart.html"><i class="icon fa-solid fa-cart-arrow-down"></i></a>
          <div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div>
        </div>

        <!-- == Search Container == -->
        <form class="search-container">
          <input type="search" id="search-bar" placeholder="search here" required> <!-- Search Input -->
          <button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
        </form>

      </div>

    </div>
    <!-- ===== Header-2 Area (End) ===== -->

    <!-- ===== Mobile Menu Area (Start) ===== -->
    <div class="mobile-menu"> 
    
      <nav class="mobile-navbar">

        <div class="nav-link">
          <div class="main-nav-link"> <a class="nav-btn" href="../../index-2.html">home</a> </div>
        </div>   

        <div class="nav-link">
          <div class="main-nav-link"> <div class="nav-btn">about</div> <i class="fas fa-plus"></i> </div>
          <div class="sub-nav-link">
            <a href="../About/About.html">about us</a>
            <a href="../About/Testimonials.html">testimonials</a>
            <a href="../About/FAQs.html">fAQs</a>
          </div>
        </div> 

        <div class="nav-link">
          <div class="main-nav-link"> <div class="nav-btn">pages</div> <i class="fas fa-plus"></i> </div>
          <div class="sub-nav-link">
            <a href="../Pages/Point-Table.html">Point Table</a>
            <a href="../Pages/Fixtures.html">Fixtures</a>
            <a href="../Pages/Fixture-Single.html">Fixture Single</a>
            <a href="../Pages/Portfolio.html">Portfolio</a>
            <a href="../Pages/Portfolio-Single.html">Portfolio Single</a>
            <a href="../Pages/Sponsors.html">Sponsors</a>
            <a href="../Pages/Login.html">login</a>
            <a href="../Pages/Register.html">register</a>
            <a href="../Pages/Reset-Password.html">forgot Password</a>
          </div>
        </div> 

        <div class="nav-link">
          <div class="main-nav-link"> <div class="nav-btn">team</div> <i class="fas fa-plus"></i> </div>
          <div class="sub-nav-link">
            <a href="../Team/Team.html">team</a>
            <a href="../Team/Coaches.html">coaches</a>
            <a href="../Team/Coach-Single.html">coach single</a>
            <a href="../Team/Players.html">players</a>
            <a href="../Team/Player-Single.html">player single</a>
          </div>
        </div> 

        <div class="nav-link">
          <div class="main-nav-link"> <div class="nav-btn">Result</div> <i class="fas fa-plus"></i> </div>
          <div class="sub-nav-link">
            <a href="../Result/Results.html">Results</a>
            <a href="../Result/Result-Single.html">Result Single</a>
          </div>
        </div> 

        <div class="nav-link">
          <div class="main-nav-link"> <div class="nav-btn">blog</div> <i class="fas fa-plus"></i> </div>
          <div class="sub-nav-link">
            <a href="../Blog/Blog-Grid.html">blogs grid</a>
            <a href="../Blog/Blog-List.html">blogs list</a>
            <a href="../Blog/Blog-Single.html">blog Single</a>
          </div>
        </div> 

        <div class="nav-link">
          <div class="main-nav-link"> <div class="nav-btn">Shop</div> <i class="fas fa-plus"></i> </div>
          <div class="sub-nav-link">
            <a href="Shop-Grid.html">shop grid</a>
            <a href="Shop-List.html">shop list</a>
            <a href="Product-Single.html">product Single</a>
            <a href="Wishlist.html">wishlist</a>
            <a href="Cart.html">cart</a>
            <a href="Checkout.html">checkout</a>
          </div>
        </div> 

        <div class="nav-link">
          <div class="main-nav-link"> <a class="nav-btn" href="../Contact/Contact.html">contact</a> </div>
        </div>  

      </nav> 
    
    </div>
    <!-- ===== Mobile Menu Area (End) ===== -->

  </header>
  <!-- ==================== Header Area (End) ==================== -->  



  <!-- ==================== Page-Title (Start) ==================== -->
  <div class="page-title">

    <div class="title">
      <h2>Shop Grid</h2>
    </div> 

    <div class="link">
      <a href="../../index-2.html">Home</a>
      <i class="fa-solid fa-angles-right"></i>
      <span class="page">Shop Grid</span>
    </div>

  </div>
  <!-- ==================== Page-Title (End) ==================== -->
  
  

  <!-- ==================== Shop-Grid Area (Start) ==================== -->
  <section class="shop">

    <!-- ========== Shop Sidebar Area (Start) ========== -->
    <div class="sidebar">

      <!-- ===== Category Area (Start) ===== -->
      <div class="category sidebar-item">

        <!-- Sidebar Heading: Categories -->
        <div class="sidebar-heading">
          <h2>categories</h2>
        </div> 

        <!-- Shop Categories -->
        <div class="box-container">
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>All Products</span> <p>(30)</p> </a>
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Sports Equipment</span> <p>(08)</p> </a>
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Apparel </span> <p>(06)</p> </a>
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Accessories</span> <p>(04)</p> </a>
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Footwear</span> <p>(06)</p> </a>
          <a href="#" class="item"> <span><i class="fa-solid fa-futbol"></i>Technology</span> <p>(06)</p> </a>
        </div>

      </div>
      <!-- ===== Category Area (End) ===== -->

      <!-- ===== Filter Products (Start) ===== -->
      <div class="filter sidebar-item">

        <!-- Sidebar Heading: Filter Products -->
        <div class="sidebar-heading">
          <h2>Product Filter</h2> 
        </div>

        <div class="box-container">
          <!-- Slider -->
          <div class="slider">
            <div class="progress"></div>
          </div>
          <!-- Range Input -->
          <div class="range-input">
            <input type="range" class="range-min" min="0" max="1000" value="250" step="10">
            <input type="range" class="range-max" min="0" max="1000" value="750" step="10">
          </div>
          <!-- Price Wrap -->
          <div class="price-wrap">
            <!-- Price Input -->
            <div class="price-input">
              <!-- Minimum Price Field -->
              <div class="field">
                <span>$</span>
                <input type="number" class="input-min" value="250">
              </div>
              <!-- Separator -->
              <div class="separator">-</div>
              <!-- Maximum Price Field -->
              <div class="field">
                <span>$</span>
                <input type="number" class="input-max" value="750">
              </div>
            </div>
            <!-- Filter Button -->
            <span class="btn">FILTER</span>
          </div>
        </div>
      </div>
      <!-- ===== Filter Products (End) ===== -->

      <!-- ===== Popular Products Area (Start) ===== -->
      <div class="popular-products sidebar-item">

        <!-- Sidebar Heading: Popular Products -->
        <div class="sidebar-heading">
          <h2>popular products</h2>
        </div>

        <!-- Popular Products -->
        <div class="box-container"> 

          <!-- Popular Product 1 -->
          <div class="post-item">
            <img src="../../assets/images/Shop/Products/Product-1.jpg" alt="Popular-Product-Image"> <!-- Product Image -->
            <div class="content">
              <a href="Product-Single.html">Football</a> <!-- Product Title -->
              <div class="price">
                <p>$40.00 <span>$50.00</span></p> <!-- Product Price -->
              </div>
            </div>
          </div>

          <!-- Popular Product 2 -->
          <div class="post-item">
            <img src="../../assets/images/Shop/Products/Product-3.jpg" alt="Popular-Product-Image"> <!-- Product Image -->
            <div class="content">
              <a href="Product-Single.html">Hoodie</a> <!-- Product Title -->
              <div class="price">
                <p>$40.00 <span>$50.00</span></p> <!-- Product Price -->
              </div>
            </div>
          </div>

          <!-- Popular Product 3 -->
          <div class="post-item">
            <img src="../../assets/images/Shop/Products/Product-5.jpg" alt="Popular-Product-Image"> <!-- Product Image -->
            <div class="content">
              <a href="Product-Single.html">Sneakers</a> <!-- Product Title -->
              <div class="price">
                <p>$40.00 <span>$50.00</span></p> <!-- Product Price -->
              </div>
            </div>
          </div>

        </div>

      </div>
      <!-- ===== Popular Products Area (End) ===== -->

    </div>
    <!-- ========== Shop Sidebar Area (End) ========== -->

    <!-- ========== Shop Container (Start) ========== -->
    <div class="shop-container">

      <!-- ===== Shop Header (Start) ===== -->
      <div class="intro">

        <!-- Showing Products Count -->
        <div class="showing">showing 9 of 30 products  </div>

        <!-- Display Styles -->
        <div class="styles">
          <a href="Shop-Grid.html" class="fas fa-th"></a>
          <a href="Shop-List.html" class="fas fa-list"></a>               
        </div>

        <!-- Sorting Type -->
        <div class="sorting-type">

          <!-- Sorting Label -->
          <label for="sort">sort by:</label>

          <!-- Sorting Options -->
          <select name="sort" id="sort">
            <option value="default">default</option>
            <option value="name, A to Z">name, A to Z</option>
            <option value="mname, Z to A">name, Z to A</option>
            <option value="price, low to high">price, low to high</option>
            <option value="price, high to low">price, high to low</option>
          </select>

        </div>

      </div> 
      <!-- ===== Shop Header (End) ===== -->

      <!-- ===== Products (Start) ===== -->
      <div class="product-container grid">

        <!-- Product-1 -->
        <div class="product-item">
          <div class="image">
            <img src="../../assets/images/Shop/Products/Product-1.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div> 
          <div class="content">
            <div class="rating"> <!-- Product Rating -->
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
            <a href="Product-Single.html"><h3>Football</h3></a> <!-- Product Title -->
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price --> 
          </div>
        </div>
      
        <!-- Product-2 -->
        <div class="product-item">
          <div class="image">
            <img src="../../assets/images/Shop/Products/Product-2.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="rating"> <!-- Product Rating -->
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
            <a href="Product-Single.html"><h3>Home Jersey</h3></a> <!-- Product Title -->
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price --> 
          </div>
        </div>
      
        <!-- Product-3 -->
        <div class="product-item">
          <div class="image">
            <img src="../../assets/images/Shop/Products/Product-3.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="rating"> <!-- Product Rating -->
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
            <a href="Product-Single.html"><h3>Hoodie</h3></a> <!-- Product Title -->
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price --> 
          </div>
        </div>
      
        <!-- Product-4 -->
        <div class="product-item">
          <div class="image">
            <img src="../../assets/images/Shop/Products/Product-4.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="rating"> <!-- Product Rating -->
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
            <a href="Product-Single.html"><h3>Soccer Cap</h3></a> <!-- Product Title -->
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price --> 
          </div>
        </div>
      
        <!-- Product-5 -->
        <div class="product-item">
          <div class="image">
            <img src="../../assets/images/Shop/Products/Product-5.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="rating"> <!-- Product Rating -->
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
            <a href="Product-Single.html"><h3>Sneakers</h3></a> <!-- Product Title -->
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price --> 
          </div>
        </div>
      
        <!-- Product-6 -->
        <div class="product-item">
          <div class="image">
            <img src="../../assets/images/Shop/Products/Product-6.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="rating"> <!-- Product Rating -->
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
            <a href="Product-Single.html"><h3>Socks</h3></a> <!-- Product Title -->
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price --> 
          </div>
        </div>
      
        <!-- Product-7 -->
        <div class="product-item">
          <div class="image">
            <img src="../../assets/images/Shop/Products/Product-7.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="rating"> <!-- Product Rating -->
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
            <a href="Product-Single.html"><h3>Backpack</h3></a> <!-- Product Title -->
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price --> 
          </div>
        </div>
      
        <!-- Product-8 -->
        <div class="product-item">
          <div class="image">
            <img src="../../assets/images/Shop/Products/Product-8.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="rating"> <!-- Product Rating -->
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
            <a href="Product-Single.html"><h3>Helmet</h3></a> <!-- Product Title -->
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price --> 
          </div>
        </div>
      
        <!-- Product-9 -->
        <div class="product-item">
          <div class="image">
            <img src="../../assets/images/Shop/Products/Product-9.jpg" alt="Product-Image"> <!-- Product Image -->
            <div class="options">
              <a href="Wishlist.html" class="icon"><i class="far fa-heart"></i></a><!-- Add to Wishlist Button -->
              <a href="Cart.html" class="icon"><i class="fa-solid fa-cart-shopping"></i></a><!-- Add to Cart Button -->
              <a href="Product-Single.html" class="icon"><i class="fa-solid fa-magnifying-glass"></i></a><!-- Product Detail Page Button -->
            </div>
          </div>
          <div class="content">
            <div class="rating"> <!-- Product Rating -->
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
              <i class="fa-solid fa-star"></i>
            </div>
            <a href="Product-Single.html"><h3>Wireless Earbuds</h3></a> <!-- Product Title -->
            <div class="price">$40.00 <span>$50.00</span></div> <!-- Product Price --> 
          </div>
        </div>
          
      </div>      
      <!-- ===== Products (Ends) ===== -->

      <!-- ===== Pagination (Start) ===== -->
      <div class="pages-no">
        <div class="container">
          <!-- Previous Page Button -->
          <div class="item">
            <i class="fas fa-arrow-left"></i>
          </div>
          <!-- Page Numbers -->
          <div class="numbers">
            <div class="item active">1</div> 
            <div class="item">2</div> 
            <div class="item">3</div> 
          </div>
          <!-- Next Page Button -->
          <div class="item">
            <i class="fas fa-arrow-right"></i>
          </div>
        </div>
      </div>
      <!-- ===== Pagination (End) ===== --> 
        
    </div>
    <!-- ========== Shop Container (End) ========== --> 

  </section>
  <!-- ==================== Shop-Grid Area (End) ==================== -->
    


<?php
include "include/footer.php";
?>