Code Snippet – Master Web Development

// Landing Page

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>New Year Celebration</title>
<script src=”https://cdn.tailwindcss.com”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css”>

body {
background-color:#101334 !important;
margin: 0;
padding: 0;

}

canvas {
display: block;
}

/* Fireworks Effect */
#fireworks {
z-index: 2;
pointer-events: none;
background: radial-gradient(circle, transparent, rgba(255, 255, 255, 0.1), transparent 60%);
animation: sparkle 2s infinite;
}

@keyframes sparkle {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 0;
transform: scale(0.5);
}
}

/* Main Section (Card Box) */

.main-section {
box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
border: 1px solid rgb(101 67 184);
border-right: 1px solid rgb(234 141 59);
border-bottom: 1px solid rgb(237 67 73);
backdrop-filter: blur(5px);
border-radius: 10px;
padding: 2rem 1rem;
background: #10133678;

}

/* Header Section (Inside Main Section) */

.header-box{
border-radius: 109px;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
background: #1f1e3d;
}
button#toggleFireworks {
padding: 13px 38px;
border: 2px solid #ed7738;
font-size: 23px;
font-weight: 900;
color: #f39743;
}

button#toggleFireworks:hover {
color: #ed456a;
}

.header-box .menu .menu-item ,.get-started ,.header-box .social-icons a i{
color: #fff;
text-decoration: none;
font-size: 13px;
padding: 8px 22px;
border-radius: 37px;
border: 1px solid #1e222e;
background: #181c25;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.get-started ,.header-box .social-icons a i {
border: 1px solid #937a5a;
color: #93795a;
line-height: normal;
}
.header-box .menu .menu-item:hover, .header-box .social-icons a i:hover {
color: #cc6e6d;
}

.get-started:hover{
color: #cc6e6d;
}

/* Content Section */

.hero-section {
display: flex;
justify-content: space-between;
align-items: center;
}

.hero-text .heading-one {
font-size: 36px;
font-weight: bold;
color: #fff;
padding-bottom: 2rem;
text-transform: capitalize;
}

.hero-text .heading-one:hover {
color: #f08b86;
}

.hero-section .hero-text .cta-btn:hover {
border-color: #cc6e6d;
cursor: pointer;
color: #cc6e6d;
}

</style>

</head>
<body class=”text-white “>
<div class=”container”>
<!– Fireworks Background –>
<div id=”fireworks” class=”absolute inset-0 hidden”></div>

<!– Main Container –>
<div class=”container main-container mx-auto px-6 py-12 relative z-10″>
<section class=”container mx-auto px-4″>
<!– Main Section –>
<section class=”main-section”>
<!– Header Section –>
<section class=”header”>
<header class=”header-box sticky top-0 z-10 flex ilotems-center justify-between px-6 py-3 shadow-lg”>
<!– Menu Icon –>
<div class=”menu-icon lg:hidden cursor-pointer”>
<i class=”fa fa-bars text-2xl”></i>
</div>
<!– Logo –>
<div class=”logo-container transition-transform duration-300 hover:animate-bounce flex items-center gap-2″>
<img
src=”https://masterwebdevelopment.com/wp-content/uploads/2025/12/8041941-removebg-preview.png”
alt=”Logo”
class=”w-12 h-12 rounded-full animate-logo hover:scale-110 transition-transform duration-500″
style=”animation: logoAnimation 2s infinite;”
>
</div>
<!– Navigation Menu –>
<nav class=”menu lg:flex gap-6″>
<a href=”#” class=”menu-item text-gray-600 hover:text-blue-600 transition-colors duration-300″>Home</a>
<a href=”#” class=”menu-item text-gray-600 hover:text-blue-600 transition-colors duration-300″>News</a>
<a href=”#” class=”menu-item text-gray-600 hover:text-blue-600 transition-colors duration-300″>Shop</a>
<a href=”#” class=”menu-item text-gray-600 hover:text-blue-600 transition-colors duration-300″>About</a>
</nav>
<!– Social Icons –>

</header>
</section>
<!– Hero Section –>
<section class=”content-section”>
<section class=”hero-section flex flex-col-reverse lg:flex-row items-center gap-6 py-10″>
<!– Hero Text –>
<div class=”mt-16 text-center content-section”>
<h2 class=”text-6xl font-bold bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 bg-clip-text text-transparent animate-text3d”>Happy New Year 2025</h2>

<!– <button class=”get-started button-box”>
Get Started
</button> –>
<div class=”mt-12 text-center toggle-section”>
<button
id=”toggleFireworks”
class=”get-started button-box”
>
Get Started
</button>
</div>
</div>
<!– Hero Image –>
<div class=”hero-image relative group”>
<img src=”https://masterwebdevelopment.com/wp-content/uploads/2025/12/hero-2.png” alt=”hero-image” class=”max-w-full lg:w-[700px] rounded-xl transform group-hover:scale-105 group-hover:rotate-1 transition duration-300 ease-in-out”>
</div>
</section>
</section>
</section>
</section>

</div>

</div>

toggleButton.addEventListener(‘click’, () => {
if (fireworks.classList.contains(‘hidden’)) {
fireworks.classList.remove(‘hidden’);
fireworks.classList.add(‘bg-animation’);
} else {
fireworks.classList.add(‘hidden’);
fireworks.classList.remove(‘bg-animation’);
}
});

// ==================Crazy Fireworks==========

“use strict”;

