Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kocktails & Kimono's | The Starling Hotel | Atlanta, GA</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;600;700&family=Raleway:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| font-style: italic; | |
| } | |
| .montserrat-bold { | |
| font-family: 'Montserrat', sans-serif; | |
| font-weight: 700; | |
| } | |
| .raleway-semibold { | |
| font-family: 'Raleway', sans-serif; | |
| font-weight: 600; | |
| } | |
| .section { | |
| height: 100vh; | |
| width: 100%; | |
| background-size: cover; | |
| background-position: center; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .text-overlay { | |
| text-align: center; | |
| max-width: 90%; | |
| z-index: 10; | |
| } | |
| .sparkle { | |
| animation: sparkle 2s infinite; | |
| display: inline-block; | |
| } | |
| @keyframes sparkle { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.7; transform: scale(1.1); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(45deg, #ffb7c5, #ff9eb3, #ff85a1, #ff6c8f); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .blush-bg { | |
| background-color: rgba(255, 228, 225, 0.85); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| } | |
| .gold-outline { | |
| text-shadow: | |
| -1px -1px 0 #D4AF37, | |
| 1px -1px 0 #D4AF37, | |
| -1px 1px 0 #D4AF37, | |
| 1px 1px 0 #D4AF37; | |
| } | |
| .cta-button { | |
| background: linear-gradient(45deg, #D4AF37, #FFDF00); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 50px; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s ease; | |
| display: inline-block; | |
| margin: 1rem 0; | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="overflow-x-hidden"> | |
| <!-- Navigation Dots --> | |
| <div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50 flex flex-col space-y-4"> | |
| <a href="#slide1" class="w-3 h-3 rounded-full bg-white border border-pink-300 transition-all duration-300 hover:scale-125"></a> | |
| <a href="#slide2" class="w-3 h-3 rounded-full bg-white border border-pink-300 transition-all duration-300 hover:scale-125"></a> | |
| <a href="#slide3" class="w-3 h-3 rounded-full bg-white border border-pink-300 transition-all duration-300 hover:scale-125"></a> | |
| <a href="#slide4" class="w-3 h-3 rounded-full bg-white border border-pink-300 transition-all duration-300 hover:scale-125"></a> | |
| <a href="#slide5" class="w-3 h-3 rounded-full bg-white border border-pink-300 transition-all duration-300 hover:scale-125"></a> | |
| <a href="#slide6" class="w-3 h-3 rounded-full bg-white border border-pink-300 transition-all duration-300 hover:scale-125"></a> | |
| </div> | |
| <!-- Slide 1: Hook --> | |
| <section id="slide1" class="section" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://huggingface.co/spaces/flynerd/kocktails-and-kimonos/resolve/main/images/3b3fdd4f-3918-4cd2-a7aa-521975f0c752.jpeg');"> | |
| <div class="text-overlay" data-aos="fade-up" data-aos-duration="1500"> | |
| <span class="sparkle text-white text-4xl mb-4">✨</span> | |
| <h1 class="title-font text-white text-4xl md:text-6xl leading-tight shadow-lg"> | |
| Some experiences transcend the ordinary… | |
| </h1> | |
| </div> | |
| </section> | |
| <!-- Slide 2: What it is --> | |
| <section id="slide2" class="section" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://huggingface.co/spaces/flynerd/kocktails-and-kimonos/resolve/main/images/DJI_0099.jpg');"> | |
| <div class="text-overlay absolute bottom-20 w-full" data-aos="fade-up" data-aos-duration="1500"> | |
| <h2 class="title-font gradient-text text-3xl md:text-5xl px-4"> | |
| 🌸 Kocktail & Kimono's/The Starling Hotel/Atlanta, Ga/Sept.21 | |
| </h2> | |
| </div> | |
| </section> | |
| <!-- Slide 3: The Experience --> | |
| <section id="slide3" class="section" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://huggingface.co/spaces/flynerd/kocktails-and-kimonos/resolve/main/images/2021-08-13 (1).webp');"> | |
| <div class="text-overlay blush-bg text-left ml-10 md:ml-20" data-aos="fade-right" data-aos-duration="1500"> | |
| <h3 class="title-font text-2xl md:text-3xl mb-6 gradient-text">The Ultimate Rooftop Experience</h3> | |
| <ul class="space-y-6 text-gray-800"> | |
| <li class="raleway-semibold text-xl md:text-2xl flex items-center"> | |
| <span class="text-2xl mr-3">📸</span> Professional photography in elegant kimonos | |
| </li> | |
| <li class="raleway-semibold text-xl md:text-2xl flex items-center"> | |
| <span class="text-2xl mr-3">🍸</span> Signature cocktails crafted just for you | |
| </li> | |
| <li class="raleway-semibold text-xl md:text-2xl flex items-center"> | |
| <span class="text-2xl mr-3">🌆</span> Breathtaking Atlanta skyline views | |
| </li> | |
| </ul> | |
| </div> | |
| </section> | |
| <!-- Slide 4: The Vibe --> | |
| <section id="slide4" class="section" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://huggingface.co/spaces/flynerd/kocktails-and-kimonos/resolve/main/images/508433467_10238025884206711_6193900700804427848_n.jpg');"> | |
| <div class="text-overlay blush-bg text-center" data-aos="fade-up" data-aos-duration="1500"> | |
| <h3 class="title-font text-2xl md:text-3xl mb-6 gradient-text">Elevated Elegance Meets Modern Luxury</h3> | |
| <p class="raleway-semibold text-xl md:text-2xl text-gray-800"> | |
| Where sophistication meets unforgettable memories | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Slide 5: The Details --> | |
| <section id="slide5" class="section" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://huggingface.co/spaces/flynerd/kocktails-and-kimonos/resolve/main/images/496806424_10237479181899495_2428391632738773139_n.jpg');"> | |
| <div class="text-overlay blush-bg text-left ml-10 md:ml-20" data-aos="fade-left" data-aos-duration="1500"> | |
| <h3 class="title-font text-2xl md:text-3xl mb-6 gradient-text">What's Included</h3> | |
| <ul class="space-y-4 text-gray-800"> | |
| <li class="raleway-semibold text-lg md:text-xl">✨ Premium kimono rental</li> | |
| <li class="raleway-semibold text-lg md:text-xl">✨ Two signature cocktails</li> | |
| <li class="raleway-semibold text-lg md:text-xl">✨ Professional photo session</li> | |
| <li class="raleway-semibold text-lg md:text-xl">✨ Digital gallery of edited photos</li> | |
| <li class="raleway-semibold text-lg md:text-xl">✨ Exclusive rooftop access</li> | |
| </ul> | |
| </div> | |
| </section> | |
| <!-- Slide 6: The Invitation --> | |
| <section id="slide6" class="section" style="background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://huggingface.co/spaces/flynerd/kocktails-and-kimonos/resolve/main/images/544813609_10239177030984661_4912978644923738151_n.jpg');"> | |
| <div class="text-overlay text-center" data-aos="zoom-in" data-aos-duration="1500"> | |
| <h2 class="title-font gradient-text text-3xl md:text-4xl mb-6"> | |
| You're Invited | |
| </h2> | |
| <p class="title-font text-white text-2xl md:text-3xl mb-4"> | |
| September 21st • 6:00 PM | |
| </p> | |
| <p class="montserrat-bold text-white text-xl md:text-2xl mb-8"> | |
| Exclusive Rooftop Venue • Atlanta | |
| </p> | |
| <div class="space-y-4"> | |
| <a href="https://www.eventbrite.com/e/cocktails-kimonos-atlanta-rooftop-experience-tickets-123456789" class="cta-button montserrat-bold text-lg" target="_blank"> | |
| 🎟️ Reserve Your Spot on Eventbrite | |
| </a> | |
| <a href="https://linktr.ee/Feburyhassanpresents" class="cta-button montserrat-bold text-lg bg-pink-500" target="_blank"> | |
| 🌸 More Info on Linktree | |
| </a> | |
| <p class="text-white text-lg md:text-xl mt-6"> | |
| 💕 Only 5 spots remaining | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| AOS.init({ | |
| duration: 1200, | |
| once: true | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |