Biglietto d'invito di nozze

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 75 di 76.

Sfida

Facile

In questa sfida useremo CSS per definire lo stile di un invito, concentrandoci su layout, tipografia e spaziatura. Applicherai proprietà come padding, margini, bordi e colori per ricreare il design mostrato nell’immagine qui sotto.

Ti viene fornito un documento HTML contenente un div con la classe .invitation, un titolo h2 e diversi paragrafi. Il tuo compito è definire passo dopo passo lo stile di questo invito di nozze usando CSS.

Segui attentamente le istruzioni e applica ogni stile nell’ordine indicato.

Passaggio 1: definisci lo stile del body

Seleziona l’elemento body.
Imposta la famiglia di caratteri su "Times New Roman", serif.
Usa le proprietà Flexbox per centrare perfettamente l’invito.
Imposta l’altezza su 100vh.
Imposta un colore di sfondo chiaro (#f8f5f0).

Passaggio 2: definisci lo stile dell’invito

Seleziona la classe .invitation.
Imposta il colore di sfondo su bianco (#fff).
Aggiungi un bordo 2px solid gold.
Aggiungi un po’ di padding (20px).
Imposta la larghezza su 350px.
Centra il testo.
Aggiungi un border-radius per arrotondare gli angoli.
Aggiungi un’ombra delicata usando box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

Passaggio 3: definisci lo stile del testo

Seleziona gli elementi h2.
- Imposta il colore del testo su goldenrod.
- Imposta la dimensione del carattere su 22px.
Seleziona la classe .names.
- Usa un carattere corsivo ("Dancing Script", cursive).
- Imposta la dimensione del carattere su 26px.
Seleziona tutti gli elementi p.
- Imposta la dimensione del carattere su 18px.
- Imposta il colore del testo su #5a4d3f.

Provalo tu

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