Die Karte

Zeit für ein weiteres kleines Projekt! Diesmal setzt du ein, was du in den Lektionen Text und Schriften und CSS-Box-Modell gelernt hast: Schriften sowie die Größen und Abstände von Boxen. Wie im ersten Projekt sagen die Anweisungen, wie die Seite aussehen soll, und das CSS ist deine Sache.

Das Projekt. Profilkarten gibt es überall: in sozialen Netzwerken, auf den Seiten von Teams und Unternehmen oder neben den Bewertungen in Onlineshops. In drei Übungen baust du eine für Lena Neumann, eine Webdesignerin: eine weiße Karte in der Mitte der Seite mit ihren Initialen in einem Kreis, ihrem Namen, ihrem Beruf, ein paar Worten über sie und ihren Kontaktdaten. Bisher hat die Seite nur das HTML, und style.css enthält die Farben der Seite. Jede Übung setzt dort fort, wo die vorige aufgehört hat.

Am Ende sieht die Karte so aus (verkleinert):

Die Aufgabe. In dieser Übung gestaltest du die Karte selbst, die weiße Box um den Inhalt:

• ein weißer Hintergrund, ein durchgezogener Rahmen mit 2px Breite in hellem Blaugrau, #c9d3e0, und auf 16px abgerundete Ecken,
• 24px Platz zwischen dem Rahmen und dem Inhalt,
• 320px breit, der Rahmen eingeschlossen,
• in der Mitte der Seite, 40px unter ihrem oberen Rand.

Ein Tipp: In der Lektion über das Box-Modell hast du gelernt, wie width den Innenabstand und den Rahmen einschließt und wie man eine Box mit Breite zentriert. Und pass auf: body hat einen eigenen Außenabstand.