Свадебное приглашение

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 75 из 76.

Задание

Легко

В этом испытании мы будем использовать CSS для стилизации пригласительной открытки, уделяя особое внимание макету, типографике и отступам. Вы примените такие свойства, как padding, margins, borders и colors, чтобы воссоздать дизайн, показанный на изображении ниже.

Вам дан HTML-документ, содержащий div с классом .invitation, заголовок h2 и несколько абзацев. Ваша задача — шаг за шагом стилизовать это свадебное приглашение с помощью CSS.

Внимательно следуйте инструкциям и применяйте каждый стиль по порядку.

Шаг 1: Стилизация Body

Выберите элемент body.
Установите семейство шрифтов на "Times New Roman", serif.
Используйте свойства Flexbox, чтобы идеально центрировать карточку приглашения.
Установите высоту на 100vh.
Установите светлый цвет фона (#f8f5f0).

Шаг 2: Стилизация карточки приглашения

Выберите класс .invitation.
Установите белый цвет фона (#fff).
Добавьте рамку 2px solid gold.
Добавьте внутренние отступы (20px).
Установите ширину на 350px.
Выровняйте текст по центру.
Добавьте border-radius, чтобы скруглить углы.
Добавьте мягкую тень, используя box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

Шаг 3: Стилизация текста

Выберите элементы h2.
- Установите цвет текста на goldenrod.
- Установите размер шрифта 22px.
Выберите класс .names.
- Используйте курсивный шрифт ("Dancing Script", cursive).
- Установите размер шрифта на 26px.
Выберите все элементы p.
- Установите размер шрифта на 18px.
- Измените цвет текста на #5a4d3f.

Попробуйте сами

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