Flexbox i grid - podsumowanie

Opis projektu

Zaprojektuj prosty szablon strony internetowej składający się z:

Nagłówka (Flex) — logo + menu + przycisk

Sekcji Hero (Grid) — tekst obok ilustracji

Sekcji Features (Flex) — 3 pudełka w jednym rzędzie

Głównej części (Grid) — treść + sidebar

Galerii (Grid) — 6 elementów w układzie 3 kolumn

Stopki (Flex) — linki + prawa autorskie

Krok 1 — Nagłówek (Flex)

Utwórz <header> z trzema elementami: logo (logo musi być grafiką), menu, przycisk.

Ustaw display: flex; justify-content: space-between; align-items: center;.

Menu ma być listą poziomą (ul w flexie).

Krok 2 — Sekcja Hero (Grid)

Stwórz <section class=”hero”>.

W środku dwa elementy: lewa część (tekst), prawa część (ilustracja – można wygenerować za pomocą AI).

Ustaw grid: grid-template-columns: 1fr 1fr;.

Krok 3 — Features (Flex)

Stwórz <section class=”features”> z trzema pudełkami .feature.

Ustaw display: flex; gap: …;.

Krok 4 — Main content (Grid: 2 kolumny)

Stwórz <main class=”content”>.

Dwie kolumny: lewa z artykułem, prawa z krótką listą informacji.

Użyj grida: grid-template-columns: 2fr 1fr;.

Krok 5 — Galeria (Grid)

Stwórz <section class=”gallery”>.

Dodaj 6 elementów .photo.

Ustaw: grid-template-columns: repeat(3, 1fr);.

Krok 6 — Stopka (Flex)

Stwórz <footer>.

Ustaw flex z odstępem między linkami a prawami autorskimi.

Przykładowe rozwiązanie: