Build landing page
This commit is contained in:
268
index.html
Normal file
268
index.html
Normal file
@@ -0,0 +1,268 @@
|
||||
<!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="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--top"
|
||||
src="./media/strichlein_rosa_uber_wort.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<img
|
||||
class="hero__scribble hero__scribble--middle"
|
||||
src="./media/illu_oben_hintergrund_striche.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<img
|
||||
class="hero__scribble hero__scribble--bottom"
|
||||
src="./media/strichlein_rgruen_unter_wort.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<img
|
||||
class="hero__scribble hero__scribble--bottom-secondary"
|
||||
src="./media/striche_blau_unter_wort.svg"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h1 class="section-title section-title--hero">Von der Idee zur Wirkung</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">
|
||||
<h2 class="section-title">Wie aus Ideen Ergebnisse werden</h2>
|
||||
<img src="./media/strichlein_rosa_uber_wort.svg" alt="" aria-hidden="true" />
|
||||
</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">
|
||||
<h2 class="section-title">Meine Schwerpunkte</h2>
|
||||
<img src="./media/strichlein_rgruen_unter_wort.svg" alt="" aria-hidden="true" />
|
||||
</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">
|
||||
<h2 class="section-title">Über mich</h2>
|
||||
<img src="./media/striche_blau_unter_wort.svg" alt="" aria-hidden="true" />
|
||||
</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">
|
||||
<h2 class="section-title">So arbeite ich</h2>
|
||||
<img src="./media/strichlein_rgruen_unter_wort.svg" alt="" aria-hidden="true" />
|
||||
</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__contact">
|
||||
<img class="brand brand--bottom" src="./media/logo_unten.svg" alt="Fabienne Foehn" />
|
||||
<a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
|
||||
<a href="tel:+41786001411">+41 78 600 14 11</a>
|
||||
</div>
|
||||
|
||||
<div class="section__content footer__claim">
|
||||
<h2 class="section-title section-title--claim">Wer losgeht, kommt an.</h2>
|
||||
<p>Wer nicht losgeht bleibt stehen.</p>
|
||||
<div class="footer__accent" aria-hidden="true">
|
||||
<img src="./media/striche_blau_unter_wort.svg" alt="" />
|
||||
<img src="./media/strichlein_rgruen_unter_wort.svg" alt="" />
|
||||
</div>
|
||||
<span>© 2026 Naurua GmbH</span>
|
||||
</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="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="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>
|
||||
Reference in New Issue
Block a user