72 lines
2.9 KiB
HTML
72 lines
2.9 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="stylesheet" href="css/design-tokens.css">
|
||
<link rel="stylesheet" href="css/produktuebersicht.css">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Leistungsübersicht Vincent -->
|
||
<section></section>
|
||
|
||
<!-- Berater & Qualifikationen Ahmad -->
|
||
<section></section>
|
||
|
||
<!-- Info über Beratung Dennis -->
|
||
<section></section>
|
||
|
||
<!-- Produktübersicht Shahnam -->
|
||
<section class="produkt-hero" id="produktuebersicht" aria-labelledby="produkt-titel">
|
||
<div class="produkt-hero__container">
|
||
<div class="produkt-hero__brand">
|
||
<span class="produkt-hero__wordmark">tri-hub<span aria-hidden="true">.</span></span>
|
||
<span class="produkt-hero__brand-label">Ernährungsberatung</span>
|
||
</div>
|
||
|
||
<div class="produkt-hero__layout">
|
||
<div class="produkt-hero__content">
|
||
<p class="produkt-hero__eyebrow">Der Text wärmt sich noch auf</p>
|
||
<h1 class="produkt-hero__title" id="produkt-titel">
|
||
Überschrift.<br>
|
||
Weitere Zeile.<br>
|
||
<span>Akzentzeile.</span>
|
||
</h1>
|
||
<p class="produkt-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>
|
||
|
||
<ul class="produkt-hero__benefits" aria-label="Platzhalter für die Vorteile der Beratung">
|
||
<li>Erster Vorteil – Text folgt</li>
|
||
<li>Zweiter Vorteil – Text folgt</li>
|
||
<li>Dritter Vorteil – Text folgt</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<figure class="produkt-hero__visual">
|
||
<img class="produkt-hero__image"
|
||
src="images/hero-triathlon.webp"
|
||
alt="Gruppe beim Radfahren und Laufen in einer Berglandschaft im Abendlicht"
|
||
width="1920" height="1080" fetchpriority="high">
|
||
<figcaption class="produkt-hero__caption">
|
||
<span class="produkt-hero__caption-label">Bildunterschrift folgt</span>
|
||
<p class="produkt-hero__slogan">Slogan folgt.<br>Weitere Zeile.</p>
|
||
</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<div class="produkt-hero__footer">
|
||
<p>Abschlusstext folgt.<br><span>Ergänzender Text folgt.</span></p>
|
||
<span class="produkt-hero__footer-note">Kurzhinweis folgt.</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</body>
|
||
|
||
</html>
|