index.html von dev eingefügt
Marvin Gemlin
parent
ba438b6db6
commit
a4bb71f7a7
391
index.html
391
index.html
|
|
@ -722,20 +722,385 @@
|
|||
<body>
|
||||
<div id="navbar-placeholder"></div>
|
||||
|
||||
<main class="container">
|
||||
<h1>Ernährung, die zu dir passt.</h1>
|
||||
<p>
|
||||
Individuelle 1:1-Beratung für deinen Alltag und deine
|
||||
sportlichen Ziele.
|
||||
</p>
|
||||
<a href="/angebotsuebersicht.html">Beratung kennenlernen</a>
|
||||
<main id="main-content">
|
||||
<!-- Hero: bewusst als Tri-hub-Unterseite gehalten -->
|
||||
<section class="hero" id="ernaehrung">
|
||||
<div class="container hero-grid">
|
||||
<div>
|
||||
<div class="eyebrow">TRI-HUB · ERNÄHRUNG</div>
|
||||
|
||||
<section id="beratung" aria-labelledby="beratung-heading">
|
||||
<h2 id="beratung-heading">Deine persönliche Beratung</h2>
|
||||
<p>
|
||||
Entdecke unsere Pakete für deine Ernährung im Alltag und
|
||||
Sport.
|
||||
</p>
|
||||
<h1 style="font-family: "Inter", sans-serif">
|
||||
Essen, Trinken<br />
|
||||
und <span class="accent">Energie.</span>
|
||||
</h1>
|
||||
|
||||
<p class="hero-lead">
|
||||
Ernährung gehört zu deinem Training genauso wie
|
||||
Schwimmen, Radfahren und Laufen. Hier findest du
|
||||
Wissen und Orientierung rund um Sporternährung,
|
||||
Hydration, Energieaufnahme und Magenmanagement –
|
||||
passend zu deinem Triathlon ab 50.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<a
|
||||
class="button button-primary"
|
||||
href="/angebotsuebersicht.html"
|
||||
>Ernährungswissen entdecken</a
|
||||
>
|
||||
<a
|
||||
class="button button-secondary"
|
||||
href="#erfahrungen"
|
||||
>Erfahrungen lesen</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside
|
||||
class="hero-card"
|
||||
sans-serif="Themen der Ernährungsberatung"
|
||||
>
|
||||
<div>
|
||||
<div class="eyebrow">ERNÄHRUNGSBERATUNG</div>
|
||||
<h2
|
||||
style="
|
||||
font-family: "Inter", sans-serif;
|
||||
"
|
||||
>
|
||||
Was funktioniert für dich?
|
||||
</h2>
|
||||
<p>
|
||||
Keine komplizierten Regeln. Sondern Wissen, das
|
||||
dir hilft, deine Ernährung rund um Training und
|
||||
Wettkampf bewusster zu gestalten.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Themen -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<div class="eyebrow">TRI-HUB SPEKTRUM</div>
|
||||
<h2
|
||||
style="
|
||||
font-family: "Inter", sans-serif;
|
||||
"
|
||||
>
|
||||
Ernährung,<br />die mitdenkt.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="section-intro">
|
||||
Die Ernährungsberatung ergänzt das Tri-hub-Angebot
|
||||
um die Themen, die für Training und Wettkampf
|
||||
besonders wichtig sind. Von den Grundlagen der
|
||||
Sporternährung bis zur Frage, was dein Magen während
|
||||
einer langen Einheit verträgt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="topic-grid">
|
||||
<article class="topic">
|
||||
<div class="topic-number">01 · SPORTERNÄHRUNG</div>
|
||||
<h3
|
||||
style="
|
||||
font-family: "Inter", sans-serif;
|
||||
"
|
||||
>
|
||||
Die Grundlagen
|
||||
</h3>
|
||||
<p>
|
||||
Verstehe, welche Rolle deine Ernährung vor,
|
||||
während und nach dem Training spielen kann.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="topic">
|
||||
<div class="topic-number">02 · HYDRATION</div>
|
||||
<h3
|
||||
style="
|
||||
font-family: "Inter", sans-serif;
|
||||
"
|
||||
>
|
||||
Trinken & Energie
|
||||
</h3>
|
||||
<p>
|
||||
Orientierung rund um Flüssigkeit und
|
||||
Energieaufnahme – besonders dann, wenn die
|
||||
Belastung länger wird.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="topic">
|
||||
<div class="topic-number">03 · MAGENMANAGEMENT</div>
|
||||
<h3
|
||||
style="
|
||||
font-family: "Inter", sans-serif;
|
||||
"
|
||||
>
|
||||
Was verträgst du?
|
||||
</h3>
|
||||
<p>
|
||||
Ernährung soll nicht nur auf dem Papier
|
||||
funktionieren. Sie muss auch unter Belastung zu
|
||||
dir passen.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Wissen -->
|
||||
<section class="section" id="wissen">
|
||||
<div class="container knowledge">
|
||||
<div>
|
||||
<div class="eyebrow">FACHBEITRÄGE</div>
|
||||
<h2 style="font-family: "Inter", sans-serif">
|
||||
Wissen,<br />das dich<br />weiterbringt.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="knowledge-copy">
|
||||
Rund um Ernährung gibt es viele Empfehlungen. Bei
|
||||
Tri-hub geht es darum, daraus verständliche
|
||||
Orientierung für deinen Sport und deinen Alltag zu
|
||||
machen. Die Inhalte dieser Seite bauen auf dem
|
||||
Ernährungsspektrum von Tri-hub auf.
|
||||
</p>
|
||||
|
||||
<ul class="knowledge-list">
|
||||
<li>
|
||||
<span class="dot" aria-hidden="true"></span>
|
||||
<div>
|
||||
<strong>Sporternährung</strong><br />
|
||||
<span
|
||||
>Grundlagen für Training und
|
||||
Wettkampf.</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dot" aria-hidden="true"></span>
|
||||
<div>
|
||||
<strong>Hydration</strong><br />
|
||||
<span
|
||||
>Trinken und Flüssigkeitsversorgung im
|
||||
Ausdauertraining.</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dot" aria-hidden="true"></span>
|
||||
<div>
|
||||
<strong>Energieaufnahme</strong><br />
|
||||
<span
|
||||
>Wie du Energie rund um Belastung
|
||||
bewusst planen kannst.</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="dot" aria-hidden="true"></span>
|
||||
<div>
|
||||
<strong>Magenmanagement</strong><br />
|
||||
<span
|
||||
>Verträglichkeit als Teil deiner
|
||||
persönlichen Strategie.</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- User Story: Rezensionen -->
|
||||
<section class="section review-section" id="erfahrungen">
|
||||
<div class="container review-layout">
|
||||
<div class="review-copy">
|
||||
<div class="eyebrow">DEINE ERFAHRUNG</div>
|
||||
<h2 style="font-family: "Inter", sans-serif">
|
||||
Was hat dir<br />geholfen?
|
||||
</h2>
|
||||
<p>
|
||||
Deine Erfahrung kann anderen helfen, das Angebot
|
||||
besser kennenzulernen. Teile, was du aus der
|
||||
Ernährungsberatung mitgenommen hast und was sich für
|
||||
dich im Training bewährt hat.
|
||||
</p>
|
||||
|
||||
<a
|
||||
class="button button-secondary"
|
||||
href="#bewertung"
|
||||
style="margin-top: 28px"
|
||||
>
|
||||
Bewertung schreiben
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="review-list">
|
||||
<!-- Diese Beispielkarten sind bewusst als Platzhalter gekennzeichnet. -->
|
||||
<article class="review-card">
|
||||
<div class="review-top">
|
||||
<div class="person">
|
||||
<div class="avatar">T</div>
|
||||
<div>
|
||||
<strong>Deine Erfahrung</strong>
|
||||
<small
|
||||
>Hier kann eine Kundenstimme
|
||||
erscheinen</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="stars"
|
||||
aria-label="Beispiel für eine Sternebewertung"
|
||||
>
|
||||
★★★★★
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<blockquote
|
||||
style="
|
||||
font-family: "Inter", sans-serif;
|
||||
"
|
||||
>
|
||||
„Teile hier deine Erfahrung mit der
|
||||
Ernährungsberatung – ehrlich, persönlich und so,
|
||||
wie du sie erlebt hast.“
|
||||
</blockquote>
|
||||
</article>
|
||||
|
||||
<p class="review-note">
|
||||
Hinweis: Die Bewertungen in dieser HTML-Demo werden
|
||||
nicht dauerhaft gespeichert. Für den Live-Betrieb
|
||||
sollte das Formular an das bestehende Backend oder
|
||||
CMS von Tri-hub angebunden werden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bewertungsformular -->
|
||||
<section class="section" id="bewertung">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<div class="eyebrow">REZENSION VERFASSEN</div>
|
||||
<h2
|
||||
style="
|
||||
font-family: "Inter", sans-serif;
|
||||
"
|
||||
>
|
||||
Deine Stimme<br />zählt.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p class="section-intro">
|
||||
Erzähle anderen von deiner persönlichen Erfahrung
|
||||
mit dem Ernährungsangebot. Kurz und ehrlich reicht
|
||||
völlig.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="review-form" id="reviewForm">
|
||||
<div class="field" style="margin-top: 0">
|
||||
<label for="name">Dein Name</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
autocomplete="name"
|
||||
placeholder="z. B. Thomas M."
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Deine Bewertung</label>
|
||||
<div
|
||||
class="rating-input"
|
||||
aria-label="Sternebewertung"
|
||||
>
|
||||
<input
|
||||
id="star5"
|
||||
name="rating"
|
||||
type="radio"
|
||||
value="5"
|
||||
required
|
||||
/>
|
||||
<label for="star5" title="5 Sterne">★</label>
|
||||
|
||||
<input
|
||||
id="star4"
|
||||
name="rating"
|
||||
type="radio"
|
||||
value="4"
|
||||
/>
|
||||
<label for="star4" title="4 Sterne">★</label>
|
||||
|
||||
<input
|
||||
id="star3"
|
||||
name="rating"
|
||||
type="radio"
|
||||
value="3"
|
||||
/>
|
||||
<label for="star3" title="3 Sterne">★</label>
|
||||
|
||||
<input
|
||||
id="star2"
|
||||
name="rating"
|
||||
type="radio"
|
||||
value="2"
|
||||
/>
|
||||
<label for="star2" title="2 Sterne">★</label>
|
||||
|
||||
<input
|
||||
id="star1"
|
||||
name="rating"
|
||||
type="radio"
|
||||
value="1"
|
||||
/>
|
||||
<label for="star1" title="1 Stern">★</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="review">Deine Erfahrung</label>
|
||||
<textarea
|
||||
id="review"
|
||||
name="review"
|
||||
placeholder="Was hat dir an der Ernährungsberatung geholfen?"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<label class="consent">
|
||||
<input type="checkbox" name="consent" required />
|
||||
<span>
|
||||
Ich stimme zu, dass meine Bewertung mit meinem
|
||||
angegebenen Namen auf dieser Seite
|
||||
veröffentlicht werden darf.
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<button class="button button-primary" type="submit">
|
||||
Bewertung veröffentlichen
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="form-status"
|
||||
id="formStatus"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue