Skip to content

Instantly share code, notes, and snippets.

@Moses0999

Moses0999/index.html

Created February 1, 2026 03:37
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Moses0999/2657413de2b89d74a9853f0e814d1cdf 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;
}
.slide {
width: 100vw;
height: 100vh;
display: none;
justify-content: center;
align-items: center;
text-align: center;
padding: 30px;
box-sizing: border-box;
}
.active {
display: flex;
}
.card {
background: white;
padding: 32px;
border-radius: 22px;
width: 90%;
max-width: 360px;
box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}
h2 {
margin-bottom: 10px;
}
p {
color: #555;
line-height: 1.55;
font-size: 15px;
}
img {
width: 220px;
border-radius: 16px;
margin: 16px 0;
}
.next {
margin-top: 18px;
font-size: 13px;
color: #aaa;
}
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>
<!-- TEARY HAMSTER GIF -->
<img src="https://media.giphy.com/media/OPU6wzx8JrHna/giphy.gif" alt="please">
<div class="next">tap anywhere →</div>
</div>
</div>
<!-- SLIDE 2 -->
<div class="slide">
<div class="card">
<p>
I am really sorry for the pain and the disturbance I’ve caused.
I never meant to hurt you, but I understand that intention doesn’t
erase impact. Knowing I caused you any stress or sadness honestly
hurts me deeply.
</p>
<div class="next">tap →</div>
</div>
</div>
<!-- SLIDE 3 -->
<div class="slide">
<div class="card">
<p>
I care about you more than my pride, more than being right,
and more than my ego. I miss us being okay, I miss your calm,
and I want to be someone who brings you peace — not pain.
</p>
<div class="next">tap →</div>
</div>
</div>
<!-- SLIDE 4 -->
<div class="slide">
<div class="card">
<!-- PEEKING CAT GIF -->
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" alt="please">
<p style="font-weight:bold; margin-top:10px;">
Will you ever forgive me… please, my love?
</p>
</div>
<button class="yes" onclick="forgive(event)">YES 💖</button>
<button class="no" onmouseover="runAway(this)">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 forgive(e) {
e.stopPropagation();
document.body.innerHTML =
"<h1 style='color:white;text-align:center;margin-top:40vh;'>Thank you 🤍</h1>" +
"<p style='color:white;text-align:center;font-size:18px;'>I promise I won’t take this for granted.</p>";
}
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