<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');
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.