125 lines
4.9 KiB
HTML
125 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Ernährungsberatung für Triathleten 50+ | tri-hub</title>
|
||
<meta name="description" content="Ernährungsberatung für Triathletinnen und Triathleten ab 50.">
|
||
|
||
<!-- Kunden-CSS (Tailwind-Build von tri-hub.de) – NICHT verändern -->
|
||
<link rel="stylesheet" href="css/assets.css">
|
||
|
||
<!-- Schriften laut Design-DNA: Playfair Display (Überschriften) + Inter (Text) -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap">
|
||
|
||
<!-- Projektweite Basis (Design-Tokens, Lesbarkeit) -->
|
||
<link rel="stylesheet" href="css/base.css">
|
||
|
||
<!-- Ein Stylesheet pro User Story – jede Datei gehört genau einem Feature-Branch -->
|
||
<link rel="stylesheet" href="css/sections/hero.css"> <!-- US01-01 -->
|
||
<link rel="stylesheet" href="css/sections/vorteile.css"> <!-- US01-02 -->
|
||
<link rel="stylesheet" href="css/sections/ablauf.css"> <!-- US01-03 -->
|
||
</head>
|
||
<body>
|
||
|
||
<header class="site-header">
|
||
<div class="container">
|
||
<a href="/" class="site-logo">tri-hub</a>
|
||
<!-- US01-05 Navigation: späterer Sprint -->
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
|
||
<!-- ========== US01-01: Angebot und Zielgruppe (Hero) ==========
|
||
Branch: feature/US01-01-hero · Styles: css/sections/hero.css
|
||
Nur innerhalb dieser <section> arbeiten. -->
|
||
<section id="hero" aria-labelledby="hero-title">
|
||
<div class="container">
|
||
<div class="hero-grid">
|
||
|
||
<div class="hero-copy">
|
||
<h1 id="hero-title">
|
||
<span class="hero-kicker"><span class="hero-line" aria-hidden="true"></span>Ernährungsberatung für Triathlon ab 50</span>
|
||
<span class="hero-headline">Gut versorgt.<br>Für alles, was<br><em>noch vor dir liegt.</em></span>
|
||
</h1>
|
||
|
||
<p class="hero-intro">
|
||
Dein nächstes Ziel beginnt auch auf dem Teller. Finde eine Ernährung,
|
||
die zu deinem Training, deinem Körper und deinem Leben passt.
|
||
</p>
|
||
|
||
<div class="hero-actions">
|
||
<a class="hero-button" href="#vorteile">Mehr erfahren <span aria-hidden="true">↓</span></a>
|
||
<a class="hero-link" href="#ablauf">So funktioniert’s <span aria-hidden="true">→</span></a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<figure class="hero-visual">
|
||
<img src="assets/images/hero/hero.webp" width="1200" height="800"
|
||
alt="Zwei sportlich aktive Menschen ab 50 besprechen einen Plan neben einem Fahrrad am See"
|
||
fetchpriority="high">
|
||
<figcaption>
|
||
<span class="hero-caption-label">Dein Tempo. Deine Ziele.</span>
|
||
<span class="hero-caption-text">Mehr Freude am Sport.<br>Mehr Energie fürs Leben.</span>
|
||
</figcaption>
|
||
<div class="hero-tag" aria-hidden="true">Triathlon <b>50+</b></div>
|
||
</figure>
|
||
|
||
</div>
|
||
|
||
<!-- 3 Vorteile mit Überschrift (Checkliste US01-01) -->
|
||
<ul class="hero-benefits" aria-label="Deine Vorteile auf einen Blick">
|
||
<li>
|
||
<span class="hero-benefit-icon" aria-hidden="true">↗</span>
|
||
<div>
|
||
<h2>Energie gezielt einplanen</h2>
|
||
<p>Mahlzeiten passend zu Ruhetagen, harten Einheiten und langen Ausfahrten.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="hero-benefit-icon" aria-hidden="true">↻</span>
|
||
<div>
|
||
<h2>Regeneration mitdenken</h2>
|
||
<p>Ernährung, die deinen Körper nach dem Training gezielt unterstützt.</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span class="hero-benefit-icon" aria-hidden="true">✓</span>
|
||
<div>
|
||
<h2>Im Alltag dranbleiben</h2>
|
||
<p>Routinen, die zu Arbeit, Familie und deinen Vorlieben passen.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
<!-- ========== /US01-01 ========== -->
|
||
|
||
|
||
<!-- ========== US01-02: Vorteile auf einen Blick ==========
|
||
Branch: feature/US01-02-vorteile · Styles: css/sections/vorteile.css
|
||
Nur innerhalb dieser <section> arbeiten. -->
|
||
<section id="vorteile" aria-labelledby="vorteile-title">
|
||
<!-- US01-02: Inhalt hier einfügen -->
|
||
</section>
|
||
<!-- ========== /US01-02 ========== -->
|
||
|
||
|
||
<!-- ========== US01-03: Ablauf sehen (+ Kontaktangaben) ==========
|
||
Branch: feature/US01-03-ablauf · Styles: css/sections/ablauf.css
|
||
Nur innerhalb dieser <section> arbeiten. -->
|
||
<section id="ablauf" aria-labelledby="ablauf-title">
|
||
<!-- US01-03: Inhalt hier einfügen -->
|
||
</section>
|
||
<!-- ========== /US01-03 ========== -->
|
||
|
||
</main>
|
||
|
||
<script src="js/main.js" defer></script>
|
||
</body>
|
||
</html>
|