

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SS CRICKET</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--navbar-->
<nav class="navbar ">
  <div class="container-fluid d-flex justify-content-between align-items-center">
  </div class="row">
  
    <div class="d-flex align-items-center ">
     <i class="bi bi-list" style="font-size: 22px;"></i>
      <span class="menu">MENU</span>
    </div>

    
    <a class="navbar-brand " href="#">
      <img src="image/sstoncricket-logo.png" alt="">
    </a>

 
    <div class="d-flex align-items-center icon-group position-relative">
      <i class="bi bi-search"></i>
      <i class="bi bi-person"></i>
      <i class="bi bi-heart"></i>

     
      <div class="">
        <i class="bi bi-bag"></i>
        
      </div>

     
      <span class="ms-2 fw-bold">₹280.00</span>
    </div>
    </div>
  </div>
</nav>
<!--navbar-->


<!--slider-->
<div class="container-fluid p-0">
  <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"  data-bs-interval="3000">
    
   
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></button>
    </div>


    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="image/surya.jpg" class="d-block w-100 " alt="First slide" style="height: 600px;">
      </div>
      <div class="carousel-item">
        <img src="image/crickettools.webp" class="d-block w-100" alt="Second slide" style="height: 600px;">
      </div>
      <div class="carousel-item">
        <img src="image/CRICKET-BAT.jpeg" class="d-block w-100" alt="Third slide" style="height: 600px;">
      </div>
    </div>

    
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

<!--slider-->


<!--collection-->
<div class="container collection mt-5 " >
    <h5>Shop By Collection</h5>
</div>
<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-3 col-sm-12 shop">
         <img src="image/cricket-category.jpg" class="img-fluid">
          <h6 class="text-center mt-2 fw-bold">CRICKET KIT</h6>
    
  </div>
   <div class="col-md-3 col-sm-12 shop ">
         <img src="image/kit-bag.jpg" class="img-fluid">
         <h6 class="text-center mt-2 fw-bold">CRICKET BAG</h6>
    
  </div>
   <div class="col-md-3 col-sm-12 shop">
         <img src="image/balls-category.jpg" class="img-fluid">
          <h6 class="text-center mt-2 fw-bold">BALLS</h6>
    
  </div>
   <div class="col-md-3 col-sm-12 shop">
         <img src="image/accessories-category.jpg" class="img-fluid">
          <h6 class="text-center mt-2 fw-bold">ACCESSORIES</h6>
    
  </div>
    
</div>

</div>
<!--collection-->

<!-- gallary -->
 <div class="container mt-5">
    <div class="row">
      <div class="col-md-4 col-sm-12 gallary">
         <img src="image/surya_bat.jpg" alt=""  class="img-fluid">
      </div>
       <div class="col-md-4 col-sm-12 gallary">
         <img src="image/vaivab.jpg" alt=""  class="img-fluid">
      </div>
       <div class="col-md-4 col-sm-12 gallary">
         <img src="image/tilak.jpg" alt=""  class="img-fluid">
      </div>
    </div>
 </div>
 <!-- gallary -->

 <!-- Best seller product -->
   <div class="container collection mt-5 " >
    <h5>Shop By Collection</h5>
