33 lines
1.1 KiB
JavaScript
33 lines
1.1 KiB
JavaScript
import './style.css'
|
|
|
|
document.querySelector('#app').innerHTML = `
|
|
<div class="balloon-container">
|
|
${Array.from({length: 20}).map(() => `<div class="balloon" style="--left: ${Math.random() * 100}%; --delay: ${Math.random() * 5}s; --color: hsl(${Math.random() * 360}, 80%, 60%); --scale: ${0.5 + Math.random() * 0.8}"></div>`).join('')}
|
|
</div>
|
|
|
|
<main class="glass-panel">
|
|
<h1>The Ultimate Balloon Gala</h1>
|
|
<p class="subtitle">Join us for a night of floating fun, vivid colors, and high-altitude entertainment.</p>
|
|
|
|
<div class="details">
|
|
<div class="detail-item">
|
|
<span class="icon">📅</span>
|
|
<span>Saturday, August 29th, 2026</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="icon">📍</span>
|
|
<span>The Sky Lounge, Downtown</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="rsvp-btn">RSVP NOW</button>
|
|
</main>
|
|
`
|
|
|
|
document.querySelector('#rsvp-btn').addEventListener('click', (e) => {
|
|
e.target.innerHTML = '🎉 YOU ARE ON THE GUEST LIST! 🎉';
|
|
e.target.style.backgroundColor = '#10b981';
|
|
e.target.style.color = 'white';
|
|
e.target.style.transform = 'scale(1.05)';
|
|
});
|