<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Aahana & Rajyavradhan</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?
family=Great+Vibes&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<style>
/* General Styles */
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background: #fff5f7;
color: #333;
text-align: center;
overflow-x: hidden;
}
html {
scroll-behavior: smooth;
}
/* Cover Video */
video.cover {
width: 100%;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
z-index: 0;
}
.overlay {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.35);
z-index:1;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}/* Header */
h1 {
font-family: 'Great Vibes', cursive;
font-size: 4em;
color: white;
margin: 0;
}
/* Navbar */
nav {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
background: rgba(255,255,255,0.2);
padding: 10px 20px;
border-radius: 20px;
}
nav button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 20px;
background: rgba(255, 120, 143, 0.8);
color: white;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
nav button:hover {
background: rgba(255, 80, 120, 0.9);
}
/* Sections */
.section {
display: none;
padding: 60px 20px;
max-width: 800px;
margin: auto;
position: relative;
z-index: 2;
}
.active {
display: block;
}
img {
width: 250px;
max-width: 90%;
border-radius: 15px;margin: 10px;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery img {
width: 30%;
max-width: 150px;
margin: 5px;
border-radius: 10px;
}
button.miss-me, button.overthinking {
padding: 12px 25px;
background: #ff758f;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
margin-top: 20px;
font-size: 16px;
}
/* Falling Hearts */
.heart {
width: 12px;
height: 12px;
position: fixed;
background: rgba(255, 120, 143, 0.6);
transform: rotate(45deg);
z-index: 1;
pointer-events: none;
border-radius: 2px;
}
.heart::before, .heart::after {
content:'';
width: 12px;
height: 12px;
position: absolute;
background: rgba(255, 120, 143, 0.6);
border-radius: 50%;
}
.heart::before { top: -6px; left: 0; }
.heart::after { left: 6px; top: 0; }
@keyframes fall {
0% {transform: translateY(0) rotate(45deg); opacity:1;}
100% {transform: translateY(100vh) rotate(45deg); opacity:0;}}
</style>
<script>
function showSection(id){
document.querySelectorAll(".section").forEach(s =>
s.classList.remove("active"));
document.getElementById(id).classList.add("active");
}
// "Miss Me" button
function missMe(){
alert("I miss you too, mere Jaan! 💖 Always thinking of you!");
}
// Overthinking reassurance
function calmDown(){
alert("Rakshu calm down baba \nNothing has changed and nothing
will ever change! I still love you. I still choose you.\nPlease
Smile, your smile is my favourite thing 💗 ");
}
// Continuous falling hearts
function createHearts() {
setInterval(() => {
let heart = document.createElement('div');
heart.className = 'heart';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.animation = `fall ${5 + Math.random() * 5}s linear
0s forwards`;
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 10000);
}, 300);
}
window.onload = function() {
createHearts();
showSection('love'); // Show first section by default
};
</script>
</head>
<body>
<!-- Cover Video -->
<video class="cover" autoplay muted loop>
<source src="background.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Overlay with header and navbar -->
<div class="overlay">
<h1>Aahana & Rajyavradhan</h1><nav>
<button onclick="showSection('love')">Reasons I Love You</
button>
<button onclick="showSection('photos')">Photos</button>
<button onclick="showSection('loveletter')">Love Letter</button>
<button onclick="showSection('music')">Playlist</button>
<button onclick="calmDown()">If You're Overthinking</button>
</nav>
</div>
<!-- Sections -->
<div id="love" class="section">
<h2>Reasons I Love You</h2>
<p>
The way you giggle when I tickle you 🌸 <br>
The way you care for me 🥰 <br>
The way you make small moments special ✨ <br>
The way you hold me tight 🤍 <br>
The way you always support me 💖
</p>
<button class="miss-me" onclick="missMe()">Press when you miss me 💌 </button>
</div>
<div id="photos" class="section">
<h2>Our Memories</h2>
<div class="gallery">
<img src="IMG_8002.jpg" alt="Memory 1">
<img src="IMG_9851.jpg" alt="Memory 2">
<img src="IMG_8863.jpg" alt="Memory 3">
<img src="349DF475-D280-47C7-959E-EC006CA1C2C3.jpg" alt="Memory
4">
<img src="096061DE-1004-41AE-BB85-897A8B27D245.jpg" alt="Memory
5">
</div>
</div>
<div id="loveletter" class="section">
<h2>My Love Letter</h2>
<p>
Dear Rakshu baba ,<br><br>
Just a little warning baba: I’ll always be here
No matter where you go, I’ll somehow find you and tickle you
like crazy hihihihihi!
Former yours, because running from me is impossible <br><br>
Love, Aanzu 💖
</p>
</div>
<div id="music" class="section">
<h2>R&A Mix</h2>
<iframe allow="autoplay *; encrypted-media *;" frameborder="0"
height="450" style="width:100%;max-
width:660px;overflow:hidden;background:transparent;" sandbox="allow-
forms allow-popups allow-same-origin allow-scripts allow-top-
navigation-by-user-activation" src="https://embed.music.apple.com/
us/playlist/YOUR_PLAYLIST_ID_HERE"></iframe><iframe allow="autoplay *; encrypted-media *;" frameborder="0"
height="450" style="width:100%;max-
width:660px;overflow:hidden;background:transparent;" sandbox="allow-
forms allow-popups allow-same-origin allow-scripts allow-top-
navigation-by-user-activation" src="https://embed.music.apple.com/
us/playlist/YOUR_PLAYLIST_ID_HERE"></iframe>
</div>
</body>
</html>