index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ecommerce website</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>        
       <link rel="stylesheet" href="style.css">
      </head>

   <body>
      <section id="header">
        <a href="#">
          <img src="PICS/logo1.png" class="logo" alt="">
          <i class="fas fa-books">NIKHIL STORES</i>
        </a>
        <div>
          <ul id="navbar">
            <li><a class="active" href="index.html">HOME</a></li>
            <li><a href="shop.html">SHOP</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            <li><a href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a></li>
          </ul>
      </section>

      <section id="hero">
        <h4><b> Trendy Collections</b></h4>
        <h2> Get upto 30% Off </h2>
        <h1> NEW ARRIVALS </h1>
        <button class="normal"> shop now </button>
      </section>

      <section id="banner" class="section-m1">
        <h4> Exclusive sales   </h4>
        <h2> Up to <span> 70% off </span>All Your Favourite Brands</h2>
        <button class="normal">Explore Me</button>
      </section>

        <section class="trending-product" id="trending">
          <div class="center-text">
          <h1> Our Trending <span>Shoes </span></h1>
          
          <section id="product1" class="section.p1">
            <h2> Up to 70% Off</h2>
            <p>ALL BRANDS IN ONE PLACE</p>
            <div class="pro-container">
              <div class="pro">
                  <img src="PICS/nike1.jfif" alt="">
                  <div class="des">
                  <span>Nike</span>
                  <h5>Nike court vision mid next nature </h5>
                  <div class="star">
                  <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>
                  <h4>₹3,999</h4>
                  <p>MRP <strike>₹8,999</strike> <bold>60% Off</bold></p>
                </div>
                <a href="#"><i class="fa-solid fa-bag-shopping"></i> </a>
              </div>
    
              <div class="pro">
                <img src="PICS/nike3.jfif" alt="">
                <div class="des">
                <span>Nike</span>
                <h5>Nike Air Max xc</h5>
                <div class="star">
                <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>
                <h4>₹6999</h4>
                <p>MRP <strike>₹12,999</strike> <bold>50% Off</bold></p>
              </div>
              <a href="#"><i class="fa-solid fa-bag-shopping"></i> </a>
            </div>
    
            <div class="pro">
              <img src="PICS/adidas1.jfif" alt="">
              <div class="des">
              <span>Adidas</span>
              <h5>Boys Reversible Hooded Bomber Jacket</h5>
              <div class="star">
              <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-half-stroke"></i>
              </div>
              <h4>₹1,332</h4>
              <p>MRP <strike>₹2775</strike> <bold>52% Off</bold></p>
            </div>
            <a href="#"><i class="fa-solid fa-bag-shopping"></i> </a>
          </div>
    
          <div class="pro">
            <img src="PICS/adidas2.jfif" alt="">
            <div class="des">
            <span>Adidas</span>
            <h5>Women Blue Solid Mock-Collar Velvet Bomber Jacket </h5>
            <div class="star">
            <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-half-stroke"></i>
            </div>
            <h4>₹1,633</h4>
            <p>MRP <strike>₹4,299</strike> <bold>62% Off</bold></p>
          </div>
          <a href="#"><i class="fa-solid fa-bag-shopping"></i> </a>
        </div>
    
        <div class="pro">
          <img src="PICS/puma1.jfif" alt="">
          <div class="des">
          <span>Puma</span>
          <h5>Men Black Water Resistance Leather Jacket</h5>
          <div class="star">
          <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-half-stroke"></i>
          </div>
          <h4>₹3,059</h4>
          <p>MRP <strike>₹5,059</strike> <bold>40% Off</bold></p>
        </div>
        <a href="#"><i class="fa-solid fa-bag-shopping"></i> </a>
      </div>
    
      <div class="pro">
        <img src="PICS/puma2.jfif" alt="">
        <div class="des">
        <span>Puma</span>
        <h5>Boys Blue Cotton  Pullover Sweatshirt</h5>
        <div class="star">
        <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>
        <h4>₹1,369</h4>
      <p>MRP <strike>₹2,738</strike> <bold>50% Off</bold></p>
    </div>
      <a href="#"><i class="fa-solid fa-bag-shopping"></i> </a>
    </div>
    
    <div class="pro">
      <img src="PICS/croc1.jfif" alt="">
      <div class="des">
      <span>Crocs</span>
      <h5>Boys Multicoloured colourblocked jacket</h5>
      <div class="star">
      <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-half-stroke"></i>
      </div>
      <h4>₹1,249</h4>
      <p>MRP <strike>₹2,499</strike> <bold>50% Off</bold></p>
    </div>
    
    <a href="#"><i class="fa-solid fa-bag-shopping"></i> </a>
    </div>
     <div class="pro">
      <img src="PICS/croc2.jfif" alt="">
      <div class="des">
      <span>Crocs</span>
      <h5>Boys Hooded Rapid Dry Puffer Jacket </h5>
      <div class="star">
      <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-half-stroke"></i>
      </div>
      <h4>₹1,519</h4>
      <p>MRP <strike>₹3,799</strike> <bold>60% Off</bold></p>
    </div>
    <a href="#"><i class="fa-solid fa-bag-shopping"></i> </a>
    </div>
    </div>
    </section>
                 

<footer class="section-p">
  <div class="col">
    <img class="logo"src="P/LOGO.jpeg"alt=""> 
    <h4>Contact</h4>
    <p><strong>Address:</strong> Hyederabad-India</p>
    <p><strong>Phone:</strong> 91+98765,91+70084</p>
    <p><strong>Hours:</strong>10:00-9:00,Mon-Sat</p>
    <div class="follow">
      <h4>Follow Us</h4>
      <div class="icon">
       <i class="fa-brands fa-square-facebook"></i>
       <i class="fa-brands fa-square-twitter"></i>
       <i class="fa-brands fa-square-instagram"></i>
       <i class="fa-brands fa-linkedin"></i>
      </div>
    </div>
  </div>     
  <div class="col">
    <h4>About</h4>
    <a href="#">About Us</a>
    <a href="#">Delivery Information</a>
    <a href="#">Privacy Policy</a>
    <a href="#">Terms & Condition</a>
    <a href="#">Contact Us</a>
  </div>
  <div class="col">
  <h4>My Account</h4>
    <a href="#">Sign In</a>
    <a href="#">View Cart</a>
    <a href="#">My Wishlist</a>
    <a href="#">Track My Order</a>
    <a href="#">Help</a>
  </div>
  <div class="install">
  <h4>Install App</h4>
  <p>From App Store Or Google Pay</p>
  <div class="row">
    <img src="PICS/p1.png" alt="">
    <img src="PICS/P3.png" alt="">
  </div>
   <p>Secure Pay Gateway</p>
   <img src="PICS/P2.png" alt="">
  </div>

<div class ="copyright">
  <p> 2024, NIHIL HTML, CSS E-commerce</p>
</div>
</footer>
</body>
</html>