<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For Nyniew ❤️</title>
<style>
body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#ff9a9e,#fad0c4);
font-family:Segoe UI, sans-serif;
}
/* Envelope */
.envelope{
position:relative;
width:320px;
height:200px;
background:#fff;
border-radius:6px;
box-shadow:0 10px 25px rgba(0,0,0,0.3);
cursor:pointer;
}
/* Envelope flap */
.flap{
position:absolute;
top:0;
width:0;
height:0;
border-left:160px solid transparent;
border-right:160px solid transparent;
border-top:110px solid #f2f2f2;
transform-origin:top;
transition:transform 0.6s;
}
/* Batman seal */
.seal{
position:absolute;
top:70px;
left:50%;
transform:translateX(-50%);
width:60px;
height:60px;
background:black;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
}
/* Letter */
.letter{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:white;
padding:20px;
box-sizing:border-box;
transform:translateY(100%);
transition:transform 0.6s;
overflow:auto;
}
/* Open animation */
.open .flap{
transform:rotateX(180deg);
}
.open .letter{
transform:translateY(-220px);
}
/* Batman logo svg color */
.bat{
fill:yellow;
}
</style>
</head>
<body>
<div class="envelope" onclick="openLetter(this)">
<div class="flap"></div>
<div class="seal">
<svg width="40" height="20" viewBox="0 0 100 50">
<path class="bat" d="M5 35 L15 25 L25 30 L35 20 L50 28 L65 20 L75 30 L85 25 L95 35 L75 35 L65 40 L50 32 L35 40 L25 35 Z"/>
</svg>
</div>
<div class="letter">
<h3>Happy 5th Monthsary, my dearest Nyniew! ❤️</h3>
<p>
You know… as each day goes by, my love for you intensifies every single millisecond.
I crave being by your side every hour that passes, and I yearn for your attention
even if sometimes I might not catch it.
</p>
<p>
You illuminate each passing day, making it brighter than it ever was before
(because you’re crazy and you always make me laugh).
</p>
<p>
I don’t know how to fully express the joy you've given me these past few days.
All I know is that my happiness comes from seeing you happy.
Your presence alone is enough to make my entire day better.
</p>
<p>(I'm still happy even though you always ridge bite me 😤)</p>
<p>
I sincerely apologize if I caused you tears these past few days.
It was never my intention to hurt you.
Nhix nhix sorry if she always says you stink too :<
</p>
<p>
I'm just joking. You always smell good —
that's why I love sniff sniff :>
</p>
<p>
Thank you for making me eat when I'm hungry na ^>^
Sorry if I always nag you that I want egg egg hehehe.
Nhix nhix is wawa and she wants to taste egg again :<
</p>
<p>
Always remember that I'm here supporting you in everything you're striving for.
</p>
<p><b>I love you 3000 ❤️</b></p>
<p><b>Happy 5th Monthsary!</b></p>
</div>
</div>
<!-- Music -->
<iframe width="0" height="0"
src="https://www.youtube.com/embed/9b7V6xF4J8k?autoplay=1&loop=1"
allow="autoplay">
</iframe>
<script>
function openLetter(el){
el.classList.toggle("open");
}
</script>
</body>
</html>