Files
online-energieausweis/src/components/design/header/AusweisHeader_immowelt.astro
Robert Jagtiani 15b818acdb .
2025-04-02 14:33:36 +02:00

77 lines
2.7 KiB
Plaintext

---
import HeaderLogin from "#components/design/header/HeaderLogin.svelte";
const { tabHover1 } = Astro.props;
const { tabHover2 } = Astro.props;
const { tabHover3 } = Astro.props;
const { tabHover4 } = Astro.props;
const { tabHover5 } = Astro.props;
const { tabHover6 } = Astro.props;
const { tabHover7 } = Astro.props;
---
<header id="header" class="w-full bg-white h-[81px] sm:pl-8">
<div class="grid grid-cols-[min-content_1fr] items-center">
<div class="w-[150px] h-[80px]">
<div class="w-full h-full grid grid-col-1 justify-items-center items-center">
<img class="w-[109px]" src="/images/immowelt/immowelt.svg" alt="immowelt"/>
</div>
</div>
<div>
<ul class="navlist">
<li><a href="/immowelt/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"><button class={tabHover1}>Verbrauchsausweis</button></a></li>
<li><a href="/immowelt/energieausweis-erstellen/verbrauchsausweis-gewerbe/"><button class={tabHover2}>Verbrauchsausweis Gewerbe</button></a></li>
<li><a href="/immowelt/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"><button class={tabHover3}>Bedarfsausweis</button></a></li>
<li><a href="/immowelt/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/"><button class={tabHover4}>Bedarfsausweis Gewerbe</button></a></li>
<li><a href="/immowelt/angebot-anfragen/geg-nachweis-wohnen-anfragen/"><button class={tabHover5}>GEG Nachweis Wohngebäude</button></a></li>
<li><a href="/immowelt/angebot-anfragen/geg-nachweis-gewerbe-anfragen/"><button class={tabHover6}>GEG Nachweis Gewerbe</button></a></li>
<li><a href="/immowelt/welcher-ausweis/"><button class={tabHover7}>Welcher Ausweis</button></a></li>
</ul>
</div>
</div>
</header>
<div class="block w-full 2xl:h-[270px] lg:h-[148px] bg-cover" style="background-image: url('/images/immowelt/hero-desktop.png');
background-repeat:no-repeat; background-position:right;">
</div>
<style lang="postcss">
@font-face {
font-family: "immo Sans";
src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
font-style: normal;
font-weight: 400;
}
.header-button {
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
}
.navlist {
@apply flex flex-wrap flex-col sm:flex-row pl-[1.75rem] sm:pl-[1.75rem];
}
.navlist li {
@apply pr-0 sm:pr-[6px] pb-1 sm:pb-0;
}
.navlist li button{@apply text-[0.75rem] md:text-[1rem] text-[#646464] sm:p-2 text-left
hover:rounded-[1rem] hover:bg-[rgba(50,50,50,0.1)];
font-family: "immo Sans";
font-weight:400;}
.glow{@apply rounded-[1rem] bg-[rgba(50,50,50,0.1)];}
</style>