Carte d'invitation de mariage

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 75 sur 76.

Défi

Facile

Dans ce défi, nous allons utiliser CSS pour styliser une carte d'invitation, en nous concentrant sur la mise en page, la typographie et l'espacement. Vous appliquerez des propriétés telles que le padding, les marges, les bordures et les couleurs pour recréer le design présenté dans l'image ci-dessous.

On vous donne un document HTML contenant un div avec la classe .invitation, un titre h2 et plusieurs paragraphes. Votre tâche est de styliser cette invitation de mariage étape par étape en utilisant CSS.

Suivez attentivement les instructions et appliquez chaque style dans l'ordre.

Étape 1 : Styliser le Body

Sélectionnez l'élément body.
Définissez la famille de polices sur "Times New Roman", serif.
Utilisez les propriétés Flexbox pour centrer parfaitement la carte d'invitation.
Définissez la hauteur sur 100vh.
Définissez une couleur de fond claire (#f8f5f0).

Étape 2 : Styliser la carte d'invitation

Ciblez la classe .invitation.
Définissez une couleur de fond blanche (#fff).
Ajoutez une bordure 2px solid gold.
Ajoutez du padding (20px).
Définissez la largeur sur 350px.
Centrez le texte.
Ajoutez un border-radius pour arrondir les coins.
Ajoutez une ombre douce en utilisant box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

Étape 3 : Styliser le texte

Ciblez les éléments h2.
- Définissez la couleur du texte sur goldenrod.
- Définissez la taille de la police sur 22px.
Sélectionnez la classe .names.
- Utilisez une police cursive ("Dancing Script", cursive).
- Définissez la taille de la police sur 26px.
Ciblez tous les éléments p.
- Définissez la taille de la police sur 18px.
- Changez la couleur du texte en #5a4d3f.

Essayez vous-même

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