<!DOCTYPE html>
<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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.