The Ultimate Balloon Gala
-Join us for a night of floating fun, vivid colors, and high-altitude entertainment.
- -
-
- 📅
- Saturday, August 29th, 2026
+
+
+
+
+
+
+
The Ultimate Balloon Gala
+Join us for a night of floating fun, vivid colors, and high-altitude entertainment.
+ +
+
-
+ 📅
+ Saturday, August 29th, 2026
+
+
+ 📍
+ The Sky Lounge, Downtown
+
- 📍
- The Sky Lounge, Downtown
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
`
document.querySelector('#rsvp-btn').addEventListener('click', (e) => {
diff --git a/src/style.css b/src/style.css
index ad4d5a5..b668b59 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,25 +1,25 @@
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;800&display=swap');
:root {
font-family: 'Outfit', sans-serif;
color-scheme: light dark;
background: linear-gradient(135deg, #1e1e2f 0%, #2a2a4a 100%);
+ background-attachment: fixed;
color: #fff;
+ scroll-behavior: smooth;
}
body {
margin: 0;
- display: flex;
- place-items: center;
+ padding: 0;
min-width: 320px;
- min-height: 100vh;
- overflow: hidden;
position: relative;
+ overflow-x: hidden;
}
/* Floating Balloons */
.balloon-container {
- position: absolute;
+ position: fixed;
top: 0;
left: 0;
width: 100%;
@@ -37,9 +37,9 @@ body {
background-color: var(--color);
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
transform: scale(var(--scale));
- animation: floatUp 10s ease-in infinite;
+ animation: floatUp 15s ease-in infinite;
animation-delay: var(--delay);
- opacity: 0.8;
+ opacity: 0.7;
box-shadow: inset -10px -10px 15px rgba(0,0,0,0.2), inset 10px 10px 15px rgba(255,255,255,0.4);
}
@@ -62,25 +62,36 @@ body {
100% { transform: translateY(-120vh) scale(var(--scale)) rotate(-5deg); }
}
-/* Glassmorphism Panel */
+/* Base Glassmorphism */
.glass-panel {
- background: rgba(255, 255, 255, 0.1);
+ background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.2);
+ border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 24px;
- padding: 3rem;
- max-width: 500px;
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+}
+
+.glass-panel-flat {
+ background: rgba(255, 255, 255, 0.05);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.text-center {
text-align: center;
- z-index: 10;
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
- margin: 0 auto;
+}
+
+/* Typography */
+h1, h2, h3 {
+ font-weight: 800;
+ margin: 0 0 1rem 0;
}
h1 {
- font-size: 3rem;
- font-weight: 800;
- margin: 0 0 1rem 0;
+ font-size: 3.5rem;
background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@@ -88,16 +99,80 @@ h1 {
animation: gradientFlow 5s ease infinite;
}
+.section-title {
+ font-size: 2.5rem;
+ text-align: center;
+ margin-bottom: 3rem;
+ color: #fff;
+ text-shadow: 0 2px 10px rgba(0,0,0,0.5);
+}
+
@keyframes gradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
+/* Navbar */
+.navbar {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ z-index: 100;
+ box-sizing: border-box;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: 800;
+}
+
+.nav-links {
+ list-style: none;
+ display: flex;
+ gap: 2rem;
+ margin: 0;
+ padding: 0;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ font-weight: 500;
+ transition: opacity 0.3s;
+}
+
+.nav-links a:hover {
+ opacity: 0.7;
+}
+
+/* Sections Layout */
+.section {
+ min-height: 100vh;
+ padding: 100px 5% 50px 5%; /* Account for fixed navbar */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+ z-index: 10;
+ box-sizing: border-box;
+}
+
+/* Hero Section */
+.hero-section main {
+ padding: 4rem 3rem;
+ max-width: 600px;
+ margin: 0 auto;
+}
+
.subtitle {
- font-size: 1.2rem;
+ font-size: 1.3rem;
font-weight: 300;
- color: rgba(255, 255, 255, 0.8);
+ color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
}
@@ -105,17 +180,17 @@ h1 {
display: flex;
flex-direction: column;
gap: 1rem;
- margin-bottom: 2rem;
- text-align: left;
+ margin-bottom: 2.5rem;
}
.detail-item {
display: flex;
align-items: center;
- background: rgba(0, 0, 0, 0.2);
- padding: 1rem;
+ background: rgba(0, 0, 0, 0.25);
+ padding: 1.2rem;
border-radius: 12px;
font-size: 1.1rem;
+ justify-content: center;
}
.icon {
@@ -123,21 +198,170 @@ h1 {
margin-right: 1rem;
}
-button {
+/* Buttons */
+.primary-btn {
background: #feca57;
color: #222;
border: none;
- padding: 1rem 2rem;
+ padding: 1.2rem 2.5rem;
font-size: 1.2rem;
font-weight: 800;
border-radius: 50px;
cursor: pointer;
- width: 100%;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(254, 202, 87, 0.3);
+ width: 100%;
}
-button:hover {
+.primary-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 25px rgba(254, 202, 87, 0.5);
}
+
+.outline-btn {
+ background: transparent;
+ color: #fff;
+ border: 2px solid #fff;
+ padding: 1.2rem 2.5rem;
+ font-size: 1.2rem;
+ font-weight: 800;
+ border-radius: 50px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ width: 100%;
+}
+
+.outline-btn:hover {
+ background: #fff;
+ color: #222;
+}
+
+/* Packages Grid */
+.grid-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.card {
+ padding: 2.5rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ transition: transform 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.card:hover {
+ transform: translateY(-10px);
+}
+
+.highlight-card {
+ border: 1px solid #48dbfb;
+ box-shadow: 0 25px 50px -12px rgba(72, 219, 251, 0.2);
+}
+
+.badge {
+ background: #48dbfb;
+ color: #111;
+ position: absolute;
+ top: 15px;
+ right: -35px;
+ padding: 5px 40px;
+ transform: rotate(45deg);
+ font-weight: 800;
+ font-size: 0.8rem;
+}
+
+.price {
+ font-size: 3rem;
+ font-weight: 800;
+ color: #feca57;
+ margin: 1rem 0;
+}
+
+.features {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 2rem 0;
+ width: 100%;
+}
+
+.features li {
+ padding: 0.8rem 0;
+ border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+.features li:last-child {
+ border-bottom: none;
+}
+
+/* Gallery Grid */
+.gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 1.5rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.gallery-item {
+ height: 300px;
+ overflow: hidden;
+ padding: 0;
+}
+
+.gallery-item img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.5s ease;
+}
+
+.gallery-item:hover img {
+ transform: scale(1.1);
+}
+
+/* Footer Section */
+.footer-section {
+ min-height: auto;
+ padding: 4rem 5%;
+ margin-top: 5rem;
+}
+
+.footer-links {
+ display: flex;
+ gap: 2rem;
+ justify-content: center;
+ margin: 2rem 0;
+}
+
+.footer-links a {
+ color: #48dbfb;
+ text-decoration: none;
+ font-size: 1.2rem;
+ font-weight: 500;
+}
+
+.footer-links a:hover {
+ text-decoration: underline;
+}
+
+.copyright {
+ opacity: 0.6;
+ font-size: 0.9rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ h1 { font-size: 2.5rem; }
+ .nav-links { display: none; }
+ .grid-container { grid-template-columns: 1fr; }
+ .footer-links { flex-direction: column; gap: 1rem; }
+}
Party Packages
+
+
+
+
+ Standard Helium
+$99
+-
+
- 100 Standard Balloons +
- Basic Color Selection +
- Delivery Included +
+
+ Most Popular
+ The Strato-Sphere
+$249
+-
+
- 500 Custom Balloons +
- Metallic & Neon Colors +
- Professional Decorator +
- LED String Lights +
+
Atmosphere Ultra
+$499
+-
+
- 1000+ Premium Balloons +
- Custom Arches & Towers +
- Photo Booth Setup +
- VIP Coordination +
Past Events
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+