<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Happy Birthday 🎉</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #1b1b1b, #313131);
display: flex;
justify-content: center;
align-items: center;
color: white;
padding: 20px;
}
.container {
text-align: center;
background: rgba(255,255,255,0.08);
padding: 35px;
border-radius: 20px;
max-width: 480px;
backdrop-filter: blur(8px);
box-shadow: 0 0 20px rgba(255,255,255,0.15);
}
.photo {
width: 240px;
height: 240px;
border-radius: 18px;
object-fit: cover;
margin-bottom: 25px;
animation: float 4s ease-in-out infinite, fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-12px); }
100% { transform: translateY(0); }
}
h1 {
font-size: 24px;
margin-bottom: 12px;
letter-spacing: 1px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-top: 10px;
opacity: 0.9;
}
.emoji {
font-size: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<img class="photo" src="https://i.ibb.co/W4mVZ4y4/Whats-App-Image-2025-11-14-at-10-43-28-PM.jpg" alt="Image">
<h1>Happy Belated Birthday SODIUMM…</h1>
<div class="emoji">🎂</div>
<p>I know this wish is late, but the warmth behind it is real.</p>
<p>
Tum hamesha dusro ka din better banati ho.
Aaj tumhare liye bhi wahi ho.
Kuch log din ko thoda aur bright bana dete hain.
Tum unme se ho.
</p>
<p style="margin-top:18px; font-weight:bold;">
HOPE ki tum IAS Officer ban jao…
</p>
</div>
</body>
</html>