index.html

[shamprabhu16-a11y]

<title>For My Bby Sakthi</title> <style> :root { --primary: #ff85a1; --secondary: #fbb1bd; --accent: #ff4d6d; --bg: #fff0f3; }

    body {
        margin: 0;
        background: var(--bg);
        font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        overflow-x: hidden;
    }

    .card {
        background: white;
        width: 90%;
        max-width: 450px;
        padding: 40px 20px;
        border-radius: 30px;
        box-shadow: 0 15px 35px rgba(255, 133, 161, 0.2);
        text-align: center;
        position: relative;
        z-index: 10;
    }

    h1 {
        color: var(--accent);
        font-size: 2.2rem;
        margin-bottom: 10px;
    }

    .bby-tag {
        background: var(--secondary);
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.9rem;
        display: inline-block;
        margin-bottom: 20px;
    }

    .message {
        color: #555;
        line-height: 1.8;
        font-size: 1.1rem;
        margin: 20px 0;
    }

    .heart-btn {
        background: var(--accent);
        color: white;
        border: none;
        padding: 15px 40px;
        border-radius: 50px;
        font-size: 1.2rem;
        cursor: pointer;
        transition: transform 0.3s;
        box-shadow: 0 5px 15px rgba(255, 77, 109, 0.4);
    }

    .heart-btn:hover {
        transform: scale(1.05);
    }

    /* Floating Hearts Animation */
    .floating-heart {
        position: absolute;
        color: var(--primary);
        font-size: 20px;
        animation: float 4s linear infinite;
        opacity: 0;
    }

    @keyframes float {
        0% { transform: translateY(100vh) rotate(0deg); opacity: 1; }
        100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
    }
</style>

<div class="card">
    <div class="bby-tag">To: My Bby Sakthi ✨</div>
    <h1>Happy Birthday! 🎂</h1>
    
    <div class="message">
        The 7-month gap was the hardest part of my life, but falling in love with you all over again was the easiest. 
        <br><br>
        I’m so happy you’re mine again. Let’s never have a gap like that ever again! ❤️
    </div>

    <button class="heart-btn" onclick="celebrate()">Click for Love</button>
</div>

<script>
    function createHeart() {
        const heart = document.createElement('div');
        heart.classList.add('floating-heart');
        heart.innerHTML = '❤️';
        heart.style.left = Math.random() * 100 + "vw";
        heart.style.animationDuration = Math.random() * 2 + 3 + "s";
        document.body.appendChild(heart);
        
        setTimeout(() => {
            heart.remove();
        }, 5000);
    }

    function celebrate() {
        for(let i=0; i<20; i++) {
            setTimeout(createHeart, i * 150);
        }
        alert("Happy Birthday Bby! I love you more than 7 months of waiting could ever say! 💖");
    }

    // Background hearts
    setInterval(createHeart, 500);
</script>