Momo, Will You Be My Valentine? 💖 * { box-sizing: border-box; } body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Comic Sans MS', 'Poppins', cursive; background: linear-gradient(135deg, #ffd6e8, #fff1f7); overflow: hidden; } <pre><code>.card { background: white; padding: 2rem 2.5rem; border-radius: 20px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.15); max-width: 320px; position: relative; z-index: 2; } h1 { font-size: 1.6rem; margin-bottom: 1rem; } .fox { font-size: 5rem; animation: bounce 1.5s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .fox-svg { animation: bob 2s ease-in-out infinite; } .tail { animation: wag 0.6s ease-in-out infinite alternate; transform-origin: left center; } .eye { animation: blink 4s infinite; transform-origin: center; } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes wag { from { transform: rotate(10deg); } to { transform: rotate(-10deg); } } @keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 92%, 98% { transform: scaleY(0.1); } } 50% { transform: translateY(-12px); } } .buttons { margin-top: 1.5rem; position: relative; height: 120px; } button { border: none; padding: 0.7rem 1.6rem; font-size: 1rem; border-radius: 999px; cursor: pointer; } #yes { background: #ff4d88; color: white; } #no { background: #ddd; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .celebration { position: fixed; inset: 0; background: radial-gradient(circle, #ffb6d5, #ff5fa2); display: none; justify-content: center; align-items: center; flex-direction: column; color: white; z-index: 5; } .celebration h2 { font-size: 2.2rem; margin-bottom: 1rem; } .hearts span { position: absolute; font-size: 1.5rem; animation: floatUp 4s linear infinite; opacity: 0.8; } @keyframes floatUp { from { transform: translateY(100vh); } to { transform: translateY(-10vh); } } </code></pre> 
<!-- Head --> <circle cx="100" cy="100" r="60" fill="#ff9f59" /> <!-- Cheeks --> <circle cx="70" cy="115" r="18" fill="#ffd6b0" /> <circle cx="130" cy="115" r="18" fill="#ffd6b0" /> <!-- Eyes --> <circle cx="80" cy="95" r="6" fill="#333" class="eye" /> <circle cx="120" cy="95" r="6" fill="#333" class="eye" /> <!-- Nose --> <circle cx="100" cy="115" r="4" fill="#333" /> <!-- Tail --> <path d="M150 140 q40 10 20 40" stroke="#ff8c42" stroke-width="18" fill="none" stroke-linecap="round" class="tail" /> 
Momo, will you be my Valentine? 💕
Yes 💖 No 🙈 
YAYYY 💘💘💘
You just made this Valentine unforgettable, Momo 🥰
const noBtn = document.getElementById('no'); const yesBtn = document.getElementById('yes'); const celebration = document.getElementById('celebration'); const proposal = document.getElementById('proposal'); function moveNo() { const x = Math.random() * (window.innerWidth - 100); const y = Math.random() * (window.innerHeight - 50); noBtn.style.left = x + 'px'; noBtn.style.top = y + 'px'; } noBtn.addEventListener('mouseover', moveNo); noBtn.addEventListener('click', moveNo); yesBtn.addEventListener('click', () => { proposal.style.display = 'none'; celebration.style.display = 'flex'; for (let i = 0; i < 40; i++) { const heart = document.createElement('span'); heart.innerText = '💖'; heart.style.left = Math.random() * 100 + 'vw'; heart.style.animationDuration = 2 + Math.random() * 3 + 's'; heart.style.fontSize = 1 + Math.random() * 2 + 'rem'; heart.classList.add('hearts'); celebration.appendChild(heart); } });