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>