</div>
  <div class="container mt-5">
    <div class="row">

      
           <?php
                    include('admin-panel/dist/includes/connection.php');
                    $sql="select * from product_add";
                    $result=mysqli_query($con,$sql);
                    while($data=mysqli_fetch_assoc($result)){
                    
                   ?>
                   <div class="col-md-3 col-sm-6 mb-4">
        <a href="details.php?id=<?php echo $data['id']; ?>" style="text-decoration: none;">
            <div class="card product-card">
   
    <div class="">
    <img src="admin-panel/dist/products/<?php echo $data['image']; ?>" class="card-img-top" alt="Product Image">

      
   
      <i class="bi bi-heart-fill favorite-icon"></i>

     
 
    </div>

   
    <div class="card-body text-center">
      <p class="product-title"><?php echo $data['name']?></p>
      <div class="d-flex justify-content-between align-items-center">
        <span class="price"><i class="bi bi-currency-dollar"></i><?php echo  $data['price_1']?></span>
        <button class="btn btn-dark btn-sm">
          <i class="bi bi-cart3"></i>
        </button>
      </div>
    </div>
  </div>
        </a>

</div>

 <?php } ?>








    </div>
  </div>
  <!--  Best seller product -->


  <!-- shop -->

  <div class="container mt-5">
    <div class="row">
      <div class="col-md-4 sho position-relative mb-3">
        <img src="image/cricket_gloves.jpg"  alt=""  class="img-fluid">
          <a href="#" class="btn shop-btn position-absolute bottom-0 start-0 m-4">
    Shop Now
  </a>
        
   
  </a>
      </div>
    
     
      <div class="col-md-4 sho position-relative mb-3">
        <img src="image/ball.jpg"  alt=""  class="img-fluid">
           <a href="#" class="btn shop-btn position-absolute bottom-0 start-0 m-4">
    Shop Now
  </a>
      </div>
    
     
      <div class="col-md-4 sho position-relative mb-3">
        <img src="image/clothing-collection.jpg" alt=""  class="img-fluid">
           <a href="#" class="btn shop-btn position-absolute bottom-0 start-0 m-4 ">
    Shop Now
  </a>
    
    </div>
  </div>
  </div>
   <!-- shop -->
   <!-- New Arrival -->
    <div class="container collection mt-5 " >
    <h5>Shop By Collection</h5>
</div>
  <div class="container mt-5">
    <div class="row">
    


<div class="col-md-3 col-sm-6 mb-4">
  
  <div class="card product-card">
    
    <div class="position-relative">
      <img src="image/ss_hat.jpg" class="card-img-top" alt="SS Player Grip"  class="img-fluid">
      
    
      <i class="bi bi-heart-fill favorite-icon"></i>

      
      <i class="bi bi-arrow-left-right share-icon"></i>
    </div>

    
    <div class="card-body text-center">
      <p class="product-title">SS Player grip (Three grip set)</p>
      <div class="d-flex justify-content-between align-items-center">
        <span class="price">₹770.00</span>
        <button class="btn btn-dark btn-sm">
          <i class="bi bi-cart3"></i>
        </button>
      </div>
    </div>
  </div>
</div>


<div class="col-md-3 col-sm-6 mb-4">
  <div class="card product-card">
    
    <div class="position-relative">
      <img src="image/elit_batting_gloves.jpg "class="card-img-top" alt="SS Player Grip"  class="img-fluid">
      
      
      <i class="bi bi-heart-fill favorite-icon"></i>

      
      <i class="bi bi-arrow-left-right share-icon"></i>
    </div>

    
    <div class="card-body text-center">
      <p class="product-title">SS Ice bag</p>
      <div class="d-flex justify-content-between align-items-center">
        <span class="price">₹210.00</span>
        <button class="btn btn-dark btn-sm">
          <i class="bi bi-cart3"></i>
        </button>
      </div>
    </div>
  </div>
</div>


<div class="col-md-3 col-sm-6 mb-4">
  <div class="card product-card">
    
    <div class="position-relative">
      <img src="image/bat_vault.jpg" class="card-img-top" alt="SS Player Grip"  class="img-fluid">
      
      
      <i class="bi bi-heart-fill favorite-icon"></i>

      
      <i class="bi bi-arrow-left-right share-icon"></i>
    </div>

    
    <div class="card-body text-center">
      <p class="product-title">Ton Super Cricket Batting Gloves(New)</p>
      <div class="d-flex justify-content-between align-items-center">
        <span class="price">₹1445.00</span>
        <button class="btn btn-dark btn-sm">
          <i class="bi bi-cart3"></i>
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-3 col-sm-6 mb-4">
  <div class="card product-card">
    
    <div class="position-relative">
      <img src="image/elit_batting_gloves.jpg "class="card-img-top" alt="SS Player Grip"  class="img-fluid">
      
      
      <i class="bi bi-heart-fill favorite-icon"></i>

      
      <i class="bi bi-arrow-left-right share-icon"></i>
    </div>

    
    <div class="card-body text-center">
      <p class="product-title">SS Ice bag</p>
      <div class="d-flex justify-content-between align-items-center">
        <span class="price">₹210.00</span>
        <button class="btn btn-dark btn-sm">
          <i class="bi bi-cart3"></i>
        </button>
      </div>
    </div>
  </div>
