Eine Karte von Grund auf
Zeit, die ganze Lektion zusammenzusetzen. Zwischen den Karten von Oskar und Bella haben wir eine Karte für Mia hinzugefügt, eine verschmuste weiße Katze, aber ohne eine einzige Klasse: Du gestaltest sie selbst. Sie soll aussehen wie Oskars Karte. Du kannst dir seine Klassen ansehen, wenn du sie brauchst, aber versuche zuerst, dich zu erinnern, was jeder Teil braucht.
Mias Karte ist genauso aufgebaut wie Oskars: Das div mit der ID mia ist die Karte, und darin stehen das Bild und ein weiteres div mit den Texten und dem Button. Die Prüfungen sehen sich das Ergebnis an, nicht bestimmte Klassen, du kannst also eigene Größen und Farbtöne wählen.
Zur Erinnerung, was eine Karte zur Karte macht: ein Hintergrund und ein Rahmen, die sie von der Seite abheben (bg-white, border, rounded-*, shadow-*), ein zugeschnittenes Bild (w-full, aspect-* oder h-*, object-cover), das mit der Karte abgerundet wird (overflow-hidden), und Texte mit genug Platz um sich herum (p-*, mt-*).
Die Seite wird lang: Scrolle in der Vorschau nach unten, um Mias Karte zu sehen.
So schreibst du es:
Anweisungen
- 1
Gib Mias Karte einen weißen Hintergrund und dieselbe maximale Breite wie Oskars Karte, zentriere sie und gib ihr oben einen Margin, damit sie Oskars Karte nicht berührt (
mx-auto mt-6 max-w-sm bg-white). - 2
Gib der Karte einen hellen Rahmen, abgerundete Ecken und einen Schatten, und sorge dafür, dass das Bild mit abgerundet wird.
- 3
Lass das Bild die Breite der Karte füllen und gib ihm eine Form, zum Beispiel dieselbe wie bei Oskar, ohne es zu verzerren.
- 4
Gib dem
divmit den Texten Padding und gestalte die Texte wie bei Oskar: ein großer fetter Name, eine kleinere graue Zeile mit dem Alter und ein Margin über der Beschreibung. (Eine farbige Linie neben der Beschreibung ist dir überlassen.) - 5
Zum Schluss der Button: so breit wie die Texte der Karte, orange mit weißem Text, mit abgerundeten Ecken und etwas Platz darüber.