Die Karten der Katzen

Die Kopfzeile und der Hero sind fertig. Im Editor findest du unsere Version; wenn du deine eigene kopiert hast, füge sie über unserer ein. Jetzt kommt der wichtigste Teil der Seite: die Katzen.

Der Abschnitt Unsere Katzen (id="katzen") hat eine Überschrift und ein div mit vier Karten. Jede Karte ist ein article mit einem Bild und einem div mit dem Namen, dem Alter, der Beschreibung und dem Button. Oskars Karte hat außerdem ein span mit dem Abzeichen „Neu“. Ein paar Erinnerungen aus den früheren Lektionen:

• Spalten für jede Breite. Klassen ohne Präfix gelten bei jeder Breite, sm: ab 640 px, md: ab 768 px und lg: ab 1024 px. Eine Spalte für Smartphones, zwei für Tablets und vier für Computer: grid gap-6 sm:grid-cols-2 lg:grid-cols-4.
• Zugeschnittene Bilder. object-cover lässt das Bild seine Box füllen und schneidet ab, was nicht passt, damit die Katze nicht gequetscht wird. Die Box braucht eine Größe: w-full und ein Seitenverhältnis (aspect-video, aspect-square) oder eine feste Höhe (h-48). Ein Seitenverhältnis schneidet das Bild bei jeder Breite gleich zu.
• Runde Ecken. Wenn eine Karte runde Ecken hat und das Bild bis an ihre Ränder reicht, ragen die eckigen Ecken des Bildes heraus. overflow-hidden an der Karte schneidet sie ab.
• Ein Abzeichen auf dem Bild. Die Karte bekommt relative, das Abzeichen absolute und eine Position wie top-3 left-3, gemessen von der Ecke der Karte.
• Buttons auf gleicher Höhe. Die Beschreibungen sind nicht gleich lang, deshalb würden die Buttons auf unterschiedlichen Höhen landen. Mach die Karte und ihr div zu Flex-Spalten (flex flex-col), lass das div den Rest der Karte füllen (flex-1) und lass auch die Beschreibung wachsen (flex-1): Sie schiebt den Button nach unten.

Stelle die Vorschau zwischendurch auf 375, 768 und 1280 px: Das Raster sollte eine, zwei und vier Spalten haben.

Die Prüfungen können die Maus nicht über einen Button bewegen, deshalb sehen sie sich für hover: (und in der nächsten Übung für focus:) die Klassen im HTML an. Wenn du für die Buttons mit @apply eine eigene Klasse machst, wie in der vorigen Lektion, lass die Klasse mit hover: trotzdem im HTML stehen.