Bilingual: German default + stylish EN/DE language switch (desktop nav + mobile drawer), JS i18n dictionary
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+57
-48
@@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="de" data-lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>About — Floating Flows AcroYoga Freiburg</title>
|
||||
<meta name="description" content="The story behind Floating Flows — premium AcroYoga in Freiburg with Luciana. Built on trust, breath and the joy of flight." />
|
||||
<title>Über uns — Floating Flows AcroYoga Freiburg</title>
|
||||
<meta name="description" content="Die Geschichte hinter Floating Flows — Premium AcroYoga in Freiburg mit Luciana. Gebaut auf Vertrauen, Atem und der Freude des Fliegens." />
|
||||
<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" />
|
||||
@@ -19,56 +19,64 @@
|
||||
<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="index.html#experience">The Practice</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
<a href="courses.html" data-i18n="nav.courses">Kurse</a>
|
||||
<a href="index.html#experience" data-i18n="nav.practice">Die Praxis</a>
|
||||
<a href="about.html" data-i18n="nav.about">Über uns</a>
|
||||
<a href="index.html#contact" data-i18n="nav.contact">Kontakt</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"><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 class="lang-switch nav-lang" role="group" aria-label="Sprache / Language">
|
||||
<button type="button" class="lang-btn" data-setlang="de" aria-pressed="true">DE</button>
|
||||
<span class="lang-switch__sep" aria-hidden="true">/</span>
|
||||
<button type="button" class="lang-btn" data-setlang="en" aria-pressed="false">EN</button>
|
||||
</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>
|
||||
<a class="btn nav__cta" href="https://floatingflows.com/v2/" target="_blank" rel="noopener" data-i18n="nav.book">Kurs buchen</a>
|
||||
<button class="nav__toggle" id="navToggle" aria-label="Menü" aria-expanded="false" aria-controls="drawer"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="drawer" id="drawer" aria-hidden="true">
|
||||
<a class="drawer__link" href="courses.html">Courses</a>
|
||||
<a class="drawer__link" href="index.html#experience">The Practice</a>
|
||||
<a class="drawer__link" href="about.html">About</a>
|
||||
<a class="drawer__link" href="index.html#contact">Contact</a>
|
||||
<a class="drawer__link" href="courses.html" data-i18n="nav.courses">Kurse</a>
|
||||
<a class="drawer__link" href="index.html#experience" data-i18n="nav.practice">Die Praxis</a>
|
||||
<a class="drawer__link" href="index.html#location" data-i18n="nav.location">Standort</a>
|
||||
<a class="drawer__link" href="about.html" data-i18n="nav.about">Über uns</a>
|
||||
<a class="drawer__link" href="index.html#contact" data-i18n="nav.contact">Kontakt</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>
|
||||
<a href="https://floatingflows.com/v2/" target="_blank" rel="noopener" data-i18n="drawer.book">Kurs buchen →</a>
|
||||
<span data-i18n="drawer.where">Seepark Glashaus · Freiburg</span>
|
||||
<div class="drawer__foot">
|
||||
<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="Anrufen"><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="E-Mail"><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 class="lang-switch" role="group" aria-label="Sprache / Language">
|
||||
<button type="button" class="lang-btn" data-setlang="de" aria-pressed="true">DE</button>
|
||||
<span class="lang-switch__sep" aria-hidden="true">/</span>
|
||||
<button type="button" class="lang-btn" data-setlang="en" aria-pressed="false">EN</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="pagehead">
|
||||
<div class="wrap">
|
||||
<p class="eyebrow">Our story</p>
|
||||
<h1>We teach people to <span class="accent">trust</span> — and then to fly.</h1>
|
||||
<p class="lede">Floating Flows began with a simple belief: that connection is a practice, and everyone deserves the feeling of being held.</p>
|
||||
<p class="eyebrow" data-i18n="about.eyebrow">Unsere Geschichte</p>
|
||||
<h1 data-i18n="about.h1">Wir lehren Menschen zu <span class="accent">vertrauen</span> — und dann zu fliegen.</h1>
|
||||
<p class="lede" data-i18n="about.lede">Floating Flows begann mit einer einfachen Überzeugung: dass Verbindung eine Praxis ist und jede:r das Gefühl verdient, gehalten zu werden.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="wrap about-grid">
|
||||
<div class="about-portrait reveal">
|
||||
<img src="assets/img/bridge-tower.jpg" alt="AcroYoga practice at the covered bridge in Freiburg" />
|
||||
<img src="assets/img/bridge-tower.jpg" alt="AcroYoga-Praxis an der überdachten Brücke in Freiburg" />
|
||||
</div>
|
||||
<div class="prose reveal" data-d="1">
|
||||
<p class="first">Floating Flows is premium AcroYoga in Freiburg — a calm, light-filled practice where partner acrobatics, breath and therapeutic touch come together. We are a place to arrive, to let go, and to discover what your body can do with another’s support.</p>
|
||||
<p>Classes are led by <strong>Luciana</strong> — mindful, patient and endlessly encouraging. Groups are kept small so no one is rushed and no one is left behind, whether it’s your first time giving weight or your hundredth flight.</p>
|
||||
<p>More than a studio, we’re a community. The kind where you arrive a stranger and leave knowing names — where a shared potluck or a cup of tea is as much the practice as the poses themselves.</p>
|
||||
<p class="first" data-i18n="about.p1">Floating Flows ist Premium-AcroYoga in Freiburg — eine ruhige, lichtdurchflutete Praxis, in der Partnerakrobatik, Atem und therapeutische Berührung zusammenkommen. Ein Ort zum Ankommen, Loslassen und Entdecken, was dein Körper mit der Unterstützung eines anderen vermag.</p>
|
||||
<p data-i18n="about.p2">Die Kurse werden von <strong>Luciana</strong> geleitet — achtsam, geduldig und unendlich ermutigend. Die Gruppen bleiben klein, damit niemand gehetzt und niemand zurückgelassen wird — ob beim ersten Mal Gewicht geben oder beim hundertsten Flug.</p>
|
||||
<p data-i18n="about.p3">Mehr als ein Studio sind wir eine Gemeinschaft. Eine, in der man als Fremde:r kommt und mit Namen geht — wo ein gemeinsames Potluck oder eine Tasse Tee genauso zur Praxis gehört wie die Figuren selbst.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -76,13 +84,13 @@
|
||||
<section class="section experience">
|
||||
<div class="wrap">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">What we hold to</p>
|
||||
<h2 style="font-family:var(--font-display);font-size:clamp(1.9rem,5.5vw,var(--text-3xl));font-weight:400;max-width:18ch;margin-bottom:var(--space-2xl);">Three things we never compromise.</h2>
|
||||
<p class="eyebrow" data-i18n="about.valuesEyebrow">Wofür wir stehen</p>
|
||||
<h2 data-i18n="about.valuesH2" style="font-family:var(--font-display);font-size:clamp(1.9rem,5.5vw,var(--text-3xl));font-weight:400;max-width:18ch;margin-bottom:var(--space-2xl);">Drei Dinge, bei denen wir keine Kompromisse machen.</h2>
|
||||
</div>
|
||||
<div class="values">
|
||||
<div class="value reveal"><h3><span class="no">01</span>Safety, always</h3><p>Every flight is spotted, every progression earned. We practise fall training and build confidence slowly, so trust is a foundation — never a leap of faith.</p></div>
|
||||
<div class="value reveal" data-d="1"><h3><span class="no">02</span>Everyone belongs</h3><p>No partner, no experience and no particular body required. We work in rotating teams, so our room is for beginners and flyers alike, exactly as they are.</p></div>
|
||||
<div class="value reveal" data-d="2"><h3><span class="no">03</span>Joy is the point</h3><p>Beneath the skill is something simpler: play. We protect the laughter, the lightness and the delight of moving together.</p></div>
|
||||
<div class="value reveal"><h3><span class="no">01</span><span data-i18n="about.v1t">Sicherheit, immer</span></h3><p data-i18n="about.v1p">Jeder Flug wird gespottet, jeder Fortschritt verdient. Wir üben Falltraining und bauen Vertrauen langsam auf — damit Vertrauen ein Fundament ist, niemals ein Sprung ins Ungewisse.</p></div>
|
||||
<div class="value reveal" data-d="1"><h3><span class="no">02</span><span data-i18n="about.v2t">Alle gehören dazu</span></h3><p data-i18n="about.v2p">Keine Partner:in, keine Vorkenntnisse und kein bestimmter Körper nötig. Wir arbeiten in wechselnden Teams — unser Raum ist für Anfänger:innen und Flyer gleichermaßen, genau so, wie sie sind.</p></div>
|
||||
<div class="value reveal" data-d="2"><h3><span class="no">03</span><span data-i18n="about.v3t">Es geht um Freude</span></h3><p data-i18n="about.v3p">Unter dem Können liegt etwas Einfacheres: Spiel. Wir schützen das Lachen, die Leichtigkeit und die Freude, sich gemeinsam zu bewegen.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -91,17 +99,17 @@
|
||||
<div class="wrap">
|
||||
<div class="booking__panel" style="grid-template-columns:1fr;text-align:center;justify-items:center;">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow" style="justify-content:center;">Begin</p>
|
||||
<h2 style="margin-bottom:var(--space-md);">Your first flight is waiting.</h2>
|
||||
<p class="booking__lede" style="margin-inline:auto;margin-bottom:var(--space-lg);">Come as you are. We’ll handle the rest.</p>
|
||||
<p class="eyebrow" style="justify-content:center;" data-i18n="about.ctaEyebrow">Beginne</p>
|
||||
<h2 style="margin-bottom:var(--space-md);" data-i18n="about.ctaH2">Dein erster Flug wartet.</h2>
|
||||
<p class="booking__lede" style="margin-inline:auto;margin-bottom:var(--space-lg);" data-i18n="about.ctaLede">Komm, wie du bist. Um den Rest kümmern wir uns.</p>
|
||||
<div class="booking__cta" style="justify-content:center;">
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class</a>
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener" data-i18n="about.cta1">Kurs buchen</a>
|
||||
<a class="btn btn--ghost" href="mailto:floatingflows@web.de">floatingflows@web.de</a>
|
||||
</div>
|
||||
<div class="icons" style="justify-content:center;margin-top:var(--space-lg);">
|
||||
<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>
|
||||
<a class="icon-btn icon-btn--lg" href="tel:+4917635708720" aria-label="Anrufen"><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="E-Mail"><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>
|
||||
@@ -116,23 +124,24 @@
|
||||
<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>
|
||||
<p data-i18n="footer.tagline">Premium AcroYoga in Freiburg — Vertrauen, Atem und die stille Freude des Fliegens. Für jeden Körper, jedes 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>
|
||||
<a class="icon-btn icon-btn--on-night" href="tel:+4917635708720" aria-label="Anrufen"><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="E-Mail"><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="index.html#location">Location</a><a href="index.html#booking">Book</a><a href="index.html#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><h4 data-i18n="footer.exploreH">Entdecken</h4><a href="courses.html" data-i18n="nav.courses">Kurse</a><a href="about.html" data-i18n="nav.about">Über uns</a></div>
|
||||
<div><h4 data-i18n="footer.visitH">Besuchen</h4><a href="index.html#location" data-i18n="nav.location">Standort</a><a href="index.html#booking" data-i18n="footer.book">Buchen</a><a href="index.html#contact" data-i18n="nav.contact">Kontakt</a></div>
|
||||
<div><h4 data-i18n="footer.connectH">Kontakt</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 class="footer__bottom"><span data-i18n="footer.copy">© 2026 Floating Flows · Luciana · Freiburg</span><span data-i18n="footer.made">Gemacht für Bewegung.</span></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/i18n.js"></script>
|
||||
<script>
|
||||
(function(){
|
||||
var toggle = document.getElementById('navToggle');
|
||||
|
||||
Reference in New Issue
Block a user