<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy New Year 2025</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="scene">
<div class="card">
<div class="content">
<h1><span>🎉</span> Happy New Year <span>2025</span> <span>🎇</span></h1>
<p>Step into a new future filled with endless possibilities.</p>
</div>
</div>
</div>
<canvas id="fireworks"></canvas>
<script src="script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;900&display=swap");
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #121212, #2b2b2b);
overflow: hidden;
font-family: "Orbitron", sans-serif;
}
.scene {
perspective: 1200px;
perspective: 1200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.card {
width: 450px;
height: 350px;
background: linear-gradient(145deg, #ff0080, #8000ff);
border-radius: 25px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8),
inset 0 0 50px rgba(255, 255, 255, 0.1);
transform-style: preserve-3d;
transition: transform 1s cubic-bezier(0.4, 0.3, 0.2, 1);
}
.card:hover {
transform: rotateY(25deg) rotateX(10deg) scale(1.05);
box-shadow: 0 30px 80px rgba(255, 0, 128, 0.6),
inset 0 0 60px rgba(255, 255, 255, 0.3);
}
.content {
padding: 35px;
transform: translateZ(40px);
text-align: center;
color: #ffffff;
}
h1 {
font-size: 2.8rem;
color: #ffe600;
text-shadow: 0 3px 8px rgba(255, 255, 0, 0.9), 0 0 20px #ffcc00;
}
h1 span {
animation: pulse 1.5s infinite alternate;
}
p {
font-size: 1.2rem;
margin-top: 15px;
color: #fff6f9;
text-shadow: 0 2px 5px rgba(255, 255, 255, 0.7);
}
@keyframes pulse {
0% {
transform: scale(1);
color: #ff00ff;
}
100% {
transform: scale(1.2);
color: #00ffff;
}
}
const canvas = document.getElementById("fireworks");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Firework {
constructor(x, y) {
this.x = x;
this.y = y;
this.color = `hsl(${Math.random() * 360}, 100%, 70%)`;
this.sparkles = [];
for (let i = 0; i < 50; i++) {
this.sparkles.push(new Sparkle(this.x, this.y, this.color));
}
}
explode() {
this.sparkles.forEach((sparkle) => sparkle.move());
}
}
class Sparkle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.vx = Math.random() * 4 - 2;
this.vy = Math.random() * 4 - 2;
this.alpha = 1;
this.gravity = 0.05;
}
move() {
this.vx *= 0.98;
this.vy *= 0.98;
this.vy += this.gravity;
this.x += this.vx;
this.y += this.vy;
this.alpha -= 0.01;
this.draw();
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${this.hexToRGB(this.color)}, ${this.alpha})`;
ctx.fill();
}
hexToRGB(hsl) {
return hsl.match(/\d+/g).slice(0, 3).join(", ");
}
}
function launchFireworks() {
const x = Math.random() * canvas.width;
const y = (Math.random() * canvas.height) / 2;
const firework = new Firework(x, y);
const interval = setInterval(() => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
firework.explode();
if (firework.sparkles[0].alpha <= 0) clearInterval(interval);
}, 16);
}
setInterval(launchFireworks, 1500);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.