Web Design Guide
2023-12-11 10:29:21 | 2.0.0
<header class="header">
<div class="header__wrapper">
<div class="header__head">
<a class="header__logo logo -signet" href="#">
<img class="logo__image" src="../../images/rehau-logo.svg" alt="">
<span class="logo__signet">Rautool</span>
</a>
<a class="header__toggle" href="#" data-action="toggle-nav">
<span class="header__hamburger"></span>
</a>
</div>
<div class="header__body">
<a class="header__logo logo -vanishing -signet" href="#">
<img class="logo__image" src="../../images/rehau-logo.svg" alt="">
<span class="logo__signet">Rautool</span>
</a>
<nav class="header__meta-nav meta-nav ">
<div class="meta-nav__lang-nav lang-nav ">
<span class="lang-nav__selection -next">
<span class="lang-nav__text">Deutsch</span>
</span>
<ul class="lang-nav__list">
<li class="lang-nav__item ">
<a class="lang-nav__link" href="#">
<span class="lang-nav__text">English</span>
</a>
</li>
<li class="lang-nav__item ">
<a class="lang-nav__link" href="#">
<span class="lang-nav__text">Français</span>
</a>
</li>
<li class="lang-nav__item ">
<a class="lang-nav__link" href="#">
<span class="lang-nav__text">Netherlands</span>
</a>
</li>
</ul>
</div>
<ul class="meta-nav__list">
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Karriere</a>
</li>
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Unternehmen</a>
</li>
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Downloads</a>
</li>
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Log in</a>
</li>
<li class="meta-nav__item">
<a class="meta-nav__link " href="#">Händlersuche</a>
</li>
</ul>
</nav>
<div class="header__search-bar search-bar -vanishing">
<input class="search-bar__input" type="text" placeholder="Search..." />
<button class="search-bar__btn"></button>
</div>
<nav class="header__main-nav main-nav ">
<a class="main-nav__back -prev -hide" href="#">Main menu</a>
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Privatkunden</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Handwerker und Bauunternehmer</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -active -next" href="#">Architekten und Planer</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Industrie</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Investoren und öffentliche Bauherren</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
<li class="main-nav__item">
<a class="main-nav__link -next" href="#">Handel</a>
<nav class="main-nav__flyout flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Hochbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Elektroinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Erneuerbare Energien</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Fenster und Türen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Heizen und Kühlen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrierohrsysteme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Nahwärme</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sanitärinstallation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensysteme</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Innenausbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kanten</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Oberflächen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Schrankrolladen</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Wandanschluss</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Sockelblenden</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Terassensystem</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Raumakustik</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Industriebau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Trinkwasserversorgung</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Kältetransport</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Industrieabwasser</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Tiefbau</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Abwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Regenwasser</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Telekommunikation</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Verkehrswegebau</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="#">Gasversorgung</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
<li class="service__item">
<a class="service__link" href="#">Referenzen</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Services</a>
</li>
<li class="service__item">
<a class="service__link" href="#">Akademie</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
<div class="header__foot">
<div class="header__search-bar search-bar ">
<input class="search-bar__input" type="text" placeholder="Search..." />
<button class="search-bar__btn"></button>
</div>
</div>
</div>
</header>
<header class="header">
<div class="header__wrapper">
<div class="header__head">
{{render '@atoms-logo' head-logo merge=true }}
<a class="header__toggle" href="#" data-action="toggle-nav">
<span class="header__hamburger"></span>
</a>
</div>
<div class="header__body">
{{render '@atoms-logo' body-logo merge=true }}
{{render '@molecules-meta-nav' meta-nav merge=true }}
{{render '@molecules-search-bar' body-search-bar merge=true }}
{{render '@molecules-main-nav' main-nav merge=true }}
</div>
<div class="header__foot">
{{render '@molecules-search-bar' foot-search-bar merge=true }}
</div>
</div>
</header>
{
"head-logo": {
"mixes": "header__logo",
"src": "/images/rehau-logo.svg",
"href": "#",
"modifiers": "-signet",
"signet": "Rautool"
},
"body-logo": {
"mixes": "header__logo",
"modifiers": "-vanishing -signet",
"src": "/images/rehau-logo.svg",
"href": "#",
"signet": "Rautool"
},
"body-search-bar": {
"mixes": "header__search-bar",
"modifiers": "-vanishing"
},
"foot-search-bar": {
"mixes": "header__search-bar"
},
"main-nav": {
"mixes": "header__main-nav"
},
"meta-nav": {
"mixes": "header__meta-nav"
},
"foot-lang-nav": {
"mixes": "header__lang-nav"
}
}
-
Content:
/* Header */ @include breakpoint(medium down) { // stylelint-disable-next-line selector-no-qualifying-type body.-noscroll { overflow: hidden; } } :root { --logo-width: 140px; } .header { $root: &; position: relative; z-index: 1100; background-color: $white; &.-fixed { position: fixed; top: 0; right: 0; left: 0; @include breakpoint(pre-large) { #{$root}__logo, #{$root}__meta-nav, #{$root}__search-bar { display: none; } } &__wrapper { padding-top: 0; } } &__wrapper { max-width: rem-calc($container-max-width); margin: 0 auto; @each $breakpoint, $gutter in $grid-gutters { @include breakpoint($breakpoint) { $gutter: rem-calc($gutter / 2); padding: $gutter $gutter 0; } } &.-no-menu { @each $breakpoint, $gutter in $grid-gutters { @include breakpoint($breakpoint) { $gutter: rem-calc($gutter / 2); padding: $gutter $gutter; } } } } &__head { display: flex; flex: none; align-items: center; justify-content: space-between; border-bottom: 1px solid $gray-lighter; @each $breakpoint, $gutter in $grid-gutters { @include breakpoint($breakpoint) { padding: rem-calc($gutter / 2); } } } &__foot { flex: none; @each $breakpoint, $gutter in $grid-gutters { @include breakpoint($breakpoint) { padding: rem-calc($gutter) rem-calc($gutter * 2); } } } &__logo { width: 120px; } &__hamburger { top: 50%; display: block; margin-top: $hamburger-height / -2; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); &, &::before, &::after { position: absolute; width: $hamburger-width; height: $hamburger-height; border-radius: $hamburger-border-radius; background-color: $black; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } &::before, &::after { content: ''; display: block; } &::before { top: ($hamburger-spacing + $hamburger-height) * -1; transition: top 0.075s 0.12s ease, opacity 0.075s ease; } &::after { bottom: ($hamburger-spacing + $hamburger-height) * -1; transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } } &__toggle { position: relative; display: inline-block; width: $hamburger-width; height: $hamburger-height * 3 + $hamburger-spacing * 2; margin-top: $hamburger-margin-top; margin-right: $hamburger-margin-right; &.-active { #{$root}__hamburger { transform: rotate(45deg); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay: 0.12s; &::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } &::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } } } } // stylelint-disable-next-line order/order @include breakpoint(medium down) { $only: -zf-breakpoints-less-than(pre-large); &__wrapper { display: flex; flex-direction: column; height: 100%; padding: 0; } &__body, &__foot { display: none; } &__body { flex: auto; flex-direction: column; overflow-x: hidden; overflow-y: auto; @each $breakpoint, $gutter in $grid-gutters { @if (false != index($only, $breakpoint)) { @include breakpoint($breakpoint) { padding: rem-calc($gutter); } } } } &__foot { position: relative; &::after { content: ''; position: absolute; right: 0; bottom: 100%; left: 0; z-index: 1; height: 3.6rem; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), $white 100%); pointer-events: none; } } &__logo, &__search-bar { &.-vanishing { display: none; } } &__meta-nav { border-top: 1px solid $gray-lighter; @each $breakpoint, $gutter in $grid-gutters { @if (false != index($only, $breakpoint)) { @include breakpoint($breakpoint) { margin-top: rem-calc($gutter / 2); padding-top: rem-calc($gutter / 2); } } } &.-alone { margin: 0; padding: 0; border: 0; } } &__main-nav { order: -1; } &.-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; #{$root}__body { display: flex; } #{$root}__foot { display: block; } } } @include breakpoint(pre-large) { border-bottom: 1px solid $gray-lighter; &__head, &__foot { display: none; } &__body { display: flex; flex-wrap: wrap; align-items: flex-start; } &__logo { width: var(--logo-width); } &__meta-nav { flex: 1; margin: (1.6rem - $header-lang-nav-padding-top) 1rem 0; } &__search-bar { margin-top: 1.6rem; } &__main-nav { width: 100%; padding-top: 1.5rem; } } } - URL: /components/raw/organisms-header/_header.scss
- Filesystem Path: src/components/02-ui-components/03-organisms/01-header/_header.scss
- Size: 5.6 KB
- Handle: @organisms-header--signet
- Variants (3): Default , Signet , Behr
- Preview:
- Filesystem Path: src/components/02-ui-components/03-organisms/01-header/header.hbs
- References (4): @atoms-logo, @molecules-meta-nav, @molecules-search-bar, @molecules-main-nav
There are no notes for this item.