Happy birthday card

HTML-CSS
1
Happy Birthday Envelope body { font-family: 'Arial', sans-serif; background-color: #f0f8ff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } 
    .envelope {
        position: relative;
        width: 350px;
        height: 250px;
        background-color: #FF69B4;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .flap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background-color: #FFA07A;
        clip-path: polygon(50% 0, 100% 100%, 0% 100%);
    }

    .message {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        text-align: center;
        background-color: white;
        padding: 15px;
        border-radius: 10px;
        font-size: 1.2em;
        color: #FF1493;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .confetti {
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
    }

    .confetti-piece {
        position: absolute;
        width: 10px;
        height: 20px;
        background-color: white;
        animation: fall 3s infinite ease-in-out;
    }

    @keyframes fall {
        0% {
            transform: translateY(-50px) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(300px) rotate(360deg);
            opacity: 0;
        }
    }

    .confetti-piece:nth-child(2n) {
        background-color: #FFFF00;
    }
    .confetti-piece:nth-child(3n) {
        background-color: #00FF7F;
    }
    .confetti-piece:nth-child(4n) {
        background-color: #FF4500;
    }

</style>

<div class="envelope">
    <div class="flap"></div>
    <div class="message">Happy Birthday! 🎉🎂</div>
    <div class="confetti">
        <div class="confetti-piece" style="left: 10%; animation-duration: 2s;"></div>
        <div class="confetti-piece" style="left: 20%; animation-duration: 3s;"></div>
        <div class="confetti-piece" style="left: 30%; animation-duration: 2.5s;"></div>
        <div class="confetti-piece" style="left: 40%; animation-duration: 4s;"></div>
        <div class="confetti-piece" style="left: 50%; animation-duration: 2.7s;"></div>
        <div class="confetti-piece" style="left: 60%; animation-duration: 3.5s;"></div>
        <div class="confetti-piece" style="left: 70%; animation-duration: 2.2s;"></div>
        <div class="confetti-piece" style="left: 80%; animation-duration: 3.1s;"></div>
    </div>
</div>
2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!