Public
Likeuntitled-8495
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v3View latest version
For Shauna ❤️
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffeef2;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
margin: 0;
}
.card {
text-align: center;
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border: 2px solid #ff4d6d;
}
h1 { color: #ff4d6d; margin-bottom: 1rem; }
p { font-size: 1.2rem; color: #555; }
.btn-container {
margin-top: 2rem;
position: relative;
display: flex;
justify-content: center;
gap: 20px;
}
button {
padding: 12px 25px;
font-size: 1.1rem;
border-radius: 10px;
border: none;
cursor: pointer;
transition: transform 0.2s;
}
#yesBtn { background-color: #ff4d6d; color: white; }
#noBtn {
background-color: #888;
color: white;
position: absolute;
left: 55%; /* Starting position */
}
<div class="card">
<h1>Hi Shauna! ❤️</h1>
<p>Will you be my Valentine?</p>
<div class="btn-container">
<button id="yesBtn" onclick="alert('Yay! I knew you\'d say yes! ❤️')">Yes</button>
<button id="noBtn">No</button>
</div>
</div>
<script>
const noBtn = document.getElementById('noBtn');
noBtn.addEventListener('mouseover', () => {
// Calculate random positions
const x = Math.random() * (window.innerWidth - noBtn.offsetWidth);
const y = Math.random() * (window.innerHeight - noBtn.offsetHeight);
// Move the button to the random spot
noBtn.style.position = 'fixed';
noBtn.style.left = x + 'px';
noBtn.style.top = y + 'px';
});
</script>