22 – Zadanie: Zaawansowany Portal Informacyjny „Global Rights Watch”

Zadanie: Zaawansowany Portal Informacyjny „Global Rights Watch”

1. Struktura HTML (index.html):

Wykonaj strukturę strony z zachowaniem semantyki HTML5:

• Nagłówek: Zawiera logo (tekstowe) oraz menu typu flex, które „przykleja się” do góry strony podczas przewijania (sticky).

• Sekcja Hero: Duży blok z obrazem w tle (CSS), na którym wyśrodkowany jest napis: „75 lat Powszechnej Deklaracji Praw Człowieka”.

• Układ główny (Trzy kolumny):

  • Lewa (20%): Podmenu z linkami, które po najechaniu myszką zmieniają kolor tła i przesuwają się o 5px w prawo (animacja transition).

  • Środek (55%): Artykuł z zagnieżdżoną listą definicji (<dl>, <dt>, <dd>) dotyczącą generacji praw człowieka.

  • Prawa (25%): Karta „Statystyki ochrony” z wykorzystaniem pseudoelementów ::before do dodania ikon przy nagłówkach.

• Formularz zgłoszeniowy: Umieszczony pod artykułem. Musi zawierać:

  • Grupowanie pól (fieldset) z legendą.

  • Pole typu email i tel z odpowiednimi wzorcami pattern (regEx).

  • Listę rozwijaną (select) z kategoriami naruszeń.

• Stopka: Trzy kolumny z linkami, wyrównane za pomocą CSS Grid.

2. Stylizacja CSS (styl.css):

Zastosuj poniższe wytyczne, aby uzyskać profesjonalny wygląd:

• Zmienne CSS: Zdefiniuj w :root kolory: --primary: #1a2a6c, --secondary: #b21f1f, --accent: #fdbb2d.

• Responsywność (Media Queries):

  • Dla ekranów poniżej 800px: układ trzech kolumn zmienia się w jedną (kolumna pod kolumną).

  • Dla ekranów poniżej 480px: menu nawigacyjne zmienia orientację na pionową.

• Selektory zaawansowane:

  • Ustyluj co drugi wiersz tabeli, ale tylko wewnątrz sekcji głównej.

  • Użyj :not(:last-child) dla elementów listy menu, aby dodać im margines dolny (z wyjątkiem ostatniego).

• Efekty:

  • Nagłówki sekcji mają mieć cień tekstu (text-shadow).

  • Przyciski formularza mają mieć gradient liniowy zgodny ze zmiennymi i zaokrąglone rogi (border-radius).

:root {
–primary: #1a2a6c;
–secondary: #b21f1f;
–accent: #fdbb2d;
–font-main: 'Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

/* Zaawansowany układ Grid dla stopki */
footer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
background: var(–primary);
color: white;
padding: 40px;
}

/* Efekt Sticky Menu */
nav {
position: sticky;
top: 0;
z-index: 1000;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Animacja dla linków bocznych */
.side-menu a {
display: block;
padding: 10px;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}

.side-menu a:hover {
padding-left: 15px;
border-left: 3px solid var(–secondary);
background: #fdf2f2;
}

/* Responsywność */
@media (max-width: 800px) {
#kontener-glowny {
display: block; /* Zamiana flexa na blok */
}
#lewy, #glowny, #prawy {
width: 100%;
float: none;
}
}