Die Fotokarte
Zeit für ein weiteres Projekt! Dieser Checkpoint wendet die letzten beiden Lektionen an: Rahmen, Schatten und Bilder sowie das Layout mit Flexbox, Grid und Position. Wie im ersten Checkpoint beschreiben die Übungen das Ergebnis, und die Klassen wählst du selbst. Wo die Beschreibung keine genaue Größe oder Farbe nennt, such dir selbst eine aus.
Das Projekt. Ein Katzenmagazin veranstaltet einen Fotowettbewerb, und seine Leser stimmen für das beste Foto ab. In drei Übungen machst du aus einem Foto eine Karte, legst eine Galerie aus Karten an und verkündest den Sieger. Die Farben und der Text der Seite sind schon fertig, du kannst dich also ganz auf die Karten und das Layout konzentrieren. Wie zuvor änderst du nur die Klassen, nicht die Elemente, und jede Übung beginnt mit der fertigen Seite aus der vorigen.
Am Ende sieht der obere Teil der Galerie so aus:
Die Fotokarte. Im Editor steht der erste Beitrag: ein article mit einem Foto und einem div mit dem Titel des Fotos, dem Namen des Fotografen und einem Button zum Abstimmen mit der Anzahl der Stimmen. Mach daraus eine Karte:
- Die Karte ist weiß, mit einem hellen Rahmen (nicht in der dunklen Farbe des Textes), abgerundeten Ecken und einem Schatten.
- Das Foto füllt die gesamte Breite der Karte aus und ist quadratisch. Es wird nicht gestaucht: Was nicht ins Quadrat passt, wird abgeschnitten.
- Die oberen Ecken des Fotos sind zusammen mit denen der Karte abgerundet, damit sie nicht herausragen.
- Der Button zum Abstimmen ist eine Pille: Seine Enden sind Halbkreise.