<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Happy Birthday Blessing</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fad390, #a18cd1, #fbc2eb);
background-size: 400% 400%;
animation: gradient 12s ease infinite;
font-family: "Poppins", Arial, sans-serif;
overflow: hidden;
}
@keyframes gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
h1 {
font-size: 3rem;
color: #fff;
text-shadow: 2px 4px 8px rgba(0,0,0,.25);
margin: 0;
text-align: center;
}
p {
margin: 10px 0 0;
font-size: 1.2rem;
color: #fff;
text-shadow: 1px 2px 6px rgba(0,0,0,.3);
}
/* Confetti */
.confetti {
position: fixed;
width: 10px;
height: 10px;
background-color: red;
top: -10px;
animation: fall 5s linear infinite;
}
@keyframes fall {
to {transform: translateY(110vh) rotate(360deg);}
}
/* Balloons */
.balloon {
position: absolute;
bottom: -120px;
width: 60px;
height: 80px;
border-radius: 50%;
background: #ff8bd0;
animation: float 8s ease-in infinite;
}
.balloon:before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
width: 2px;
height: 20px;
background: #fff;
transform: translateX(-50%);
}
@keyframes float {
0% {transform: translateY(0) scale(1);}
50% {transform: translateY(-250px) scale(1.1);}
100% {transform: translateY(0) scale(1);}
}
</style>
</head>
<body>
<h1>🎉 Happy Birthday, Blessing 🎂</h1>
<p>Wishing you joy, laughter & all the good vibes today 🎈✨</p>
<script>
// Confetti generator
function createConfetti(){
const c = document.createElement("div");
c.classList.add("confetti");
c.style.left = Math.random() * 100 + "vw";
c.style.backgroundColor = ["#ff6b6b","#feca57","#48dbfb","#1dd1a1","#ff9ff3"][Math.floor(Math.random()*5)];
c.style.animationDuration = (3 + Math.random()*3) + "s";
document.body.appendChild(c);
setTimeout(()=>c.remove(), 6000);
}
setInterval(createConfetti, 200);
// Balloons
function createBalloon(){
const b = document.createElement("div");
b.classList.add("balloon");
b.style.left = Math.random() * 90 + "vw";
b.style.background = ["#ff9ff3","#ff6b6b","#feca57","#1dd1a1","#48dbfb"][Math.floor(Math.random()*5)];
b.style.animationDuration = (6 + Math.random()*4) + "s";
document.body.appendChild(b);
setTimeout(()=>b.remove(), 9000);
}
setInterval(createBalloon, 2500);
</script>
</body>
</html>