Compare commits
1 Commits
feature/Da
...
main
| Author | SHA1 | Date |
|---|---|---|
Marvin Gemlin
|
c4ccd8340f |
File diff suppressed because it is too large
Load Diff
|
|
@ -1,906 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Ernährungsberatung bei Tri-hub: Essen, Trinken und Energiemanagement für deinen Triathlon ab 50.">
|
||||
<title>Ernährung · Tri-hub</title>
|
||||
|
||||
<!-- Bestehende Tri-hub CSS als Basis -->
|
||||
<link rel="stylesheet" href="index-liXdJwgt.css">
|
||||
|
||||
<!-- Neue Typografie für diese Unterseite -->
|
||||
<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=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--page-bg: #0d0d1a;
|
||||
--page-bg-2: #1a1a2e;
|
||||
--green: #10B981;
|
||||
--green-dark: #059669;
|
||||
--white: #ffffff;
|
||||
--light: #F8FAFC;
|
||||
--muted: #94A3B8;
|
||||
--line: rgba(248,250,252,.12);
|
||||
--panel: rgba(255,255,255,.045);
|
||||
--panel-strong: rgba(255,255,255,.065);
|
||||
--max: 1180px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
color: var(--light);
|
||||
background:
|
||||
radial-gradient(circle at 12% 0%, rgba(16,185,129,.09), transparent 30%),
|
||||
radial-gradient(circle at 88% 26%, rgba(16,185,129,.055), transparent 27%),
|
||||
linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
|
||||
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
h1, h2, h3 {
|
||||
margin: 0;
|
||||
font-family: "Playfair Display", Georgia, serif;
|
||||
font-weight: 600;
|
||||
letter-spacing: -.025em;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
p { margin: 0; }
|
||||
|
||||
.site-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
border-bottom: 1px solid rgba(248,250,252,.08);
|
||||
background: rgba(13,13,26,.84);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.nav {
|
||||
width: min(var(--max), calc(100% - 40px));
|
||||
min-height: 76px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.04em;
|
||||
}
|
||||
|
||||
.brand span { color: var(--green); }
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
color: var(--muted);
|
||||
font-size: .9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
transition: color .2s ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
.nav-links a[aria-current="page"] { color: var(--white); }
|
||||
|
||||
.nav-cta {
|
||||
padding: 11px 16px;
|
||||
border: 1px solid rgba(16,185,129,.42);
|
||||
border-radius: 999px;
|
||||
color: var(--white) !important;
|
||||
background: rgba(16,185,129,.07);
|
||||
}
|
||||
|
||||
.nav-cta:hover { background: rgba(16,185,129,.14); }
|
||||
|
||||
.container {
|
||||
width: min(var(--max), calc(100% - 40px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 18px;
|
||||
color: var(--green);
|
||||
font-size: .72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 92px 0 82px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
|
||||
gap: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: 820px;
|
||||
font-size: clamp(3.2rem, 7vw, 6.4rem);
|
||||
}
|
||||
|
||||
.hero h1 .accent { color: var(--green); }
|
||||
|
||||
.hero-lead {
|
||||
max-width: 700px;
|
||||
margin-top: 30px;
|
||||
color: var(--muted);
|
||||
font-size: clamp(1rem, 1.7vw, 1.18rem);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
font-size: .9rem;
|
||||
font-weight: 700;
|
||||
transition: transform .2s ease, background .2s ease, border-color .2s ease;
|
||||
}
|
||||
|
||||
.button:hover { transform: translateY(-2px); }
|
||||
|
||||
.button-primary {
|
||||
color: #06130f;
|
||||
background: var(--green);
|
||||
box-shadow: 0 14px 32px rgba(16,185,129,.18);
|
||||
}
|
||||
|
||||
.button-primary:hover { background: #34d399; }
|
||||
|
||||
.button-secondary {
|
||||
color: var(--light);
|
||||
border-color: rgba(148,163,184,.25);
|
||||
background: rgba(255,255,255,.025);
|
||||
}
|
||||
|
||||
.button-secondary:hover { border-color: rgba(16,185,129,.55); }
|
||||
|
||||
.hero-card {
|
||||
position: relative;
|
||||
min-height: 410px;
|
||||
padding: 38px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 28px;
|
||||
background:
|
||||
radial-gradient(circle at 72% 18%, rgba(16,185,129,.20), transparent 32%),
|
||||
linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
|
||||
box-shadow: 0 28px 80px rgba(0,0,0,.28);
|
||||
}
|
||||
|
||||
.hero-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
right: -75px;
|
||||
top: -75px;
|
||||
border: 1px solid rgba(16,185,129,.24);
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 0 0 34px rgba(16,185,129,.035),
|
||||
0 0 0 68px rgba(16,185,129,.02);
|
||||
}
|
||||
|
||||
.hero-card-mark {
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
left: 38px;
|
||||
color: rgba(16,185,129,.88);
|
||||
font-size: 4.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-card h2 {
|
||||
max-width: 420px;
|
||||
font-size: clamp(2.2rem, 4vw, 3.5rem);
|
||||
}
|
||||
|
||||
.hero-card p {
|
||||
max-width: 440px;
|
||||
margin-top: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 96px 0;
|
||||
}
|
||||
|
||||
.section + .section { border-top: 1px solid var(--line); }
|
||||
|
||||
.section-heading {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
|
||||
gap: 70px;
|
||||
align-items: end;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
font-size: clamp(2.4rem, 4.8vw, 4.5rem);
|
||||
}
|
||||
|
||||
.section-intro {
|
||||
max-width: 650px;
|
||||
color: var(--muted);
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.topic-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.topic {
|
||||
min-height: 280px;
|
||||
padding: 30px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
background: var(--panel);
|
||||
transition: transform .2s ease, border-color .2s ease, background .2s ease;
|
||||
}
|
||||
|
||||
.topic:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(16,185,129,.34);
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.topic-number {
|
||||
margin-bottom: 70px;
|
||||
color: var(--green);
|
||||
font-size: .75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .14em;
|
||||
}
|
||||
|
||||
.topic h3 { font-size: 1.8rem; }
|
||||
|
||||
.topic p {
|
||||
margin-top: 14px;
|
||||
color: var(--muted);
|
||||
font-size: .95rem;
|
||||
}
|
||||
|
||||
.knowledge {
|
||||
display: grid;
|
||||
grid-template-columns: .85fr 1.15fr;
|
||||
gap: 64px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.knowledge h2 {
|
||||
font-size: clamp(2.5rem, 5vw, 4.7rem);
|
||||
}
|
||||
|
||||
.knowledge-copy {
|
||||
color: var(--muted);
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.knowledge-list {
|
||||
margin-top: 28px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.knowledge-list li {
|
||||
padding: 18px 0;
|
||||
display: grid;
|
||||
grid-template-columns: 32px 1fr;
|
||||
gap: 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.knowledge-list strong { color: var(--white); }
|
||||
.knowledge-list span { color: var(--muted); }
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-top: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 0 5px rgba(16,185,129,.08);
|
||||
}
|
||||
|
||||
.review-section {
|
||||
background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.035));
|
||||
}
|
||||
|
||||
.review-layout {
|
||||
display: grid;
|
||||
grid-template-columns: .82fr 1.18fr;
|
||||
gap: 64px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.review-copy h2 { font-size: clamp(2.6rem, 5vw, 4.8rem); }
|
||||
|
||||
.review-copy p {
|
||||
margin-top: 22px;
|
||||
color: var(--muted);
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.review-form,
|
||||
.review-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.review-form {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.review-form h3 { font-size: 2rem; }
|
||||
|
||||
.form-intro {
|
||||
margin-top: 10px;
|
||||
color: var(--muted);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.field { margin-top: 22px; }
|
||||
|
||||
.field label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--light);
|
||||
font-size: .84rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(148,163,184,.22);
|
||||
border-radius: 12px;
|
||||
outline: 0;
|
||||
color: var(--white);
|
||||
background: rgba(13,13,26,.78);
|
||||
font: inherit;
|
||||
transition: border-color .2s ease, box-shadow .2s ease;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
select {
|
||||
height: 48px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 125px;
|
||||
padding: 13px 14px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder { color: #64748b; }
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
border-color: rgba(16,185,129,.75);
|
||||
box-shadow: 0 0 0 3px rgba(16,185,129,.10);
|
||||
}
|
||||
|
||||
.rating-input {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.rating-input input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rating-input label {
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
color: #475569;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1;
|
||||
transition: color .15s ease;
|
||||
}
|
||||
|
||||
.rating-input label:hover,
|
||||
.rating-input label:hover ~ label,
|
||||
.rating-input input:checked ~ label { color: var(--green); }
|
||||
|
||||
.consent {
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
color: var(--muted);
|
||||
font-size: .78rem;
|
||||
}
|
||||
|
||||
.consent input {
|
||||
margin-top: 4px;
|
||||
accent-color: var(--green);
|
||||
}
|
||||
|
||||
.review-form .button {
|
||||
width: 100%;
|
||||
margin-top: 22px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-status {
|
||||
min-height: 20px;
|
||||
margin-top: 12px;
|
||||
color: var(--green);
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.review-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.review-card {
|
||||
padding: 26px;
|
||||
}
|
||||
|
||||
.review-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.person {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
color: #06130f;
|
||||
background: var(--green);
|
||||
font-size: .72rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.person strong {
|
||||
display: block;
|
||||
color: var(--white);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.person small {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
color: var(--muted);
|
||||
font-size: .72rem;
|
||||
}
|
||||
|
||||
.stars {
|
||||
color: var(--green);
|
||||
letter-spacing: .08em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.review-card blockquote {
|
||||
margin: 22px 0 0;
|
||||
color: var(--light);
|
||||
font-family: "Playfair Display", Georgia, serif;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.review-note {
|
||||
padding: 20px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: .82rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 30px 0 44px;
|
||||
border-top: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
footer .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
footer strong { color: var(--white); }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.nav-links a:not(.nav-cta) { display: none; }
|
||||
|
||||
.hero-grid,
|
||||
.section-heading,
|
||||
.knowledge,
|
||||
.review-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-grid { gap: 42px; }
|
||||
|
||||
.topic-grid { grid-template-columns: 1fr; }
|
||||
|
||||
.section-heading { gap: 22px; }
|
||||
|
||||
.hero-card { min-height: 330px; }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.container,
|
||||
.nav { width: min(var(--max), calc(100% - 28px)); }
|
||||
|
||||
.nav { min-height: 68px; }
|
||||
|
||||
.nav-cta { padding: 9px 12px; font-size: .78rem; }
|
||||
|
||||
.hero { padding: 64px 0; }
|
||||
|
||||
.section { padding: 68px 0; }
|
||||
|
||||
.hero h1 { font-size: clamp(2.9rem, 15vw, 4.3rem); }
|
||||
|
||||
.hero-card,
|
||||
.review-form,
|
||||
.review-card,
|
||||
.topic { padding: 24px; }
|
||||
|
||||
footer .container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a class="brand" href="https://tri-hub.de/">tri<span>-hub</span></a>
|
||||
|
||||
<div class="nav-links">
|
||||
<a href="https://tri-hub.de/">Startseite</a>
|
||||
<a href="#ernaehrung" aria-current="page">Ernährung</a>
|
||||
<a href="#wissen">Wissen</a>
|
||||
<a href="#erfahrungen">Erfahrungen</a>
|
||||
<a class="nav-cta" href="#bewertung">Bewertung schreiben</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- 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>
|
||||
|
||||
<h1>
|
||||
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="#wissen">Ernährungswissen entdecken</a>
|
||||
<a class="button button-secondary" href="#erfahrungen">Erfahrungen lesen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hero-card" aria-label="Themen der Ernährungsberatung">
|
||||
<div class="hero-card-mark" aria-hidden="true">+</div>
|
||||
<div>
|
||||
<div class="eyebrow">ERNÄHRUNGSBERATUNG</div>
|
||||
<h2>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>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>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>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>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>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>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>
|
||||
„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>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>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div><strong>tri-hub</strong> · Triathlon als sportliches Zuhause ab 50.</div>
|
||||
<div>Ernährung · Wissen · Erfahrungen</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById("reviewForm");
|
||||
const status = document.getElementById("formStatus");
|
||||
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const name = form.elements.name.value.trim();
|
||||
const rating = form.elements.rating.value;
|
||||
const review = form.elements.review.value.trim();
|
||||
|
||||
if (!name || !rating || !review) return;
|
||||
|
||||
status.textContent =
|
||||
"Danke für deine Bewertung. In dieser Demo wurde sie noch nicht dauerhaft gespeichert.";
|
||||
|
||||
form.reset();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
9135
src/styles.css
9135
src/styles.css
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,39 @@
|
|||
:root {
|
||||
font-family: system-ui, sans-serif;
|
||||
color: #18352b;
|
||||
background: #f7faf7;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(100% - 2rem, 64rem);
|
||||
margin-inline: auto;
|
||||
padding-block: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 18ch;
|
||||
font-size: clamp(2rem, 6vw, 4rem);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #176448;
|
||||
}
|
||||
|
||||
a:focus-visible {
|
||||
outline: 3px solid currentColor;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-block: 4rem;
|
||||
}
|
||||
Loading…
Reference in New Issue