<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Will You Be My Valentine? ❤️</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ff758c, #ff7eb3);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
}
.card {
background: white;
padding: 40px 30px;
border-radius: 20px;
text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
max-width: 400px;
width: 90%;
position: relative;
}
h1 {
color: #ff4d6d;
margin-bottom: 10px;
}
p {
color: #555;
margin-bottom: 30px;
font-size: 18px;
}
.buttons {
display: flex;
justify-content: center;
gap: 20px;
position: relative;
}
button {
padding: 12px 25px;
font-size: 18px;
border: none;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
}
#yesBtn {
background-color: #ff4d6d;
color: white;
}
#yesBtn:hover {
transform: scale(1.1);
background-color: #e63956;
}
#noBtn {
background-color: #ddd;
color: #333;
position: relative;
}
.heart {
position: absolute;
color: #ff4d6d;
font-size: 20px;
animation: float 4s infinite ease-in-out;
opacity: 0.7;
}
@keyframes float {
0% { transform: translateY(0); opacity: 0.7; }
50% { transform: translateY(-20px); opacity: 1; }
100% { transform: translateY(0); opacity: 0.7; }
}
.success {
display: none;
font-size: 22px;
color: #ff4d6d;
}
</style>
</head>
<body>
<div class="card" id="card">
<h1>Hey Love ❤️</h1>
<p>I have something important to ask you...</p>
<h1>Will you be my Valentine? 💘</h1>
<div class="buttons" id="buttons">
<button id="yesBtn">Yes 😍</button>
<button id="noBtn">No 🙈</button>
</div>
<div class="success" id="success">
Yaaay! 🥰💖<br />
I can't wait to make this Valentine’s Day special with you 🌹
</div>
</div>
<script>
const noBtn = document.getElementById('noBtn');
const yesBtn = document.getElementById('yesBtn');
const buttons = document.getElementById('buttons');
const success = document.getElementById('success');
noBtn.addEventListener('mouseover', () => {
const x = Math.random() * 200 - 100;
const y = Math.random() * 200 - 100;
noBtn.style.transform = `translate(${x}px, ${y}px)`;
});
yesBtn.addEventListener('click', () => {
buttons.style.display = 'none';
success.style.display = 'block';
createHearts();
});
function createHearts() {
for (let i = 0; i < 20; i++) {
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerHTML = '❤️';
heart.style.left = Math.random() * window.innerWidth + 'px';
heart.style.top = Math.random() * window.innerHeight + 'px';
heart.style.animationDuration = 2 + Math.random() * 3 + 's';
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 5000);
}
}
</script>
</body>
</html>
Converted to HTML with WordToHTML.net | Document Converter for Windows