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">
<title>Happy Birthday Anitha 🎂</title>
<style>
body{
margin:0;
font-family:Arial;
text-align:center;
background:linear-gradient(120deg,#ff9a9e,#fad0c4);
color:white;
overflow:hidden;
}
/* Heading */
h1{
margin-top:40px;
font-size:50px;
animation: glow 2s infinite alternate;
}
h2{
font-size:35px;
margin-top:-10px;
}
@keyframes glow{
from{ text-shadow:0 0 10px white; }
to{ text-shadow:0 0 30px yellow; }
}
/* Image */
img{
width:220px;
border-radius:20px;
margin-top:20px;
box-shadow:0 0 20px white;
}
/* Cake */
.cake{
font-size:100px;
margin-top:30px;
animation:bounce 2s infinite;
}
@keyframes bounce{
0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}
}
/* Button */
button{
padding:15px 30px;
font-size:20px;
border:none;
border-radius:10px;
background:#ff4081;
color:white;
cursor:pointer;
margin-top:20px;
z-index:5;
position:relative;
}
button:hover{
background:#e91e63;
}
/* Message */
#message{
font-size:28px;
margin-top:25px;
display:none;
font-weight:bold;
}
/* Fireworks */
.firework{
position:absolute;
width:8px;
height:8px;
background:white;
border-radius:50%;
animation:explode 1.2s linear forwards;
}
@keyframes explode{
0%{transform:scale(1);opacity:1;}
100%{transform:scale(18);opacity:0;}
}
</style>
</head>
<body>
<h1>🎉 Happy Birthday 🎉</h1>
<h2>BESTIE 💙🫂</h2>
<h1>ANITHA</h1>
<img src="anitha.jpg" alt="Anitha Photo">
<div class="cake">🎂</div>
<button onclick="showWish()">Click for Surprise 🎁</button>
<p id="message">
🎉 Happy Birthday Anitha 💙🫂 <br><br>
STAY HAPPY 😊 <br>
LIFE LONG HAPPINESS 🥳
</p>
<script>
function showWish(){
document.getElementById("message").style.display="block";
/* continuous fireworks */
setInterval(createFireworks,800);
}
function createFireworks(){
for(let i=0;i<25;i++){
let fire=document.createElement("div");
fire.className="firework";
fire.style.left=Math.random()*window.innerWidth+"px";
fire.style.top=Math.random()*window.innerHeight+"px";
document.body.appendChild(fire);
setTimeout(()=>{
fire.remove();
},1200);
}
}
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
1
Domains
2KB
Transfer Size
3KB
Content Size
129.0ms
Dom Content Loaded
220.0ms
First Paint
129.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...