Karty koček

Záhlaví a úvodní sekce jsou hotové. V editoru najdete naši verzi; pokud jste si zkopírovali svou, vložte ji místo ní. Teď přijde na řadu nejdůležitější část stránky: kočky.

Sekce Naše kočky (id="kocky") má nadpis a div se čtyřmi kartami. Každá karta je article s obrázkem a s prvkem div, ve kterém je jméno, věk, popis a tlačítko. Oskarova karta má navíc span se štítkem „Nový“. Pár připomínek z předchozích lekcí:

• Sloupce podle šířky. Třídy bez předpony platí v každé šířce, sm: od 640 px, md: od 768 px a lg: od 1024 px výš. Jeden sloupec pro telefony, dva pro tablety a čtyři pro počítače: grid gap-6 sm:grid-cols-2 lg:grid-cols-4.
• Oříznuté obrázky. Díky object-cover obrázek vyplní celý svůj box a co se nevejde, ořízne se, takže kočka nebude zmáčknutá. Box potřebuje velikost: w-full a poměr stran (aspect-video, aspect-square) nebo pevnou výšku (h-48). Poměr stran ořízne obrázek při každé šířce stejně.
• Zaoblené rohy. Když má karta zaoblené rohy a obrázek sahá až k jejím krajům, hranaté rohy obrázku přečnívají. overflow-hidden na kartě je ořízne.
• Štítek na obrázku. Karta dostane relative a štítek absolute a pozici, třeba top-3 left-3, měřenou od rohu karty.
• Tlačítka ve stejné výšce. Popisy nejsou stejně dlouhé, a tak by tlačítka skončila v různé výšce. Z karty i z jejího prvku div udělejte flex kontejnery se sloupcem (flex flex-col), nechte div vyplnit zbytek karty (flex-1) a dovolte růst i popisu (flex-1): ten odsune tlačítko až dolů.

Občas si náhled přepněte na 375, 768 a 1280 px: mřížka by měla mít jeden, dva a čtyři sloupce.

Kontroly neumí najet myší na tlačítko, a tak se u hover: (a v dalším cvičení u focus:) dívají na třídy v HTML. Pokud si pro tlačítka vytvoříte vlastní třídu s @apply jako v minulé lekci, třídu s hover: stejně nechte v HTML.