US 04-01: Fehler in der Produktübersicht behoben
Platzhalter durch Beratungstexte ersetzt, neue Ernährungsbilder ergänzt und die Bilddarstellung sowie Textfarben angepasst. Den auskommentierten Platzhalter-Footer entfernt.fix/us-04-01-produktuebersicht
3015418
parent
be0f003d1d
commit
1da0029c9b
|
|
@ -118,8 +118,15 @@
|
|||
}
|
||||
|
||||
.produktuebersicht .hero__image {
|
||||
object-fit: cover;
|
||||
object-position: center 42%;
|
||||
inset: 0 0 auto auto;
|
||||
width: auto;
|
||||
max-width: 94%;
|
||||
height: 94%;
|
||||
object-fit: contain;
|
||||
object-position: right top;
|
||||
mask-image: linear-gradient(to right, transparent, #000 18%),
|
||||
linear-gradient(to bottom, #000 82%, transparent);
|
||||
mask-composite: intersect;
|
||||
}
|
||||
|
||||
.produktuebersicht .hero::after {
|
||||
|
|
@ -150,7 +157,7 @@
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 26px;
|
||||
color: #4597A3;
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.16em;
|
||||
|
|
@ -166,6 +173,7 @@
|
|||
}
|
||||
|
||||
.produktuebersicht h1 {
|
||||
color: var(--text-primary);
|
||||
max-width: 100%;
|
||||
font-size: clamp(42px, 4.9vw, 88px);
|
||||
font-weight: 550;
|
||||
|
|
@ -178,7 +186,7 @@
|
|||
.produktuebersicht h1 span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: var(--accent);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.produktuebersicht .hero__description {
|
||||
|
|
@ -283,10 +291,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.produktuebersicht .hero__image {
|
||||
object-position: 80% center;
|
||||
}
|
||||
|
||||
.produktuebersicht .hero::after {
|
||||
background:
|
||||
linear-gradient(0deg, rgb(var(--background-rgb) / 96%), transparent 42%),
|
||||
|
|
@ -334,7 +338,13 @@
|
|||
}
|
||||
|
||||
.produktuebersicht .hero__image {
|
||||
object-position: 85% center;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 60% bottom;
|
||||
mask-image: none;
|
||||
}
|
||||
|
||||
.produktuebersicht .hero::after {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
39
index.html
39
index.html
|
|
@ -38,57 +38,46 @@
|
|||
|
||||
<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">
|
||||
<img class="hero__image" src="images/hero-nutrition.png"
|
||||
alt="KI-generierte Bildidee: Ernährungsberatung für einen älteren Radsportler, mit Müsli, Obst und Wasser am Tisch." width="1536"
|
||||
height="1024" fetchpriority="high">
|
||||
|
||||
<div class="container hero__inner">
|
||||
<div class="hero__content">
|
||||
<p class="hero__eyebrow">Der Text wärmt sich noch auf</p>
|
||||
<p class="hero__eyebrow">Ernährungsberatung für Triathleten ab 50</p>
|
||||
<h1 id="hero-title">
|
||||
Überschrift. Weitere Zeile.
|
||||
<span>Akzentzeile.</span>
|
||||
Dein Training hat einen Plan.
|
||||
<span>Deine Ernährung auch?</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.
|
||||
Individuelle Ernährungsberatung für Triathletinnen und Triathleten ab 50. Gemeinsam finden wir heraus, was vor, während und nach dem Training zu dir passt – und wie du es im Alltag umsetzt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="hero__details">
|
||||
<ul class="benefits" aria-label="Platzhalter für die Vorteile der Beratung">
|
||||
<ul class="benefits" aria-label="Vorteile der Ernährungsberatung">
|
||||
<li>
|
||||
<span class="benefits__number" aria-hidden="true">01</span>
|
||||
<p>Erster Vorteil <span>Text folgt</span></p>
|
||||
<p>Persönlich beraten <span>Deine Ziele und Gewohnheiten im Blick</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<span class="benefits__number" aria-hidden="true">02</span>
|
||||
<p>Zweiter Vorteil <span>Text folgt</span></p>
|
||||
<p>Passend zum Training <span>Für Training, Wettkampf und Erholung</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<span class="benefits__number" aria-hidden="true">03</span>
|
||||
<p>Dritter Vorteil <span>Text folgt</span></p>
|
||||
<p>Machbar im Alltag <span>Konkrete Schritte, die zu dir passen</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>
|
||||
<p class="hero__caption-label">Ernährung für deinen Sport</p>
|
||||
<p class="hero__slogan">Gut versorgt. In deinem Rhythmus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vorläufig ausgeblendet, bis die endgültigen Texte vorliegen.
|
||||
<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 -->
|
||||
|
|
@ -207,7 +196,7 @@
|
|||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
<a class="logo" href="https://tri-hub.de/">tri<span>-hub</span></a>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue