love

[juliangriffin098-hue]

<title>For You</title> <style> body { margin: 0; padding: 0; background: #fff5f7; /* Soft blush pink */ font-family: 'Playfair Display', serif; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; color: #7a4a4a; }

    .container {
        text-align: center;
        background: rgba(255, 255, 255, 0.8);
        padding: 3rem;
        border-radius: 50px;
        box-shadow: 0 10px 30px rgba(221, 160, 160, 0.3);
        border: 2px solid #f8d7da;
        z-index: 10;
        max-width: 80%;
    }

    h1 {
        font-family: 'Dancing Script', cursive;
        font-size: 4rem;
        margin-bottom: 10px;
        color: #d63384;
    }

    p {
        font-size: 1.5rem;
        line-height: 1.6;
    }

    /* Flower Petal Animation */
    .petal {
        position: fixed;
        top: -10%;
        user-select: none;
        pointer-events: none;
        z-index: 1;
        font-size: 24px;
        animation: fall linear infinite;
    }

    @keyframes fall {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
    }

    .heart {
        color: #e84393;
        font-size: 2rem;
        margin-top: 20px;
    }
</style>

<div class="container">
    <h1>To My Dearest</h1>
    <p>Like a garden in full bloom,<br> 
    you bring color and beauty to every corner of my world.</p>
    <div class="heart">❤</div>
</div>

<script>
    const flowerIcons = ['🌸', '🌹', '🌷', '🌺', '🌼'];
    
    function createPetal() {
        const petal = document.createElement('div');
        petal.classList.add('petal');
        petal.innerText = flowerIcons[Math.floor(Math.random() * flowerIcons.length)];
        petal.style.left = Math.random() * 100 + 'vw';
        petal.style.animationDuration = Math.random() * 3 + 2 + 's'; // 2-5 seconds
        petal.style.opacity = Math.random();
        
        document.body.appendChild(petal);

        setTimeout(() => {
            petal.remove();
        }, 5000);
    }

    setInterval(createPetal, 300);
</script>