Media Query - zadania

Zadanie 1:

Stwórz stronę HTML z przykładowym układem, który zawiera:

Nagłówek (header),
Sekcję główną (main),
Stopkę (footer).
Zastosuj podstawowe style CSS dla tych sekcji. Ustaw ich kolory tła oraz ustal minimalną szerokość elementów na 100% (bez marginesów).

Dodaj media queries w CSS, aby:

Przy szerokości ekranu powyżej 600px – sekcja główna była wyrównana na środku i miała szerokość 80% ekranu.
Przy szerokości ekranu powyżej 900px – sekcja główna miała szerokość 60% ekranu.
Zastosuj inne kolory tła dla różnych szerokości ekranu, aby łatwiej zauważyć zmiany.
Rezultat: Strona powinna dynamicznie dostosowywać szerokość sekcji głównej oraz kolory tła w zależności od szerokości ekranu.

Duży ekran:

Mały ekran:

Zadanie 2:

Stwórz stronę z trzema głównymi sekcjami: nagłówkiem, sekcją główną oraz stopką. W sekcji głównej umieść sześć prostokątnych bloków jako elementy siatki.

Ustaw styl CSS, aby bloki te układały się w jednej kolumnie na mniejszych ekranach (do szerokości 600px).

Użyj media query, aby przy szerokości ekranu od 600px do 900px:

Bloki te układały się w siatce 2×3.
Dla szerokości ekranu powyżej 900px:

Bloki układały się w siatkę 3×2.
Rezultat: Strona powinna automatycznie zmieniać układ siatki w zależności od szerokości ekranu.

Duży ekran:

Mały ekran:

Zadanie 3:

Stwórz stronę HTML z galerią obrazów (np. sześć miniaturek).

Ustaw style CSS dla galerii z wykorzystaniem flexbox tak, aby obrazy były ustawione w jednej kolumnie na małych ekranach (poniżej 500px).

Dodaj media queries, aby:

Przy szerokości ekranu powyżej 500px – obrazy układały się w dwóch kolumnach.
Przy szerokości ekranu powyżej 800px – obrazy układały się w trzech kolumnach.

Rezultat: Galeria powinna dynamicznie zmieniać liczbę kolumn w zależności od rozmiaru ekranu.

Mały ekran: