Projekt: Zákusky

Cvičný projekt pro kurz HTML a CSS (blended)

Tvým úkolem nakódovat responzivní stránku:

• Nejprve nakóduj si v HTML vytvoř pro obsah vhodnou strukturu a přidej CSS třídy.
• Začni stylováním mobilní verze.
• Pokud nejsi odvážná hrdinka, můžeš "podvádět" a vzít si hotové HTML a CSS pro mobilní verzi ze souboru složky napoveda-pro-nehrdiny).
• Teprve potom vytvářej CSS pro tabletovou a desktopovou variantu.

Responzivní breakpointy:

• pro tablet: 660px
• pro desktop: 1100px

Mobilní verze

Kartička

• mezi kartičkami jsou mezery 30px nebo použij připravenou proměnnou --desert-spacing
• má zakulacené rohy s poloměrem 12px nebo použij připravenou proměnnou --radius.
• kartička pro každý zákusek má jinak barevný stín
• všechny stíny mají následující hodnoty:

  box-shadow: 3px 5px 30px BARVA;

• místo BARVA ale pro každou kartičku dosaď adekvátní barvu z připravených proměnných. Takže napříplak pro jahodový dort bude CSS vypadat následovně:

  box-shadow: 3px 5px 30px var(--strawberry-shadow-color);

Obrázek

• roztahuje se přes celou šířku kartičky
• nezapomeň na obrázek zapnout display: block;, jinak se ti bude pod obrázkem dělat malá mezera

Obsah kartičky (bílá oblast pod obrázkem)

• text je odsazený od kraje o 20px, nebo použij v CSS připravenou proměnnou --padding.

Název zákusku:

• velikost písma 24px
• výška řádku 1.25

Popis zákusku

• velikost písma 15px
• barva --description-color z připravených proměnných

TABLET

• kartičky jsou stále pod sebou, ale změnily se do horizontální podoby (obrázek je vlevo od textu)
• obrázek zabírá na šířku 30% kartičky
• maximální šířka obsahu je 700px a obsah je vycentrovaný uprostřed stránky

DESKTOP

• kartičky jsou opět v původní vertikální podobě
• zobrazují se 4 stejně široké kartičky vedle sebe

BONUS

• ve složce images jsou připraveny i jiné varianty obrázku, než čtvercový, který jsme používali doposud
• napadá tě, jak použít značku <picture> a zobrazit pomocí ní jiný obrázky pro každou responzivní variantu, aby bylo rozložení pro uživatele příjemnější? (aby např. v mobilní verzi nezabíral obrázek tolik místa na výšku)

Ukázka responzivního chování

Podívej se na video ve ukazka-responzivniho-chovani.mp4 ve složce s projektem.

Ukázka výsledku - MOBIL

Ukázka výsledku - TABLET

Ukázka výsledku - DESKTOP