<title>Happy Birthday My Bruhh 🎆</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
height:100vh;
overflow:hidden;
background:black;
display:flex;
justify-content:center;
align-items:center;
color:white;
text-align:center;
}
canvas{
position:fixed;
top:0;
left:0;
pointer-events:none;
}
.card{
position:relative;
z-index:2;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(10px);
padding:30px 20px;
border-radius:22px;
max-width:90%;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
animation:pop 1s ease;
}
@Keyframes pop{
0%{transform:scale(0.8);opacity:0}
100%{transform:scale(1);opacity:1}
}
h1{font-size:2.2rem;}
h2{font-size:1.4rem;margin:10px 0;}
p{font-size:1rem;line-height:1.6;margin:15px 0;}
button{
padding:12px 22px;
border:none;
border-radius:25px;
background:#ff4b5c;
color:white;
font-size:1rem;
cursor:pointer;
margin:6px;
}
button:hover{background:#ff1e38}
/* 🎂 Cake */
.cake{
width:120px;
margin:20px auto;
position:relative;
}
.layer{
height:30px;
width:120px;
border-radius:10px;
position:absolute;
left:0;
animation:bounce 1.5s infinite;
}
.layer:nth-child(1){bottom:0;background:#ff6f91;}
.layer:nth-child(2){bottom:35px;background:#ffc75f;}
.layer:nth-child(3){bottom:70px;background:#845ec2;}
.candle{
width:10px;
height:25px;
background:white;
position:absolute;
top:-25px;
left:55px;
}
.flame{
width:12px;
height:12px;
background:orange;
border-radius:50%;
position:absolute;
top:-12px;
left:-1px;
animation:flicker .4s infinite;
}
@Keyframes flicker{
from{opacity:1}
to{opacity:.6}
}
@Keyframes bounce{
50%{transform:translateY(-4px)}
}
@media (max-width:480px){
h1{font-size:1.8rem}
h2{font-size:1.2rem}
}
</style>
🎉 Happy Birthday 🎉
My Bruhh 🫂💖
Wishing you happiness, success & unlimited fun 🎂✨
Stay legendary always 😎🔥
Celebrate 🎆
<script>
/* 🎆 FIREWORKS */
const fw = document.getElementById("fireworks");
const fctx = fw.getContext("2d");
fw.width = innerWidth;
fw.height = innerHeight;
let fireworks = [];
function random(min,max){return Math.random()*(max-min)+min}
function createFirework(){
let x = random(100,fw.width-100);
let y = random(50,fw.height/2);
let colors = ["#ff004c","#ffd166","#06d6a0","#4cc9f0","#c77dff"];
for(let i=0;i<80;i++){
fireworks.push({
x,y,
r:2,
dx:Math.cos(i)*random(1,5),
dy:Math.sin(i)*random(1,5),
life:60,
color:colors[Math.floor(Math.random()*colors.length)]
});
}
}
function drawFireworks(){
fctx.fillStyle="rgba(0,0,0,0.2)";
fctx.fillRect(0,0,fw.width,fw.height);
fireworks.forEach((p,i)=>{
fctx.beginPath();
fctx.arc(p.x,p.y,p.r,0,Math.PI*2);
fctx.fillStyle=p.color;
fctx.fill();
p.x+=p.dx;
p.y+=p.dy;
p.life--;
if(p.life<=0)fireworks.splice(i,1);
});
}
setInterval(()=>{createFirework()},900);
setInterval(drawFireworks,20);
/* 🎊 CONFETTI */
const c = document.getElementById("confetti");
const ctx = c.getContext("2d");
c.width=innerWidth;c.height=innerHeight;
let confetti=[];
function startConfetti(){
for(let i=0;i<150;i++){
confetti.push({
x:Math.random()*c.width,
y:Math.random()*-c.height,
r:Math.random()*6+4,
d:Math.random()*3+2,
color:`hsl(${Math.random()*360},100%,50%)`
});
}
}
function drawConfetti(){
ctx.clearRect(0,0,c.width,c.height);
confetti.forEach(p=>{
ctx.beginPath();
ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
ctx.fillStyle=p.color;
ctx.fill();
p.y+=p.d;
if(p.y>c.height)p.y=-10;
});
}
setInterval(drawConfetti,20);
/* 🎉 Actions */
function celebrate(){
startConfetti();
document.getElementById("song").play();
}
function toggleMusic(){
let s=document.getElementById("song");
s.paused?s.play():s.pause();
}
window.onresize=()=>{
fw.width=c.width=innerWidth;
fw.height=c.height=innerHeight;
};
</script>
🎉 Happy Birthday 🎉
My Bruhh 🫂💖
Wishing you happiness, success & unlimited fun 🎂✨ Stay legendary always 😎🔥
Celebrate 🎆
🎶 Play / Pause