FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<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; }
Preview
Live preview updates as you type
Building preview…
Show preview