love #23
Description
<title>Valentine Proposal 💖</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
text-align: center;
background: linear-gradient(to right, #ff9a9e, #fad0c4);
height: 100vh;
overflow: hidden;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-size: 2.5rem;
color: #fff;
margin-bottom: 40px;
text-shadow: 2px 2px #ff6f91;
}
button {
padding: 15px 25px;
font-size: 1.2rem;
border: none;
border-radius: 10px;
cursor: pointer;
margin: 20px;
transition: 0.3s;
}
#yesBtn {
background-color: #ff6f91;
color: #fff;
}
#noBtn {
background-color: #fff;
color: #ff6f91;
position: absolute;
}
#loveLetter {
display: none;
margin-top: 30px;
animation: fadeIn 2s;
}
#loveLetter img, #loveLetter video {
max-width: 80%;
border-radius: 15px;
margin: 20px 0;
}
@Keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
<script>
// Moving "No" button
const noBtn = document.getElementById('noBtn');
noBtn.addEventListener('mouseover', () => {
const x = Math.random() * (window.innerWidth - noBtn.offsetWidth);
const y = Math.random() * (window.innerHeight - noBtn.offsetHeight);
noBtn.style.left = x + 'px';
noBtn.style.top = y + 'px';
});
// Show love letter when "Yes" is clicked
const yesBtn = document.getElementById('yesBtn');
yesBtn.addEventListener('click', () => {
document.getElementById('loveLetter').style.display = 'block';
yesBtn.style.display = 'none';
noBtn.style.display = 'none';
});
</script>
Will you be my Valentine? 💖
Yes NoI love you ❤️
You make my world brighter every day. Will you be mine forever?