Fahri.html

[Rubbyibni28-source]

<title>Happy Birthday Fahri! 🎂</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

    body {
        background: linear-gradient(135deg, #ffafcc 0%, #a2d2ff 100%);
        min-height: 100vh;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .card {
        background: white;
        max-width: 600px;
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        overflow: hidden;
    }
    
    .header {
        background: linear-gradient(to right, #ff6b9d, #a2d2ff);
        padding: 30px;
        text-align: center;
        color: white;
    }
    
    .header h1 {
        font-size: 28px;
        margin-bottom: 10px;
    }
    
    .age {
        background: white;
        color: #ff6b9d;
        display: inline-block;
        padding: 8px 20px;
        border-radius: 50px;
        font-weight: bold;
        margin-top: 10px;
    }
    
    .content {
        padding: 30px;
    }
    
    .message {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 25px;
        border-left: 5px solid #ff6b9d;
    }
    
    .message p {
        margin-bottom: 15px;
        line-height: 1.6;
    }
    
    .highlight {
        color: #ff6b9d;
        font-weight: bold;
    }
    
    .heart {
        color: #ff6b9d;
        font-size: 20px;
    }
    
    button {
        background: linear-gradient(to right, #ff6b9d, #a2d2ff);
        color: white;
        border: none;
        padding: 15px 40px;
        border-radius: 50px;
        font-size: 18px;
        cursor: pointer;
        display: block;
        margin: 20px auto;
        font-weight: bold;
    }
    
    button:hover {
        transform: scale(1.05);
    }
    
    .surprise {
        display: none;
        background: linear-gradient(to right, #ffafcc, #a2d2ff);
        padding: 20px;
        border-radius: 10px;
        color: white;
        margin-top: 20px;
        text-align: center;
    }
    
    .footer {
        text-align: center;
        padding: 20px;
        background: #f8f9fa;
        color: #666;
        font-style: italic;
    }
    
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    .bounce {
        animation: bounce 2s infinite;
        font-size: 40px;
    }
    
    @media (max-width: 600px) {
        .header h1 { font-size: 24px; }
        .content { padding: 20px; }
        button { padding: 12px 30px; }
    }
</style>

🎂

Untuk Fahri Athalla

Ucapan spesial di hari ulang tahunmu

21 Tahun

    <div class="content">
        <div class="message">
            <p>Haiii <span class="highlight">Fahri Athalla</span>, pesan ini dibuat khusus buat kamu.</p>
            
            <p><span class="highlight">Selamat ulang tahun ya</span> hihi, selamat panjang umur sehat selalu semakin manis Xixi. Selamat ya buat udah bertahan sampe 21 tahun ini huhu. Kamu keren kamu hebat bay.</p>
            
            <p>Makasih ya buat selalu ada sama aku, makasih dah selalu ada di setiap hari-hariku, aku ga tau kalo ga ada kamu gimana bay :).</p>
            
            <p>Maaf ya kalo selama ini aku selalu buat kamu marah, sedih, atau kecewain kamu... huhu <span class="heart">🥺</span></p>
            
            <p>Jujur aku sayanggg banget sama kamu, aku tulus banget sama kamu, semoga kamu juga gitu ya, makasih selalu buat aku tersenyum sampe titik ini. Aku bangga banget sama kamu bay <span class="heart">🤍</span></p>
            
            <p>Selalu jadiin aku rumah cerita kamu ya, aku akan selalu ada di masa-masa susah kamu bay, sekali lagi <span class="heart">love u bay</span> 🤍🤍</p>
        </div>
        
        <button onclick="showSurprise()">🎁 Klik untuk Kejutan!</button>
        
        <div class="surprise" id="surprise">
            <h3>🎉 Untuk Fahri yang Terhebat!</h3>
            <p>Semoga tahun ini menjadi tahun terbaik dalam hidupmu!</p>
            <p>Terus jadi pribadi yang amazing dan selalu bahagia ya! 🥳</p>
            <div style="font-size: 30px; margin: 15px;">
                ❤️ 🎂 🎈 🎁
            </div>
        </div>
    </div>
    
    <div class="footer">
        <p>Pesan ini dibuat dengan penuh kasih sayang 💖</p>
        <p>© 2024 - Harap disimpan sebagai kenangan indah</p>
    </div>
</div>

<script>
    function showSurprise() {
        // Tampilkan pesan kejutan
        document.getElementById('surprise').style.display = 'block';
        document.querySelector('button').innerHTML = '🎉 Kejutan Terbuka!';
        document.querySelector('button').style.background = 'linear-gradient(to right, #a2d2ff, #ff6b9d)';
        
        // Buat efek confetti sederhana
        for(let i = 0; i < 30; i++) {
            setTimeout(() => {
                let confetti = document.createElement('div');
                confetti.innerHTML = ['🎉', '🎊', '🎈', '❤️', '🎂'][Math.floor(Math.random() * 5)];
                confetti.style.position = 'fixed';
                confetti.style.fontSize = '25px';
                confetti.style.left = Math.random() * 100 + 'vw';
                confetti.style.top = '-50px';
                confetti.style.zIndex = '9999';
                confetti.style.animation = 'fall ' + (Math.random() * 2 + 1) + 's linear forwards';
                document.body.appendChild(confetti);
                
                // Hapus setelah selesai
                setTimeout(() => confetti.remove(), 3000);
            }, i * 100);
        }
    }
    
    // Tambah style untuk confetti
    let style = document.createElement('style');
    style.textContent = `
        @keyframes fall {
            to {
                transform: translateY(100vh) rotate(360deg);
            }
        }
    `;
    document.head.appendChild(style);
</script>