3024588
/
trihub-ernaehrung-advinters
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

navigationsbar um Übersicht, Pakete, Berater, Infos & Kontakt erweitert und placeholders für Links in Index.html

S-V-Navigation
Vincent Laux 2026-09-29 16:15:08 +02:00
parent f58ee5e483
commit 39952a0c36
2 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
css/navigation.css
View File

@ -13,6 +13,7 @@
--accent-soft: rgba(69, 151, 163, 0.14); --accent-soft: rgba(69, 151, 163, 0.14);
--text-primary: #ffffff; --text-primary: #ffffff;
--text-muted: #7e858a; --text-muted: #7e858a;
--text-muted2: #b7bec2;
--font-display: "Sora", "Inter", system-ui, sans-serif; --font-display: "Sora", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif;
@ -35,7 +36,14 @@
line-height: 1.6; line-height: 1.6;
box-shadow: 0 4px 16px rgb(0 0 0 / 16%); box-shadow: 0 4px 16px rgb(0 0 0 / 16%);
} }
.site-navigation__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: min(1680px, calc(100% - clamp(40px, 10vw, 192px)));
margin-inline: auto;
}
.site-navigation .brand { .site-navigation .brand {
display: flex; display: flex;
align-items: center; align-items: center;
@ -46,6 +54,35 @@
padding-block: 8px; padding-block: 8px;
} }
.site-navigation__links ul {
display: flex;
align-items: center;
gap: clamp(16px, 2.5vw, 32px);
margin: 0;
padding: 0;
list-style: none;
}
.site-navigation__links a {
color: var(--text-muted);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: color 0.15s ease;
}
.site-navigation__links a:hover,
.site-navigation__links a:focus-visible {
color: var(--text-primary);
}
.site-navigation__links a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 4px;
}
.site-navigation .brand__logo { .site-navigation .brand__logo {
display: grid; display: grid;
place-items: center; place-items: center;
@ -79,7 +116,7 @@
} }
.site-navigation .brand__label { .site-navigation .brand__label {
color: #b7bec2; color: var(--text-muted2);
font-size: 17px; font-size: 17px;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.4;

25
index.html
View File

@ -24,14 +24,25 @@
<body> <body>
<!-- Shahnam und Vincent: Gemeinsame Navigation außerhalb der einzelnen Bereiche. --> <!-- Shahnam und Vincent: Gemeinsame Navigation außerhalb der einzelnen Bereiche. -->
<header class="site-navigation"> <header class="site-navigation">
<div class="brand"> <div class="site-navigation__bar">
<div class="brand__logo"> <div class="brand">
<img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500"> <div class="brand__logo">
</div> <img src="images/trihub-logo.jpg" alt="Trihub – fit und vital ab 50!" width="500" height="500">
<div class="brand__text"> </div>
<span class="brand__name">TRI-HUB</span> <div class="brand__text">
<span class="brand__label">Triathlon als sportliches Zuhause ab 50</span> <span class="brand__name">TRI-HUB</span>
<span class="brand__label">Triathlon als sportliches Zuhause ab 50</span>
</div>
</div> </div>
<nav class="site-navigation__links" aria-label="Hauptnavigation">
<ul>
<li><a href="#produktuebersicht">Übersicht</a></li>
<li><a href="#leistungen">Pakete</a></li>
<li><a href="#berater">Berater</a></li>
<li><a href="#beratung">Infos</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
</div> </div>
</header> </header>