</div>

    </div>
  </div>
    <!-- New Arrival -->

    <!-- gallary -->
 <div class="container mt-5">
    <div class="row">
      <div class="col-md-4 col-sm-12 gallary">
         <img src="image/decock.jpg" alt=""  class="img-fluid">
      </div>
       <div class="col-md-4 col-sm-12 gallary">
         <img src="image/pooran.jpg" alt=""  class="img-fluid">
      </div>
       <div class="col-md-4 col-sm-12 gallary">
         <img src="image/salt.jpg" alt=""  class="img-fluid">
      </div>
    </div>
 </div>
 <!-- gallary -->

 <!-- Footer -->
  <footer class="container-fluid mt-5">
    <div class="container">

      <div class="row mb-4 ">
        <div class="col-md-6 d-flex  mb-3 mb-md-0">
          <button class="btn btn-outline-dark"><i class="bi bi-stack"></i> Bulk Enquiry</button>
          <button class="btn btn-outline-dark ms-3" ><i class="bi bi-geo-alt"></i> Store Locator</button>
        </div>
        <div class="col-md-6 ">
          <form class="d-flex ">
            <input type="email" class="form-control newsletter-input" placeholder="Enter your Email Address">
            <button class="newsletter-btn px-3">SUBMIT</button>
          </form>
        </div>
      </div>
      <div class="row  ">
        <div class="col-md-3 mb-3">
          <div class="footer-title">Get Info</div>
          <a href="#" class="footer-link">About Us</a>
          <a href="#" class="footer-link">Contact Us</a>
          <a href="#" class="footer-link">Store Locator</a>
          <a href="#" class="footer-link">Bulk Enquiry</a>
          <a href="#" class="footer-link">SS Records</a>
        </div>

        <div class="col-md-3 mb-3">
          <div class="footer-title">Orders & Returns</div>
          <a href="#" class="footer-link">Order Status</a>
          <a href="#" class="footer-link">Shipping Policy</a>
          <a href="#" class="footer-link">Cancellation And Returns Policy</a>
          <a href="#" class="footer-link">Payments Policy</a>
        </div>

        <div class="col-md-3 mb-3">
          <div class="footer-title">Legal & Privacy</div>
          <a href="#" class="footer-link">Privacy Policy</a>
          <a href="#" class="footer-link">Cookies Policy</a>
          <a href="#" class="footer-link">Website Disclaimer</a>
          <a href="#" class="footer-link">Terms And Conditions</a>
        </div>
  <div class="col-md-3 text-md-end text-center">
          <img src="image/logo.png" alt="SS TON Logo" class="footer-logo mb-2">
          <p class="mb-1 fw-bold">Sareen Sports Industries</p>
          <p class="small mb-0">Salarpur, Mawana Road<br>Near Translam Academy, Meerut<br>Uttar Pradesh, India – 250001</p>
          <p class="small mb-0 mt-2"><strong>Customer Support:</strong><br>marketing@sscricket.com<br>+91 910500082</p>
          <div class="social-icons mt-3">
            <a href="#"><i class="bi bi-facebook"></i></a>
            <a href="#"><i class="bi bi-x"></i></a>
            <a href="#"><i class="bi bi-instagram"></i></a>
            <a href="#"><i class="bi bi-youtube"></i></a>
          </div>
        </div>
      </div>
    </div>
  </footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
