Lekce 1.6

Workshop: přepracování stránky

Responzivní stránka cukrárny od mobilu po desktop, mini-review ve dvojicích podle checklistu a ukázky nejzajímavějších řešení.

Cvičení 1

Kartičky

Co si vyzkoušíte

Dokončíte vzhled kartiček zákusků pro mobil. Ve výchozím stavu máte hotové HTML s třídami a stylopis se základním vzhledem pro mobil, chybí jen kartičky. Cílový stav ukazuje snímek vysledek-mobil.png ve složce projektu.

Zadání

Všechno v tomhle cvičení patří do stylopisu mimo media query.

Hotová kartička jahodového dortu na mobilu: obrázek přes celou šířku nahoře, pod ním v bílé části tučný název a šedý popis. Kartička má zakulacené rohy a růžový stín.

  1. Seřaďte kartičky pod sebe s mezerou 30px, nebo použijte připravenou proměnnou --desert-spacing.

  2. Dejte kartičce bílé pozadí a zakulacené rohy s poloměrem --radius.

  3. Dejte každé kartičce stín v barvě jejího zákusku. Hodnoty stínu jsou pro všechny stejné, mění se jen barva z připravených proměnných. Pro jahodový dort to vypadá takhle:

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

  4. Roztáhněte obrázek přes celou šířku kartičky, ať je kartička jakkoli široká. Obrázek nesmí přečnívat přes zakulacené rohy a pod ním nesmí zůstat mezera.

  5. Odsaďte text v bílé části kartičky od okraje o --padding.

  6. Dejte názvu zákusku velikost písma 24px a mezeru pod ním 15px.

  7. Dejte popisu zákusku velikost písma 15px a barvu --description-color.

Bonus

  1. Při najetí myší nechte kartičku plynule povyskočit o pár pixelů nahoru a zesilte jí stín.