Cartão de Convite de Casamento

Parte da seção Estilização com 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, com foco em layout, tipografia e espaçamento. Você aplicará propriedades como preenchimento, 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 indicada.

Etapa 1: Estilize o corpo

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

Etapa 2: Estilize o cartão de convite

Selecione a classe .invitation.
Defina uma cor de fundo branca (#fff).
Adicione uma borda 2px solid gold.
Adicione algum 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).

Etapa 3: Estilize o texto

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