<html> HTML
<!-- Starter: complete the nav + ids so CSS :target can show one section at a time (no JS). -->
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <title>Lists and Navigation</title>
  </head>
  <body>
    <!-- TODO: Add aria-label to nav, then make links point to #home, #about, #contact -->
    <nav>
      <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Contact</a></li>
      </ul>
    </nav>

    <!-- TODO: Add ids: about, contact, and home (Home MUST be last) -->
    <section>
      <h2>About</h2>
      <p>Write something about this page.</p>
    </section>

    <section>
      <h2>Contact</h2>
      <p>Add contact details or a short message.</p>
    </section>

    <section>
      <h2>Home</h2>
      <p>Home should be visible by default when there is no hash.</p>
    </section>
  </body>
</html>
# CSS
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
}
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
nav a {
  text-decoration: none;
  color: #007acc;
}
nav a:hover {
  text-decoration: underline;
}
section {
  margin-top: 1rem;
  display: none;
}
section:target {
  display: block;
}
section#home {
  display: block;
}
section:target ~ section#home {
  display: none;
}
Live preview updates as you type
Building preview…