<title>Birthday Surprise 💖</title>
<style>
body {
margin: 0;
font-family: Arial;
text-align: center;
background: linear-gradient(135deg, #ff758c, #ff7eb3);
color: white;
overflow: hidden;
}
h1 {
margin-top: 60px;
font-size: 42px;
}
button {
padding: 12px 25px;
border: none;
border-radius: 20px;
background: white;
color: #ff4e50;
cursor: pointer;
margin-top: 20px;
}
/* Typing text */
#typing {
margin-top: 20px;
font-size: 22px;
width: 80%;
margin-left: auto;
margin-right: auto;
border-right: 2px solid white;
white-space: nowrap;
overflow: hidden;
}
/* Slideshow */
#slideshow {
display: none;
margin-top: 20px;
}
#slideshow img {
width: 220px;
height: 220px;
border-radius: 15px;
}
/* Popup */
#popup {
display: none;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
color: black;
padding: 20px;
border-radius: 15px;
}
/* Balloons */
.balloon {
position: absolute;
bottom: -100px;
width: 50px;
height: 70px;
border-radius: 50%;
animation: float 6s infinite;
}
.balloon:nth-child(1){left:10%; background:red;}
.balloon:nth-child(2){left:30%; background:blue;}
.balloon:nth-child(3){left:50%; background:yellow;}
.balloon:nth-child(4){left:70%; background:green;}
@Keyframes float {
from {transform: translateY(0);}
to {transform: translateY(-800px);}
}
</style>
🎉 Happy Birthday myy love 🌼🎀 🎉
Start Surprise 💖
<script>
let text = "You are the most beautiful part of my life... 💖 I hope your day is filled with happiness, smiles, and love 🌸";
let i = 0;
function startSurprise() {
document.getElementById("slideshow").style.display = "block";
document.getElementById("music").play();
typeWriter();
setTimeout(() => {
document.getElementById("popup").style.display = "block";
}, 4000);
startSlideshow();
}
function typeWriter() {
if (i < text.length) {
document.getElementById("typing").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, 50);
}
}
let images = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
let index = 0;
function startSlideshow() {
setInterval(() => {
index = (index + 1) % images.length;
document.getElementById("slide").src = images[index];
}, 2000);
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
</script>
<title>Birthday Surprise 💖</title>
<style>
body {
margin: 0;
font-family: Arial;
text-align: center;
background: linear-gradient(135deg, #ff758c, #ff7eb3);
color: white;
overflow: hidden;
}
h1 {
margin-top: 60px;
font-size: 42px;
}
button {
padding: 12px 25px;
border: none;
border-radius: 20px;
background: white;
color: #ff4e50;
cursor: pointer;
margin-top: 20px;
}
/* Typing text */
#typing {
margin-top: 20px;
font-size: 22px;
width: 80%;
margin-left: auto;
margin-right: auto;
border-right: 2px solid white;
white-space: nowrap;
overflow: hidden;
}
/* Slideshow */
#slideshow {
display: none;
margin-top: 20px;
}
#slideshow img {
width: 220px;
height: 220px;
border-radius: 15px;
}
/* Popup */
#popup {
display: none;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
color: black;
padding: 20px;
border-radius: 15px;
}
/* Balloons */
.balloon {
position: absolute;
bottom: -100px;
width: 50px;
height: 70px;
border-radius: 50%;
animation: float 6s infinite;
}
.balloon:nth-child(1){left:10%; background:red;}
.balloon:nth-child(2){left:30%; background:blue;}
.balloon:nth-child(3){left:50%; background:yellow;}
.balloon:nth-child(4){left:70%; background:green;}
@Keyframes float {
from {transform: translateY(0);}
to {transform: translateY(-800px);}
}
</style>
🎉 Happy Birthday myy love 🌼🎀 🎉
Start Surprise 💖
<script>
let text = "You are the most beautiful part of my life... 💖 I hope your day is filled with happiness, smiles, and love 🌸";
let i = 0;
function startSurprise() {
document.getElementById("slideshow").style.display = "block";
document.getElementById("music").play();
typeWriter();
setTimeout(() => {
document.getElementById("popup").style.display = "block";
}, 4000);
startSlideshow();
}
function typeWriter() {
if (i < text.length) {
document.getElementById("typing").innerHTML += text.charAt(i);
i++;
setTimeout(typeWriter, 50);
}
}
let images = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
let index = 0;
function startSlideshow() {
setInterval(() => {
index = (index + 1) % images.length;
document.getElementById("slide").src = images[index];
}, 2000);
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
</script>
🎉 Happy Birthday myy love 🌼🎀 🎉
Start Surprise 💖
No matter what happens… you will always be special to me 💖
Close
🎉 Happy Birthday myy love 🌼🎀 🎉
Start Surprise 💖
No matter what happens… you will always be special to me 💖
Close