FrontendAtlas
Study
▾
Dashboard
Pricing
Get full access
<html> HTML
<nav class="nav"> <div class="logo">Brand</div> <ul class="links"> <li><a href="#">Docs</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Blog</a></li> </ul> <a class="cta" href="#">Sign up</a> </nav>
# CSS
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 2rem; background: #fafafa; } /* TODOs: 1) Turn .nav into a flex container and vertically center its items. 2) Make .links expand and center its contents using flex and gap. 3) On screens ≤480px, stack elements vertically with flex-direction: column. */ .nav { background: #222; color: #fff; padding: 12px 16px; border-radius: 8px; } .logo { font-weight: 700; } .links { list-style: none; padding: 0; margin: 0; } .links a { color: #fff; text-decoration: none; } .cta { background: #e63946; color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; } @media (max-width: 480px) { /* Stack layout here */ }
Preview
Live preview updates as you type
Building preview…
Show preview