Tarjeta de invitación de boda

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 75 de 76.

Desafío

Fácil

En este desafío, utilizaremos CSS para dar estilo a una tarjeta de invitación, centrándonos en el diseño, la tipografía y el espaciado. Aplicarás propiedades como padding, márgenes, bordes y colores para recrear el diseño que se muestra en la imagen de abajo.

Se te proporciona un documento HTML que contiene un div con la clase .invitation, un encabezado h2 y varios párrafos. Tu tarea es dar estilo a esta invitación de boda paso a paso utilizando CSS.

Sigue las instrucciones cuidadosamente y aplica cada estilo en orden.

Paso 1: Dar estilo al Body

Selecciona el elemento body.
Establece la familia de fuentes a "Times New Roman", serif.
Usa las propiedades de Flexbox para centrar perfectamente la tarjeta de invitación.
Establece la altura a 100vh.
Establece un color de fondo claro (#f8f5f0).

Paso 2: Dar estilo a la Tarjeta de Invitación

Apunta a la clase .invitation.
Establece un color de fondo blanco (#fff).
Añade un borde 2px solid gold.
Añade algo de padding (20px).
Establece el ancho a 350px.
Centra el texto.
Añade un border-radius para redondear las esquinas.
Añade una sombra suave usando box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

Paso 3: Dar estilo al Texto

Apunta a los elementos h2.
- Establece el color del texto a goldenrod.
- Haz que el tamaño de la fuente sea 22px.
Selecciona la clase .names.
- Usa una fuente cursiva ("Dancing Script", cursive).
- Establece el tamaño de la fuente a 26px.
Apunta a todos los elementos p.
- Establece el tamaño de la fuente a 18px.
- Cambia el color del texto a #5a4d3f.

Pruébalo tú mismo

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