Happy birthday

HTML

 <div class="stars"></div>

  <!-- Gift box to replace the button -->
  <div class="gift-box-container">
    <div class="gift-top">
      <!-- Triangles for the ribbon -->
      <div class="ribbon-triangle-left"></div>
      <div class="ribbon-triangle-right"></div>
    </div>
    <div class="gift-box" onclick="showBirthday()">
      <!-- Vertical ribbon -->
      <div class="ribbon-vertical"></div>
    </div>
  </div>

  <div class="container">
    <div class="birthday-cake">
      <div class="cake">
        <div class="icing"></div>
      </div>
      <div class="candles">
        <div class="candle"></div>
        <div class="candle"></div>
        <div class="candle"></div>
      </div>
    </div>

    <div class="message">
      <h1>Happy Birthday!</h1>
    </div>

    <div class="fireworks"></div>

    <div class="blessing-message">May God bless you!</div>
  </div>

CSS CODE

 * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Arial", sans-serif;
      }

      body {
        background-color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
        position: relative;
      }

      /* Starry background */
      .stars {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        overflow: hidden;
        z-index: 0;
      }

      .star {
        position: absolute;
        width: 2px;
        height: 2px;
        background: white;
        border-radius: 50%;
        animation: twinkle 2s infinite ease-in-out alternate;
      }

      @keyframes twinkle {
        0% {
          opacity: 0.3;
        }
        50% {
          opacity: 0.8;
        }
        100% {
          opacity: 0.5;
        }
      }

      .container {
        text-align: center;
        position: relative;
        transform-style: preserve-3d;
        z-index: 1;
        display: none;
      }

      .birthday-cake {
        position: relative;
        margin: 20px auto;
        width: 150px;
        perspective: 1000px;
        z-index: 2;
        opacity: 0;
        transform: scale(0) translateY(200px); /* Initially hidden inside the gift box */
        transition: transform 1s ease-out, opacity 1s ease-out;
      }

      .cake {
        width: 100%;
        height: 80px;
        background: linear-gradient(145deg, #f0932b, #e67e22);
        border-radius: 10px 10px 0 0;
        position: relative;
        box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
        transform: rotateX(15deg);
      }

      .icing {
        width: 100%;
        height: 20px;
        background-color: #fff;
        border-radius: 10px 10px 0 0;
        position: absolute;
        top: 0;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
      }

      .candles {
        display: flex;
        justify-content: space-evenly;
        position: absolute;
        top: -40px;
        left: 0;
        width: 100%;
        z-index: 10;
      }

      .candle {
        width: 10px;
        height: 40px;
        background-color: #fff;
        position: relative;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
      }

      .candle::before {
        content: "";
        width: 6px;
        height: 6px;
        background: radial-gradient(circle, yellow, orange);
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        box-shadow: 0px 0px 10px rgba(255, 255, 0, 0.8);
      }

      .fireworks {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
      }

      /* Gift box with red ribbon */
      .gift-box-container {
        text-align: center;
        position: relative;
      }

      .gift-box {
        background-color: #ffeb3b;
        width: 150px;
        height: 120px;
        position: relative;
        margin: 0 auto;
        cursor: pointer;
        box-shadow: 0px 10px 15px white;
        transition: transform 0.5s ease;
      }

      .gift-top {
        background-color: #ffeb3b;
        width: 170px;
        border:4px solid black;
        height: 30px;
        position: relative;
      }

      /* Red ribbon */
      .ribbon-vertical {
        width: 15px;
        height: 100%;
        background-color: red;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      /* Right-angled triangles for the ribbon */
      .ribbon-triangle-left, .ribbon-triangle-right {
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        top: 0;
      }

      .ribbon-triangle-left {
        border-width: 30px 30px 0 0;
        border-color: red transparent transparent transparent;
        /* left: -30px; */
       top:-30px;
       left:45px;
       transform: rotate(270deg);
      }

      .ribbon-triangle-right {
        border-width: 30px 0 0 30px;
        border-color: red transparent transparent transparent;
        top: -30px;
        right:50px;
        transform: rotate(90deg);
      }

      .message {
        color: #fff;
        font-size: 2rem;
        margin-top: 20px;
        opacity: 0;
        transition: opacity 1.5s ease-out;
      }

      .message h1 {
        font-size: 3rem;
        margin-bottom: 10px;
      }

      .blessing-message {
        font-size: 2rem;
        color: #fff;
        position: absolute;
        top: 200px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 1s ease, bottom 1s ease;
      }

    .gift-box:hover{
      background-color: #c0c015;
    }

JS CODE

 function generateStars() {
      const starContainer = document.querySelector('.stars');
      for (let i = 0; i < 100; i++) {
        const star = document.createElement('div');
        star.classList.add('star');
        star.style.left = `${Math.random() * 100}%`;
        star.style.top = `${Math.random() * 100}%`;
        star.style.animationDuration = `${Math.random() * 2 + 1}s`;
        starContainer.appendChild(star);
      }
    }

    generateStars();

    //now the code for the showBirthday...onclicking the birthday box

    function showBirthday() {
      const container = document.querySelector(".container");
      const cake = document.querySelector(".birthday-cake");
      const message = document.querySelector(".message");
      const blessing = document.querySelector(".blessing-message");
      const giftBox = document.querySelector(".gift-box");
      const gifttop=document.querySelector('.gift-top')

      // Hide the gift box and show the container
      // giftBox.style.display = "none";
      gifttop.style.transform="rotate(-90deg)"
      gifttop.style.marginBottom="50%";
      gifttop.style.marginLeft="0%"

      container.style.display = "block";

      // Animate the cake appearance (simulating coming out of the box)
      setTimeout(() => {
        cake.style.opacity = "1";
        cake.style.transform = "scale(1) translateY(0)";
      }, 500);

      // Show the "Happy Birthday" message
      setTimeout(() => {
        message.style.opacity = "1";
      }, 1500);

      // Slide in the "May God bless you" message from the bottom
      setTimeout(() => {
        blessing.style.opacity = "1";
        blessing.style.bottom = "50px";
      }, 2000);
    }