Clean up product section and add hero image
3015418
parent
dfdcd70d24
commit
5e093dd33b
|
|
@ -0,0 +1,23 @@
|
|||
:root {
|
||||
--tri-bg: #0d0d1a;
|
||||
--tri-surface: #1a1a2e;
|
||||
--tri-accent: #10b981;
|
||||
--tri-white: #ffffff;
|
||||
--tri-text: #f8fafc;
|
||||
--tri-muted: #94a3b8;
|
||||
--tri-border: rgb(148 163 184 / 20%);
|
||||
--tri-font-body: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
|
||||
--tri-font-heading: var(--tri-font-body);
|
||||
--tri-content-width: 1240px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--tri-font-body);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
.produkt-hero,
|
||||
.produkt-hero * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.produkt-hero {
|
||||
background: var(--tri-bg);
|
||||
color: var(--tri-text);
|
||||
font-family: var(--tri-font-body);
|
||||
line-height: 1.6;
|
||||
border-top: 4px solid var(--tri-accent);
|
||||
}
|
||||
|
||||
.produkt-hero__container {
|
||||
width: min(var(--tri-content-width), calc(100% - 96px));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.produkt-hero__brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding-block: 28px;
|
||||
border-bottom: 1px solid var(--tri-border);
|
||||
}
|
||||
|
||||
.produkt-hero__wordmark {
|
||||
color: var(--tri-white);
|
||||
font-size: 28px;
|
||||
font-weight: 750;
|
||||
line-height: 1;
|
||||
letter-spacing: -1.4px;
|
||||
}
|
||||
|
||||
.produkt-hero__wordmark span {
|
||||
color: var(--tri-accent);
|
||||
}
|
||||
|
||||
.produkt-hero__brand-label {
|
||||
padding-left: 20px;
|
||||
border-left: 1px solid var(--tri-border);
|
||||
color: var(--tri-muted);
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.035em;
|
||||
}
|
||||
|
||||
.produkt-hero__layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1.15fr 1fr;
|
||||
gap: clamp(32px, 5vw, 72px);
|
||||
align-items: center;
|
||||
padding-block: clamp(36px, 5vw, 64px);
|
||||
}
|
||||
|
||||
.produkt-hero__content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.produkt-hero__eyebrow {
|
||||
margin: 0 0 22px;
|
||||
color: var(--tri-accent);
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.produkt-hero__title {
|
||||
margin: 0;
|
||||
color: var(--tri-white);
|
||||
font-family: var(--tri-font-heading);
|
||||
font-size: clamp(38px, 4.2vw, 59px);
|
||||
font-weight: 500;
|
||||
line-height: 1.14;
|
||||
letter-spacing: -0.04em;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.produkt-hero__title span {
|
||||
color: var(--tri-accent);
|
||||
}
|
||||
|
||||
.produkt-hero__description {
|
||||
max-width: 51ch;
|
||||
margin: 26px 0 0;
|
||||
color: var(--tri-muted);
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.produkt-hero__benefits {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 27px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.produkt-hero__benefits li {
|
||||
position: relative;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.produkt-hero__benefits li::before {
|
||||
position: absolute;
|
||||
top: 0.7em;
|
||||
left: 0;
|
||||
width: 9px;
|
||||
height: 2px;
|
||||
background: var(--tri-accent);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.produkt-hero__visual {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
aspect-ratio: 1 / 1.12;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--tri-border);
|
||||
border-radius: 3px;
|
||||
background: var(--tri-surface);
|
||||
}
|
||||
|
||||
.produkt-hero__image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 80% center;
|
||||
}
|
||||
|
||||
.produkt-hero__caption {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 48px 32px 30px;
|
||||
background: linear-gradient(transparent, rgb(13 13 26 / 92%) 45%);
|
||||
}
|
||||
|
||||
.produkt-hero__caption-label {
|
||||
display: block;
|
||||
padding-left: 12px;
|
||||
border-left: 2px solid var(--tri-accent);
|
||||
color: var(--tri-text);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.produkt-hero__slogan {
|
||||
margin: 16px 0 0;
|
||||
color: var(--tri-white);
|
||||
font-family: var(--tri-font-heading);
|
||||
font-size: clamp(28px, 2.8vw, 39px);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.produkt-hero__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding-block: 22px 28px;
|
||||
border-top: 1px solid var(--tri-border);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.produkt-hero__footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.produkt-hero__footer p span,
|
||||
.produkt-hero__footer-note {
|
||||
color: var(--tri-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.produkt-hero__container {
|
||||
width: calc(100% - 48px);
|
||||
}
|
||||
|
||||
.produkt-hero__layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.produkt-hero__title {
|
||||
font-size: clamp(36px, 6.4vw, 56px);
|
||||
}
|
||||
|
||||
.produkt-hero__description {
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
.produkt-hero__visual {
|
||||
aspect-ratio: 4 / 3;
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.produkt-hero__container {
|
||||
width: calc(100% - 36px);
|
||||
}
|
||||
|
||||
.produkt-hero__brand {
|
||||
gap: 14px;
|
||||
padding-block: 24px;
|
||||
}
|
||||
|
||||
.produkt-hero__brand-label {
|
||||
padding-left: 14px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.produkt-hero__description {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.produkt-hero__visual {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.produkt-hero__caption {
|
||||
padding: 48px 24px 26px;
|
||||
}
|
||||
|
||||
.produkt-hero__footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
66
index.html
66
index.html
|
|
@ -4,26 +4,68 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ernährungsberater</title>
|
||||
<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>
|
||||
<!-- Leistungsübersicht Vincent -->
|
||||
<section></section>
|
||||
|
||||
</section>
|
||||
<!-- Berater & Qualifikationen Ahmad -->
|
||||
<section>
|
||||
<section></section>
|
||||
|
||||
</section>
|
||||
<!-- Info über Beratung Dennis-->
|
||||
<section>
|
||||
<!-- Info über Beratung Dennis -->
|
||||
<section></section>
|
||||
|
||||
</section>
|
||||
<!-- Produktsübersicht Shahnam -->
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue