h1 font-size: 2.6rem; font-weight: bold; background: linear-gradient(135deg, #b62b4b, #ff8c9e); background-clip: text; -webkit-background-clip: text; color: transparent; margin: 0.5rem 0 0.2rem; letter-spacing: -0.5px;
<div class="question" id="questionText"> Will you make me the happiest person ever? </div>
@keyframes pulse 0% transform: scale(1); opacity: 0.9; text-shadow: 0 0 0 rgba(255,80,120,0.4); 50% transform: scale(1.12); opacity: 1; text-shadow: 0 0 12px #ff3366; 100% transform: scale(1); opacity: 0.9;
<div class="buttons"> <button class="btn btn-yes" id="yesBtn">💕 Haan! (Yes) 💕</button> <button class="btn btn-no" id="noBtn">😢 Nahi (No) 😢</button> </div> index of mujhse shaadi karogi
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Mujhse Shaadi Karogi? | Will You Marry Me?</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; /* avoid accidental text selection on buttons */ body background: linear-gradient(145deg, #f8b8c0 0%, #f06b7c 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', 'Poppins', 'Dancing Script', cursive, system-ui, -apple-system, sans-serif; padding: 1rem;
// ---------- Attach events ---------- yesBtn.addEventListener('click', onYes); noBtn.addEventListener('click', handleNoClick); // additional hover effect for yes button yesBtn.addEventListener('mouseenter', () => if(!yesBtn.disabled) yesBtn.style.transform = 'scale(1.02)'; ); yesBtn.addEventListener('mouseleave', () => yesBtn.style.transform = ''; ); // preload fun message: optional but nice. setTimeout(() => const msg = "💕 Your answer? I'll wait for eternity... 💕"; if(!yesBtn.disabled) messagePara.innerHTML = msg; , 1000); // small fallback to keep no button from going out of container setInterval(() => if(noBtn.style.position === 'absolute' && !yesBtn.disabled) const container = document.querySelector('.buttons'); if(container) const maxLeft = container.clientWidth - noBtn.offsetWidth - 8; const maxTop = container.clientHeight - noBtn.offsetHeight - 5; let leftNow = parseFloat(noBtn.style.left); let topNow = parseFloat(noBtn.style.top); if (isNaN(leftNow)) leftNow = 10; if (isNaN(topNow)) topNow = 10; if (leftNow > maxLeft) noBtn.style.left = Math.max(5, maxLeft - 5) + 'px'; if (topNow > maxTop) noBtn.style.top = Math.max(2, maxTop - 4) + 'px'; if (leftNow < 2) noBtn.style.left = '8px'; if (topNow < 2) noBtn.style.top = '8px'; , 500); )();
.btn-no background: #6c757d; color: white; box-shadow: 0 6px 0 #3e444a; position: relative; .btn-no:hover background: #7e8892; h1 font-size: 2
// ---------- HELPER: show romantic message & celebration ---------- function showAcceptance() // Celebration effect: confetti & big romantic message questionDiv.innerHTML = "🎉 YOU SAID YES! 🎉 <br> 💑 HAMESHA SATH 💑"; questionDiv.style.background = "#ffdae2"; // Change response area with proposal accepted gifSpan.innerHTML = "💒🎊💒🎊💒"; messagePara.innerHTML = "YAYYY! 💖 TUMNE HAAN KARDI! 💖 <br> Main aapko hamesha pyaar karunga/karungi. Ab shaadi ki taiyari shuru! 🥳✨"; responseDiv.style.background = "#fff0c0"; // Disable buttons after yes yesBtn.disabled = true; noBtn.disabled = true; yesBtn.style.opacity = "0.6"; noBtn.style.opacity = "0.6"; yesBtn.style.cursor = "default"; noBtn.style.cursor = "default"; // Add confetti effect triggerConfetti(); // extra romantic touch: floating hearts createFloatingHearts();
.buttons display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin: 1.5rem 0 1rem;
.glow animation: happyGlow 0.6s ease-out; @keyframes happyGlow 0% background: #fff7e0; box-shadow: 0 0 0 0 #ffccaa; 100% background: #fff0f2; </style> </head> <body> | Will You Marry Me
// ---------- NO BUTTON - playful escaping behaviour (classic "Mujhse Shaadi Karogi" trick) ---------- function handleNoClick() noClickCount++; if(noClickCount === 1) messagePara.innerHTML = "😅 Are you sure? Think again! Love is in the air 💨 ... please click 'Haan'"; gifSpan.innerHTML = "😢💔"; responseDiv.style.background = "#ffe0e5"; // make No button move slightly? first time hint noBtn.style.transform = "translateX(5px)"; setTimeout(() => noBtn.style.transform = ""; , 200); else if(noClickCount === 2) messagePara.innerHTML = "🥺 Ruko... Please meri baat suno. Life without you feels empty. Click Haan? 🥺"; gifSpan.innerHTML = "🌹🙏🌹"; moveNoButtonRandomly(); else if(noClickCount === 3) messagePara.innerHTML = "🤭 OK, I know you are joking. But I'll move the 'Nahi' button now, you can't say no easily! 😂❤️"; gifSpan.innerHTML = "🏃💨💨"; moveNoButtonRandomly(true); else if(noClickCount >= 4) messagePara.innerHTML = "💘 Haha! No matter how many times you click 'Nahi', my love stays. The button will run away. Just say Haan! 💘"; gifSpan.innerHTML = "🌀🌀🌀"; moveNoButtonRandomly(true); // extra trick: disable no button for a moment and re-enable? playful if(noClickCount === 5) noBtn.style.opacity = "0.5"; noBtn.disabled = true; setTimeout(() => noBtn.disabled = false; noBtn.style.opacity = "1"; , 700); // Add slight shake to the proposal card card.style.transform = "rotate(0.5deg) scale(0.99)"; setTimeout(() => card.style.transform = ""; , 180);
.proposal-card max-width: 550px; width: 100%; background: rgba(255, 255, 255, 0.96); border-radius: 56px; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(255, 215, 0, 0.3); overflow: hidden; transition: all 0.2s ease; backdrop-filter: blur(1px); text-align: center; padding: 2rem 1.8rem 2.5rem;
<div class="response-area" id="responseArea"> <div class="gif-placeholder">🌸💌🌸</div> <div id="messageText">Tap 'Haan' to say yes or 'Nahi' ... but I know your answer 💖</div> </div> <footer>✨ Pyaar se sochna ✨ | for my special one</footer> </div>
.response-area margin-top: 1.8rem; background: #fff0f2; border-radius: 40px; padding: 1.2rem; min-height: 110px; font-size: 1.25rem; color: #b13b55; transition: all 0.2s; border: 1px solid #ffccd4;
// reset any previous absolute style if window resizes (to avoid break) window.addEventListener('resize', function() if(noBtn.style.position === 'absolute') // re-adjust position after resize const btnContainer = document.querySelector('.buttons'); if(btnContainer) const maxLeft = btnContainer.clientWidth - noBtn.offsetWidth - 10; const maxTop = btnContainer.clientHeight - noBtn.offsetHeight - 5; if(maxLeft > 0 && maxTop > 0) let leftVal = parseFloat(noBtn.style.left); let topVal = parseFloat(noBtn.style.top); if(isNaN(leftVal)) leftVal = 20; if(isNaN(topVal)) topVal = 10; noBtn.style.left = Math.min(maxLeft, leftVal) + 'px'; noBtn.style.top = Math.min(maxTop, topVal) + 'px'; );
Copyright © 2026 Peak Haven