Skip to content

Instantly share code, notes, and snippets.

@Frenzycore

Frenzycore/someone.html

Last active February 20, 2026 16:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Frenzycore/a7d8a9aa103cb2b73fb60f3269892258 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Frenzycore/a7d8a9aa103cb2b73fb60f3269892258 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
someone.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For Someone Who Makes My Heart Skip ❤️</title>
<style>
body {
background: linear-gradient(135deg, #ffe6f0, #fff0f5, #ffeaf7);
font-family: 'Segoe Script', cursive;
text-align: center;
padding: 50px;
color: #ff4d88;
overflow-x: hidden;
animation: bgShift 10s infinite alternate ease-in-out;
}
h1 {
font-size: 3.2em;
margin-bottom: 0.3em;
animation: fadeIn 2s ease-in-out;
}
p {
font-size: 1.4em;
max-width: 600px;
margin: auto;
line-height: 1.8;
animation: fadeIn 3s ease-in-out;
}
.heart {
font-size: 2.5em;
animation: pulse 1.5s infinite;
display: inline-block;
margin-top: 15px;
}
button {
background-color: #ff4d88;
color: white;
border: none;
padding: 14px 28px;
font-size: 1.1em;
border-radius: 30px;
cursor: pointer;
margin: 15px;
transition: transform 0.25s ease, background-color 0.3s ease;
}
button:hover {
background-color: #ff1a66;
transform: scale(1.12);
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.25); }
100% { transform: scale(1); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bgShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
</style>
</head>
<body>
<h1>Hey, You… 💖</h1>
<p>
I could have written this on paper,
but pixels felt like they could dance for you.
You are the quiet spark in my thoughts,
the melody that hums in the background of my days,
and the reason my heart sometimes forgets its rhythm.
So here’s a little corner of the internet,
stitched together just for you.
</p>
<div class="heart">💗</div>
<button onclick="alert('You just made my heart do a happy somersault! 💕')">I like you too 💌</button>
<button id="maybeBtn" onclick="alert('That’s okay… I’ll keep finding ways to make you smile 😘')">Not sure yet 🤔</button>
<script>
const maybeBtn = document.getElementById('maybeBtn');
maybeBtn.addEventListener('mouseover', () => {
const x = Math.random() * (window.innerWidth - maybeBtn.offsetWidth - 20);
const y = Math.random() * (window.innerHeight - maybeBtn.offsetHeight - 20);
maybeBtn.style.position = 'absolute';
maybeBtn.style.left = `${x}px`;
maybeBtn.style.top = `${y}px`;
});
</script>
</body>
</html>
Raw
something.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Little Something for You ❤️</title>
<style>
body {
background: linear-gradient(135deg, #ffe6f0, #fff0f5);
font-family: 'Comic Sans MS', cursive, sans-serif;
text-align: center;
padding: 50px;
color: #ff4d88;
overflow-x: hidden;
}
h1 {
font-size: 3em;
margin-bottom: 0.3em;
animation: fadeIn 2s ease-in-out;
}
p {
font-size: 1.3em;
max-width: 500px;
margin: auto;
line-height: 1.6;
animation: fadeIn 3s ease-in-out;
}
.heart {
font-size: 2em;
animation: pulse 1.5s infinite;
display: inline-block;
margin-top: 10px;
}
button {
background-color: #ff4d88;
color: white;
border: none;
padding: 12px 25px;
font-size: 1em;
border-radius: 25px;
cursor: pointer;
margin: 15px;
transition: transform 0.2s ease, background-color 0.3s ease;
}
button:hover {
background-color: #ff1a66;
transform: scale(1.1);
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<h1>Hey, You! 💖</h1>
<p>
I was thinking about how to tell you this,
and then I thought… why not make it a little special?
You make my days brighter, my smiles wider,
and my heart just a little bit faster.
So here’s a tiny page, just for you.
</p>
<div class="heart">💗</div>
<button onclick="alert('Yay! You like me too! 💕 This just made my day.')">I like you too 💌</button>
<button id="maybeBtn" onclick="alert('That’s okay… I’ll keep trying to win your heart 😘')">Not sure yet 🤔</button>
<script>
const maybeBtn = document.getElementById('maybeBtn');
maybeBtn.addEventListener('mouseover', () => {
const x = Math.random() * (window.innerWidth - maybeBtn.offsetWidth - 20);
const y = Math.random() * (window.innerHeight - maybeBtn.offsetHeight - 20);
maybeBtn.style.position = 'absolute';
maybeBtn.style.left = `${x}px`;
maybeBtn.style.top = `${y}px`;
});
</script>
</body>
</html>
<!-- Behind the darkness of life, there is a light that illuminates me. -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment