Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
HTML
CSS
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <nav aria-label="Primary navigation"> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Docs</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <main> <h1>Accessible Navigation</h1> <p>This menu uses semantic tags, keyboard focus states, and flexbox for layout.</p> </main> </body> </html>
body { font-family: "Source Sans Pro",sans-serif; margin: 0; background: #f1f5f9; } nav { background: #0f172a; padding: 12px 24px; } nav ul { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; } nav a { color: #cbd5f5; text-decoration: none; padding: 10px 18px; border-radius: 8px; } nav a:hover, nav a:focus { background: #1d4ed8; color: #fff; } main { max-width: 720px; margin: 48px auto; padding: 0 24px; }
