Hochzeitseinladungskarte

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

Aufgabe

Einfach

In dieser Herausforderung verwenden wir CSS, um eine Einladungskarte zu gestalten, wobei der Schwerpunkt auf Layout, Typografie und Abständen liegt. Du wendest Eigenschaften wie Innenabstände, Außenabstände, Rahmen und Farben an, um das im folgenden Bild gezeigte Design nachzubilden.

Dir wird ein HTML-Dokument mit einem div mit der Klasse .invitation, einer h2-Überschrift und mehreren Absätzen gegeben. Deine Aufgabe besteht darin, diese Hochzeitseinladung Schritt für Schritt mit CSS zu gestalten.

Befolge die Anweisungen sorgfältig und wende jeden Stil der Reihe nach an.

Schritt 1: Den Body gestalten

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

Schritt 2: Die Einladungskarte gestalten

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

Schritt 3: Den Text gestalten

Wähle die h2-Elemente aus.
- Setze die Textfarbe auf goldenrod.
- Setze die Schriftgröße auf 22px.
Wähle die Klasse .names aus.
- Verwende eine kursive Schriftart ("Dancing Script", cursive).
- Setze die Schriftgröße auf 26px.
Wähle alle p-Elemente aus.
- Setze die Schriftgröße auf 18px.
- Ändere die Textfarbe in #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>