-
Notifications
You must be signed in to change notification settings - Fork 51
Open
Description
<title>Our Story π</title>
<style>
body{
margin:0;
font-family:Arial, sans-serif;
background:#0f0f0f;
color:white;
text-align:center;
overflow-x:hidden;
}
.slide{
display:none;
padding:40px 20px;
min-height:100vh;
}
.active{
display:block;
}
button{
padding:10px 20px;
margin:10px;
border:none;
border-radius:25px;
font-size:16px;
cursor:pointer;
background:#ff4f81;
color:white;
}
img{
width:90%;
max-width:350px;
border-radius:20px;
margin:15px 0;
}
iframe{
margin:10px 0;
}
.heart{
position:fixed;
top:-10px;
font-size:20px;
animation:fall linear infinite;
}
@Keyframes fall{
to{ transform:translateY(100vh);}
}
</style>
<script>
let currentSlide=0;
const slides=document.querySelectorAll(".slide");
function nextSlide(){
slides[currentSlide].classList.remove("active");
currentSlide++;
if(currentSlide>=slides.length){
currentSlide=slides.length-1;
}
slides[currentSlide].classList.add("active");
}
function createHeart(){
const heart=document.createElement("div");
heart.classList.add("heart");
heart.innerHTML="π";
heart.style.left=Math.random()*100+"vw";
heart.style.animationDuration=Math.random()*3+2+"s";
document.body.appendChild(heart);
setTimeout(()=>heart.remove(),5000);
}
setInterval(createHeart,400);
</script>
A Letter For You π
If I ever lose my way, your smile will be my direction. If the world feels heavy, your voice will be my peace.
Next β¨The Songs That Feel Like Us πΆ
<p>Dooron Dooron</p>
<iframe style="border-radius:12px"
src="https://open.spotify.com/embed/search/Dooron%20Dooron"
width="300" height="80"
frameBorder="0"
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
</iframe>
<p>Line Without a Hook</p>
<iframe style="border-radius:12px"
src="https://open.spotify.com/embed/search/Line%20Without%20a%20Hook"
width="300" height="80"
frameBorder="0"
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
</iframe>
<p>Stereo Hearts</p>
<iframe style="border-radius:12px"
src="https://open.spotify.com/embed/search/Stereo%20Hearts"
width="300" height="80"
frameBorder="0"
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
</iframe>
<p>Infinity</p>
<iframe style="border-radius:12px"
src="https://open.spotify.com/embed/search/Infinity%20Jaymes%20Young"
width="300" height="80"
frameBorder="0"
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
</iframe>
<button onclick="nextSlide()">Next π</button>
One Question π
Will you stay with me and write forever with me?
Yes πReactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels