Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Queen Muskaan Royal Birthday</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{
width:100%;
height:100%;
overflow:hidden;
font-family:'Georgia',serif;
color:white;
/* Background gradient changed to pink + blue combo */
background:linear-gradient(-45deg,#ff4fa3,#6a9cff,#ffd700,#ff66cc);
background-size:400% 400%;
animation:royalBG 10s ease infinite;
}
@keyframes royalBG{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
/* ENTRY */
#entry{
position:fixed;
inset:0;
background:black;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
z-index:9999;
}
#count{
font-size:90px;
color:gold;
animation:pulse 1s infinite;
}
@keyframes pulse{
50%{transform:scale(1.2)}
}
/* PAGES */
.page{
position:absolute;
inset:0;
display:none;
text-align:center;
padding-top:90px;
}
.page.active{
display:block;
animation:fadeIn 1.2s ease forwards;
}
@keyframes fadeIn{
from{opacity:0;transform:scale(.9)}
to{opacity:1;transform:scale(1)}
}
/* NAME */
.name span{
font-size:55px;
font-weight:bold;
opacity:0;
animation:letterGlow .6s forwards;
}
.name span:nth-child(n){
animation-delay:calc(var(--i) * .2s);
}
@keyframes letterGlow{
to{
opacity:1;
text-shadow:0 0 20px gold,0 0 40px white;
}
}
/* QUOTE */
.quote{
max-width:80%;
margin:40px auto 60px auto;
font-size:21px;
line-height:1.8;
animation:textFloat 3s infinite alternate;
}
@keyframes textFloat{
to{transform:translateY(-10px)}
}
/* PREMIUM BUTTON */
button{
padding:14px 35px;
border:none;
border-radius:40px;
/* button color changed to blue-pink combo */
background:linear-gradient(45deg,#6a9cff,#ff66cc);
color:white;
font-size:16px;
cursor:pointer;
box-shadow:0 0 15px #6a9cff,0 0 30px #ff66cc;
transition:.3s;
animation:glowBtn 2s infinite alternate;
margin-top:30px; /* move button lower from text */
}
button:hover{
transform:scale(1.1);
}
@keyframes glowBtn{
from{box-shadow:0 0 10px #6a9cff}
to{box-shadow:0 0 30px #6a9cff,0 0 50px #ff66cc}
}
/* CAKE */
.cake{
margin:80px auto 40px auto;
width:230px;
height:130px;
background:linear-gradient(#ffb347,#ff7a00);
border-radius:25px;
position:relative;
box-shadow:0 20px 0 #cc6600,0 35px 30px rgba(0,0,0,.4);
cursor:pointer;
transition:.4s;
}
.candle{
position:absolute;
top:-45px;
width:12px;
height:40px;
background:white;
border-radius:3px;
}
.candle:nth-child(1){left:55px}
.candle:nth-child(2){left:105px}
.candle:nth-child(3){left:155px}
.flame{
position:absolute;
top:-16px;
left:2px;
width:8px;
height:16px;
background:orange;
border-radius:50%;
animation:flicker .25s infinite alternate;
}
@keyframes flicker{
to{transform:scale(1.4)}
}
/* POPUP */
.popup{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:white;
color:#c2185b;
padding:40px;
border-radius:25px;
display:none;
z-index:9998;
box-shadow:0 0 50px gold;
text-align:center;
animation:popupGlow 2s infinite alternate;
}
@keyframes popupGlow{
from{box-shadow:0 0 30px gold}
to{box-shadow:0 0 60px gold,0 0 80px white}
}
/* HEART */
.heart{
position:absolute;
width:18px;
height:18px;
background:red;
transform:rotate(45deg);
opacity:.7;
}
.heart:before,.heart:after{
content:'';
position:absolute;
width:18px;
height:18px;
background:red;
border-radius:50%;
}
.heart:before{top:-9px}
.heart:after{left:-9px}
canvas{
position:fixed;
inset:0;
pointer-events:none;
}
</style>
</head>
<body>
<audio id="bgMusic" loop>
<source src="music.mp3" type="audio/mpeg">
</audio>
<div id="entry">
<div id="count">5</div>
<p>Royal Celebration Loading…</p>
</div>
<canvas id="fireworks"></canvas>
<div class="popup" id="popup">
<h2>🎉 Surprise Muskaan 🎉</h2>
<p>You are truly priceless 💖</p>
<button onclick="startCelebration()">Enter Celebration</button>
</div>
<!-- PAGE 1 -->
<div class="page active" id="page1">
<div class="name">
<span style="--i:1">M</span><span style="--i:2">u</span><span style="--i:3">s</span>
<span style="--i:4">k</span><span style="--i:5">a</span><span style="--i:6">a</span>
<span style="--i:7">n</span> 👑
</div>
<div class="quote">
Muskaan 💖 tum sirf meri sister nahi, meri best friend ho aur meri life ki sabse khoobsurat blessing ho. Tumhari har muskurahat meri duniya ko roshan kar deti hai.
</div>
<div class="cake" onclick="cakeBlast()">
<div class="candle"><div class="flame"></div></div>
<div class="candle"><div class="flame"></div></div>
<div class="candle"><div class="flame"></div></div>
</div>
<button onclick="nextPage(2)">Next ➡</button>
</div>
<!-- PAGE 2 -->
<div class="page" id="page2">
<div class="name">
<span style="--i:1">M</span><span style="--i:2">u</span><span style="--i:3">s</span>
<span style="--i:4">k</span><span style="--i:5">a</span><span style="--i:6">a</span>
<span style="--i:7">n</span> 💕
</div>
<div class="quote">
Tumhari muskurahat meri duniya roshan karti hai 🌸 Har pal tumhare saath yaadgar lagta hai aur tumhari khushi meri sabse badi dua hai.
</div>
<button onclick="nextPage(3)">Final Surprise 🎆</button>
</div>
<!-- PAGE 3 -->
<div class="page" id="page3">
<div class="name">
<span style="--i:1">M</span><span style="--i:2">u</span><span style="--i:3">s</span>
<span style="--i:4">k</span><span style="--i:5">a</span><span style="--i:6">a</span>
<span style="--i:7">n</span> 👑
</div>
<div class="quote">
Happy Birthday Queen 🎂✨ Tumhari zindagi hamesha khushiyon se bhari rahe aur tum hamesha royal shine karti raho.
</div>
<button onclick="nextPage(1)">Replay 🔄</button>
</div>
<script>
let c=5;
let cd=setInterval(()=>{
c--;
count.innerText=c;
if(c===0){
clearInterval(cd);
entry.style.display="none";
popup.style.display="block";
}
},1000);
/* MUSIC FIX (Mobile Support) */
function startCelebration(){
popup.style.display="none";
let music=document.getElementById("bgMusic");
music.play();
}
/* PAGE SWITCH */
function nextPage(n){
document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
document.getElementById("page"+n).classList.add("active");
if(n===3)fireworksOn=true;
}
/* CAKE BLAST */
function cakeBlast(){
document.querySelectorAll('.flame').forEach(f=>f.style.display="none");
firework();
}
/* HEART FLOAT */
setInterval(()=>{
let h=document.createElement("div");
h.className="heart";
h.style.left=Math.random()*100+"vw";
h.style.bottom="0";
document.body.appendChild(h);
let y=0;
let int=setInterval(()=>{
y+=1;
h.style.bottom=y+"vh";
if(y>100){clearInterval(int);h.remove();}
},40);
},1200);
/* FIREWORKS */
const canvas=document.getElementById("fireworks");
const ctx=canvas.getContext("2d");
canvas.width=innerWidth;
canvas.height=innerHeight;
let fireworksOn=false;
let particles=[];
function firework(){
let x = Math.random() * canvas.width;
let y = Math.random() * canvas.height * 0.5;
let colors = ["gold", "pink", "white", "blue", "purple", "cyan", "#ff69b4", "#00ffff"];
for(let i = 0; i < 250; i++){
particles.push({
x, y,
vx: (Math.random() - 0.5) * 12,
vy: (Math.random() - 0.5) * 12,
life: 120,
c: colors[Math.floor(Math.random() * colors.length)]
});
}
}
function animate(){
ctx.clearRect(0,0,canvas.width,canvas.height);
if(fireworksOn && Math.random()<.05)firework();
particles.forEach((p,i)=>{
p.x+=p.vx;
p.y+=p.vy;
p.life--;
ctx.fillStyle=p.c;
ctx.fillRect(p.x,p.y,5,5);
if(p.life<=0)particles.splice(i,1);
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
1
Domains
8KB
Transfer Size
8KB
Content Size
684.0ms
Dom Content Loaded
888.0ms
First Paint
993.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...