95 lines
4.3 KiB
HTML
95 lines
4.3 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 | tri-hub</title>
|
|
<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:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/site.css">
|
|
<link rel="stylesheet" href="css/produktuebersicht.css">
|
|
<link rel="stylesheet" href="css/leistungen.css">
|
|
<script src="js/leistungen.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<main id="main-content">
|
|
<!-- Shahnam: Produktübersicht -->
|
|
<section class="produktuebersicht" id="produktuebersicht" aria-labelledby="hero-title">
|
|
<header class="site-header">
|
|
<div class="container brand">
|
|
<span class="brand__name">tri-hub<span aria-hidden="true">.</span></span>
|
|
<span class="brand__label">Ernährungsberatung</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="produktuebersicht__main">
|
|
<div class="hero">
|
|
<img class="hero__image"
|
|
src="images/hero-triathlon.webp"
|
|
alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
|
|
width="1920" height="1080" fetchpriority="high">
|
|
|
|
<div class="container hero__inner">
|
|
<div class="hero__content">
|
|
<p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
|
|
<h1 id="hero-title">
|
|
Überschrift. Weitere Zeile.
|
|
<span>Akzentzeile.</span>
|
|
</h1>
|
|
<p class="hero__description">
|
|
Hier folgt eine kurze Beschreibung der Ernährungsberatung.
|
|
Dieser Platz ist für den finalen Text vorgesehen und wird ergänzt,
|
|
sobald die Inhalte vorliegen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="hero__details">
|
|
<ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
|
|
<li>
|
|
<span class="benefits__number" aria-hidden="true">01</span>
|
|
<p>Erster Vorteil <span>Text folgt</span></p>
|
|
</li>
|
|
<li>
|
|
<span class="benefits__number" aria-hidden="true">02</span>
|
|
<p>Zweiter Vorteil <span>Text folgt</span></p>
|
|
</li>
|
|
<li>
|
|
<span class="benefits__number" aria-hidden="true">03</span>
|
|
<p>Dritter Vorteil <span>Text folgt</span></p>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="hero__caption">
|
|
<p class="hero__caption-label">Bildunterschrift folgt</p>
|
|
<p class="hero__slogan">Slogan folgt. Weitere Zeile.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container site-footer__inner">
|
|
<p>Abschlusstext folgt. <span>Ergänzender Text folgt.</span></p>
|
|
<p class="site-footer__note"><span aria-hidden="true"></span>Kurzhinweis folgt.</p>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
|
|
<!-- Vincent: Leistungsübersicht -->
|
|
<section id="leistungen" class="pakete">
|
|
<div class="pakete__intro">
|
|
<h2 class="pakete__titel"></h2>
|
|
<p class="pakete__text"></p>
|
|
</div>
|
|
|
|
<div class="pakete__grid"></div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|