Zaproszenie ślubne

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 75 z 76.

Wyzwanie

Łatwy

W tym wyzwaniu użyjemy CSS do stylizacji zaproszenia, skupiając się na układzie, typografii i odstępach. Zastosujesz właściwości takie jak padding, marginesy, obramowania i kolory, aby odtworzyć projekt przedstawiony na poniższym obrazku.

Otrzymujesz dokument HTML zawierający element div z klasą .invitation, nagłówek h2 oraz kilka akapitów. Twoim zadaniem jest krok po kroku ostylować to zaproszenie ślubne za pomocą CSS.

Postępuj zgodnie z instrukcjami i zastosuj kolejno każdy styl.

Krok 1: Stylizacja elementu body

Wybierz element body.
Ustaw rodzinę czcionek na "Times New Roman", serif.
Użyj właściwości Flexbox, aby idealnie wyśrodkować zaproszenie.
Ustaw wysokość na 100vh.
Ustaw jasny kolor tła (#f8f5f0).

Krok 2: Stylizacja zaproszenia

Wybierz klasę .invitation.
Ustaw biały kolor tła (#fff).
Dodaj obramowanie 2px solid gold.
Dodaj wypełnienie (20px).
Ustaw szerokość na 350px.
Wyśrodkuj tekst.
Dodaj zaokrąglenie obramowania, aby zaokrąglić narożniki.
Dodaj delikatny cień za pomocą box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

Krok 3: Stylizacja tekstu

Wybierz elementy h2.
- Ustaw kolor tekstu na goldenrod.
- Ustaw rozmiar czcionki na 22px.
Wybierz klasę .names.
- Użyj czcionki odręcznej ("Dancing Script", cursive).
- Ustaw rozmiar czcionki na 26px.
Wybierz wszystkie elementy p.
- Ustaw rozmiar czcionki na 18px.
- Zmień kolor tekstu na #5a4d3f.

Spróbuj swoich sił

<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>