index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content=" Intro section with dropdown navigation - Frontend Mentor">
  <meta name="keywords" content=" Intro section with dropdown navigation,Frontend Mentor ">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | Intro section with dropdown navigation</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <header class="header">
    <h1>
      <a href="/">
        <img src="./images/logo.svg" alt="Snap icon" />
      </a>
    </h1>
    <img class="hamburger" src="./images//icon-menu.svg" alt="" aria-hidden="true" />
    <nav class="menu">
      <ul class="nav-menu">
        <li class="features-btn">
          <button>Features
            <img src="./images/icon-arrow-down.svg" alt="" aria-hidden="true" /></button>
          <ul class="hidden-features">
            <li><img src="./images/icon-todo.svg" alt="" aria-hidden="true" width="15" height="15" /><a href="/">Todo
                List</a></li>
            <li><img src="./images/icon-calendar.svg" alt="" aria-hidden="true" width="15" height="15" /> <a
                href="/">Calendar</a></li>
            <li><img src="./images/icon-reminders.svg" alt="" aria-hidden="true" width="15" height="15" /> <a
                href="/">Reminders</a></li>
            <li><img src="./images/icon-planning.svg" alt="" aria-hidden="true" width="15" height="15" /> <a
                href="/">Planning</a></li>
          </ul>
        </li>
        <li class="company-btn">
          <button>Company
            <img src="./images/icon-arrow-down.svg" alt="" aria-hidden="true" />
          </button>
          <ul class="hidden-company">
            <li><a href="/">History</a></li>
            <li><a href="/">Our Team</a></li>
            <li><a href="/">Blog</a></li>
          </ul>
        </li>
        <li><a href="/">Careers</a></li>
        <li><a href="/">About</a></li>
      </ul>
      <ul class="nav-buttons nav-menu">
        <li><button>Login</button></li>
        <li><button>Register</button></li>
      </ul>
    </nav>
  </header>
  <main>
    <img class="hero" src="./images/image-hero-mobile.png" alt="Man with laptop" />
    <section class="remote">
      <section class="remote-information">
        <h2>Make remote work</h2>
        <p>Get your team in sync, no matter your location. Streamline processes,
          create team rituals, and watch productivity soar.</p>
        <a href="/">Learn more</a>
      </section>
      <section class="partners">
        <img src="./images/client-databiz.svg" alt="Databiz logo">
        <img src="./images/client-audiophile.svg" alt="Audiophile logo">
        <img src="./images//client-meet.svg" alt="Meet logo">
        <img src="./images//client-maker.svg" alt="Maker logo">
      </section>
    </section>
  </main>
  <script src="app.js"></script>
</body>

</html>