Carte d’invitation de mariage

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 75 sur 76.

Défi

Facile

Dans ce défi, nous utiliserons 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 remplissage, les marges, les bordures et les couleurs afin de reproduire le design présenté dans l’image ci-dessous.

On vous fournit un document HTML contenant un div avec la classe .invitation, un titre h2 et plusieurs paragraphes. Votre tâche consiste à styliser cette invitation de mariage étape par étape à l’aide de 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 d’arrière-plan claire (#f8f5f0).

Étape 2 : styliser la carte d’invitation

Ciblez la classe .invitation.
Définissez une couleur d’arrière-plan blanche (#fff).
Ajoutez une bordure 2px solid gold.
Ajoutez du remplissage (20px).
Définissez la largeur sur 350px.
Centrez le texte.
Ajoutez un border-radius pour arrondir les coins.
Ajoutez une ombre douce à l’aide de 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 police sur 22px.
Sélectionnez la classe .names.
- Utilisez une police cursive ("Dancing Script", cursive).
- Définissez la taille de police sur 26px.
Ciblez tous les éléments p.
- Définissez la taille de police sur 18px.
- Modifiez 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>