window.addEventListener(“load”, function () {
// Create and configure the canvas
const canv = document.createElement(“canvas”);
canv.style.position = “absolute”;
canv.style.top = “0”;
canv.style.left = “0”;
canv.style.width = “100%”;
canv.style.height = “100%”;
document.body.appendChild(canv);
const ctx = canv.getContext(“2d”);

// Initialize canvas size
let maxx = window.innerWidth;
let maxy = window.innerHeight;
canv.width = maxx;
canv.height = maxy;

// Handle window resizing
window.addEventListener(“resize”, () => {
maxx = window.innerWidth;
maxy = window.innerHeight;
canv.width = maxx;
canv.height = maxy;
});

// Utility functions for randomness
const rand = (min, max) => Math.random() * (max – min) + min;
const randInt = (min, max) => Math.floor(Math.random() * (max – min) + min);
const randColor = () => `hsl(${randInt(0, 360)}, 100%, 50%)`;

// Particle class representing individual explosion particles
class Particle {
constructor(x, y, color, speed, direction, gravity, friction, size) {
this.x = x;
this.y = y;
this.color = color;
this.speed = speed;
this.direction = direction;
this.vx = Math.cos(direction) * speed;
this.vy = Math.sin(direction) * speed;
this.gravity = gravity;
this.friction = friction;
this.alpha = 1;
this.decay = rand(0.005, 0.02); // Randomized decay for smoother fading
this.size = size;
}

// Update particle properties
update() {
this.vx *= this.friction;
this.vy *= this.friction;
this.vy += this.gravity;
this.x += this.vx;
this.y += this.vy;
this.alpha -= this.decay;
}

// Draw the particle on the canvas
draw(ctx) {
ctx.save();
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}

// Check if the particle is still visible
isAlive() {
return this.alpha > 0;
}
}

// Firework class representing ascending fireworks
class Firework {
constructor(x, y, targetY, color, speed, size) {
this.x = x;
this.y = y;
this.targetY = targetY;
this.color = color;
this.speed = speed;
this.size = size;
this.angle = -Math.PI / 2 + rand(-0.3, 0.3); // Increased variation in ascent angle
this.vx = Math.cos(this.angle) * this.speed;
this.vy = Math.sin(this.angle) * this.speed;
this.trail = [];
this.trailLength = randInt(10, 25); // Increased trail length for smoother ascent
this.exploded = false;
}

// Update firework position
update() {
this.trail.push({ x: this.x, y: this.y });
if (this.trail.length > this.trailLength) {
this.trail.shift();
}

this.x += this.vx;
this.y += this.vy;

// Apply gravity (slightly slowing ascent)
this.vy += 0.02;

// Check if the firework has reached its target height or its vertical speed has reduced
if (this.vy >= 0 || this.y <= this.targetY) {
this.explode();
return false; // Firework has exploded
}
return true; // Firework is still ascending
}

// Create explosion particles
explode() {
const numParticles = randInt(50, 150); // Increased range for more variability
for (let i = 0; i < numParticles; i++) {
const angle = rand(0, Math.PI * 2);
const speed = rand(2, 7); // Wider speed range for dynamic splatter
const particleSize = rand(1, 5); // Wider size range for varied splatter
explosions.push(
new Particle(
this.x,
this.y,
this.color,
speed,
angle,
0.05, // gravity
0.98, // friction
particleSize
)
);
}
}

// Draw the firework trail
draw(ctx) {
ctx.save();
ctx.beginPath();
if (this.trail.length > 1) {
ctx.moveTo(this.trail[0].x, this.trail[0].y);
for (let point of this.trail) {
ctx.lineTo(point.x, point.y);
}
} else {
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x, this.y);
}
ctx.strokeStyle = this.color;
ctx.lineWidth = this.size;
ctx.lineCap = “round”;
ctx.stroke();
ctx.restore();
}
}

let fireworks = []; // Active fireworks
let explosions = []; // Active explosion particles

// Launch a new firework at random intervals
function launchFirework() {
const x = rand(maxx * 0.1, maxx * 0.9); // Vary horizontal launch position
const y = maxy; // Start from the bottom of the screen
const targetY = rand(maxy * 0.1, maxy * 0.4); // Vary target height
const color = randColor(); // Vibrant random colors
const speed = rand(4, 8); // Vary ascent speeds
const size = rand(2, 5); // Vary firework sizes
fireworks.push(new Firework(x, y, targetY, color, speed, size));

// Schedule next firework launch
const timeout = rand(300, 800); // milliseconds
setTimeout(launchFirework, timeout);
}

// Start the first firework launch
launchFirework();

// Animation loop
function animate() {
// Fade the canvas slightly to create motion trails
ctx.fillStyle = “rgba(0, 0, 0, 0.3)”; // Increased opacity for smoother trails
ctx.fillRect(0, 0, maxx, maxy);

// Update and draw fireworks
for (let i = fireworks.length – 1; i >= 0; i–) {
const firework = fireworks[i];
if (!firework.update()) {
fireworks.splice(i, 1); // Remove exploded firework
} else {
firework.draw(ctx);
}
}

// Update and draw explosion particles
for (let i = explosions.length – 1; i >= 0; i–) {
const particle = explosions[i];
particle.update();
if (particle.isAlive()) {
particle.draw(ctx);
} else {
explosions.splice(i, 1); // Remove faded particle
}
}

requestAnimationFrame(animate);
}

animate(); // Start the animation loop

// Optional: Launch fireworks on click
window.addEventListener(“click”, function (event) {
const x = event.clientX;
const y = maxy; // Start from the bottom
const targetY = event.clientY;
const color = randColor();
const speed = rand(4, 8); // Vary ascent speeds
const size = rand(2, 5); // Vary firework sizes
fireworks.push(new Firework(x, y, targetY, color, speed, size));
});
});
</script>
</body>
</html>