Floating Flows static site + Coolify Dockerfile deploy
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+379
@@ -0,0 +1,379 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Floating Flows — Premium AcroYoga in Freiburg</title>
|
||||
<meta name="description" content="Floating Flows — premium AcroYoga in Freiburg with Luciana. Partner acrobatics, beginner flows, washing machines and therapeutic flying. No partner needed. Book a class." />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Lato:wght@400;700;900&family=Poiret+One&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============ NAV ============ -->
|
||||
<header class="nav" id="nav">
|
||||
<div class="wrap nav__inner">
|
||||
<a class="brand" href="index.html" aria-label="Floating Flows home">
|
||||
<img class="brand__icon" src="assets/brand/floating-flows-icon.png" alt="" onerror="this.style.display='none'" />
|
||||
<span class="brand__name">Floating <b>Flows</b></span>
|
||||
</a>
|
||||
<nav class="nav__links" aria-label="Primary">
|
||||
<a href="courses.html">Courses</a>
|
||||
<a href="#experience">The Practice</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
<div class="nav__right">
|
||||
<div class="nav__icons icons">
|
||||
<a class="icon-btn" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg>
|
||||
</a>
|
||||
<a class="icon-btn" href="tel:+4917635708720" aria-label="Call Floating Flows">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg>
|
||||
</a>
|
||||
<a class="icon-btn" href="mailto:floatingflows@web.de" aria-label="Email Floating Flows">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<a class="btn nav__cta" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class</a>
|
||||
<button class="nav__toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="drawer">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile drawer -->
|
||||
<div class="drawer" id="drawer" aria-hidden="true">
|
||||
<a class="drawer__link" href="courses.html">Courses</a>
|
||||
<a class="drawer__link" href="#experience">The Practice</a>
|
||||
<a class="drawer__link" href="#location">Location</a>
|
||||
<a class="drawer__link" href="about.html">About</a>
|
||||
<a class="drawer__link" href="#contact">Contact</a>
|
||||
<div class="drawer__meta">
|
||||
<a href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class →</a>
|
||||
<span>Seepark Glashaus · Freiburg</span>
|
||||
<div class="drawer__icons icons">
|
||||
<a class="icon-btn" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ HERO (video) ============ -->
|
||||
<section class="hero">
|
||||
<div class="wrap hero__grid">
|
||||
<div class="hero__text">
|
||||
<p class="eyebrow hero__eyebrow">AcroYoga · Freiburg</p>
|
||||
<h1>Learn to <em>float</em>, together.</h1>
|
||||
<p class="hero__sub">The joyful art of flying together — AcroYoga, taught with care by Luciana. For every body, every level. No partner needed.</p>
|
||||
<div class="hero__actions">
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class</a>
|
||||
<a class="btn btn--ghost hero__ghost" href="#offerings">Explore classes</a>
|
||||
</div>
|
||||
<blockquote class="hero__quote">
|
||||
<p>“I arrived nervous and left flying. The most welcoming room I’ve ever practised in.”</p>
|
||||
<cite>Mara K. · ★★★★★</cite>
|
||||
</blockquote>
|
||||
<div class="hero__scroll"><span></span> Scroll</div>
|
||||
</div>
|
||||
<figure class="hero__media">
|
||||
<video class="hero__video" autoplay muted loop playsinline preload="auto" poster="assets/img/hero-1.jpg">
|
||||
<source src="assets/video/hero-1.mp4" type="video/mp4" />
|
||||
<img src="assets/img/sunset-doublebird.jpg" alt="Two practitioners in an AcroYoga flying pose at golden hour" />
|
||||
</video>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ ETHOS ============ -->
|
||||
<section class="section ethos" id="ethos">
|
||||
<div class="wrap ethos__grid">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">Welcome to Floating Flows</p>
|
||||
<h2>A practice built on <span class="accent">trust, breath and play.</span></h2>
|
||||
</div>
|
||||
<div class="ethos__cols">
|
||||
<p class="reveal" data-d="1">AcroYoga blends the wisdom of yoga, the dynamics of acrobatics and the care of therapeutic touch. You’ll learn to give weight, to receive it, and to move as one — held by a community that has your back.</p>
|
||||
<p class="reveal" data-d="2">No experience and no partner required. We work in rotating teams, so everyone finds a base, a flyer and a spotter. Beginners and seasoned flyers share the same mat, the same breath, the same quiet thrill of letting go.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ OFFERINGS (real courses) ============ -->
|
||||
<section class="section offer" id="offerings">
|
||||
<div class="wrap">
|
||||
<div class="offer__head">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">Classes & Courses</p>
|
||||
<h2>Find your place in the flow.</h2>
|
||||
</div>
|
||||
<p class="lede reveal" data-d="1">Term courses, beginner workshops and private training — all taught in small, attentive groups at the Seepark Glashaus in Freiburg.</p>
|
||||
</div>
|
||||
<div class="offer__list">
|
||||
|
||||
<article class="offer-card reveal">
|
||||
<div class="offer-card__top"><span class="course-badge">Starts 12 Jun 2026</span><span class="course-price">€126</span></div>
|
||||
<span class="offer-card__num">01 / Term Course</span>
|
||||
<h3>Beginner Flows</h3>
|
||||
<p>Seven sessions building four short beginner flows step by step — positions, transitions and the interplay of base, flyer and spotter, plus fall training and breath.</p>
|
||||
<div class="offer-card__meta"><span>All levels</span><span>7 × 90 min</span><span>No partner needed</span></div>
|
||||
<div class="offer-card__foot"><a class="link-arrow" href="courses.html#beginner-flows">Course details <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
|
||||
</article>
|
||||
|
||||
<article class="offer-card reveal" data-d="1">
|
||||
<div class="offer-card__top"><span class="course-badge">Starts 18 Jun 2026</span><span class="course-price">€126</span></div>
|
||||
<span class="offer-card__num">02 / Term Course</span>
|
||||
<h3>Classic Washing Machines 1</h3>
|
||||
<p>The next step after beginner flows. Link figures into continuous “washing machine” rotations, deepening trust and timing between base and flyer over seven weeks.</p>
|
||||
<div class="offer-card__meta"><span>Improver</span><span>7 × 90 min</span><span>Rotating teams</span></div>
|
||||
<div class="offer-card__foot"><a class="link-arrow" href="courses.html#washing-machines">Course details <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
|
||||
</article>
|
||||
|
||||
<article class="offer-card reveal" data-d="2">
|
||||
<div class="offer-card__top"><span class="course-badge">28 Jun 2026 · Outdoor</span><span class="course-price">Workshop</span></div>
|
||||
<span class="offer-card__num">03 / Beginner Workshop</span>
|
||||
<h3>Absolute Beginner 1</h3>
|
||||
<p>A gentle full-day introduction for complete beginners — two mindful sessions, a shared vegetarian potluck, and a guided Thai massage to close. Bring a friend.</p>
|
||||
<div class="offer-card__meta"><span>Complete beginners</span><span>10:00–16:00</span><span>Freiburg outdoor</span></div>
|
||||
<div class="offer-card__foot"><a class="link-arrow" href="courses.html#absolute-beginner">Workshop details <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
|
||||
</article>
|
||||
|
||||
<article class="offer-card reveal">
|
||||
<div class="offer-card__top"><span class="course-badge">By arrangement</span><span class="course-price">Hansefit +€16</span></div>
|
||||
<span class="offer-card__num">04 / Private</span>
|
||||
<h3>Personal Training · 90 min</h3>
|
||||
<p>One-to-one (for two people) in the comfort of your home anywhere in Freiburg. I bring 4 cm safety mats and we work directly on your AcroYoga goals.</p>
|
||||
<div class="offer-card__meta"><span>For 2 people</span><span>90 min</span><span>At your home</span></div>
|
||||
<div class="offer-card__foot"><a class="link-arrow" href="courses.html#personal-training">How it works <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ EXPERIENCE ============ -->
|
||||
<section class="section experience" id="experience">
|
||||
<div class="wrap experience__grid">
|
||||
<div class="experience__media reveal">
|
||||
<img src="assets/img/spotting-class.jpg" alt="A flyer being spotted in an AcroYoga class at the Seepark Glashaus" />
|
||||
</div>
|
||||
<div class="reveal" data-d="1">
|
||||
<p class="eyebrow">Your first flight</p>
|
||||
<h2>What an evening with us feels like.</h2>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step__no">01</div>
|
||||
<div><h3>Arrive & land</h3><p>We open every session with breath and a gentle warm-up. Bare feet, a warm welcome, and the day left at the door.</p></div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__no">02</div>
|
||||
<div><h3>Build trust</h3><p>Guided, spotted and never rushed. You’ll learn to base, fly and catch with partners of every level — and how to fall safely.</p></div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__no">03</div>
|
||||
<div><h3>Take flight</h3><p>The moment it clicks. Float, invert and flow — then unwind with a partner Thai-massage cool-down before you go.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ LOCATION (Glashaus) ============ -->
|
||||
<section class="section location" id="location">
|
||||
<div class="wrap location__grid">
|
||||
<div class="location__media reveal">
|
||||
<div class="location__main"><img src="assets/img/glashaus-2.webp" alt="View over the Seepark lake from the Glashaus in Freiburg" loading="lazy" /></div>
|
||||
</div>
|
||||
<div class="reveal" data-d="1">
|
||||
<p class="eyebrow">Our home</p>
|
||||
<h2>The Glashaus, in the Seepark.</h2>
|
||||
<p class="location__lede">We practise in one of Freiburg’s most beautiful settings — a soaring timber-and-glass pavilion in the Seepark, looking out over the lake to the green hillside beyond.</p>
|
||||
<div class="location__notes">
|
||||
<div class="location__note">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
|
||||
<p>Simply stunning to look at and endlessly photogenic — especially under a starry sky.</p>
|
||||
</div>
|
||||
<div class="location__note">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12a9 9 0 0 1 18 0"/><path d="M3 12a9 9 0 0 0 18 0"/><path d="M12 3v18"/></svg>
|
||||
<p>A fantastic view of the water, open air, and space to simply relax. The perfect place to fly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="location__addr">
|
||||
<a class="btn btn--ghost" href="https://maps.google.com/?q=Seepark+Glashaus+Brandensteinstra%C3%9Fe+24+79110+Freiburg" target="_blank" rel="noopener">Get directions</a>
|
||||
<span style="color:var(--color-ink-soft);font-size:var(--text-sm);">Brandensteinstraße 24, 79110 Freiburg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ AMBIENT (calm video) ============ -->
|
||||
<section class="ambient" id="ambient">
|
||||
<div class="ambient__media">
|
||||
<video autoplay muted loop playsinline preload="auto" poster="assets/img/calm-poster.jpg">
|
||||
<source src="assets/video/calm.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div class="ambient__inner">
|
||||
<p class="eyebrow">Outdoors, in the open air</p>
|
||||
<h2>Arrive heavy. Leave light.</h2>
|
||||
<p>Under a glass roof and an open sky, in the green heart of the Seepark — a place to breathe, to trust, and to fly.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ REVIEWS ============ -->
|
||||
<section class="section reviews" id="reviews">
|
||||
<div class="wrap">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">Stories from the studio</p>
|
||||
<h2>Words from our community.</h2>
|
||||
</div>
|
||||
<div class="reviews__grid">
|
||||
<figure class="review reveal"><div class="review__stars">★★★★★</div><p>“Every time I step into class I feel a lightness that helps me set down the stress of the week. Truly special.”</p><cite>— Amelie R.</cite></figure>
|
||||
<figure class="review reveal" data-d="1"><div class="review__stars">★★★★★</div><p>“Inspiring, knowledgeable teaching and a genuinely warm room. I came alone and left with a community.”</p><cite>— Simon T.</cite></figure>
|
||||
<figure class="review reveal" data-d="2"><div class="review__stars">★★★★★</div><p>“I never imagined I’d be upside down on someone’s feet and laughing. Luciana made the impossible feel safe.”</p><cite>— Priya N.</cite></figure>
|
||||
<figure class="review reveal"><div class="review__stars">★★★★★</div><p>“My partner and I come every term. It’s become the best evening of our week.”</p><cite>— Jonas & Lena</cite></figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ BOOKING ============ -->
|
||||
<section class="section booking" id="booking">
|
||||
<div class="wrap">
|
||||
<div class="booking__panel">
|
||||
<div class="booking__head reveal">
|
||||
<p class="eyebrow">Book your place</p>
|
||||
<h2>Ready to fly?</h2>
|
||||
<p class="booking__lede">Reserve through our booking system, then message me so I can add you to the course Signal group. New here? The Absolute Beginner workshop is the softest landing.</p>
|
||||
</div>
|
||||
<div class="passes reveal" data-d="1">
|
||||
<div class="pass"><div class="pass__name">Term Course<small>7 sessions</small></div><div class="pass__price">€126</div></div>
|
||||
<div class="pass"><div class="pass__name">Drop-In<small>via Hansefit</small></div><div class="pass__price">Hansefit</div></div>
|
||||
<div class="pass"><div class="pass__name">Personal Training<small>90 min · 2 people</small></div><div class="pass__price">+€16</div></div>
|
||||
<div class="pass"><div class="pass__name">Absolute Beginner<small>Full-day workshop</small></div><div class="pass__price">Enquire</div></div>
|
||||
</div>
|
||||
<div class="booking__cta reveal" data-d="2" style="grid-column:1/-1;">
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Open booking & schedule</a>
|
||||
<a class="link-arrow" href="mailto:floatingflows@web.de">Register or ask a question
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<p class="booking__note" style="grid-column:1/-1;">Live availability and registration are managed in the existing booking system. Drop-in is possible via Hansefit — please get in touch.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ PHOTO CAROUSEL ============ -->
|
||||
<section class="marquee-band" aria-label="Photos from Floating Flows">
|
||||
<div class="marquee">
|
||||
<div class="marquee__track">
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/sunset-doublebird.jpg" alt="AcroYoga double bird at sunset" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/spotting-class.jpg" alt="A flyer being spotted in class" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/bridge-tower.jpg" alt="Standing AcroYoga at the covered bridge" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/kids-pyramid.jpg" alt="Family AcroYoga pyramid" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/park-batwing.jpg" alt="AcroYoga bat-hang in the park" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/sunset-doublebird.jpg" alt="" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/spotting-class.jpg" alt="" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/bridge-tower.jpg" alt="" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/kids-pyramid.jpg" alt="" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/park-batwing.jpg" alt="" loading="lazy"></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ CONTACT / INSTAGRAM ============ -->
|
||||
<section class="section contact" id="contact">
|
||||
<div class="wrap contact__grid">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">Say hello</p>
|
||||
<h2>Come find us.</h2>
|
||||
<p class="contact__intro">A glimpse of life at Floating Flows — come fly with us in the Seepark.</p>
|
||||
</div>
|
||||
<div class="contact__links reveal" data-d="1">
|
||||
<div class="contact__row"><span>Email</span><a href="mailto:floatingflows@web.de">floatingflows@web.de</a></div>
|
||||
<div class="contact__row"><span>Phone</span><a href="tel:+4917635708720">0176 35708720</a></div>
|
||||
<div class="contact__row"><span>Instagram</span><a href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener">@floatingflows</a></div>
|
||||
<div class="contact__row"><span>Studio</span><a href="https://maps.google.com/?q=Seepark+Glashaus+Brandensteinstra%C3%9Fe+24+79110+Freiburg" target="_blank" rel="noopener">Seepark Glashaus · Brandensteinstraße 24, 79110 Freiburg</a></div>
|
||||
<div class="icons" style="margin-top:var(--space-md);">
|
||||
<a class="icon-btn icon-btn--lg" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn icon-btn--lg" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn icon-btn--lg" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ FOOTER ============ -->
|
||||
<footer class="footer">
|
||||
<div class="wrap">
|
||||
<div class="footer__top">
|
||||
<div>
|
||||
<div class="brand" style="margin-bottom:var(--space-sm);">
|
||||
<img class="brand__icon" src="assets/brand/floating-flows-icon.png" alt="" onerror="this.style.display='none'" />
|
||||
<span class="brand__name">Floating <b>Flows</b></span>
|
||||
</div>
|
||||
<p>Premium AcroYoga in Freiburg — trust, breath and the quiet joy of flight. For every body, every level.</p>
|
||||
<div class="icons" style="margin-top:var(--space-md);">
|
||||
<a class="icon-btn icon-btn--on-night" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn icon-btn--on-night" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn icon-btn--on-night" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__cols">
|
||||
<div><h4>Explore</h4><a href="courses.html">Courses</a><a href="about.html">About</a></div>
|
||||
<div><h4>Visit</h4><a href="#location">Location</a><a href="#booking">Book</a><a href="#contact">Contact</a></div>
|
||||
<div><h4>Connect</h4><a href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener">@floatingflows</a><a href="mailto:floatingflows@web.de">floatingflows@web.de</a><a href="tel:+4917635708720">0176 35708720</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bottom"><span>© 2026 Floating Flows · Luciana · Freiburg</span><span>Made for movement.</span></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
// Random hero video on each visit (acro clips only)
|
||||
var heroVids = [
|
||||
['assets/video/hero-1.mp4', 'assets/img/hero-1.jpg'],
|
||||
['assets/video/hero-2.mp4', 'assets/img/hero-2.jpg'],
|
||||
['assets/video/hero-3.mp4', 'assets/img/hero-3.jpg']
|
||||
];
|
||||
var hv = document.querySelector('.hero__video');
|
||||
if (hv) {
|
||||
var pick = heroVids[Math.floor(Math.random() * heroVids.length)];
|
||||
var src = hv.querySelector('source');
|
||||
if (src && pick[0] !== src.getAttribute('src')) {
|
||||
src.setAttribute('src', pick[0]);
|
||||
hv.setAttribute('poster', pick[1]);
|
||||
hv.load();
|
||||
}
|
||||
var play = function(){ var p = hv.play(); if (p && p.catch) p.catch(function(){}); };
|
||||
play(); hv.addEventListener('canplay', play, { once: true });
|
||||
}
|
||||
|
||||
var nav = document.getElementById('nav');
|
||||
var onScroll = function(){ nav.classList.toggle('nav--solid', window.scrollY > 40); };
|
||||
onScroll(); window.addEventListener('scroll', onScroll, {passive:true});
|
||||
var toggle = document.getElementById('navToggle');
|
||||
var drawer = document.getElementById('drawer');
|
||||
var close = function(){ document.body.classList.remove('menu-open'); toggle.setAttribute('aria-expanded','false'); drawer.setAttribute('aria-hidden','true'); };
|
||||
toggle.addEventListener('click', function(){
|
||||
var open = document.body.classList.toggle('menu-open');
|
||||
toggle.setAttribute('aria-expanded', open); drawer.setAttribute('aria-hidden', !open);
|
||||
});
|
||||
drawer.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', close); });
|
||||
document.addEventListener('keydown', function(e){ if(e.key==='Escape') close(); });
|
||||
var io = new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } });
|
||||
}, {threshold: 0.12, rootMargin: '0px 0px -40px 0px'});
|
||||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||||
|
||||
// Kick section/background videos to play once visible (offscreen autoplay can defer)
|
||||
var vio = new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ var p=e.target.play(); if(p&&p.catch)p.catch(function(){}); } }); }, {threshold: 0.2});
|
||||
document.querySelectorAll('.ambient video').forEach(function(v){ vio.observe(v); });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user