Carta Interactiva – Explicación Completa

HTML · CSS · JavaScript · Animaciones · Interactividad

🎥 Video original

📘 Descripción del video

¿Sabías que puedes crear una declaración de amor interactiva solo usando HTML, CSS y JavaScript? En este proyecto construimos una carta romántica con botones dinámicos, animaciones y una sorpresa final.

🧩 Tecnologías utilizadas

🔌 Cómo conectar HTML + CSS + JS

Este proyecto usa un solo archivo HTML con CSS y JS incrustados. Si deseas separarlos: 

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

📄 Código completo del proyecto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorpresa</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #fce4ec, #f8bbd0);
            font-family:'Segoe UI', sans-serif;
            display: flex;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }

        .container{
            background: white;
            padding: 2rem;
            border-radius: 20px;
            box-shadow:  0 0 20px rgba(0,0,0,0.2);
            text-align: center;
            max-width: 400px;
            transition: all 0.3s ease;
        }

        h1{
            color: #c2185b;
            margin-bottom: 1rem;
        }

        .button{
            display: flex;
            justify-content: space-around;
            margin-top: 1.5rem;
        }

        button{
            background:linear-gradient(to right, #eb5a8a, #a99ba0);
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 30px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        button:hover{
            background: #c2185b;
        }

        .mensaje{
            margin-top: 20px;
            color:#6a1b9a;
            font-size: 1.1rem;
        }

        .ticket{
            background: #fff3f6;
            padding: 2rem;
            border-radius: 20px;
            box-shadow:  0 0 20px rgba(0,0,0,0.2);
            text-align: center;
            animation: fadeIn 1s ease forwards;
            display: none;
        }

        .ticket h2{
            color:  #d81b60;
        }

        .ticket p{
            margin: 0.5rem 0;
            color:  #6a1b9a;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); } 
        }
    </style>

</head>
<body>

<div class="container" id="declaracion">
    <h1> ¿Quieres salir conmigo?</h1>
    <div class="button"> 
        <button onclick="Si()">Si ❤️</button>
        <button onclick="No()">No 😢</button>
    </div> 
    <div class="mensaje" id="mensaje"></div>
</div>   

<div class="ticket" id="ticket">
    <h1> 🎟 Cita Confirmada 🎟</h1>
    <p>¡Prepárate para nuestra cita especial! 🍿🎬</p>
    <p><strong>Lugar :</strong> Cine</p>
    <p><strong>Hora :</strong> 08:00 pm</p>
    <p><strong>No Faltes ❤️ </strong></p>
</div>   

<script>
 let contador = 0;
 const declaracion = document.getElementById("declaracion");
 const ticket = document.getElementById("ticket");
 const mensaje = document.getElementById("mensaje");

 function Si(){
     declaracion.style.display ='none';
     ticket.style.display ='block';
 }

 function No(){
     contador++;
     const respuestas=[
         "Amiga pa llantear pe? 🥺",
         "Ya p dime que si 🥺",
         "amia llantis llantis pe 😘",
         "Piensalo bien no te vas arrepentir",
         "Amiga no te botes pe"
     ];

     mensaje.textContent= respuestas[Math.min(contador,respuestas.length -1)];
 }
</script>

</body>
</html>

💡 Tips para usarlo en Visual Studio Code

Volver al inicio