<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Happy Birthday, My Love!</title>
<style>
body {
margin: 0;
background: #D98880;
font-family: 'Comic Sans MS', cursive, sans-serif;
text-align: center;
overflow: hidden;
}
h1 {
font-size: 3rem;
color: #000000;
margin-top: 100px;
animation: popIn 1s ease-out;
}
p {
font-size: 1.5rem;
color: #ff3399;
margin: 20px;
animation: fadeIn 2s ease-out;
}
button {
padding: 10px 20px;
font-size: 1.2rem;
border: none;
background: #ff66a3;
color: white;
border-radius: 10px;
cursor: pointer;
animation: pulse 2s infinite;
}
.heart {
width: 20px;
height: 20px;
background: red;
position: absolute;
transform: rotate(45deg);
animation: float 5s linear infinite;
}
.heart:before, .heart:after {
content: "";
width: 20px;
height: 20px;
background: red;
position: absolute;
border-radius: 50%;
}
.heart:before {
top: -10px;
left: 0;
}
.heart:after {
left: -10px;
top: 0;
}
@keyframes float {
0% {
bottom: -50px;
opacity: 1;
transform: translateX(0) rotate(45deg);
}
100% {
bottom: 100%;
opacity: 0;
transform: translateX(50px) rotate(45deg);
}
}
@keyframes popIn {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<h1>Happy Birthday, Babe!</h1>
<p>You're officially 1 year hotter!</p>
<p>And still my favorite human. Forever and always.This day marks to the presense
of everything gifted to me. Happy birthday to my qalf.There's
nothing else I would call you other than my my heart for how much you define
being that of me.I would be dead without you and you keep me going.</p>
<button onclick="showMessage()">Click for a surprise</button>
<script>
function showMessage() {
alert("I just pray that time flies by even faster and I'm sooner w you to
love you properly and cherish you the right way meri jaan. May Allah bless you and
grant you all the khair success you wish for.May he bring you peace and complete
your dream of making your parents proud");
}
function createHearts() {
const heart = document.createElement("div");
heart.classList.add("heart");
heart.style.left = Math.random() * 100 + "vw";
heart.style.animationDuration = Math.random() * 2 + 3 + "s";
document.body.appendChild(heart);
setTimeout(() => {
heart.remove();
}, 5000);
}
setInterval(createHearts, 300);
</script>
</body>
</html>
