Zadanie powtórzeniowe HTML - CSS

Zadanie: „Mini strona szkolnego koła / wydarzenia”

Opis zadania:

Zbuduj prostą stronę informacyjną o fikcyjnym kole szkolnym lub wydarzeniu (np. „Koło programistyczne”, „Dzień otwarty”, „Turniej e-sportowy”). Strona ma zawierać podstawowe elementy HTML oraz layout w CSS z użyciem Flex i Grid.

Polecenia (co ma się znajdować na stronie):

1. Utwórz pliki:

   • index.html

   • style.css

2. W index.html zbuduj strukturę strony:

   • header z tytułem i krótkim opisem (np. hasło)

   • nav z listą linków (np. „O nas”, „Plan”, „Zapisy”, „Kontakt”)

   • main, a w nim:

     • co najmniej 2 section

     • 1 aside (np. „Informacje / ogłoszenia / ciekawostka”)

     • akapity (p)

     • listę (ul lub ol) z min. 3 elementami

     • formularz (form) z polami:

       • imię i nazwisko (input type="text")

       • e-mail (input type="email")

       • wybór tematu (select)

       • wiadomość (textarea)

       • zgoda (input type="checkbox")

       • przycisk wysyłania (button type="submit")

   • footer z krótką stopką

3. W style.css ostyluj stronę:

   • ustaw bazowy font, rozmiar, kolor tekstu

   • dodaj tło i obramowania dla wybranych sekcji (np. karty)

   • użyj Grid do ogólnego układu strony (np. układ: nav + main + aside)

   • użyj Flex np. w nav (menu w jednym rzędzie) i/lub w formularzu (układ pól)

   • dodaj prosty efekt :hover dla linków/przycisku

   • zadbaj o odstępy (margin, padding) i czytelność

Wskazania i podpowiedzi:

• Trzymaj się semantyki: header, nav, main, section, aside, footer.

• Każda sekcja ma mieć nagłówek (h2).

• Formularz ma być czytelny: etykiety (label) i pola w logicznej kolejności.

• Zadbaj o to, by strona wyglądała „jak strona”: tytuł, menu, treść, panel boczny, stopka.

Przykład rozwiązania (nie trzeba się trzymać stylistyki 1 do 1):

Podgląd kodu: TUTAJ