menClothing.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" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <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=Lato:wght@400;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://kit.fontawesome.com/36e5c98c7f.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./Styles/pages.css" />
    <link rel="stylesheet" href="./Styles/common.css" />
    <link rel="stylesheet" href="footer.css">
    
    <title>BB_Cream - All-Natural Skin Care | Dermstore</title>
  </head>
  <body>
    <div id="navbar"></div>

    <!-- header -->
    <div id="pageHeading">
      <p>Men's Clothing</p>
    </div>
    <div id="monster">
      
      <div id="smallmonster">
        
        <div id="leftsidemonster">
          <div class="leftSelectName">
            <div><h4>Filter</h4></div>
            <div><h6>Clear All</h6></div>
          </div>
          <div>
            <div>
              <select name="" class="leftSort">
                <option value="">Gender-Men's</option>
                <option value="">Combination (29)</option>
              
              </select>
            </div>
            <div>
              <select name="" class="leftSort">
                <option value="">Category-All Clothing</option>
                <option value="">Combination (29)</option>
              
              </select>
            </div>
            <div>
              <select name="" class="leftSort">
                <option value="">Sale</option>
                <option value="">Combination (29)</option>
              
              </select>
            </div>
            <select class="leftSort">
              <option value="">Shipping</option>
              
            </select>
          </div>

          <div>
            <select name="" class="leftSort">
              <option value="">Color</option>
              <option value="">Red</option>
              <option value="">Yellow</option>
             
            </select>
          </div>
          <div>
            <select name="" class="leftSort">
              <option value="">Material</option>
             
            </select>
          </div>
          <div>
            <select name="" class="leftSort">
              <option value="">Designer</option>
              
            </select>
          </div>
          <div>
            <select name="" class="leftSort">
              <option value="">Storet</option>
              
            </select>
          </div>
          
          <div>
           <p class="top">Top brands fro Clothing</p>
           <p>Nasty Gal Clothing</p>
           <p>Free People Clothing</p>
           <p>Pinko Clothing</p>
           <p>Dolce & Gabbana Clothing</p>
           <p>DSquared² Clothing</p>
          </div>
          <div>
            <p class="top">Top products for Men's Clothing</p>
            <p>Wedding Dresses</p>
            <p>Prom Dresses</p>
            <p>Homecoming Dresses</p>
            <p>Formal Dresses</p>
            <p>Nike Tech Clothing</p>
           </div>
          
        </div>
        <div id="rightsidemonster">
        
          <div>
            
          </div>
          <!-- sort div -->
          <div id="rockymonster">
            <div id="titalCloths"></div>
            <div id="sortlist">
              <span>Sort by</span>
              <select name="" id="sort">
                <option value="lth">Price : Low to High</option>
                <option value="htl">Price : High to Low</option>
                <option value="a_z">A-Z</option>
               
              </select>
            </div>
            
          </div>

          <div id="displayProducts">
           
          </div>
        </div>
      </div>
    </div>
    <div id="footer"></div>
  </body>
</html>
<script src="./scripts/menClothing.js" type="module"></script>
<script src="./scripts/header.js" type="module"></script>