Jj
html_content = """<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSB Celebration</title>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #a1c4fd);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-family: "Poppins", sans-serif;
}
h1 {
position: absolute;
font-size: 5rem;
font-weight: 900;
color: #fff;
text-shadow: 0 0 20px #ff4da6, 0 0 40px #ff99cc;
animation: textGlow 3s infinite alternate ease-in-out;
}
@keyframes textGlow {
from { transform: scale(1); opacity: 0.8; }
to { transform: scale(1.1); opacity: 1; }
}
.balloon {
position: absolute;
bottom: -150px;
width: 60px;
height: 80px;
background: red;
border-radius: 50% 50% 45% 45%;
animation: float 10s linear infinite;
}
.balloon::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
width: 2px;
height: 60px;
background: #555;
transform: translateX(-50%);
}
@keyframes float {
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}
.balloon:nth-child(1) { left: 10%; background: #ff4da6; animation-duration: 12s; }
.balloon:nth-child(2) { left: 25%; background: #ffa500; animation-duration: 9s; }
.balloon:nth-child(3) { left: 40%; background: #00c2ff; animation-duration: 11s; }
.balloon:nth-child(4) { left: 60%; background: #8aff80; animation-duration: 10s; }
.balloon:nth-child(5) { left: 80%; background: #ffdf00; animation-duration: 13s; }
.confetti {
position: absolute;
width: 10px;
height: 10px;
background: red;
animation: confettiFall 6s linear infinite;
}
@keyframes confettiFall {
0% { transform: translateY(-100vh) rotate(0deg); }
100% { transform: translateY(110vh) rotate(720deg); }
}
.confetti:nth-child(6) { left: 15%; background: #ff4da6; animation-duration: 5s; }
.confetti:nth-child(7) { left: 35%; background: #00c2ff; animation-duration: 7s; }
.confetti:nth-child(8) { left: 55%; background: #ffa500; animation-duration: 6s; }
.confetti:nth-child(9) { left: 75%; background: #8aff80; animation-duration: 8s; }
.confetti:nth-child(10){ left: 90%; background: #ffdf00; animation-duration: 5.5s; }
</style>
</head>
<body>
<h1>🎉 CSB 🎉</h1>
<!-- Balloons -->
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<div class="balloon"></div>
<!-- Confetti -->
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
<div class="confetti"></div>
</body>
</html>"""
# Save to file
file_path = "/mnt/data/csb_celebration.html"
with open(file_path, "w", encoding="utf-8") as f:
f.write(html_content)
file_path
Comments
Post a Comment