<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>¡Feliz Cumpleaños, B!</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div id="step-1" class="step">
      <h1>¡Feliz Cumpleaños, B! 🎉</h1>
      <p>Hoy es tu día especial, y esta sorpresa está hecha con mucho cariño. 🌟</p>
      <button onclick="nextStep(2)">Haz clic para continuar ✨</button>
    </div>

    <div id="step-2" class="step hidden">
      <h2>🎂 ¿Sabías que...? 🎂</h2>
      <p>Tu sonrisa ilumina los días de todos los que te rodean. ¡Eres única e irreemplazable!</p>
      <button onclick="nextStep(3)">¡Quiero saber más! 💖</button>
    </div>

    <div id="step-3" class="step hidden">
      <h2>Un Deseo Especial 🌟</h2>
      <p>Deseo que este año esté lleno de amor, risas y momentos inolvidables. Porque tú lo mereces. ❤️</p>
      <button onclick="nextStep(4)">¿Y ahora qué? 🎁</button>
    </div>

    <div id="step-4" class="step hidden">
      <h2>🎉 ¡Sorpresa Final! 🎉</h2>
      <p>Todo esto fue hecho pensando en ti, Brisabeth. Gracias por ser una persona tan especial en mi vida. 🌷</p>
      <button onclick="nextStep(5)">¡Gracias! 💝</button>
    </div>

    <div id="step-5" class="step hidden">
      <h2>Con todo mi cariño,</h2>
      <p class="signature">Atentamente, Alfredo 💌</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
/* Estilos globales */
body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  color: #333;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.container {
  max-width: 600px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  padding: 20px;
  animation: fadeIn 1s ease-in-out;
}

h1, h2 {
  color: #ff6b6b;
  animation: bounceIn 1s ease-in-out;
}

p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}

button:hover {
  transform: scale(1.1);
  background: #ff4b4b;
}

.hidden {
  display: none;
}

.signature {
  font-size: 1rem;
  color: #555;
  margin-top: 20px;
  animation: fadeIn 1.5s ease-in-out;
}

/* Animaciones */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bounceIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
// Función para mostrar el siguiente paso
function nextStep(step) {
  // Ocultar todos los pasos
  const steps = document.querySelectorAll('.step');
  steps.forEach(step => step.classList.add('hidden'));

  // Mostrar el siguiente paso
  const currentStep = document.getElementById(`step-${step}`);
  currentStep.classList.remove('hidden');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.