<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D Love Pop‑Up</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ffeff7, #ffe1ec);
}.card { width: 330px; height: 220px; background: #fff7fa; border: 3px solid #e0b4cc; border-radius: 14px; cursor: pointer; position: relative; perspective: 1000px; transition: transform 0.4s; }
.card:hover { transform: scale(1.03); }
.inner { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; }
.open { transform: rotateX(-150deg); }
.front, .inside { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 14px; }
.front { background: #fff2f7; font-size: 20px; font-weight: 600; color: #8b3a5b; padding: 12px; }
.inside { background: #fff; transform: rotateX(180deg); flex-direction: column; padding: 14px; color: #8b3455; }
.heart { font-size: 60px; animation: beat 1s infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.msg { margin-top: 8px; font-size: 15px; font-weight: 500; } </style>
</head>
<body>
<div class="card" onclick="toggleCard()">
<div class="inner" id="innerCard"><div class="front">
forever' yours favourite hubby ji
</div>
<div class="inside">
<div class="heart">❤️</div>
<div class="msg">I Love You 😘</div>
<div style="font-size:13px; margin-top:6px; opacity:0.75;">
For my Palak (darling ji)\<br/\>Tumhara favourite hubby ji
</div>
</div>
</div>
</div><script>
function toggleCard(){
document.getElementById('innerCard').c
lassList.toggle('open');
}
</script></body>
</html>