Convite de Casamento

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 75 de 76.

Desafio

Fácil

Neste desafio, usaremos CSS para estilizar um cartão de convite, focando em layout, tipografia e espaçamento. Você aplicará propriedades como padding, margens, bordas e cores para recriar o design mostrado na imagem abaixo.

Você recebeu um documento HTML contendo uma div com a classe .invitation, um cabeçalho h2 e vários parágrafos. Sua tarefa é estilizar este convite de casamento passo a passo usando CSS.

Siga as instruções cuidadosamente e aplique cada estilo na ordem.

Passo 1: Estilizar o Body

Selecione o elemento body.
Defina a família da fonte como "Times New Roman", serif.
Use propriedades Flexbox para centralizar perfeitamente o cartão de convite.
Defina a altura como 100vh.
Defina uma cor de fundo clara (#f8f5f0).

Passo 2: Estilizar o Cartão de Convite

Alveje a classe .invitation.
Defina uma cor de fundo branca (#fff).
Adicione uma borda 2px solid gold.
Adicione um pouco de preenchimento (20px).
Defina a largura como 350px.
Centralize o texto.
Adicione um border-radius para arredondar os cantos.
Adicione uma sombra suave usando box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

Passo 3: Estilizar o Texto

Alveje os elementos h2.
- Defina a cor do texto como goldenrod.
- Defina o tamanho da fonte como 22px.
Selecione a classe .names.
- Use uma fonte cursiva ("Dancing Script", cursive).
- Defina o tamanho da fonte como 26px.
Alveje todos os elementos p.
- Defina o tamanho da fonte como 18px.
- Altere a cor do texto para #5a4d3f.

Experimente você mesmo

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