index.html von dev eingefügt
Marvin Gemlin
parent
ba438b6db6
commit
a4bb71f7a7
391
index.html
391
index.html
|
|
@ -722,20 +722,385 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="navbar-placeholder"></div>
|
<div id="navbar-placeholder"></div>
|
||||||
|
|
||||||
<main class="container">
|
<main id="main-content">
|
||||||
<h1>Ernährung, die zu dir passt.</h1>
|
<!-- Hero: bewusst als Tri-hub-Unterseite gehalten -->
|
||||||
<p>
|
<section class="hero" id="ernaehrung">
|
||||||
Individuelle 1:1-Beratung für deinen Alltag und deine
|
<div class="container hero-grid">
|
||||||
sportlichen Ziele.
|
<div>
|
||||||
</p>
|
<div class="eyebrow">TRI-HUB · ERNÄHRUNG</div>
|
||||||
<a href="/angebotsuebersicht.html">Beratung kennenlernen</a>
|
|
||||||
|
|
||||||
<section id="beratung" aria-labelledby="beratung-heading">
|
<h1 style="font-family: "Inter", sans-serif">
|
||||||
<h2 id="beratung-heading">Deine persönliche Beratung</h2>
|
Essen, Trinken<br />
|
||||||
<p>
|
und <span class="accent">Energie.</span>
|
||||||
Entdecke unsere Pakete für deine Ernährung im Alltag und
|
</h1>
|
||||||
Sport.
|
|
||||||
</p>
|
<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>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue