Skip to content

Instantly share code, notes, and snippets.

@Moses0999

Moses0999/index.html

Created February 1, 2026 04:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Moses0999/9d68fc3eec9356c2261a1a922f720c7a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Moses0999/9d68fc3eec9356c2261a1a922f720c7a to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>For You</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #ffafcc, #ffc8dd);
overflow: hidden;
text-align: center;
}
.slide {
width: 100vw;
height: 100vh;
display: none;
justify-content: center;
align-items: center;
padding: 30px;
box-sizing: border-box;
}
.active {
display: flex;
}
.card {
background: white;
padding: 30px;
border-radius: 22px;
width: 90%;
max-width: 360px;
box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}
img {
width: 220px;
border-radius: 16px;
margin: 14px 0;
}
p {
color: #555;
font-size: 15px;
line-height: 1.5;
}
.tap {
font-size: 13px;
color: #aaa;
margin-top: 10px;
}
button {
padding: 16px 32px;
border: none;
border-radius: 35px;
font-size: 20px;
cursor: pointer;
position: absolute;
}
.yes {
background: #ff4d88;
color: white;
font-size: 26px;
left: 50%;
transform: translateX(-50%);
bottom: 120px;
}
.no {
background: #eee;
color: #555;
bottom: 40px;
right: 30px;
}
</style>
</head>
<body onclick="nextSlide()">
<!-- SLIDE 1 -->
<div class="slide active">
<div class="card">
<h2>My love Temi ❤️‍🩹</h2>
<img src="https://media.giphy.com/media/OPU6wzx8JrHna/giphy.gif">
<div class="tap">tap →</div>
</div>
</div>
<!-- SLIDE 2 -->
<div class="slide">
<div class="card">
<img src="https://media.giphy.com/media/ROF8OQvDmxytW/giphy.gif">
<p>I’m sorry for the pain and disturbance I caused.</p>
<div class="tap">tap →</div>
</div>
</div>
<!-- SLIDE 3 (I DEEPLY CARE) -->
<div class="slide">
<div class="card">
<img src="https://media.giphy.com/media/l0HlBO7eyXzSZkJri/giphy.gif">
<p>I deeply care about you.</p>
<div class="tap">tap →</div>
</div>
</div>
<!-- SLIDE 4 -->
<div class="slide">
<div class="card">
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif">
<p><strong>Will you forgive me… please?</strong></p>
</div>
<button class="yes" onclick="yes(event)">YES 💖</button>
<button class="no" onmouseover="runAway(this)" onclick="no(event)">No</button>
</div>
<script>
let current = 0;
const slides = document.querySelectorAll('.slide');
function nextSlide() {
if (current < slides.length - 1) {
slides[current].classList.remove('active');
current++;
slides[current].classList.add('active');
}
}
function yes(e) {
e.stopPropagation();
document.body.innerHTML = `
<div style="margin-top:20vh;">
<img src="https://media3.giphy.com/media/v1.Y2lkPTZjMDliOTUybzJtNmQ4ZGw3aXR3bnRna2N5YTYxY2Jiemo0dmdkMzE1Y3lwN3Y1dyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/kDWqirX6dEHvi83pn2/giphy.gif"
style="width:260px;border-radius:20px;">
<h1 style="color:white;">HURRAY!!! 🎉💛</h1>
<p style="color:white;font-size:24px;font-weight:bold;">
I LOVE YOU
</p>
</div>`;
}
function no(e) {
e.stopPropagation();
document.body.innerHTML = `
<div style="margin-top:20vh;">
<img src="https://media.giphy.com/media/3o6wrvdHFbwBrUFenu/giphy.gif"
style="width:260px;border-radius:20px;">
<h1 style="color:white;">I understand 🤍</h1>
<p style="color:white;font-size:20px;">
I love you.
</p>
</div>`;
}
function runAway(btn) {
const x = Math.random() * (window.innerWidth - 120);
const y = Math.random() * (window.innerHeight - 80);
btn.style.left = x + 'px';
btn.style.top = y + 'px';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment