Untitled

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Rose Day</title>
<style>
  body {
        margin: 0;
            height: 100vh;
                display: flex;
                    justify-content: center;
                        align-items: center;
                            background: linear-gradient(135deg,#3b0014,#7a0033,#b3004b);
                                font-family: 'Segoe UI', sans-serif;
                                    overflow: hidden;
  }.envelope { width: 260px; height: 180px; background: #ffccd9; position: relative; cursor: pointer; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center; text-align: center; font-weight: bold; font-size: 22px; color: #7a0033; transition: transform .4s ease; }

  .envelope:hover { transform: scale(1.05); }

  .flap { position: absolute; top: 0; left: 0; width: 0; height: 0; border-left: 130px solid transparent; border-right: 130px solid transparent; border-bottom: 90px solid #ff8fab; border-radius: 12px 12px 0 0; }

  .card { position: absolute; width: 320px; height: 260px; background: white; border-radius: 14px; box-shadow: 0 25px 60px rgba(0,0,0,0.45); padding: 20px; text-align: center; transform: translateY(300px) scale(.8); opacity: 0; transition: all .7s ease; }

  .card.open { transform: translateY(0) scale(1); opacity: 1; }

  .title { color: #b3004b; font-size: 24px; margin-bottom: 10px; font-weight: bold; }

  .roses { font-size: 22px; line-height: 1.4; word-wrap: break-word; }

  .hint { position: absolute; bottom: 30px; color: #ffd6e0; font-size: 14px; opacity: .8; } </style>

  </head>
  <body><div class="envelope" id="envelope">
    <div class="flap"></div>
      Happy Rose Day 🌹
      </div><div class="card" id="card">
        <div class="title">For You ❤️</div>
          <div class="roses" id="roses"></div>
          </div><div class="hint">Click the envelope</div><script>
            const envelope = document.getElementById('envelope');
              const card = document.getElementById('card');
                const rosesDiv = document.getElementById('roses');

                  // generate 100 roses
                    let roses = '';
                      for (let i = 0; i < 100; i++) {
                            roses += '🌹';
                      }
                        rosesDiv.textContent = roses;

                          envelope.onclick = () => {
                                envelope.style.transform = 'translateY(-120px) rotateX(20deg)';
                                    card.classList.add('open');
                          };
                          </script></body>
                          </html>
                          }
                      }
  }