Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Zayna & Juan's Award-Winning Beach Bash!</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --color-sky-start: #87CEEB; | |
| --color-sky-end: #6A5ACD; | |
| --color-sea-start: #1E90FF; | |
| --color-sea-end: #00008B; | |
| --color-sand: #F4A460; | |
| --color-sunset-glow: #FFD700; | |
| --color-party-light-1: #FF69B4; | |
| --color-party-light-2: #00FFFF; | |
| --color-party-light-3: #ADFF2F; | |
| --color-text-primary: #FFFFFF; | |
| --color-text-secondary: #FFD700; | |
| --color-accent: #FF4500; | |
| --animation-speed-slow: 20s; | |
| --animation-speed-medium: 10s; | |
| --animation-speed-fast: 5s; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: 'Montserrat', sans-serif; | |
| overflow: hidden; | |
| background: linear-gradient(to bottom, var(--color-sky-start), var(--color-sky-end)); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| color: var(--color-text-primary); | |
| position: relative; | |
| } | |
| .beach-party-container { | |
| width: 100%; | |
| max-width: 1200px; | |
| height: 80vh; | |
| min-height: 500px; | |
| background: linear-gradient(to bottom, var(--color-sky-end) 0%, var(--color-sea-start) 60%, var(--color-sea-end) 85%, var(--color-sand) 100%); | |
| border-radius: 20px; | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 50px var(--color-sunset-glow); | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| align-items: center; | |
| animation: containerGlow var(--animation-speed-slow) infinite alternate; | |
| } | |
| @keyframes containerGlow { | |
| 0% { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 50px var(--color-sunset-glow); } | |
| 50% { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7), 0 0 70px var(--color-party-light-1); } | |
| 100% { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 50px var(--color-sunset-glow); } | |
| } | |
| .title { | |
| font-family: 'Pacifico', cursive; | |
| font-size: 3.5em; | |
| text-align: center; | |
| margin-top: 20px; | |
| text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6); | |
| color: var(--color-text-primary); | |
| position: absolute; | |
| top: 5%; | |
| width: 100%; | |
| z-index: 10; | |
| animation: fadeInDown 2s ease-out; | |
| } | |
| .subtitle { | |
| font-family: 'Montserrat', sans-serif; | |
| font-size: 1.2em; | |
| text-align: center; | |
| margin-top: 10px; | |
| color: var(--color-text-secondary); | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
| position: absolute; | |
| top: 15%; | |
| width: 100%; | |
| z-index: 10; | |
| animation: fadeInUp 2.5s ease-out; | |
| } | |
| @keyframes fadeInDown { | |
| from { opacity: 0; transform: translateY(-50px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(50px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .beach-elements { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| } | |
| .wave { | |
| position: absolute; | |
| bottom: 15%; | |
| left: 0; | |
| width: 100%; | |
| height: 50px; | |
| background: rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| animation: waveFlow var(--animation-speed-medium) infinite linear; | |
| opacity: 0.7; | |
| transform: scaleY(0.5); | |
| } | |
| .wave:nth-child(2) { | |
| bottom: 17%; | |
| left: 5%; | |
| width: 90%; | |
| height: 40px; | |
| animation-delay: -2s; | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| @keyframes waveFlow { | |
| 0% { transform: translateX(0) scaleY(0.5); } | |
| 50% { transform: translateX(-20px) scaleY(0.6); } | |
| 100% { transform: translateX(0) scaleY(0.5); } | |
| } | |
| .person { | |
| position: absolute; | |
| bottom: 20%; | |
| width: 150px; | |
| height: 250px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50% 50% 0 0 / 100% 100% 0 0; | |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); | |
| animation: sway var(--animation-speed-fast) infinite alternate; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 1.8em; | |
| font-weight: bold; | |
| color: var(--color-text-primary); | |
| text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); | |
| border: 2px solid var(--color-text-primary); | |
| transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; | |
| } | |
| .person:hover { | |
| transform: scale(1.05) translateY(-10px); | |
| box-shadow: 0 0 30px var(--color-party-light-1), 0 0 50px var(--color-party-light-2); | |
| } | |
| .zayna { | |
| left: 25%; | |
| background: linear-gradient(to top, var(--color-party-light-1), rgba(255, 255, 255, 0.1)); | |
| transform-origin: bottom center; | |
| } | |
| .juan { | |
| right: 25%; | |
| background: linear-gradient(to top, var(--color-party-light-2), rgba(255, 255, 255, 0.1)); | |
| transform-origin: bottom center; | |
| animation-delay: -1s; | |
| } | |
| @keyframes sway { | |
| 0% { transform: rotate(-3deg); } | |
| 100% { transform: rotate(3deg); } | |
| } | |
| .party-light { | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| opacity: 0.8; | |
| animation: flicker var(--animation-speed-fast) infinite alternate, float var(--animation-speed-slow) infinite linear; | |
| filter: blur(5px); | |
| } | |
| .party-light:nth-child(1) { | |
| top: 20%; left: 10%; background-color: var(--color-party-light-1); | |
| animation-delay: 0s; | |
| } | |
| .party-light:nth-child(2) { | |
| top: 30%; right: 15%; background-color: var(--color-party-light-2); | |
| animation-delay: -1.5s; | |
| } | |
| .party-light:nth-child(3) { | |
| top: 40%; left: 40%; background-color: var(--color-party-light-3); | |
| animation-delay: -3s; | |
| } | |
| .party-light:nth-child(4) { | |
| top: 15%; right: 5%; background-color: var(--color-party-light-1); | |
| animation-delay: -4.5s; | |
| } | |
| .party-light:nth-child(5) { | |
| top: 25%; left: 50%; background-color: var(--color-party-light-2); | |
| animation-delay: -6s; | |
| } | |
| @keyframes flicker { | |
| 0%, 100% { opacity: 0.8; transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.2); } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px) translateX(0px); } | |
| 25% { transform: translateY(-10px) translateX(5px); } | |
| 50% { transform: translateY(0px) translateX(0px); } | |
| 75% { transform: translateY(10px) translateX(-5px); } | |
| 100% { transform: translateY(0px) translateX(0px); } | |
| } | |
| .confetti-piece { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: var(--color-accent); | |
| opacity: 0; | |
| animation: confettiFall 5s ease-in-out forwards; | |
| border-radius: 2px; | |
| } | |
| .confetti-piece:nth-child(odd) { | |
| background-color: var(--color-party-light-1); | |
| animation-delay: calc(var(--i) * 0.1s); | |
| left: calc(var(--i) * 5%); | |
| transform: rotate(calc(var(--i) * 30deg)); | |
| } | |
| .confetti-piece:nth-child(even) { | |
| background-color: var(--color-party-light-2); | |
| animation-delay: calc(var(--i) * 0.15s); | |
| left: calc(95% - var(--i) * 5%); | |
| transform: rotate(calc(var(--i) * -30deg)); | |
| } | |
| @keyframes confettiFall { | |
| 0% { transform: translateY(-100px) rotateZ(0deg); opacity: 0; } | |
| 20% { opacity: 1; } | |
| 100% { transform: translateY(calc(100vh + 100px)) rotateZ(720deg); opacity: 0; } | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .title { | |
| font-size: 2.5em; | |
| } | |
| .subtitle { | |
| font-size: 1em; | |
| } | |
| .person { | |
| width: 100px; | |
| height: 180px; | |
| font-size: 1.2em; | |
| } | |
| .zayna { | |
| left: 15%; | |
| } | |
| .juan { | |
| right: 15%; | |
| } | |
| .beach-party-container { | |
| height: 90vh; | |
| border-radius: 0; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .title { | |
| font-size: 1.8em; | |
| top: 2%; | |
| } | |
| .subtitle { | |
| font-size: 0.8em; | |
| top: 10%; | |
| } | |
| .person { | |
| width: 80px; | |
| height: 150px; | |
| font-size: 1em; | |
| bottom: 15%; | |
| } | |
| .zayna { | |
| left: 10%; | |
| } | |
| .juan { | |
| right: 10%; | |
| } | |
| .beach-elements .wave { | |
| bottom: 10%; | |
| height: 30px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="beach-party-container"> | |
| <h1 class="title">Zayna & Juan's Epic Beach Bash!</h1> | |
| <p class="subtitle">The Award-Winning, Unique, and Absolutely Awesome Celebration!</p> | |
| <div class="beach-elements"> | |
| <div class="wave"></div> | |
| <div class="wave"></div> | |
| <div class="party-light"></div> | |
| <div class="party-light"></div> | |
| <div class="party-light"></div> | |
| <div class="party-light"></div> | |
| <div class="party-light"></div> | |
| </div> | |
| <div class="person zayna">Zayna</div> | |
| <div class="person juan">Juan</div> | |
| <!-- Confetti effect --> | |
| <div class="confetti-container"> | |
| <script> | |
| const confettiContainer = document.querySelector('.beach-party-container'); | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti-piece'; | |
| confetti.style.setProperty('--i', i); | |
| confetti.style.left = Math.random() * 100 + 'vw'; | |
| confetti.style.animationDelay = Math.random() * 5 + 's'; | |
| confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 70%)`; | |
| confettiContainer.appendChild(confetti); | |
| } | |
| </script> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |