<title>Happy Birthday 💖</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: linear-gradient(135deg, #ffe6e6, #fff5f5);
color: #333;
text-align: center;
}
/* MAIN PAGE */
.container {
padding: 30px;
}
h1 {
color: #ff5c8a;
font-size: 40px;
}
.subtitle {
margin-top: -10px;
color: #777;
}
.card {
background: white;
width: 80%;
max-width: 800px;
margin: 20px auto;
display: flex;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.card img {
width: 50%;
object-fit: cover;
}
.card-text {
padding: 20px;
text-align: left;
}
.card-text h2 {
color: #ff4d7d;
}
/* COUNTDOWN */
.countdown {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.time-box {
background: white;
padding: 15px;
border-radius: 10px;
width: 80px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.time-box span {
font-size: 20px;
color: #ff4d7d;
font-weight: bold;
}
/* INVITE */
.invite {
background: white;
padding: 20px;
margin: 30px auto;
width: 80%;
max-width: 500px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
button {
padding: 10px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
margin: 10px;
font-size: 16px;
}
.yes {
background: #ff4d7d;
color: white;
}
.no {
background: #ddd;
}
/* SECOND SCREEN */
#secondPage {
display: none;
height: 100vh;
align-items: center;
justify-content: center;
flex-direction: column;
}
.big {
font-size: 40px;
color: #ff4d7d;
}
</style>
<h1>🎀 Happy Birthday! 🎀</h1>
<p class="subtitle">To the most amazing person in my life</p>
<div class="card">
<img src="image(2).png" alt="photo"/>
<div class="card-text">
<h2>❤️ My Love</h2>
<p>
I am so incredibly <b>happy</b> to celebrate this special day with you.
Every moment with you is a blessing, and I can't wait to make more beautiful memories together.
<br><br>
I want you to know how <b>proud</b> I am of you. Everything you achieve fills my heart with joy and admiration.
<br><br>
<i>I love you more than words can express. ❤️</i>
</p>
</div>
</div>
<h3>Counting down to our celebration!</h3>
<div class="countdown">
<div class="time-box"><span id="days">3</span><br>Days</div>
<div class="time-box"><span id="hours">2</span><br>Hours</div>
<div class="time-box"><span id="minutes">5</span><br>Minutes</div>
<div class="time-box"><span id="seconds">20</span><br>Seconds</div>
</div>
<div class="invite">
<h3>🎉 You're Invited!</h3>
<p>Join me for an unforgettable evening 💖</p>
<button class="yes" onclick="showYes()">Yes 💖</button>
<button class="no">Absolutely Yes! 😍</button>
</div>
🎉 Yay! I can't wait to see you!
This is going to be the best celebration ever! ❤️
<script>
// SIMPLE COUNTDOWN (static style like your screenshot)
let d = 3, h = 2, m = 5, s = 20;
setInterval(() => {
if (s > 0) s--;
else {
s = 59;
if (m > 0) m--;
}
document.getElementById("seconds").innerText = s;
document.getElementById("minutes").innerText = m;
}, 1000);
// SWITCH PAGE ON YES
function showYes() {
document.getElementById("mainPage").style.display = "none";
document.getElementById("secondPage").style.display = "flex";
}
</script>
This is going to be the best celebration ever! ❤️