302 lines
12 KiB
HTML
302 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Fabienne Foehn</title>
|
||
<meta
|
||
name="description"
|
||
content="Von der Idee zur Wirkung. Fabienne Foehn begleitet Innovationen, Eventprojekte und Umsetzung mit Klarheit, Pragmatismus und Fokus."
|
||
/>
|
||
<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=Montserrat:wght@300;400;500;600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="page-shell">
|
||
<main class="page">
|
||
<section class="section section--light hero">
|
||
<div class="section__content hero__content">
|
||
<img class="brand brand--top" src="./media/logo_oben.svg" alt="Fabienne Foehn" />
|
||
<div class="hero__headline-wrap">
|
||
<img
|
||
class="hero__scribble hero__scribble--composite"
|
||
src="./media/illu_oben_hintergrund_striche.svg"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
<h1 class="section-title section-title--hero">
|
||
<span class="hero__line">Von der Idee zur</span>
|
||
<span class="hero__line">Wirkung</span>
|
||
</h1>
|
||
</div>
|
||
<button class="button button--dark" type="button" data-open-contact>
|
||
Lass uns starten
|
||
</button>
|
||
</div>
|
||
|
||
<div class="hero__media">
|
||
<img src="./media/fabienne_foehn1.jpg" alt="Fabienne Foehn im Portrait" />
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section section--dark process">
|
||
<div class="section-head section-head--boxed">
|
||
<div class="section-title-lockup section-title-lockup--process">
|
||
<h2 class="section-title section-title--process">
|
||
<span class="section-title__line">Wie aus Ideen</span>
|
||
<span class="section-title__line">Ergebnisse <span class="section-title__mobile-break">werden</span></span>
|
||
</h2>
|
||
<img
|
||
class="section-head__accent section-head__accent--process"
|
||
src="./media/strichlein_rosa_uber_wort.svg"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="process__grid">
|
||
<article class="card card--process process-card">
|
||
<img src="./media/lupe.svg" alt="" aria-hidden="true" />
|
||
<h3 class="card-title">Ich bringe Klarheit ins Vorhaben</h3>
|
||
</article>
|
||
<article class="card card--process process-card">
|
||
<img src="./media/auge.svg" alt="" aria-hidden="true" />
|
||
<h3 class="card-title">Ich übersetze Ideen in klare Schritte</h3>
|
||
</article>
|
||
<article class="card card--process process-card">
|
||
<img src="./media/globus.svg" alt="" aria-hidden="true" />
|
||
<h3 class="card-title">Ich setze um, bis zum Schluss</h3>
|
||
</article>
|
||
<article class="card card--process process-card">
|
||
<img src="./media/hand.svg" alt="" aria-hidden="true" />
|
||
<h3 class="card-title">Ich übernehme Verantwortung, nicht nur Aufgaben</h3>
|
||
</article>
|
||
</div>
|
||
|
||
<button class="button button--light" type="button" data-open-contact>
|
||
Kontaktiere mich
|
||
</button>
|
||
</section>
|
||
|
||
<section class="section section--light focus">
|
||
<div class="section-head section-head--boxed">
|
||
<div class="section-title-lockup section-title-lockup--focus">
|
||
<h2 class="section-title">Meine Schwerpunkte</h2>
|
||
<img
|
||
class="section-head__accent section-head__accent--focus"
|
||
src="./media/strichlein_rgruen_unter_wort.svg"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="focus__grid">
|
||
<article class="card card--focus focus-card">
|
||
<div class="focus-card__image">
|
||
<img
|
||
src="./media/icon_innovation_intrapreneurship.svg"
|
||
alt="Innovation und Intrapreneurship"
|
||
/>
|
||
</div>
|
||
<h3 class="card-title">Innovationen und Intrapreneurship</h3>
|
||
<p class="card-copy">Wie aus einer neuen Business-Idee Realität wird</p>
|
||
</article>
|
||
|
||
<article class="card card--focus focus-card">
|
||
<div class="focus-card__image">
|
||
<img src="./media/icon_eventprojekte.svg" alt="Eventprojekte" />
|
||
</div>
|
||
<h3 class="card-title">Eventprojekte</h3>
|
||
<p class="card-copy">Wirkungsvoll umgesetzt in einem Sorglospaket</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section section--dark about">
|
||
<div class="about__media">
|
||
<img src="./media/fabienne_foehn2.jpg" alt="Fabienne Foehn bei einem Vortrag" />
|
||
</div>
|
||
|
||
<div class="section__content about__content">
|
||
<div class="section-head">
|
||
<div class="section-title-lockup section-title-lockup--about">
|
||
<h2 class="section-title">Über mich</h2>
|
||
<img
|
||
class="section-head__accent section-head__accent--about"
|
||
src="./media/striche_blau_unter_wort.svg"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about__text">
|
||
<p>
|
||
Begeisterung für Neues zieht sich durch alles. <strong>Innovationen
|
||
entdecken, Ideen weiterdenken und Dinge ausprobieren</strong>, die es so
|
||
noch nicht gibt.
|
||
</p>
|
||
<p>
|
||
Erfahrungen reichen von der <strong>Entwicklung neuer Produkte</strong>, von
|
||
der <strong>ersten Idee bis zum fertigen Ergebnis</strong>, unter anderem
|
||
für Marken wie Betty Bossi, bis hin zu <strong>Intrapreneurship- und
|
||
Eventprojekten</strong>.
|
||
</p>
|
||
<p>
|
||
Am wohlsten entsteht dort, wo etwas <strong>reizt, herausfordert</strong>
|
||
und Neugier weckt. Genau dann entsteht Bewegung.
|
||
</p>
|
||
<p>
|
||
Getrieben von dem Anspruch, <strong>Dinge wirklich voranzubringen.
|
||
Zielstrebig, mit Energie und dem klaren Fokus</strong>, Ideen nicht nur zu
|
||
denken, sondern wirklich auch umzusetzen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section section--accent work">
|
||
<div class="section-head section-head--boxed">
|
||
<div class="section-title-lockup section-title-lockup--work">
|
||
<h2 class="section-title section-title--work">So arbeite ich</h2>
|
||
<img
|
||
class="section-head__accent section-head__accent--work"
|
||
src="./media/strichlein_so_arbeite_ich.svg"
|
||
alt=""
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="work__grid">
|
||
<article class="card card--work work-card">
|
||
<div class="work-card__art">
|
||
<img src="./media/icon_zielorientiert.svg" alt="" aria-hidden="true" />
|
||
</div>
|
||
<h3 class="card-title">Zielorientiert</h3>
|
||
<p class="card-copy">Nicht Konzepte bestimmen die Zukunft, sondern Ergebnisse.</p>
|
||
</article>
|
||
|
||
<article class="card card--work work-card">
|
||
<div class="work-card__art">
|
||
<img src="./media/icon_pragmatisch.svg" alt="" aria-hidden="true" />
|
||
</div>
|
||
<h3 class="card-title">Pragmatisch</h3>
|
||
<p class="card-copy">Einfach und umsetzbar.</p>
|
||
</article>
|
||
|
||
<article class="card card--work work-card">
|
||
<div class="work-card__art">
|
||
<img src="./media/icon_umsetzungsstark.svg" alt="" aria-hidden="true" />
|
||
</div>
|
||
<h3 class="card-title">Umsetzungsstark</h3>
|
||
<p class="card-copy">Zuverlässig und bis zum Schluss, ohne wenn und aber.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="section section--light footer" id="kontakt">
|
||
<div class="section__content footer__inner">
|
||
<div class="footer__column footer__column--left">
|
||
<img
|
||
class="brand brand--bottom footer__brand"
|
||
src="./media/logo_unten.svg"
|
||
alt="Fabienne Foehn"
|
||
/>
|
||
|
||
<div class="footer__contact">
|
||
<a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
|
||
<a href="tel:+41786001411">+41 78 600 14 11</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer__column footer__column--right">
|
||
<div class="footer__claim">
|
||
<h2 class="section-title section-title--claim">Wer losgeht, kommt an.</h2>
|
||
<p>Wer nicht losgeht bleibt stehen.</p>
|
||
</div>
|
||
|
||
<div class="footer__claim-meta">
|
||
<img class="footer__wave" src="./media/welle_unten_seite.svg" alt="" aria-hidden="true" />
|
||
<span>© 2026 Naurua GmbH</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="contact-flyover" hidden data-contact-flyover>
|
||
<div class="contact-flyover__backdrop" data-close-contact></div>
|
||
<div
|
||
class="contact-flyover__panel"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="contact-title"
|
||
>
|
||
<button class="contact-flyover__close" type="button" aria-label="Schliessen" data-close-contact>
|
||
×
|
||
</button>
|
||
<p class="contact-flyover__eyebrow">Kontakt</p>
|
||
<h2 id="contact-title">Direkt erreichbar</h2>
|
||
<p class="contact-flyover__intro">
|
||
Mail oder Telefonnummer mit einem Klick kopieren.
|
||
</p>
|
||
|
||
<div class="contact-flyover__list">
|
||
<div class="contact-item">
|
||
<div class="contact-item__label">E-Mail</div>
|
||
<div class="contact-item__value">fabienne@fabiennefoehn.ch</div>
|
||
<button
|
||
class="button button--dark copy-button"
|
||
type="button"
|
||
data-copy-value="fabienne@fabiennefoehn.ch"
|
||
aria-label="E-Mail kopieren"
|
||
>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path
|
||
d="M9 9.75A2.25 2.25 0 0 1 11.25 7.5h7.5A2.25 2.25 0 0 1 21 9.75v7.5A2.25 2.25 0 0 1 18.75 19.5h-7.5A2.25 2.25 0 0 1 9 17.25z"
|
||
/>
|
||
<path
|
||
d="M6.75 16.5A2.25 2.25 0 0 1 4.5 14.25v-9A2.25 2.25 0 0 1 6.75 3h9A2.25 2.25 0 0 1 18 5.25"
|
||
/>
|
||
</svg>
|
||
<span>Kopieren</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-item__label">Telefon</div>
|
||
<div class="contact-item__value">+41 78 600 14 11</div>
|
||
<button
|
||
class="button button--dark copy-button"
|
||
type="button"
|
||
data-copy-value="+41 78 600 14 11"
|
||
aria-label="Telefonnummer kopieren"
|
||
>
|
||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||
<path
|
||
d="M9 9.75A2.25 2.25 0 0 1 11.25 7.5h7.5A2.25 2.25 0 0 1 21 9.75v7.5A2.25 2.25 0 0 1 18.75 19.5h-7.5A2.25 2.25 0 0 1 9 17.25z"
|
||
/>
|
||
<path
|
||
d="M6.75 16.5A2.25 2.25 0 0 1 4.5 14.25v-9A2.25 2.25 0 0 1 6.75 3h9A2.25 2.25 0 0 1 18 5.25"
|
||
/>
|
||
</svg>
|
||
<span>Kopieren</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="./script.js"></script>
|
||
</body>
|
||
</html>
|