HTML/CSS - Spread Love 💓 - Valetine's Day Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Spread love</title>
</head>
<body>
    <h1>Happy Valentine's Day</h1>
    <p>May your day be filled with love, joy, and cherished moments with those who matter most. Whether it's friends, family, or someone special, may your heart be warm and your smiles endless. ❤️✨</p>
    <button onclick="heartConfetti()">Spread Love</button>
    <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
    <script>
        function heartConfetti() {
            for (let i = 0; i < 30; i++) {
                let heart = document.createElement("div");
                heart.className = "heart";
                document.body.appendChild(heart);
                heart.style.left = Math.random() * window.innerWidth + "px";
                heart.style.top = window.innerHeight + "px";
                heart.style.animationDuration = (Math.random() * 3 + 2) + "s";
                setTimeout(() => { heart.remove(); }, 4000);
            }
        }
    </script>
</body>

css

body {
    font-family: 'Arial', sans-serif;
    text-align: center;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    color: #fff;
    padding: 50px;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 8px #ff8082;
    color: #ff4e50;
}
p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 20px;
    line-height: 1.6;

BROWSER

Console