Zadanie pseudoklasy II

Zadanie 1: Menu nawigacyjne

Treść zadania:

1. Utwórz poziome menu nawigacyjne z trzema pozycjami: Strona główna, O nas, Kontakt.
2. Styluj menu tak, aby:
   • Podczas najechania myszką na link (:hover), jego tło zmieniało kolor, a tekst się podkreślał.
   • Aktywny link (.active) miał inny kolor tła niż pozostałe.
   • Po kliknięciu (dla wizualizacji: symulowane przez :focus) link zmieniał kolor tekstu.

Przykład:

Zadanie 2: Formularz z dynamicznymi efektami

Treść zadania:

1. Stwórz prosty formularz z następującymi polami:
   • Imię (pole tekstowe).
   • Email (pole tekstowe).
   • Wiadomość (pole tekstowe wielowierszowe).
   • Przycisk wysyłania.
2. Dodaj efekty interaktywne:
   • Gdy użytkownik kliknie w pole (:focus), zmienia się kolor obramowania.
   • Gdy pole jest puste, podpowiedź (::placeholder) jest szara, a gdy użytkownik wpisuje dane, zmienia kolor na niebieski.
   • Przycisk zmienia kolor tła po najechaniu myszką (:hover) i jest wizualnie wciśnięty po kliknięciu (:active).

Przykład:

Zadanie 3: Galeria zdjęć

Treść zadania:

1. Utwórz siatkę galerii zawierającą co najmniej 6 zdjęć.
2. Styluj galerię tak, aby:
   • Po najechaniu myszką (:hover) zdjęcie było powiększane (transform: scale()).
   • Co drugi element (:nth-child(2n)) miał ciemniejsze tło.
   • Zdjęcie aktywne (:focus) miało obramowanie w kolorze niebieskim.
     
     

Przykład: