Wedding Invitation Card

Part of the Styling with CSS section of Coddy's HTML journey — lesson 75 of 76.

Challenge

Easy

In this challenge, we will use CSS to style an invitation card, focusing on layout, typography, and spacing. You'll apply properties like padding, margins, borders, and colors to recreate the design shown in the image below.

You are given an HTML document containing a div with the class .invitation, an h2 heading, and several paragraphs. Your task is to style this wedding invitation step by step using CSS.

Follow the instructions carefully and apply each style in order.

Step 1: Style the Body

Select the body element.
Set the font family to "Times New Roman", serif.
Use Flexbox properties to perfectly center the invitation card.
Set the height to 100vh.
Set a light background color (#f8f5f0).

Step 2: Style the Invitation Card

Target the .invitation class.
Set a white background color (#fff).
Add a 2px solid gold border.
Add some padding (20px).
Set the width to 350px.
Center the text .
Add a border-radius to round the corners.
Add a soft shadow using box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

Step 3: Style the Text

Target the h2 elements.
- Set the text color to goldenrod.
- Make the font size 22px.
Select the .names class.
- Use a cursive font ("Dancing Script", cursive).
- Set the font size to 26px.
Target all p elements.
- Set the font size to 18px.
- Change the text color to #5a4d3f.

Try it yourself

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