Ćwiczenia: HTML + CSS

Stwórz tabelę z nagłówkiem i trzema wierszami danych: imię, nazwisko, email. Dodaj obramowanie i wyrównaj nagłówki do środka.

<table border="1">
  <tr><th>Imię</th><th>Nazwisko</th><th>Email</th></tr>
  <tr><td>Jan</td><td>Kowalski</td><td>jan@example.com</td></tr>
  <tr><td>Anna</td><td>Nowak</td><td>anna@example.com</td></tr>
</table>

Stwórz poziome menu nawigacyjne z trzema linkami. Użyj flexboxa, aby elementy były obok siebie.

nav ul{ display:flex; gap:16px; list-style:none; padding:0 }
nav a{ text-decoration:none; color:#7be28a }

Dodaj nagłówek, który pozostaje widoczny podczas przewijania strony. Użyj position: sticky.

header{ position:sticky; top:0; background:#0b0f12; z-index:1000 }

Stwórz układ siatki 3 kolumny na desktopie, 1 kolumna na telefonie. Użyj CSS Grid.

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
@media(max-width:600px){ .grid{ grid-template-columns:1fr } }

Zaprojektuj formularz logowania: pola login i hasło oraz przycisk „Zaloguj”. Wyrównaj elementy do środka strony.

.login{ display:flex; flex-direction:column; width:200px; margin:auto; gap:8px }