Karta od začátku
Teď dáme dohromady celou lekci. Mezi Oskarovu a Bellinu kartu jsme přidali kartu pro Micku, mazlivou bílou kočku, ale bez jediné třídy: vzhled jí dáte sami. Má vypadat jako Oskarova karta. Když budete potřebovat, podívejte se na její třídy, ale nejdřív si zkuste vybavit, co která část potřebuje.
Karta Micky je postavená stejně jako Oskarova: prvek div s id micka je karta a v ní je obrázek a další div s texty a tlačítkem. Kontroly se dívají na výsledek, ne na konkrétní třídy, takže velikosti a odstíny si můžete zvolit podle sebe.
Pro připomenutí, co dělá kartu kartou: pozadí, rámeček, zaoblené rohy a stín, které ji oddělí od stránky (bg-white, border, rounded-*, shadow-*), obrázek oříznutý do tvaru (w-full, aspect-* nebo h-*, object-cover) a zaoblený spolu s kartou (overflow-hidden) a texty s dostatkem místa kolem sebe (p-*, mt-*).
Stránka se nám prodlužuje: kartu Micky uvidíte, když v náhledu sjedete dolů.
Jak psát:
Pokyny
Dejte kartě Micky bílé pozadí a stejnou maximální šířku, jakou má Oskarova karta, vycentrujte ji a dejte jí nahoře okraj, aby se Oskarovy karty nedotýkala (mx-auto mt-6 max-w-sm bg-white).
Dejte kartě světlý rámeček, zaoblené rohy a stín a zařiďte, aby se s ní zaoblil i obrázek.
Zařiďte, aby obrázek vyplnil šířku karty a měl pevný tvar, třeba stejný jako Oskarův, a přitom se nezdeformoval.
Dejte prvku div s texty polstrování a texty upravte jako u Oskara: velké tučné jméno, menší šedý řádek s věkem a okraj nad popisem. (Barevná čára u popisu je na vás.)
Nakonec tlačítko: stejně široké jako texty karty, oranžové s bílým textem, se zaoblenými rohy a s mezerou nad sebou.
Začněte programovat zdarma
9/10