Spaces:
Sleeping
Sleeping
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Happy New Year 2025</title> | |
| <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| /* Background styling */ | |
| body { | |
| background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d); | |
| background-size: 400% 400%; | |
| animation: gradientBG 10s ease infinite; | |
| color: #fff; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| overflow: hidden; | |
| font-family: 'Arial', sans-serif; | |
| text-align: center; | |
| } | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| /* Gift box styling */ | |
| .gift-box { | |
| width: 150px; | |
| height: 150px; | |
| position: relative; | |
| background-color: #ff4e50; | |
| box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); | |
| border-radius: 5px; | |
| animation: popUp 1s ease; | |
| cursor: pointer; | |
| } | |
| /* Box top styling and animation */ | |
| .box-top { | |
| width: 150px; | |
| height: 75px; | |
| background-color: #f9d423; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| border-radius: 5px 5px 0 0; | |
| transform-origin: top; | |
| transition: transform 0.5s; | |
| } | |
| .gift-box.open .box-top { | |
| transform: rotateX(-90deg); | |
| } | |
| /* Box ribbon */ | |
| .ribbon { | |
| position: absolute; | |
| background-color: #fff; | |
| } | |
| .ribbon.vertical { | |
| width: 10px; | |
| height: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .ribbon.horizontal { | |
| width: 100%; | |
| height: 10px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| /* New Year message */ | |
| .message { | |
| font-size: 2rem; | |
| opacity: 0; | |
| transition: opacity 1s; | |
| color: #ff4e50; | |
| } | |
| /* Fireworks styling */ | |
| .rocket { | |
| position: absolute; | |
| width: 5px; | |
| height: 15px; | |
| background-color: #fff; | |
| bottom: 0; | |
| animation: launch 2s ease-out infinite; | |
| opacity: 0; | |
| } | |
| .firework-explosion { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: transparent; | |
| border-radius: 50%; | |
| box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); | |
| animation: explode 1.5s ease-out infinite; | |
| opacity: 0; | |
| } | |
| /* Animation keyframes */ | |
| 0% { transform: scale(0); } | |
| 100% { transform: scale(1); } | |
| } | |
| 0% { bottom: 0; opacity: 1; } | |
| 80% { bottom: 70%; opacity: 1; } | |
| 100% { bottom: 70%; opacity: 0; } | |
| } | |
| 0% { transform: scale(0); opacity: 1; } | |
| 50% { transform: scale(1.5); opacity: 1; } | |
| 100% { transform: scale(2); opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Gift Box Structure --> | |
| <div class="gift-box" onclick="openGiftBox()"> | |
| <div class="box-top"></div> | |
| <div class="ribbon vertical"></div> | |
| <div class="ribbon horizontal"></div> | |
| </div> | |
| <!-- New Year Message --> | |
| <div class="message" id="newYearMessage">Happy New Year 2025!</div> | |
| <!-- Fireworks Animation --> | |
| <div class="rocket" style="left: 20%;"></div> | |
| <div class="rocket" style="left: 40%;"></div> | |
| <div class="rocket" style="left: 60%;"></div> | |
| <div class="rocket" style="left: 80%;"></div> | |
| <div class="firework-explosion" style="top: 20%; left: 15%;"></div> | |
| <div class="firework-explosion" style="top: 20%; left: 35%;"></div> | |
| <div class="firework-explosion" style="top: 20%; left: 55%;"></div> | |
| <div class="firework-explosion" style="top: 20%; left: 75%;"></div> | |
| <!-- JavaScript to control animations --> | |
| <script> | |
| function openGiftBox() { | |
| const giftBox = document.querySelector('.gift-box'); | |
| const message = document.getElementById('newYearMessage'); | |
| const rockets = document.querySelectorAll('.rocket'); | |
| const explosions = document.querySelectorAll('.firework-explosion'); | |
| // Open the box | |
| giftBox.classList.add('open'); | |
| // Show message after box opens | |
| setTimeout(() => { | |
| message.style.opacity = '1'; | |
| }, 500); | |
| // Launch fireworks after message is shown | |
| setTimeout(() => { | |
| rockets.forEach(rocket => rocket.style.opacity = '1'); | |
| explosions.forEach(explosion => explosion.style.opacity = '1'); | |
| }, 1000); | |
| } | |
| </script> | |
| </body> | |
| </html> | |