Hochzeitseinladung

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 75 von 76.

Aufgabe

Einfach

In dieser Herausforderung werden wir CSS verwenden, um eine Einladungskarte zu gestalten, wobei wir uns auf Layout, Typografie und Abstände konzentrieren. Du wirst Eigenschaften wie Padding, Margins, Rahmen und Farben anwenden, um das im Bild unten gezeigte Design nachzubauen.

Dir wird ein HTML-Dokument zur Verfügung gestellt, das ein div mit der Klasse .invitation, eine h2-Überschrift und mehrere Absätze enthält. Deine Aufgabe ist es, diese Hochzeitseinladung Schritt für Schritt mit CSS zu gestalten.

Befolge die Anweisungen sorgfältig und wende jeden Stil nacheinander an.

Schritt 1: Den Body stylen

Wähle das body-Element aus.
Setze die Schriftfamilie auf "Times New Roman", serif.
Verwende Flexbox-Eigenschaften, um die Einladungskarte perfekt zu zentrieren.
Setze die Höhe auf 100vh.
Setze eine helle Hintergrundfarbe (#f8f5f0).

Schritt 2: Die Einladungskarte stylen

Ziel auf die Klasse .invitation ab.
Setze eine weiße Hintergrundfarbe (#fff).
Füge einen 2px solid gold Rahmen hinzu.
Füge etwas Innenabstand (20px) hinzu.
Setze die Breite auf 350px.
Zentriere den Text.
Füge einen border-radius hinzu, um die Ecken abzurunden.
Füge einen weichen Schatten mit box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1) hinzu.

Schritt 3: Den Text stylen

Ziel auf die h2-Elemente ab.
- Setze die Textfarbe auf goldenrod.
- Setze die Schriftgröße auf 22px.
Wähle die Klasse .names aus.
- Verwende eine Schreibschrift ("Dancing Script", cursive).
- Setze die Schriftgröße auf 26px.
Ziel auf alle p-Elemente ab.
- Setze die Schriftgröße auf 18px.
- Ändere die Textfarbe zu #5a4d3f.

Probier es selbst

<html>
    <head>
        <title>Invitation Card</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="invitation">
            <h2>Wedding Invitation</h2>
            <p class="names">Emma & James</p>
            <p class="message">Together with their families, invite you to celebrate their wedding.</p>
            <p class="detail"><strong>Date:</strong> Saturday, June 15, 2025</p>
            <p class="detail"><strong>Time:</strong> 4:00 PM - Reception to follow</p>
            <p class="detail"><strong>Venue:</strong> Rosewood Garden, Lakeview</p>
            <p class="note">Please RSVP by May 20th</p>
            <p class="footer">We look forward to celebrating with you!</p>
        </div>
    </body>
</html>