Trzecie zadanie na rozgrzewkę

Wymagania szczegółowe

Cel zadania: zbudować stronę artykułu z semantycznymi znacznikami HTML5 i estetycznym CSS, ze stopką zawsze przy dolnej krawędzi okna.

Struktura (semantyka)

• Użyć: <header>, <nav>, <main>, <article>, <footer>.

• nav powinno zawierać listę odnośników (ul > li > a).

Wygląd i wymiary (dokładnie)

• Tło strony: rgb(244, 244, 249).

• Czcionka podstawowa: Arial, font-size: 16px, kolor tekstu rgb(51, 51, 51).

• Nagłówek strony (h1 w header): 26 px, wyśrodkowany, margines dolny 20 px.

• Pasek nawigacji (nav): tło rgb(0, 122, 204), linki tekst rgb(255, 255, 255).

  • Link: padding 8px 12px, zaokrąglenie 4px.

  • Hover linku: tło rgb(0, 90, 153).

• Główny kontener treści: max-width: 1000px, wyśrodkowany (margin: 0 auto), padding wewnętrzny 20 px.

• article:

  • tło: rgb(255, 255, 255), padding 20 px, promień rogów 8 px, cień 0 2px 6px rgba(0,0,0,0.08).

  • tytuł artykułu (h2): 22 px.

  • pierwszy akapit artykułu: pogrubiony (font-weight: 700) i font-size: 18 px.

  • obrazek artykułu: wyrównany do lewej z owijaniem tekstu (float), wymiary: szerokość 260 px (wysokość auto), odstęp od tekstu margin-right: 16px, margin-bottom: 12px. OBRAZ PROSZĘ WYGENEROWAĆ ZA POMOCĄ AI – GROK, CHATGPT, COPILOT

  • upewnić się, że float nie „złamie” układu (czyścić float).

• Stopka (footer):

  • tło: rgb(230, 230, 235), padding 12 px 0, tekst wyśrodkowany, font-size 14 px.

  • stopka przyklejona do dołu strony nawet jeśli treści mało (użyć min-height: 100vh + flex layout).

• Responsywność:

  • Dla ekranów ≤ 768 px:

    • obrazek artykułu: usunąć float, szerokość 100% (max-width 360 px), wyśrodkować (margin: 0 auto 12px).

    • nav: linki układają się pionowo (kolumnowo).

    • kontener article –  padding mniejszy (12 px).

Typowe breakpoints w mediaqueries:

• ≥ 1200px → duże desktopy
• 992px – 1199px → laptop / desktop
• 768px – 991px → tablet
• 576px – 767px → duże telefony
• ≤ 575px → małe telefony
• rzadziej stosowane < 480px

Dostępność / dobre praktyki

• Obrazek ma atrybut alt.

• Linki w nav mają czytelny tekst (nie „kliknij tutaj”).

• Znaczniki semantyczne poprawnie użyte.

Przykład rozwiązania: 

Menu po najechaniu myszką ma się podświetlać:

Cała strona: