<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For My Babe 💗</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Georgia", serif;
background: linear-gradient(135deg, #fff0f5, #ffe0eb, #fff7fa);
color: #853653;
text-align: center;
overflow-x: hidden;
}
section {
padding: 70px 20px;
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-size: clamp(2.3rem, 7vw, 4rem);
color: #d63375;
margin-bottom: 20px;
}
h2 {
font-size: clamp(1.8rem, 5vw, 2.6rem);
margin-bottom: 22px;
color: #c43c72;
}
p {
font-size: 1.1rem;
line-height: 1.9;
max-width: 650px;
margin: 12px auto;
}
.small {
font-size: 0.95rem;
color: #a35a78;
}
.btn {
border: none;
border-radius: 30px;
padding: 14px 26px;
margin: 12px 6px;
font-size: 1rem;
cursor: pointer;
transition: 0.25s;
background: #e94f91;
color: white;
box-shadow: 0 5px 15px #e94f9133;
}
.btn:hover {
transform: translateY(-3px) scale(1.03);
}
.secondary {
background: white;
color: #d63375;
border: 1px solid #f3a4c5;
}
.card {
width: min(100%, 680px);
background: #ffffffc9;
padding: 30px 24px;
border-radius: 25px;
box-shadow: 0 10px 35px #d633751a;
border: 1px solid #ffffff;
}
.hidden {
display: none !important;
}
.heart {
position: fixed;
bottom: -40px;
pointer-events: none;
z-index: 5;
animation: floatUp linear forwards;
}
@keyframes floatUp {
from {
transform: translateY(0) rotate(0);
opacity: 0;
}
15% { opacity: 0.8; }
to {
transform: translateY(-110vh) rotate(35deg);
opacity: 0;
}
}
.memory-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
width: min(100%, 650px);
margin: 20px auto;
}
.memory {
background: white;
padding: 10px;
border-radius: 15px;
box-shadow: 0 5px 18px #c43c721a;
}
.memory img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 10px;
background: #ffe1ed;
}
.memory p {
font-size: 0.9rem;
margin: 8px 0 2px;
}
.letter {
text-align: left;
white-space: pre-line;
}
.big-heart {
font-size: 4rem;
animation: heartbeat 1.2s infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
footer {
padding: 25px 15px;
font-size: 0.9rem;
color: #a35a78;
}
@media (max-width: 420px) {
section { padding: 55px 16px; }
.card { padding: 24px 17px; }
.memory-grid { gap: 9px; }
.btn { padding: 12px 19px; }
}
</style>
</head>
<body>
<!-- Background music: add your song as song.mp3 -->
<audio id="music" loop>
<source src="song.mp3" type="audio/mpeg">
</audio>
<!-- WELCOME -->
<section id="home">
<div class="big-heart">💗</div>
<p class="small">A little surprise, made with love...</p>
<h1>Hey, Babe! 🥹</h1>
<p>
I made a tiny corner of the internet
just for my favorite person.
</p>
<p>And yes, that's YOU. ♡</p>
<button class="btn" onclick="openSurprise()">
Open Your Surprise 💌
</button>
<button class="btn secondary" onclick="toggleMusic()">
🎵 Play Our Song
</button>
</section>
<main id="surprise" class="hidden">
<!-- MEMORIES -->
<section>
<h2>My Favorite Memories 📸</h2>
<p>
Every little moment with you becomes
something I want to remember forever.
</p>
<div class="memory-grid">
<div class="memory">
<!-- Replace photo1.jpg with your photo file -->
<img src="photo1.jpg"
alt="Our favorite memory"
onerror="this.style.display='none'">
<p>My favorite person ♡</p>
</div>
<div class="memory">
<img src="photo2.jpg"
alt="A special moment together"
onerror="this.style.display='none'">
<p>My happy place 💗</p>
</div>
<div class="memory">
<img src="photo3.jpg"
alt="A beautiful memory"
onerror="this.style.display='none'">
<p>Us, being us 🌷</p>
</div>
<div class="memory">
<img src="photo4.jpg"
alt="A moment to treasure"
onerror="this.style.display='none'">
<p>More memories to come ✨</p>
</div>
</div>
<p class="small">
The best part of my memories is having you in them.
</p>
</section>
<!-- LOVE LETTER -->
<section>
<div class="card">
<p>♡ A little letter for you ♡</p>
<h2>To My Babe 💌</h2>
<div class="letter">
My Babe,
If I could give you one thing in this world,
it would be the chance to see yourself through my eyes.
Maybe then you would understand how special you are to me.
You make ordinary days feel a little brighter.
Your presence brings me comfort, your smile makes me happy,
and even the smallest moments with you mean more than you know.
I know love isn't about being perfect.
It's about understanding each other, growing together,
being there on the difficult days,
and choosing each other even when life gets messy.
I don't need every day to be magical.
I just want more ordinary days with you.
More laughter, more silly conversations,
more hugs, more memories, and more reasons to love you.
Thank you for being part of my life, Babe.
Whatever beautiful chapters come next,
I hope we get to write many of them together.
I love you more than this little website can ever explain.
Always your girl, ♡
</div>
</div>
</section>
<!-- SPECIAL QUESTION -->
<section id="question">
<div class="big-heart">💖</div>
<p class="small">Okay, Babe... one little question.</p>
<h2>Will you keep choosing me? 🥹</h2>
<p>
Today, tomorrow, on the happy days
and on the difficult ones too?
</p>
<button class="btn" onclick="sayYes()">
YES, ALWAYS! 💗
</button>
<button class="btn secondary" onclick="sayHug()">
I need a hug first 🥺
</button>
<div id="answer" class="hidden card" style="margin-top:25px">
<div class="big-heart">💞</div>
<h2 id="answerTitle">My favorite YES!</h2>
<p id="answerText">
You have my heart, Babe.
Here's to choosing each other, again and again. ♡
</p>
</div>
</section>
<!-- ENDING -->
<section>
<div class="big-heart">💗</div>
<h2>One Last Thing, Babe...</h2>
<p>
If I had to start my story all over again,
I would still hope our paths would cross.
</p>
<p>
Not because our story has to be perfect,
but because you're someone I want beside me
while we figure life out together.
</p>
<h1 style="font-size:2rem">I choose you. ♡</h1>
<p>Today, tomorrow, and one day at a time.</p>
<button class="btn" onclick="window.scrollTo({top:0,behavior:'smooth'})">
Read It Again 💌
</button>
</section>
</main>
<footer>
Made with all my love, just for you, Babe. 💗
</footer>
<script>
const music = document.getElementById("music");
function openSurprise() {
document.getElementById("surprise").classList.remove("hidden");
music.play().catch(() => {
// Some browsers require a separate tap to play audio.
});
document.getElementById("surprise").scrollIntoView({
behavior: "smooth"
});
makeHearts(18);
}
function toggleMusic() {
if (music.paused) {
music.play().catch(() => {
alert("Please add song.mp3 next to index.html first!");
});
} else {
music.pause();
}
}
function sayYes() {
document.getElementById("answerTitle").textContent =
"My favorite YES! 💖";
document.getElementById("answerText").textContent =
"You have my heart, Babe. Here's to choosing each other, again and again. I love you! ♡";
document.getElementById("answer").classList.remove("hidden");
makeHearts(35);
document.getElementById("answer").scrollIntoView({
behavior: "smooth",
block: "center"
});
}
function sayHug() {
document.getElementById("answerTitle").textContent =
"Hug incoming! 🫂";
document.getElementById("answerText").textContent =
"Come here, Babe. Big hug first, unlimited kisses after. You are loved more than you know! 💗";
document.getElementById("answer").classList.remove("hidden");
makeHearts(20);
}
function makeHearts(count = 8) {
const symbols = ["💗", "💕", "💖", "♡", "🌸"];
for (let i = 0; i < count; i++) {
const heart = document.createElement("div");
heart.className = "heart";
heart.textContent =
symbols[Math.floor(Math.random() * symbols.length)];
heart.style.left = Math.random() * 100 + "vw";
heart.style.fontSize = (16 + Math.random() * 22) + "px";
heart.style.animationDuration = (4 + Math.random() * 4) + "s";
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 8500);
}
}
setInterval(() => makeHearts(2), 1600);
</script>
</body>
</html>