Ejercicio CSS 03: Tipografía y Efectos de Texto

🎯 Ejercicio: Tipografía y Efectos de Texto

📋 Objetivo

Combinar el marco de imagen del ejercicio anterior con propiedades de tipografía para crear títulos atractivos y descripciones estilizadas. Aplicarás efectos de texto como sombras, transformaciones y diferentes fuentes para hacer tu galería más profesional.

📝 Instrucciones

Usa tu proyecto del ejercicio anterior como base (el marco de imagen)
Añade títulos y descripciones a cada imagen siguiendo la plantilla
Aplica propiedades de tipografía:

font-family: Cambia la fuente del título y descripción
font-size: Diferentes tamaños para título y descripción
font-weight: Peso de fuente para crear jerarquía
text-align: Alineación del texto
text-transform: Mayúsculas, minúsculas o capitalización
text-shadow: Sombras creativas en los títulos
color: Colores diferentes para título y descripción
line-height: Espaciado entre líneas

Experimenta con combinaciones creativas
¡Haz que destaque! Usa efectos llamativos pero legibles

💡 Recordatorio de Propiedades de Texto

font-family: "Arial", sans-serif - Tipo de fuente
font-size: 24px, 1.5em - Tamaño del texto
font-weight: bold, 300, 700 - Grosor
text-align: center, left, right - Alineación
text-transform: uppercase, capitalize - Transformación
text-shadow: 2px 2px 4px black - Sombra de texto
color: #333, rgb(255,0,0) - Color del texto
line-height: 1.5, 30px - Altura de línea

📄 Plantilla HTML

Modifica tu ejercicio anterior con esta estructura o copia este código como ejercicio03.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio 03 - Tipografía en Galería</title>
  <link rel="stylesheet" href="galeria-tipografia.css">
  <!-- Opcional: Google Fonts para fuentes especiales -->
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
  <header class="encabezado-principal">
    <h1 class="titulo-principal">Mi Galería Fotográfica</h1>
    <p class="subtitulo">Una colección de momentos especiales</p>
  </header>
  
  <div class="contenedor-principal">
    
    <article class="marco-imagen">
      <img src="imagen1.jpg" alt="Primera imagen" class="imagen-principal">
      <h2 class="titulo-imagen">Aventura en la Montaña</h2>
      <p class="descripcion-imagen">
        Un hermoso amanecer desde la cima de la montaña más alta de la región. 
        La vista panorámica nos regaló colores únicos que nunca olvidaremos.
      </p>
      <span class="etiqueta-fecha">Octubre 2025</span>
    </article>
    
    <article class="marco-imagen">
      <img src="imagen2.jpg" alt="Segunda imagen" class="imagen-principal">
      <h2 class="titulo-imagen">Momento en Familia</h2>
      <p class="descripcion-imagen">
        Una reunión familiar llena de risas y buenos recuerdos. 
        Estos momentos son los que realmente importan en la vida.
      </p>
      <span class="etiqueta-fecha">Septiembre 2025</span>
    </article>
    
    <article class="marco-imagen">
      <img src="imagen3.jpg" alt="Tercera imagen" class="imagen-principal">
      <h2 class="titulo-imagen">Creatividad en Acción</h2>
      <p class="descripcion-imagen">
        Un proyecto personal que representó horas de dedicación y creatividad. 
        El resultado final superó todas nuestras expectativas.
      </p>
      <span class="etiqueta-fecha">Agosto 2025</span>
    </article>
    
  </div>
</body>
</html>

🔤 Sugerencias de Combinaciones de Fuentes

📚 Combinación Clásica

Títulos: font-family: "Times New Roman", serif;
Descripciones: font-family: "Arial", sans-serif;

🎭 Combinación Moderna

Títulos: font-family: "Helvetica", sans-serif; font-weight: bold;
Descripciones: font-family: "Georgia", serif;

🎨 Combinación Creativa

Títulos: font-family: "Impact", sans-serif; text-transform: uppercase;
Descripciones: font-family: "Verdana", sans-serif;