Skip to content

happy birthday #36

Description

@tomonade27-beep
<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>
<!-- Ganti src dengan foto pacarmu -->
<img src="foto.jpg" class="bg" alt="Foto Pacar">

<div class="overlay"></div>

<div class="content">
    <h1>Happy Anniversary ❤️</h1>

    <div class="message">
        <p>
            Untuk wanita yang paling spesial dalam hidupku,
            terima kasih karena selalu hadir dalam setiap cerita,
            tawa, dan perjalanan yang kita lewati bersama.
        </p>

        <br>

        <p>
            Setiap hari bersamamu adalah hadiah yang sangat berharga.
            Semoga hubungan kita selalu dipenuhi kebahagiaan,
            kepercayaan, dan cinta yang terus tumbuh seiring waktu.
        </p>

        <br>

        <p>
            Aku sayang kamu hari ini, besok, dan selamanya. ❤️
        </p>

        <br>

        <h3>Love You Forever 💕</h3>
    </div>
</div>
<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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions