<div class="heart">❤️</div>
<h1>I Love You</h1>
<p>Do you feel the same? 😊</p>
<div class="buttons">
<button id="yes" onclick="sayYes()">Yes ❤️</button>
<button id="no" onclick="moveNo()">No 😢</button>
</div>
<div id="message">
❤️ Thank you! ❤️
</div>
I Love You
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ffd6e7, #ffe9f2);
font-family: Arial, sans-serif;
}
.container {
text-align: center;
position: relative;
width: 100%;
height: 100vh;
padding-top: 150px;
}
h1 {
font-size: clamp(2.5rem, 10vw, 5rem);
margin: 0;
animation: heartbeat 1.2s infinite;
}
p {
font-size: 1.5rem;
margin: 20px;
}
.heart {
font-size: 90px;
animation: heartbeat 1.2s infinite;
}
.buttons {
margin-top: 30px;
display: flex;
justify-content: center;
gap: 25px;
}
button {
border: none;
padding: 14px 30px;
border-radius: 30px;
font-size: 20px;
cursor: pointer;
font-weight: bold;
}
#yes {
background: #ff4081;
color: white;
}
#no {
background: #777;
color: white;
position: relative;
}
#message {
display: none;
font-size: 2rem;
font-weight: bold;
margin-top: 30px;
}
@keyframes heartbeat {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.15);
}
}
.floating-heart {
position: absolute;
font-size: 25px;
animation: floatUp 5s linear infinite;
bottom: -40px;
}
@keyframes floatUp {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-110vh);
opacity: 0;
}
}