index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vercel Homepage UI Clone</title>

  <link rel="stylesheet" href="styles/styles.css" />
  <link rel="stylesheet" href="styles/head_midia.css" media="(max-width: 1200px)">
  <link rel="stylesheet" href="styles/main_midia.css" media="(max-width: 600px)">

  <!-- Load 'Inter' from Google Fonts CDN -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;800&display=swap" rel="stylesheet" />
</head>

<body>
  <div id="wrapper">
    <header>
      <div class="menu-section">
      <h1 class="left">
        <img src="assets/logo.svg" alt="Logo" />
      </h1>

      <nav class="middle">
        <ul>
          <li><a href="#">Solutions</a></li>
          <li><a href="#">Templates</a></li>
          <li><a href="#">Resources</a></li>
          <li><a href="#">Pricing</a></li>
        </ul>
      </nav>

      <div class="right">
        <div class="conf">
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Login</a></li>
            <li><a href="#">Sing Up</a></li>
          </ul>
          
        </div>

      </div>


      <div class="menu-toggle">
        <div class="one"></div>
        <div class="two"></div>
      </div>
    </div>
    </header>
    <main>
      <h1>
        <span>Develop.</span>
        <span>Preview.</span>
        <span>Ship.</span>
      </h1>

      <div class="buttons">
        <button>Start Coding</button>
        <button class="outlined">Get a Demo</button>
      </div>

      <h2>
        Vercel combines the best developer experience with an obsessive focus on end-user performance.
        Their platform enables frontend teams to do their best work.
      </h2>

    </main>
    <footer>Explore the Vercel way</footer>
  </div>

  <script src="toggleMenu.js"></script>
</body>

</html>