Initialen und Kontakt

Zwei Teile der Karte fehlen noch: die Initialen und die Kontaktdaten.

Lenas Initialen, LN, stehen in einem blauen Kreis, #3b6fd8, 96px im Durchmesser, in der Mitte der Karte. Die Buchstaben sind weiß, fett und 32px groß, genau in der Mitte des Kreises, sowohl von links nach rechts als auch von oben nach unten.

Die Zeilen der Kontaktdaten am Ende der Karte sind durch dünne Linien getrennt, wie die Zeilen einer Tabelle: Jede Zeile hat oben eine durchgezogene, 1px breite Linie in hellem Grau, #e5e7eb, und 8px Platz über und unter ihrem Text. Zwischen den Zeilen gibt es keine Lücken, die dünnen Linien haben also gleichmäßige Abstände.

Die fertige Karte sieht so aus (verkleinert):

Ein Tipp: Wie bekommst du Text von oben nach unten in die Mitte einer Box? Denke daran, was line-height mit dem Platz macht, den die Buchstaben nicht brauchen. Und Absätze haben eigene Außenabstände.

Das ist das ganze Projekt. Du hast eine Karte gestaltet, wie du sie auf vielen Websites findest: mit fester Breite, zentriert, mit sorgfältig festgelegtem Text und Abständen. In der nächsten Lektion, Display und Position, findest du heraus, warum manche Elemente so breit sind wie die Seite und andere nur so breit wie ihr Inhalt und wie du Elemente an beliebige Stellen der Seite setzt.