feat(nutrition-site): add initial homepage structure and design system
Implement the main landing page for the nutrition counseling service, including sections for services, team qualifications, consultation details, and product overview. Add global CSS variables defining theme.D-info-ueber-beratung
koriboh
parent
dfdcd70d24
commit
6b2bcb4435
148
index.html
148
index.html
|
|
@ -5,9 +5,19 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ernährungsberater</title>
|
||||
<meta name="description"
|
||||
content="So läuft die Ernährungsberatung bei Tri-hub ab: Erwartungen, Ablauf in vier Schritten und für wen sich die Beratung eignet.">
|
||||
<meta name="theme-color" content="#08151B">
|
||||
<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=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Sora:wght@400;600;700&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<!-- Leistungsübersicht Vincent-->
|
||||
<section>
|
||||
|
||||
|
|
@ -16,14 +26,144 @@
|
|||
<section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- Info über Beratung Dennis-->
|
||||
<section>
|
||||
<section id="beratung" class="section">
|
||||
<div class="container">
|
||||
<div class="section-head reveal">
|
||||
<span class="kicker">Info über die Beratung</span>
|
||||
<h2>Gut zu wissen, bevor du startest</h2>
|
||||
<p class="lead">Transparenz von Anfang an: So arbeitet die Beratung, für wen sie sich eignet und
|
||||
was dich erwartet.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-2">
|
||||
<div class="box reveal">
|
||||
<h2>Was dich bei der Beratung erwartet</h2>
|
||||
|
||||
<p>Gemeinsam schauen wir uns deine individuellen Ziele, Gewohnheiten und Bedürfnisse an und
|
||||
entwickeln daraus passende Strategien für deinen Alltag.</p>
|
||||
|
||||
<ul class="check-list">
|
||||
<li>Individuelle Ernährungsberatung</li>
|
||||
<li>Erstellung von Ernährungsplänen</li>
|
||||
<li>Unterstützung bei Gewichtsmanagement</li>
|
||||
<li>Beratung bei speziellen Ernährungsbedürfnissen</li>
|
||||
<li>Analyse deiner aktuellen Ernährungsgewohnheiten</li>
|
||||
<li>Praktische Tipps für die Umsetzung im Alltag</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="box reveal">
|
||||
<h2>So läuft die Beratung ab</h2>
|
||||
|
||||
<ol class="beratung-ablauf">
|
||||
<li>
|
||||
<strong>Erstgespräch</strong>
|
||||
<p>Wir besprechen deine Ziele, Wünsche und bisherigen Erfahrungen.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>Analyse</strong>
|
||||
<p>Deine aktuelle Ernährung und deine individuellen Bedürfnisse werden betrachtet.
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>Planung</strong>
|
||||
<p>Gemeinsam entwickeln wir konkrete und realistische Maßnahmen.</p>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>Begleitung</strong>
|
||||
<p>Bei Bedarf wird der Fortschritt regelmäßig überprüft und der Plan angepasst.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="box reveal">
|
||||
<h2>Für wen ist die Beratung geeignet?</h2>
|
||||
|
||||
<ul class="check-list">
|
||||
<li>Menschen, die ihre Ernährung verbessern möchten</li>
|
||||
<li>Sportler mit individuellen Ernährungszielen</li>
|
||||
<li>Menschen mit speziellen Ernährungsbedürfnissen</li>
|
||||
<li>Personen, die Unterstützung beim Gewichtsmanagement suchen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="box reveal">
|
||||
<h2>Weitere Informationen</h2>
|
||||
|
||||
<p class="muted">
|
||||
Platzhalter für zukünftige Erweiterungen, beispielsweise Informationen zu Preisen,
|
||||
Terminen, Kontaktmöglichkeiten oder zusätzlichen Beratungsangeboten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="kontakt">
|
||||
<div class="cta-band reveal">
|
||||
<h2>Bereit für deinen nächsten Schritt?</h2>
|
||||
<p>Vereinbare ein unverbindliches Kennenlerngespräch – wir schauen gemeinsam, ob die Beratung zu dir
|
||||
passt.</p>
|
||||
<a class="btn btn-primary"
|
||||
href="mailto:info@trihub.de?subject=Ernaehrungsberatung%20-%20Kennenlerngespraech">Jetzt
|
||||
unverbindlich anfragen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
<!-- Produktsübersicht Shahnam -->
|
||||
<section>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
<!-- Test Footer-->
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
<a class="logo" href="https://tri-hub.de/">tri<span>-hub</span></a>
|
||||
<p>Triathlon ab 50 – Coaching, Wissen und Begleitung für Best Ager. Hier: der neue Bereich
|
||||
Ernährungsberatung.</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<h3>Dieser Bereich</h3>
|
||||
<ul>
|
||||
<li><a href="#beratung">Ablauf der Beratung</a></li>
|
||||
<li><a href="#kontakt">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<h3>Tri-hub</h3>
|
||||
<ul>
|
||||
<li><a href="https://tri-hub.de/">Start</a></li>
|
||||
<li><a href="https://tri-hub.de/coaching-1zu1">1:1 Coaching</a></li>
|
||||
<li><a href="https://tri-hub.de/camps-schwarzwald">Camps Schwarzwald</a></li>
|
||||
<li><a href="https://tri-hub.de/webinare-workshops">Webinare & Workshops</a></li>
|
||||
<li><a href="https://tri-hub.de/wissen">Wissen</a></li>
|
||||
<li><a href="https://tri-hub.de/kontakt">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-legal">
|
||||
<span>© 2026 Tri-hub GmbH</span>
|
||||
<span>
|
||||
<a href="https://tri-hub.de/impressum">Impressum</a> ·
|
||||
<a href="https://tri-hub.de/datenschutz">Datenschutz</a> ·
|
||||
<a href="https://tri-hub.de/agb">AGB</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
51
script.js
51
script.js
|
|
@ -0,0 +1,51 @@
|
|||
// ----- Mobile Navigation -----
|
||||
(function () {
|
||||
const toggle = document.querySelector(".nav-toggle");
|
||||
const nav = document.getElementById("main-nav");
|
||||
if (!toggle || !nav) return;
|
||||
|
||||
toggle.addEventListener("click", function () {
|
||||
const open = nav.classList.toggle("open");
|
||||
toggle.setAttribute("aria-expanded", String(open));
|
||||
toggle.setAttribute("aria-label", open ? "Menü schließen" : "Menü öffnen");
|
||||
});
|
||||
|
||||
// Menü nach Klick auf einen Link automatisch schließen
|
||||
nav.querySelectorAll("a").forEach(function (link) {
|
||||
link.addEventListener("click", function () {
|
||||
nav.classList.remove("open");
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
// ----- Scroll-Reveal -----
|
||||
(function () {
|
||||
const elements = document.querySelectorAll(".reveal");
|
||||
if (!elements.length) return;
|
||||
|
||||
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
if (reduceMotion || !("IntersectionObserver" in window)) {
|
||||
elements.forEach(function (el) {
|
||||
el.classList.add("visible");
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("visible");
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
|
||||
);
|
||||
|
||||
elements.forEach(function (el) {
|
||||
observer.observe(el);
|
||||
});
|
||||
})();
|
||||
409
style.css
409
style.css
|
|
@ -0,0 +1,409 @@
|
|||
|
||||
|
||||
:root {
|
||||
/* Farben – Tokens von tri-hub.de (Hex-Fallback + oklch) */
|
||||
--background: #01090e;
|
||||
--background: oklch(13% .022 223);
|
||||
--surface: #031217;
|
||||
--surface: oklch(17% .024 221);
|
||||
--foreground: #ecf3f5;
|
||||
--foreground: oklch(96% .008 210);
|
||||
--muted-fg: #9ba7aa;
|
||||
--muted-fg: oklch(72% .015 214);
|
||||
--primary: #00b3c2;
|
||||
--primary: oklch(70% .12 205);
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Typografie */
|
||||
--font-display: "Sora", sans-serif;
|
||||
--font-body: "DM Sans", Arial, Helvetica, sans-serif;
|
||||
|
||||
/* Layout */
|
||||
--container: 1120px;
|
||||
--radius: 1.1rem;
|
||||
}
|
||||
|
||||
/* ---------- Basic ---------- */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-body);
|
||||
line-height: 1.625;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Licht*/
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(900px 520px at 78% -10%, rgba(0, 179, 194, 0.13), transparent 65%),
|
||||
radial-gradient(700px 480px at -10% 30%, rgba(35, 137, 148, 0.1), transparent 60%),
|
||||
radial-gradient(600px 420px at 90% 95%, rgba(247, 194, 48, 0.05), transparent 60%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
margin-top: 0;
|
||||
font-family: var(--font-display);
|
||||
color: var(--foreground);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(100% - 48px, var(--container));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ---------- Typo-Helfer ---------- */
|
||||
|
||||
.kicker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.kicker::before {
|
||||
content: "";
|
||||
width: 28px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.15rem;
|
||||
color: var(--muted-fg);
|
||||
max-width: 660px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted-fg);
|
||||
}
|
||||
|
||||
/* ---------- Button ---------- */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 999px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease,
|
||||
background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #03242b;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 28px rgba(0, 179, 194, 0.28);
|
||||
}
|
||||
|
||||
/* ---------- Sektionen ---------- */
|
||||
|
||||
.section {
|
||||
padding: 96px 0;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
max-width: 720px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
font-size: clamp(1.9rem, 4vw, 2.7rem);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* ---------- Boxen & Grid ---------- */
|
||||
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* ---------- Checklisten ---------- */
|
||||
|
||||
.check-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 20px 0 0;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.check-list li {
|
||||
position: relative;
|
||||
padding-left: 34px;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.check-list li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: var(--primary);
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* ---------- Ablauf-Schritte ---------- */
|
||||
|
||||
.beratung-ablauf {
|
||||
list-style: none;
|
||||
counter-reset: schritt;
|
||||
padding: 0;
|
||||
margin: 24px 0 0;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.beratung-ablauf li {
|
||||
counter-increment: schritt;
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.beratung-ablauf li::before {
|
||||
content: counter(schritt, decimal-leading-zero);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 2px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
background: rgba(0, 179, 194, 0.1);
|
||||
border: 1px solid rgba(0, 179, 194, 0.3);
|
||||
}
|
||||
|
||||
.beratung-ablauf strong {
|
||||
display: block;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.02rem;
|
||||
color: var(--foreground);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.beratung-ablauf p {
|
||||
margin: 0;
|
||||
color: var(--muted-fg);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ---------- CTA-Band ---------- */
|
||||
|
||||
.cta-band {
|
||||
margin-top: 96px;
|
||||
padding: 64px 40px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) + 8px);
|
||||
background: linear-gradient(135deg, #071216, #0a1b1f 46%, #050e16);
|
||||
}
|
||||
|
||||
.cta-band h2 {
|
||||
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta-band p {
|
||||
color: var(--muted-fg);
|
||||
max-width: 560px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ---------- Footer ---------- */
|
||||
|
||||
.logo {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 96px;
|
||||
padding: 64px 0 40px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.015);
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
color: var(--muted-fg);
|
||||
font-size: 0.95rem;
|
||||
max-width: 340px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.footer-col h3 {
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted-fg);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer-col ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-col a {
|
||||
display: block;
|
||||
padding: 5px 0;
|
||||
color: var(--muted-fg);
|
||||
text-decoration: none;
|
||||
font-size: 0.92rem;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.footer-col a:hover {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.footer-legal {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 48px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--muted-fg);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.footer-legal a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-legal a:hover {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* ---------- Scroll-Reveal ---------- */
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
.reveal.visible {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* ---------- Responsiv ---------- */
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.grid-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 72px 0;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.cta-band {
|
||||
padding: 48px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Reduzierte Bewegung ---------- */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
* {
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue