<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Build for every browser</title>
  </head>
  <body>
    <div class="website">
      <header class="site-header">
        <a class="logo" href="/">Browsers</a>
        <button class="menu-toggle" aria-expanded="false">
          <span class="sr-only">Menu</span>
        </button>
        <nav class="site-nav">
          <ul role="list">
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li>
              <a href="#">Resources</a>
              <ul class="submenu" role="list">
                <li><a href="#">Docs</a></li>
                <li><a href="#">Blog</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <section class="hero">
          <div>
            <h2>Build for every browser</h2>
            <p>A simple hero section used for testing layouts.</p>
            <a class="button" href="#">Get started</a>
          </div>
          <img class="hero-image" src="hero.jpg" alt="" />
        </section>
        <section class="features">
          <ul class="cards" role="list">
            <li class="card">
              <article>
                <h3>Responsive</h3>
                <p>Adapts to any container size.</p>
              </article>
            </li>
            <li class="card">
              <article>
                <h3>Accessible</h3>
                <p>Works with keyboard and screen readers.</p>
              </article>
            </li>
          </ul>
        </section>
      </main>
      <footer class="site-footer">
        <p>© 2026 Browsers</p>
      </footer>
    </div>
  </body>
</html>