<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Be My Valentine 💖</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
font-family: 'Poppins', 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: 90%;
}
h1 {
color: #ff4d6d;
margin-bottom: 10px;
}
p {
font-size: 18px;
margin-bottom: 30px;
}
.buttons {
position: relative;
height: 60px;
}
button {
padding: 12px 25px;
font-size: 16px;
border: none;
border-radius: 30px;
cursor: pointer;
transition: transform 0.2s;
}
#yes {
background: #ff4d6d;
color: white;
}
#yes:hover {
transform: scale(1.1);
}
#no {
background: #ccc;
color: #333;
position: absolute;
left: 140px;
}
</style>
</head>
<body>
<div class="card">
<h1>Will you be my Valentine? 💘</h1>
<p>I promise chocolates, smiles, and lots of love 🥰</p>
<div class="buttons">
<button id="yes" onclick="yesClicked()">Yes 💖</button>
<button id="no">No 😢</button>
</div>
</div>
<script>
const noButton = document.getElementById("no");
noButton.addEventListener("mouseover", () => {
const x = Math.random() * (window.innerWidth - noButton.offsetWidth);
const y = Math.random() * (window.innerHeight - noButton.offsetHeight);
noButton.style.left = `${x}px`;
noButton.style.top = `${y}px`;
});
function yesClicked() {
document.body.innerHTML = `
<div style="
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#ff9a9e,#fad0c4);
font-family:Poppins,sans-serif;
text-align:center;
">
<h1 style="color:#ff4d6d;">YAY!!! 💕🎉</h1>
<p style="font-size:20px;">Best decision ever 😍<br>I love you!</p>
</div>
`;
}
</script>
</body>
</html>