-
Notifications
You must be signed in to change notification settings - Fork 168
happy birthday #36
Copy link
Copy link
Open
Description
tomonade27-beep
opened on Jun 8, 2026
Issue body actions
<title>Happy Anniversary Sayang ❤️</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
background:#000;
}
.container{
position:relative;
width:100%;
height:100vh;
}
.bg{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
filter:brightness(45%);
}
.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.2);
}
.content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
width:90%;
max-width:700px;
animation:fadeIn 2s ease;
}
h1{
font-size:3rem;
margin-bottom:20px;
text-shadow:0 0 15px rgba(255,255,255,.5);
}
.message{
font-size:1.2rem;
line-height:1.8;
background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);
padding:25px;
border-radius:20px;
}
.heart{
position:absolute;
color:#ff4d6d;
animation:float 6s linear infinite;
font-size:25px;
}
@Keyframes fadeIn{
from{
opacity:0;
transform:translate(-50%,-40%);
}
to{
opacity:1;
transform:translate(-50%,-50%);
}
}
@Keyframes float{
0%{
transform:translateY(100vh);
opacity:0;
}
20%{
opacity:1;
}
100%{
transform:translateY(-100px);
opacity:0;
}
}
</style>
<script>
// Efek hati berjatuhan
function createHeart(){
const heart = document.createElement('div');
heart.classList.add('heart');
heart.innerHTML = '❤';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.fontSize = (Math.random()*20 + 15) + 'px';
heart.style.animationDuration = (Math.random()*3 + 4) + 's';
document.body.appendChild(heart);
setTimeout(()=>{
heart.remove();
},7000);
}
setInterval(createHeart,300);
</script>
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels