Skip to content

Instantly share code, notes, and snippets.

@davidestrada18

davidestrada18/index.html

Created June 21, 2025 01:49
Show Gist options
  • Save davidestrada18/00ed7ef1941ed13feb3e06e1f5847c66 to your computer and use it in GitHub Desktop.
Save davidestrada18/00ed7ef1941ed13feb3e06e1f5847c66 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Te Amo Adriana</title>
<style>
body {
margin: 0; padding: 0;
background: #1a1a1a;
color: white;
font-family: 'Segoe UI', sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
flex-direction: column;
}
h1 {
font-size: 3em;
color: #ff4d4d;
animation: latido 1.5s infinite;
}
p {
font-size: 1.5em;
color: #ffffffcc;
margin-bottom: 1.5em;
}
.corazon {
position: absolute;
font-size: 20px;
color: red;
opacity: 0.8;
animation: flotar 5s linear infinite;
}
@keyframes flotar {
0% { transform: translateY(100vh) scale(1); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
}
@keyframes latido {
0%,100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
</style>
</head>
<body>
<h1>Te amo, Adriana ❤️</h1>
<p>Feliz primer mes de novios</p>
<audio autoplay loop>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
</audio>
<script>
function crearCorazon(){
const c = document.createElement("div");
c.className = "corazon";
c.innerText = "❤️";
c.style.left = Math.random()*100 + "vw";
c.style.animationDuration = (3+Math.random()*3)+"s";
document.body.appendChild(c);
setTimeout(()=> c.remove(), 6000);
}
setInterval(crearCorazon, 300);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment