<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Happy Day</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
background-size: 300% 300%;
animation: gradientShift 10s ease infinite;
overflow: hidden;
font-family: Arial, sans-serif;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
h1 {
font-size: 3rem;
color: white;
text-shadow: 0 0 20px rgba(0,0,0,0.3);
z-index: 2;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background: white;
opacity: 0.8;
animation: fall linear infinite;
}
@keyframes fall {
0% { transform: translateY(-10vh) rotate(0deg); }
100% { transform: translateY(110vh) rotate(360deg); }
}
</style>
</head>
<body>
<h1>Have a happy day 🐻❤️</h1>
<script>
function createConfetti() {
for (let i = 0; i < 120; i++) {
const confetti = document.createElement('div');
confetti.classList.add('confetti');
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.background = `hsl(${Math.random() * 360}, 80%, 70%)`;
confetti.style.animationDuration = 3 + Math.random() * 5 + 's';
confetti.style.animationDelay = Math.random() * 5 + 's';
document.body.appendChild(confetti);
}
}
createConfetti();
</script>
</body>
</html>