Lekce 1.4

Tailwind CSS: utility-first přístup

Vzhled skládaný z hotových tříd přímo na prvku v HTML.

Cvičení 2

Karta

Co si vyzkoušíte

Postavíte vodorovnou kartu s obrázkem vlevo a textem vpravo, bez jediného vlastního pravidla v CSS. Ve výchozím stavu máte v HTML kartu s obrázkem, nadpisem, popisem a tlačítkem, zatím bez jediné třídy.

Cílem je tahle karta:

Vodorovná karta se zaoblenými rohy. Vlevo obrázek se zaoblenými rohy, vpravo pod sebou nadpis, tři řádky textu a tlačítko. Obrázek i obsah mají kolem sebe stejné vnitřní odsazení karty.

Zadání

  1. Dejte kartě rámeček, zaoblené rohy, bílé pozadí, vhodné vnitřní odsazení (padding) a omezte jí šířku na 50%.
  2. Dejte obrázek a zbylý obsah karty vedle sebe s mezerou mezi nimi. Použijte flexbox. Obrázek bude vlevo, nadpis, text a tlačítko budou vpravo.
  3. Obrázek bude zabírat cca třetinu šířky karty, obsah se roztáhne na zbytek místa.
  4. Uspořádejte nadpis, popis a tlačítko pod sebe s mezerami (margin).
  5. Nastavte nadpisu a popisu velikost i barvu písma podle vlatního uvážení.
  6. Dejte tlačítku barevné pozadí, vnitřní odsazení a zaoblené rohy.
  7. Zaoblete rohy obrázku stejně jako rohy tlačítka.

Bonus

  1. Prodlužte popis tak, aby se karta zvýšila. Zařiďte, aby obrázek rostl s ní, vyplnil celou výšku vedle textu a přitom se nedeformoval. V dokumentaci hledejte object-fit.
  2. Přidejte kartě jemný stín a při najetí myší ho zvětšete.