<!DOCTYPE html>

<html>

<head>

<title>For My Chunnu 💖</title>

<style>

body{

margin:0;

font-family:'Poppins',sans-serif;

background:linear-gradient(135deg,#ffe3f1,#fff0f7,#ffd6ea);

text-align:center;

overflow-x:hidden;

}

section{padding:70px 20px;}

.card{

background:rgba(255,255,255,.9);

border-radius:40px;

padding:40px;

box-shadow:0 30px 70px rgba(255,120,170,.35);

max-width:680px;

margin:auto;

}

h1{color:#ff2f68;}

h2{color:#ff78aa;}

.hidden{display:none}

/* floating hearts */

.heart,.petal{

position:fixed;

top:-10vh;

animation:fall linear infinite;

pointer-events:none;

}

@keyframes fall{

to{transform:translateY(110vh) rotate(360deg);}

}

/* gift */

.gift{

font-size:140px;

cursor:pointer;

animation:bounce 1.4s infinite;

}

@keyframes bounce{

50%{transform:translateY(-14px)}

}

/* letter */

.letter{

text-align:left;

font-size:18px;

line-height:1.9;

animation:fade 1.2s ease;

}

@keyframes fade{

from{opacity:0;transform:translateY(40px)}

to{opacity:1}

}

/* buttons */

.yesBtn{

background:linear-gradient(135deg,#ff77b7,#ff2f68);

color:white;

border:none;

padding:16px 36px;

border-radius:45px;

font-size:18px;

box-shadow:0 12px 30px rgba(255,70,130,.6);

cursor:pointer;

transition:.3s;

}

.yesBtn:hover{transform:scale(1.12)}

.noBtn{

position:absolute;

background:#ffe1ec;

border:none;

padding:16px 30px;

border-radius:45px;

font-size:18px;

cursor:pointer;

}

/* cute surprise box */

.surprise{

font-size:120px;

cursor:pointer;

transition:.4s;

}

.surprise:hover{transform:scale(1.15)}

</style>

</head>

<body>

<h1>Anagh Kaushik 💕</h1>

<h2>My Chunnu 🥺💖</h2>

<p>You are my forever favourite person 🌸</p>

</div>

</section>

<h2>Your first surprise 🎁</h2>

</div>

</section>

<p>

Dear chunnu,<br><br>

My baby I love you the most okayy ?? you make me feel the most happiest warm and safe 😋😋😋

you are cute like a cat you send me everytime 🐱

you are the most hottest 🧨 person on this planet and yesss I am in love with you 🤭

I feel butterflies 🦋 when I see you, when you hold my hands 🤝, hug me, feed me, take care of me 🧿

when your face comes closer, when your nose touches my nose 👩‍❤️‍👨

You are cutest when you sleep beside me with your mouth open 🤭 and snore like a big guy but still my baby 👶

Your obsession with potty and serious relationship with your stomach must be studied 😂

Sometimes you take care of me like a baby 🥺 but you love being my baby too and I love it 💋

There’s so much more I can never finish writing…

but lastly — I loveeeee youuu the mosttttt ❤️😭🧿

Your deluchu 💕

</p>

</div>

</section>

<h2>Will you be my Valentine? 💘</h2>

<button class="yesBtn" onclick="yesClick()">Yesssss 😭💖</button>

</div>

</div>

</section>

<h2>Your second surprise 💝</h2>

You are my favourite human forever 🥺💖

My heart chose you and it will always choose you 🧿💕

</p>

</div>

</section>

</audio>

function openLetter(){

document.getElementById("letterBox").classList.remove("hidden");

}

function openSurprise(){

document.getElementById("surpriseText").classList.remove("hidden");

}

const noBtn=document.getElementById("noBtn");

noBtn.onmouseover=()=>{

const x = Math.random()*300 - 150;

const y = Math.random()*80 - 40;

noBtn.style.transform = `translate(${x}px, ${y}px)`;

}

function yesClick(){

document.getElementById("valMsg").innerHTML="YAYYYY 😭💖 Forever mine 🧿💍💘";

const song=document.getElementById("loveSong");

song.volume=0.8;

song.play();

for(let i=0;i<40;i++) burstHeart();

}

function burstHeart(){

let h=document.createElement("div");

h.innerHTML="💖";

h.style.position="fixed";

h.style.left="50%";

h.style.top="50%";

h.style.fontSize=20+Math.random()*30+"px";

h.style.transform = `translate(${Math.random()*400-200}px, ${Math.random()*400-200}px)`;

h.style.transition="1s";

document.body.appendChild(h);

setTimeout(()=>h.remove(),1000);

}

/* falling hearts + petals */

function fall(type){

let e=document.createElement("div");

e.className=type;

e.innerHTML= type==="heart"?"💗":"🌸";

e.style.left=Math.random()*100+"%";

e.style.fontSize=18+Math.random()*24+"px";

e.style.animationDuration=5+Math.random()*6+"s";

document.body.appendChild(e);

setTimeout(()=>e.remove(),12000);

}

setInterval(()=>fall("heart"),400);

setInterval(()=>fall("petal"),600);

</script>

</body>

</html>

Converted to HTML with WordToHTML.net | Document Converter for Windows