Tarjeta de invitación de boda

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 75 de 76.

Desafío

Fácil

En este desafío, usaremos 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 el relleno, los márgenes, los bordes y los 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 usando CSS.

Sigue las instrucciones cuidadosamente y aplica cada estilo en orden.

Paso 1: Dar estilo al cuerpo

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

Paso 2: Dar estilo a la tarjeta de invitación

Selecciona la clase .invitation.
Establece un color de fondo blanco (#fff).
Añade un borde 2px solid gold.
Añade algo de relleno (20px).
Establece el ancho en 350px.
Centra el texto.
Añade un radio de borde 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

Selecciona los elementos h2.
- Establece el color del texto en goldenrod.
- Establece el tamaño de la fuente en 22px.
Selecciona la clase .names.
- Usa una fuente cursiva ("Dancing Script", cursive).
- Establece el tamaño de la fuente en 26px.
Selecciona todos los elementos p.
- Establece el tamaño de la fuente en 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>