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>Panda Commerce</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#"></a>
                <img src="Images/logo.png" alt="logo">
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#shoes">Shoes</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#backpack">Backpack</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact Us</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
    </div>

    <div class="container">
        <div id="carouselExampleControls" class="carousel slide orange-bg" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="row align-items-center">
                    <div class="col-md-7">
                        <h1>Mega LCD TV For Sports</h1>
                        <p>This is the best tv I had ever seen. Clear and extra large screen entertain you every moment you watch!</p>
                        <h1 class="price">$1200</h1>
                        <button class="buy-now-button">Buy Now</button>

                    </div>
                    <div class="col-md-5">
                        <img src="Images/banner-images/tv.png" class="d-block w-100" alt="...">
                        
                    </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="row align-items-center">
                    <div class="col-md-7">
                        <h1>Cool Dude Headphone</h1>
                        <p>This is the best headphone in the world for people who just want to waste time in front of funky world.</p>
                        <h1 class="price">$500</h1>
                        <button class="buy-now-button">Buy Now</button>
                        


                    </div>
                    <div class="col-md-5">
                        <img src="Images/banner-images/headphone.png" class="d-block w-100" alt="...">
                    </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="row align-items-center">
                    <div class="col-md-7">
                        <h1>X-Box For Your Living Room</h1>
                        <p>This is the best x-box in the world for people who just want to waste time in front of fake sports.</p>
                        <h1 class="price">$630</h1>
                        <button class="buy-now-button">Buy Now</button>
                        
                    </div>
                    <div class="col-md-5">
                        <img src="Images/banner-images/xbox.png" class="d-block w-100" alt="...">
                    </div>
                </div>
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
    </div>

    
    <div class="container catagories">
        <div class="row">
            <div class="col-md-4">
                <div class="d-flex justify-content-between align-items-center cat1">
                    <h1>Watch</h1>
                <img src="Images/categories/watch.png" alt="">
            
                </div>
            </div>
            <div class="col-md-4">
                <div class="d-flex justify-content-between align-items-center cat2">
                    <h1>Bag</h1>
                <img src="Images/categories/bag.png" alt="">
            </div>
                </div>
            <div class="col-md-4">
               <div class="d-flex justify-content-between align-items-center cat3">
                <h1>Shoes</h1>
                <img src="Images/categories/shoes.png" alt="">
               </div>
            </div>
        </div>
    </div>

    <div class="container shoes" id="shoes">
      <h3>Shoes</h3>
      <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
          <div class="card h-100">
            <img src="Images/shoes/shoe-1.png" class="card-img-top" alt="shoes">
            <div class="card-body">
              <h5 class="card-title">Supply 350</h5>
              <p class="card-text">Supply 350 Men's Running Shoes Fashion Breathable Sneakers Mesh Soft Sole Casual Athletic Lightweight</p>
              <h5>$150</h5>
              <button class="buy-now-button">Buy Now</button>
            </div>
            <div class="card-footer">
              
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="Images/shoes/shoe-2.png" class="card-img-top" alt="shoes">
            <div class="card-body">
              <h5 class="card-title">Nike 360</h5>
              <p class="card-text">Nike 360 Diamond Griffey Griff Men’s Size 13 CrossTraining Shoes. See Photos and provide your mail for buy.</p>
              <h5>$320</h5>
              <button class="buy-now-button">Buy Now</button>
            </div>
            <div class="card-footer">
              
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="Images/shoes/shoe-3.png" class="card-img-top" alt="shoes">
            <div class="card-body">
              <h5 class="card-title">Red Airmax</h5>
              <p class="card-text">Nike Men's Red Air Max 2022 Maroon/White/Gym Red Nylon Running Shoes.</p>
              <h5>$350</h5>
              <button class="buy-now-button">Buy Now</button>
            </div>
            <div class="card-footer">
              
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container" id="backpack">
      <h3>Backpack</h3>
      <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
          <div class="card h-100">
            <img src="Images/bags/bag-1.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Red Backpack</h5>
              <h5>$150</h5>
              <p class="card-text">LassZone Women Girls Zipper Waterproof Nylon Crossbody Bags. Wallet, Cellphone, Purse Shoulder, Bag Wristlet Backpack</p>
            </div>
            <div class="card-footer">
              <button class="buy-now-button">Buy Now</button>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="Images/bags/bag-2.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Blue Backpack</h5>
              <h5>$200</h5>
              <p class="card-text">The Most Stylish Backpack For Beautiful Girl to Look More Beautifu And Attractive.</p>
            </div>
            <div class="card-footer">
              <button class="buy-now-button">Buy Now</button>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <img src="Images/bags/bag-3.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Black Backpack</h5>
              <h5>$320</h5>
              <p class="card-text">Stylish Backpack For Every Men Or Women And The Color BLACK Suit All The People Of Different Age's.</p>
            </div>
            <div class="card-footer">
              <button class="buy-now-button">Buy Now</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    

    <div class="container d-flex justify-content-center align-items-center orange-bg" id="contact">
      <div>
        <h3>LET'S STAY IN TOUCH WITH US</h3>
        <h6>Get updates on sales, special offers and more</h6>
        <input class="form-control" type="text" name="" id="">
        <button class="buy-now-button">SUBMIT</button>
      </div>

    </div>

    <footer>
      <small>©2022, All rights reserved by Panda Commerce, Sofia, Bulgaria.</small>
    </footer>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>