<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gambeera ❤️ Kanmani</title> <style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Great+Vibes&family=Poppins:wght@400;500;600;700&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
width:100%;
min-height:100%;
font-family:Poppins,sans-serif;
background:#07000d;
color:white;
}
body{
overflow-x:hidden;
}
/* ================= BACKGROUND ================= */
body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(255,40,130,.18),transparent 25%),
radial-gradient(circle at 80% 30%,rgba(130,40,255,.18),transparent 25%),
radial-gradient(circle at 50% 90%,rgba(255,100,180,.15),transparent 30%);
pointer-events:none;
z-index:-2;
}
/* ================= FLOATING HEARTS ================= */
.hearts{
position:fixed;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:20;
}
.heart{
position:absolute;
bottom:-50px;
font-size:22px;
animation:floatUp linear infinite;
opacity:.8;
}
.heart:nth-child(1){left:5%;animation-duration:9s;}
.heart:nth-child(2){left:15%;animation-duration:12s;animation-delay:2s;}
.heart:nth-child(3){left:27%;animation-duration:8s;animation-delay:1s;}
.heart:nth-child(4){left:40%;animation-duration:11s;animation-delay:4s;}
.heart:nth-child(5){left:53%;animation-duration:9s;animation-delay:2s;}
.heart:nth-child(6){left:67%;animation-duration:13s;animation-delay:3s;}
.heart:nth-child(7){left:78%;animation-duration:10s;animation-delay:1s;}
.heart:nth-child(8){left:90%;animation-duration:12s;animation-delay:5s;}
@keyframes floatUp{
0%{
transform:translateY(0) scale(.5) rotate(0deg);
opacity:0;
}
20%{opacity:.9;}
100%{
transform:translateY(-110vh) scale(1.5) rotate(25deg);
opacity:0;
}
}
/* ================= PAGE SYSTEM ================= */
.page{
display:none;
min-height:100vh;
width:100%;
padding:40px 20px;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
}
#p1:checked ~ .pages .page1,
#p2:checked ~ .pages .page2,
#p3:checked ~ .pages .page3,
#p4:checked ~ .pages .page4,
#p5:checked ~ .pages .page5,
#p6:checked ~ .pages .page6,
#p7:checked ~ .pages .page7,
#p8:checked ~ .pages .page8,
#p9:checked ~ .pages .page9,
#p10:checked ~ .pages .page10,
#p11:checked ~ .pages .page11,
#p12:checked ~ .pages .page12,
#p13:checked ~ .pages .page13{
display:flex;
}
input[type="radio"]{
display:none;
}
/* ================= CARD ================= */
.card{
width:min(900px,94%);
padding:55px 35px;
border:1px solid rgba(255,255,255,.25);
border-radius:35px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
box-shadow:
0 0 40px rgba(255,40,140,.18),
inset 0 0 30px rgba(255,255,255,.04);
animation:appear 1s ease;
}
@keyframes appear{
from{
opacity:0;
transform:scale(.9) translateY(20px);
}
to{
opacity:1;
transform:scale(1) translateY(0);
}
}
.small{
letter-spacing:5px;
font-size:13px;
text-transform:uppercase;
opacity:.75;
}
h1{
font-family:"Great Vibes",cursive;
font-size:clamp(55px,10vw,100px);
line-height:1;
margin:18px 0;
text-shadow:0 0 25px rgba(255,100,190,.7);
}
h2{
font-family:"Cormorant Garamond",serif;
font-size:clamp(35px,7vw,65px);
margin-bottom:20px;
}
p{
font-family:"Cormorant Garamond",serif;
font-size:24px;
line-height:1.6;
max-width:720px;
margin:15px auto;
}
/* ================= BUTTON ================= */
.btn{
display:inline-block;
margin:18px 8px 0;
padding:14px 28px;
border-radius:50px;
border:1px solid rgba(255,255,255,.4);
background:linear-gradient(135deg,#ff3d9a,#8b3dff);
color:white;
font-weight:600;
cursor:pointer;
text-decoration:none;
box-shadow:0 0 25px rgba(255,50,160,.35);
transition:.3s;
}
.btn:hover{
transform:translateY(-4px) scale(1.04);
box-shadow:0 0 35px rgba(255,50,160,.7);
}
/* ================= PAGE COLORS ================= */
.page1{background:radial-gradient(circle,#4b0d35,#09000f);}
.page2{background:radial-gradient(circle,#5b123e,#10000e);}
.page3{background:radial-gradient(circle,#35106b,#09000f);}
.page4{background:radial-gradient(circle,#60194d,#10000f);}
.page5{background:radial-gradient(circle,#25106a,#07000e);}
.page6{background:radial-gradient(circle,#68213f,#0b000b);}
.page7{background:radial-gradient(circle,#3a155c,#08000d);}
.page8{background:radial-gradient(circle,#68163d,#0b000d);}
.page9{background:radial-gradient(circle,#5c103d,#09000e);}
.page10{background:radial-gradient(circle,#101b50,#030612);}
.page11{background:radial-gradient(circle,#48135a,#09000e);}
.page12{background:radial-gradient(circle,#190d48,#05000b);}
.page13{
background:
radial-gradient(circle at center,#8a174e,#24082f 45%,#030006);
}
/* ================= HEART ================= */
.bigHeart{
font-size:110px;
animation:heartbeat 1.4s infinite;
filter:drop-shadow(0 0 25px #ff3d9a);
}
@keyframes heartbeat{
0%,100%{transform:scale(1);}
50%{transform:scale(1.18);}
}
/* ================= ENVELOPE ================= */
.envelope{
width:280px;
height:190px;
margin:30px auto;
position:relative;
background:linear-gradient(135deg,#ff7dbd,#b948ff);
border-radius:12px;
box-shadow:0 0 35px rgba(255,70,180,.5);
}
.envelope::before{
content:"";
position:absolute;
top:0;
left:0;
border-left:140px solid transparent;
border-right:140px solid transparent;
border-top:105px solid rgba(255,255,255,.25);
}
/* ================= KEY ================= */
.key{
display:inline-flex;
width:120px;
height:120px;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:65px;
background:rgba(255,255,255,.08);
border:2px solid rgba(255,220,120,.8);
box-shadow:
0 0 20px #ffd35a,
0 0 60px rgba(255,170,40,.5);
cursor:pointer;
animation:keyGlow 1.7s infinite;
}
@keyframes keyGlow{
50%{
transform:scale(1.08) rotate(5deg);
box-shadow:0 0 40px #ffd35a,0 0 90px rgba(255,170,40,.7);
}
}
/* ================= FINAL ================= */
.names{
margin:30px auto;
}
.names .person{
font-family:"Great Vibes",cursive;
font-size:clamp(48px,9vw,90px);
text-shadow:0 0 25px rgba(255,150,210,.8);
}
.and{
font-family:"Cormorant Garamond",serif;
font-size:30px;
margin:5px;
}
.babies{
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
margin:35px 0;
}
.baby{
padding:22px 28px;
border-radius:25px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.25);
font-family:"Cormorant Garamond",serif;
font-size:25px;
box-shadow:0 0 25px rgba(255,100,180,.2);
}
.baby span{
display:block;
font-size:48px;
margin-bottom:8px;
}
.kiss{
font-size:75px;
margin:25px;
animation:kiss 2s infinite;
}
@keyframes kiss{
0%,100%{transform:scale(1) rotate(-4deg);}
50%{transform:scale(1.2) rotate(4deg);}
}
.finalText{
max-width:800px;
margin:auto;
}
.footer{
margin-top:35px;
font-size:14px;
opacity:.65;
letter-spacing:2px;
}
/* ================= MOBILE ================= */
@media(max-width:600px){
.card{
padding:40px 20px;
}
p{
font-size:21px;
}
.btn{
width:85%;
margin:10px auto;
}
.envelope{
transform:scale(.8);
}
.bigHeart{
font-size:85px;
}
}
</style> </head> <body> <!-- ================= FLOATING LOVE SYMBOLS ================= --> <div class="hearts">
<span class="heart">❤️</span>
<span class="heart">💗</span>
<span class="heart">💖</span>
<span class="heart">💕</span>
<span class="heart">✨</span>
<span class="heart">💞</span>
<span class="heart">❤️</span>
<span class="heart">💫</span>
</div> <!-- ================= PAGE CONTROLS ================= --> <input type="radio" name="page" id="p1" checked>
<input type="radio" name="page" id="p2">
<input type="radio" name="page" id="p3">
<input type="radio" name="page" id="p4">
<input type="radio" name="page" id="p5">
<input type="radio" name="page" id="p6">
<input type="radio" name="page" id="p7">
<input type="radio" name="page" id="p8">
<input type="radio" name="page" id="p9">
<input type="radio" name="page" id="p10">
<input type="radio" name="page" id="p11">
<input type="radio" name="page" id="p12">
<input type="radio" name="page" id="p13"> <div class="pages"> <!-- ================= PAGE 1 ================= --> <section class="page page1">
<div class="card"> <div class="small">A little message from Kanmani</div> <h1>Gambeera...</h1> <div class="bigHeart">❤️</div> <p>
Nenu cheppalsina oka chinna maata undhi...
</p> <p>
Naa valla jarigina mistake ki
<strong>really really sorry.</strong> 😔
</p> <label for="p2" class="btn">Open My Heart ❤️</label>
</div>
</section> <!-- ================= PAGE 2 ================= --> <section class="page page2">
<div class="card"> <div class="small">Page 02</div> <h2>My Sorry</h2> <p>
Eppuduu em chesthavuu antee...
naa vaalaa oka mistake jarigindhi.
Adhi nenu kaavali ani cheyaledhu.
Naa intention kuda adhi kaadhu.
</p> <p>
Nuvvu naa intention ni ardham cheskuntav ani
naaku telusu. ❤️
</p> <label for="p1" class="btn">← Back</label>
<label for="p3" class="btn">Next →</label>
</div>
</section> <!-- ================= PAGE 3 ================= --> <section class="page page3">
<div class="card"> <div class="small">Page 03</div> <h2>My Heart</h2> <div class="bigHeart">💗</div> <p>
Baadha lo edho oka example teeskunna...
kani aa example valla neeku baadha kaligindhi ante
adi naaku nijanga regret ga undhi.
</p> <p>
Ninnu hurt cheyyadam naa intention kaadhu.
</p> <label for="p2" class="btn">← Back</label>
<label for="p4" class="btn">Continue 💕</label>
</div>
</section> <!-- ================= PAGE 4 ================= --> <section class="page page4">
<div class="card"> <div class="small">A letter for you</div> <h2>Open This 💌</h2> <div class="envelope"></div> <p>
Ee envelope lo oka chinna promise undhi...
</p> <label for="p3" class="btn">← Back</label>
<label for="p5" class="btn">Open Letter 💌</label>
</div>
</section> <!-- ================= PAGE 5 ================= --> <section class="page page5">
<div class="card"> <div class="small">Secret Page</div> <h2>One Promise</h2> <div class="bigHeart">💖</div> <p>
Inkoka sari ilaanti mistake repeat cheyyakunda
careful ga untanu.
</p> <p>
Nee feelings ni respect chestha.
Nee family ni kuda respect chestha.
</p> <label for="p4" class="btn">← Back</label>
<label for="p6" class="btn">Read More 💗</label>
</div>
</section> <!-- ================= PAGE 6 ================= --> <section class="page page6">
<div class="card"> <div class="small">A small letter</div> <h2>Dear Gambeera...</h2> <p>
Aa roju nenu disrespect tho
mee parents gurinchi maatladaledhu.
</p> <p>
Naa baadha lo maa mavaya ni example ga teeskunna.
Adhi mee father ni em analani kaadhu.
</p> <p>
Still... neeku baadha kaligindhi.
Anduke...
</p> <h2>I'm Sorry. 😔❤️</h2> <label for="p5" class="btn">← Back</label>
<label for="p7" class="btn">Next 🌙</label>
</div>
</section> <!-- ================= PAGE 7 ================= --> <section class="page page7">
<div class="card"> <div class="small">Why this matters</div> <h2>Because You Matter ❤️</h2> <p>
Oka small misunderstanding
mana madhya unna beautiful bond ni
disturb cheyyakudadhu.
</p> <div class="bigHeart">💞</div> <p>
Naa mistake ni accept chesthunna.
Excuse cheppadam kaadhu...
just heart nunchi sorry chepthunna.
</p> <label for="p6" class="btn">← Back</label>
<label for="p8" class="btn">Next ✨</label>
</div>
</section> <!-- ================= PAGE 8 ================= --> <section class="page page8">
<div class="card"> <div class="small">A little surprise</div> <h2>For My Gambeera ✨</h2> <div class="bigHeart">🥹❤️</div> <p>
Naa words perfect ga undakapovachu...
kani naa sorry మాత్రం genuine.
</p> <p>
Please remember one thing:
<strong>I never wanted to hurt you.</strong>
</p> <label for="p7" class="btn">← Back</label>
<label for="p9" class="btn">One More 💖</label>
</div>
</section> <!-- ================= PAGE 9 ================= --> <section class="page page9">
<div class="card"> <div class="small">My favourite chapter</div> <h2>Our Little Story</h2> <div class="bigHeart">💗</div> <p>
Konni moments simple ga untayi...
kani avi heart lo special place occupy chestayi.
</p> <p>
Alaanti memories ni
oka mistake tho spoil cheyyakudadhu.
</p> <label for="p8" class="btn">← Back</label>
<label for="p10" class="btn">Look At The Moon 🌙</label>
</div>
</section> <!-- ================= PAGE 10 ================= --> <section class="page page10">
<div class="card"> <div class="small">Under the same sky</div> <h2>🌙 One More Thing</h2> <div style="font-size:80px;margin:20px;">🌙✨</div> <p>
Distance entha unna...
feelings genuine ga unte
oka small sorry kuda chala meaning untundi.
</p> <p>
So this is my little way of saying...
</p> <h2>Sorry, Gambeera. ❤️</h2> <label for="p9" class="btn">← Back</label>
<label for="p11" class="btn">Continue ✨</label>
</div>
</section> <!-- ================= PAGE 11 ================= --> <section class="page page11">
<div class="card"> <div class="small">Almost there...</div> <h2>One Last Message</h2> <div class="bigHeart">❤️</div> <p class="finalText">
Nenu kaavali ani emi cheyyaledhu.
Nuvvu hurt avvadam naaku kuda baadha ga undhi.
</p> <p class="finalText">
So...
<strong>please accept my little apology. 🥺❤️</strong>
</p> <label for="p10" class="btn">← Back</label>
<label for="p12" class="btn">Final Door 🔐</label>
</div>
</section> <!-- ================= PAGE 12 ================= --> <section class="page page12">
<div class="card"> <div class="small">The final door</div> <h2>There is one key...</h2> <p>
Ee story ikkada end kaadhu.
Last surprise unlock cheyyali. 🔐
</p> <br> <label for="p13" class="key">🔑</label>
<p>
Tap the key
</p> <label for="p11" class="btn">← Back</label>
</div>
</section> <!-- ================= PAGE 13 FINAL ================= --> <section class="page page13">
<div class="card"> <div class="small">Our Little World</div> <h2>✨ The Final Page ✨</h2> <div class="names"> <div class="person">
Chenna Nithesh
</div> <div class="and">
and his wife
</div> <div class="person">
Chenna Raja Rajeswari
</div> </div> <div class="bigHeart">❤️</div> <div class="babies"> <div class="baby">
<span>👶🏻</span>
Chenna Nira
</div> <div class="baby">
<span>👶🏻</span>
Chenna Ojas
</div> </div> <p class="finalText">
<strong>Our Little World ❤️</strong>
</p> <p class="finalText">
Oka mistake jarigindhi...
kani naa intention eppudu ninnu hurt cheyyadam kaadhu.
</p> <p class="finalText">
Naa heart nunchi chepthunna...
<strong>I'm really sorry, Gambeera. 🥺❤️</strong>
</p> <div class="kiss">
😘💋
</div> <p>
This little world was made with love,
care and one genuine apology. ❤️
</p> <label for="p12" class="btn">← Back</label>
<div class="footer">
Made with ❤️ by Kanmani
</div> </div>
</section> </div> </body>
</html> Convert into Qr code