Ps_controller_page/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" />
    <link rel="stylesheet" href="style.css" />
    <title>Gaming Controller website</title>
  </head>
  <body>
    <div class="container">
      <!-- nav section  -->

      <div class="navbar">
        <img src="./assets/logo.png" class="logo" alt="" />
        <nav>
          <ul id="menu-list">
            <li><a href="#">Game controllers</a></li>
            <li><a href="#">Vr Accessories</a></li>
            <li><a href="#">Media Remotes</a></li>
            <li><a href="#">Others</a></li>
          </ul>
        </nav>
        <img
          src="./assets/menu.png"
          class="menu-icon"
          alt=""
          onclick="toggleMenu()"
        />
      </div>
      <!-- nav section ends  -->

      <!-- row section starts  -->
      <div class="row">
        <div class="col-1">
          <h2>
            PS4 V2 <br />
            DualShock 4
          </h2>
          <h3>Wireless Controller for Playstation 4</h3>
          <p>(Compatible/Generic)</p>
          <h4>$32.50</h4>
          <button type="button">
            Buy Now <img src="./assets/arrow.png" alt="" />
          </button>
        </div>
        <!-- col 2 section  -->
        <div class="col-2">
          <img src="./assets/controller.png" class="controller" alt="" />
          <div class="color-box"></div>
          <div class="add-btn">
            <img src="./assets/add.png" alt="" />
            <p><small>Add to cart</small></p>
          </div>
        </div>
      </div>

      <div class="social-links">
        <img src="./assets/fb.png" alt="" />
        <img src="./assets/tw.png" alt="" />
        <img src="./assets/ig.png" alt="" />
      </div>
      <!-- row section ends  -->
    </div>

    <script>
      var menuList = document.getElementById("menu-list");

      menuList.style.maxHeight = "0px";

      function toggleMenu() {
        if (menuList.style.maxHeight == "0px") {
          menuList.style.maxHeight = "130px";
        } else {
          menuList.style.maxHeight = "0px";
        }
      }
    </script>
  </body>
</html>