Säulen und Header #18
@@ -1,30 +1,28 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="uuid-de1e7f63-0c42-470b-9cfb-9abb297e0f12" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 111.4 123.9">
|
||||
<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 143 163.6">
|
||||
<!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142) -->
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
fill: #3d46a3;
|
||||
}
|
||||
|
||||
.st0, .st1 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
.st2 {
|
||||
fill: #3b459d;
|
||||
display: none;
|
||||
fill: #878787;
|
||||
}
|
||||
|
||||
.st1 {
|
||||
fill: #848b91;
|
||||
fill: #445096;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="uuid-82d1ab86-69f5-424d-b90e-8bdf256bee5f">
|
||||
<path id="uuid-cd6aa3b9-6f05-490c-8ef2-3571588b94a7" class="st1" d="M99.9,93.2c3.9,1,7.7,1.9,11.5,2.9,0,3.9-.8,7.4-3.7,10.2-2.3,2.2-5.1,3.1-8.2,3.1-5.9,0-11.8,0-17.7,0-7,0-11-5.1-11.6-10.7,0-.8-.1-1.7-.1-2.5,0-13.2,0-26.3,0-39.5,0-3.6,1.1-6.8,3.6-9.4,2.1-2.2,4.8-3.2,7.8-3.2,6.1,0,12.1,0,18.1,0,7.8.1,10.9,5.4,11.6,10.8,0,.8.1,1.7.2,2.5-3.8,1-7.7,2-11.5,3,0-.3,0-.6-.1-.9-.2-2.2-1.6-3.6-3.8-3.8-.8,0-1.7,0-2.5,0-2.5,0-4.9,0-7.4,0-.5,0-1,0-1.5.1-2.1.4-3.1,1.7-3.1,4.1,0,1.5,0,3.8,0,3.8v29.9c0,3.1,3.7,4.2,3.7,4.2.3,0,.9.2,1.3.2h8.7c2.8,0,4.2-1.3,4.5-4.1,0-.2,0-.3,0-.5"/>
|
||||
<path id="uuid-7c380c1e-6c63-46da-a6e6-562299827e44" class="st0" d="M35.6,70.1c0,.4.3.7.7.7h10.5c.3,0,.6,0,.9,0,2.1-.2,3.3-1.6,3.4-3.7,0-2.6,0-5.2,0-7.9,0-2-1.1-3.2-2.9-3.6-.4,0-.9-.1-1.3-.1-3.5,0-6.9,0-10.4,0s-.5,0-.8,0v14.7h0ZM35.6,97.2c0,.4.2.7.4.7h.2c3.7,0,7.4,0,11,0,2.4,0,3.9-1.5,3.9-3.9,0-2.5,0-5,0-7.4,0-2.8-1.4-4.2-4.2-4.2h-10.8c-.2,0-.5.3-.5.7v14.2h0ZM21.1,109.4v-10.8c0-.4.3-.7.7-.7h1.5c.4,0,.7-.3.7-.7v-41.2c0-.4-.3-.7-.7-.7h-1.5c-.4,0-.7-.3-.7-.7v-10.3c0-.4.3-.7.7-.7h28.8c7.8,0,11.4,5.3,11.8,10.9.3,4.6.2,9.2,0,13.8-.1,3.2-1.6,5.9-4.3,8.1.4.3.7.4,1,.7,2.5,2.6,3.4,5.8,3.5,9.3,0,3.9.1,7.9-.2,11.8-.3,4.2-2.1,7.7-5.9,9.8-1.5.8-3.2,1.2-4.9,1.3-10.1,0-20.1,0-30.2,0s-.2,0-.3,0"/>
|
||||
<path id="uuid-0d8d7c4b-cae8-4bbd-9433-4cfb06ef99b2" class="st0" d="M11.8,108.7c0,.4-.3.7-.7.7H1c-.4,0-.7-.3-.7-.7V44.4c0-.4.3-.7.7-.7h10.1c.4,0,.7.3.7.7v64.3h0Z"/>
|
||||
<path id="uuid-0c4facb8-29f9-41ca-a997-e50d301bb8a6" class="st0" d="M111.1,117.2c.2,0,.4.3.4.7v5.3c0,.4-.2.7-.4.7H.6c-.2,0-.4-.3-.4-.7v-5.3c0-.4.2-.7.4-.7h110.5Z"/>
|
||||
<path id="uuid-e70966d7-5260-4673-943b-995e2f50ff74" class="st2" d="M54.5.4c-.5,0-1.1.2-1.7.6C35.6,11.8,18.5,22.6,1.3,33.4c-1.1.7-1.4,1.4-1,2.5h13.8c13-8.1,25.9-16.2,38.9-24.4,1.2-.8,2.2-.7,3.3,0,13.6,8.2,27.2,16.3,40.8,24.5h14.2c.3-1,.2-1.8-.9-2.4C92.3,22.6,74.3,11.8,56.2.9c-.6-.3-1.1-.5-1.7-.5"/>
|
||||
<path class="st0" d="M387,57.9c0,3.8-1,6.9-3.1,9.2-2.1,2.3-4.9,3.4-8.5,3.4h-16c-3.8,0-6.8-1.3-8.8-3.9-1.8-2.2-2.7-5-2.7-8.5V21.2c0-3.6,1-6.6,3-8.9,2-2.3,4.8-3.5,8.3-3.5h16.1c3.7,0,6.6,1.2,8.6,3.5,2,2.3,3,5.4,3,9.2l-10.9,2.8c0-3-1.5-4.5-4.6-4.5h-8.5c-2.7,0-4.1,1.3-4.1,3.9v32.1c0,2.5,1.4,3.7,4.1,3.7h9c2.8,0,4.1-1.5,4.1-4.4l10.9,2.7Z"/>
|
||||
<g>
|
||||
<path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2Z"/>
|
||||
<path class="st1" d="M84.3,128c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11ZM70,92v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8ZM70,125.4v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8Z"/>
|
||||
<path class="st1" d="M17.6,77.7v-14.4h3.7v14.4h-3.7Z"/>
|
||||
<path class="st1" d="M-.5,77.7v-14.4h3.7v14.4H-.5Z"/>
|
||||
<path class="st1" d="M17.6,144.6v-14.4h3.7v14.4h-3.7Z"/>
|
||||
<path class="st1" d="M-.5,144.6v-14.4h3.7v14.4H-.5Z"/>
|
||||
<path class="st1" d="M124.5,130.2h-11.8c-3.6,0-5.3-1.6-5.3-4.9v-43.1c0-3.3,1.8-4.9,5.3-4.9h11.8c3.6,0,5.4,1.9,5.4,5.7h13.1c0-7.4,0-12.7-2.7-15.7-2.7-3-6.4-4.5-11.1-4.5h-21.1c-5.1,0-8.9,1.7-11.6,5.1-2.3,2.9-3.5,6.6-3.5,11.2v49.1c0,4.6,1.2,8.3,3.5,11.2,2.7,3.4,6.5,5.1,11.6,5.1h21.1c4.7,0,8.4-1.5,11.1-4.5,2.7-3,2.7-8.3,2.7-15.7h-13.1c0,3.8-1.8,5.7-5.4,5.7Z"/>
|
||||
<polygon class="st1" points="90.4 14.4 71.3 .8 52.2 14.4 -.5 52.4 18.7 52.4 71.3 14.4 123.9 52.4 143 52.4 90.4 14.4"/>
|
||||
<path class="st1" d="M-.3,164.1v-9.3h143.4v9.3H-.3Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 1.9 KiB |
@@ -1,170 +1,119 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
import VApromo from "#sidebarCards/card-VA-promo.svelte";
|
||||
import BApromo from "#sidebarCards/card-BA-promo.svelte";
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div class="mt-12 m-auto w-[90%] relative">
|
||||
|
||||
<div id="saeulen">
|
||||
|
||||
<div class="saeule">
|
||||
<VApromo client:load />
|
||||
<div class="white">
|
||||
<div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
|
||||
<p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
|
||||
einfach
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row w-full items-end h-auto">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Einfache Berechnung anhand von 3
|
||||
Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als 18 Monate sein.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">
|
||||
Zulässig bei Vermietung
|
||||
<br/>
|
||||
oder Verkauf Ihres Immobilienobjektes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Unzulässig bei unsanierten Gebäuden vor
|
||||
1978 gebaut mit weniger als 5 Wohnungen.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="kreuz">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Für bauliche und energetische Maßnahmen
|
||||
ungeeignet. Starke Abweichungen durch individuelles Heizverhalten.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="kreuz">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Wird nicht immer bei den Banken für die
|
||||
Kreditunterlagen akzeptiert.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="kreuz">✘</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
<div class="name">Verbrauchsausweis<br>Wohngebäude</div>
|
||||
</div>
|
||||
|
||||
<div class="white box">
|
||||
<div class="variante">einfach</div>
|
||||
<div class="services"><div>Einfache Berechnung anhand von 3 Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als 18 Monate sein.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Zulässig bei Vermietung oder Verkauf Ihres Immobilienobjektes.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978 gebaut mit weniger als 5 Wohnungen.</div><div class="check-no">✘</div></div>
|
||||
<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet. Starke Abweichungen durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
|
||||
<div class="services"><div>Wird nicht immer bei den Banken für die Kreditunterlagen akzeptiert.</div><div class="check-no">✘</div></div>
|
||||
</div>
|
||||
|
||||
<div class="orange">
|
||||
zur Produktübersicht
|
||||
<div class="price">
|
||||
ab <b> {PRICES.VerbrauchsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="blue-bottom">
|
||||
jetzt sofort Energieausweis<br>online erstellen
|
||||
<div class="cta">jetzt online erstellen</div>
|
||||
</div>
|
||||
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">zur Produktübersicht</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="saeule">
|
||||
<BApromo client:load />
|
||||
|
||||
<div class="white">
|
||||
<div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
|
||||
<p class="block text-xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-2">
|
||||
fundiert
|
||||
<br/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row w-full items-end h-auto">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Berechnung anhand der
|
||||
Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Zulässig bei Vermietung, Verkauf,
|
||||
Modernisierung und Neubau.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Zulässig für alle Gebäude, insbesondere
|
||||
alte und unsanierte Objekte.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-full flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Kann als Grundlage für Sanierungsvarianten
|
||||
sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/6 items-end w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row items-end w-full">
|
||||
<div class="lg:w-5/6 w-5/6">
|
||||
<p class="produkttext">Objektive Berechnung die für die
|
||||
Kreditunterlagen besser geeignet ist.</p>
|
||||
</div>
|
||||
<div class="items-end w-1/6 h-16">
|
||||
<p class="haken">✔</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
|
||||
<div class="name">Verbrauchsausweis<br>Gewerbe</div>
|
||||
</div>
|
||||
|
||||
<div class="white box">
|
||||
<div class="variante">fundiert</div>
|
||||
<div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung und Neubau.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Zulässig für alle Gebäude, insbesondere alte und unsanierte Objekte.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Objektive Berechnung die für die Kreditunterlagen besser geeignet ist.</div><div class="check">✔</div></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="orange">
|
||||
zur Produktübersicht
|
||||
<div class="price">
|
||||
ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="blue-bottom">
|
||||
jetzt sofort Energieausweis<br>online erstellen
|
||||
<div class="cta">jetzt online erstellen</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">zur Produktübersicht</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
#saeulen{@apply grid grid-cols-[1fr] gap-4
|
||||
sm:grid-cols-[1fr,1fr]
|
||||
md:grid-cols-[1fr,1fr]
|
||||
lg:grid-cols-[1fr,1fr]
|
||||
xl:grid-cols-[1fr,1fr];
|
||||
.saeule{@apply grid;
|
||||
img{@apply w-1/2 justify-self-center mb-1 mt-3 min-h-[30px] }
|
||||
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
|
||||
#saeulen{@apply
|
||||
grid grid-cols-[1fr] gap-y-3 gap-x-6
|
||||
lg:grid-cols-2
|
||||
xl:grid-cols-2;
|
||||
|
||||
|
||||
.saeule{@apply grid grid-rows-subgrid row-span-10;
|
||||
img{@apply justify-self-center mb-1 w-[50%] }
|
||||
|
||||
|
||||
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4 shadow-saeule ring-secondary ring-1}
|
||||
.name{@apply w-full}
|
||||
.name{font-size: clamp(15px, 2vh, 18px)}
|
||||
.orange{@apply bg-primary text-white text-center font-bold rounded-t-md p-2 relative}
|
||||
.ab{@apply leading-[1]}
|
||||
.mwst{@apply leading-[auto]}
|
||||
.price{font-size: clamp(15px, 5vh, 50px)}
|
||||
.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]}
|
||||
.white{@apply border-x-[1px] border-gray-500 text-left text-black p-4}
|
||||
.services{@apply py-2}
|
||||
.services:first-child{@apply font-bold}
|
||||
.services:nth-child(even){@apply bg-white}
|
||||
.services:not(:last-child){@apply border-b-[1px] border-gray-300}
|
||||
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
|
||||
.kreuz{@apply mb-4 text-2xl text-center text-primary mt-4 font-medium}
|
||||
.haken{@apply mb-4 text-2xl text-center text-secondary mt-4 font-medium}
|
||||
.produkttext{@apply mb-4 text-lg text-center mt-4}
|
||||
.name{font-size: clamp(15px, 3vh, 18px)}
|
||||
|
||||
.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
|
||||
|
||||
.variante{@apply w-fit text-black justify-self-end mr-4}
|
||||
.variante{font-size: clamp(15px, 4vh, 24px)}
|
||||
|
||||
.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
|
||||
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
|
||||
.check{@apply self-center font-bold text-green-700}
|
||||
.check-no{@apply self-center font-bold text-red-700}
|
||||
|
||||
|
||||
|
||||
.orange{@apply bg-primary text-white text-center rounded-md p-4 relative shadow-saeule ring-primary ring-1}
|
||||
.price{font-size: clamp(15px, 3vh, 28px)}
|
||||
.blue-bottom, .check, .check-no{font-size: clamp(15px, 3vh, 24px)}
|
||||
|
||||
|
||||
|
||||
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-4 shadow-saeule ring-secondary ring-1}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -5,12 +5,19 @@ import Login from "#sidebarCards/card-login.svelte";
|
||||
|
||||
<header>
|
||||
|
||||
<div class="flex flex-row max-w-[1920px] w-full bg-white p-2">
|
||||
<div class="max-w-[1920px] w-full grid relative bg-white
|
||||
|
||||
sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
|
||||
md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
|
||||
|
||||
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
|
||||
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
|
||||
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
|
||||
|
||||
|
||||
|
||||
<!---
|
||||
|
||||
lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
|
||||
|
||||
<h2 class="text-secondary font-normal absolute
|
||||
top-1 right-2 text-[1.1rem]
|
||||
@@ -30,41 +37,50 @@ import Login from "#sidebarCards/card-login.svelte";
|
||||
Energieausweise nach aktuellem GEG
|
||||
</h2> -->
|
||||
|
||||
<div class="flex flex row mb-1 items-end w-1/4 md:w-1/2 2xl:w-4/6">
|
||||
<div class="ml-5 mr-3">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[auto_auto] gap-6 pt-[0px]">
|
||||
|
||||
<div class="self-start justify-self-start">
|
||||
|
||||
<a href="/index_1">
|
||||
<img class="w-[95px]"
|
||||
<img class="w-full max-w-[75px]"
|
||||
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pb-1.5 hidden md:block"><h1 class="text-secondary font-bold text-2xl lg:text-3xl">
|
||||
Energieausweise online erstellen
|
||||
</h1>
|
||||
|
||||
<div class="self-stretch justify-self-start">
|
||||
<div class="text-secondary
|
||||
lg:[font-size:_clamp(15px,3vw,26px)]
|
||||
lg:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,36px)]
|
||||
xl:leading-[4.5rem] pt-[0px]">
|
||||
Energieausweis online erstellen</div>
|
||||
<div class="text-primary
|
||||
lg:[font-size:_clamp(15px,3vw,20px)]
|
||||
lg:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,24px)]
|
||||
xl:leading-[0.5rem] pl-[1px]">
|
||||
Energieausweise nach aktuellem GEG</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-3/4 md:w-1/2 2xl:w-2/6 2xl:hidden"><Login client:load /></div>
|
||||
<div class="2xl:w-2/6 hidden 2xl:block 2xl:flex 2xl:mb-2.5 2xl:items-end 2xl:justify-center"><div class="2xl:pl-20"><h2 class="text-secondary font-bold text-4xl">nach GEG 2024</h2></div></div>
|
||||
<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
|
||||
<Login client:load />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-start-1 col-span-3">
|
||||
<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
|
||||
lg:h-[14px] xl:h-[18px]">
|
||||
|
||||
<!--- <a
|
||||
class="header-button hidden md:block"
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
|
||||
>Energieausweis erstellen</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/kontakt"
|
||||
>Kontakt</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/agb">AGB</a>-->
|
||||
|
||||
|
||||
</div>
|
||||
lg:h-[12px] xl:h-[12px]"></div>
|
||||
<div class="px-2 flex flex-row w-full justify-end items-center bg-secondary
|
||||
lg:h-[0px] xl:h-[0px]"></div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
@@ -23,47 +23,43 @@
|
||||
</script>
|
||||
|
||||
<div
|
||||
id="card-login"
|
||||
class="box card bg-white px-2 py-2
|
||||
lg:block lg:ring-2 lg:ring-secondary/50"
|
||||
>
|
||||
id="card-login">
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<form on:submit={login}>
|
||||
<div class="">
|
||||
|
||||
<div class="flex flex-row">
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full mr-1.5"
|
||||
type="text"
|
||||
placeholder="nutzer@email.com"
|
||||
name="email"
|
||||
bind:value={email}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
type="password"
|
||||
minlength="8"
|
||||
placeholder="********"
|
||||
name="passwort"
|
||||
bind:value={passwort}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
{#if !errorHidden}
|
||||
<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
|
||||
<CrossCircled size={24} />
|
||||
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grid grid-cols-[1fr_1fr] gap-2">
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
type="text"
|
||||
placeholder="nutzer@email.com"
|
||||
name="email"
|
||||
bind:value={email}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
type="password"
|
||||
minlength="8"
|
||||
placeholder="********"
|
||||
name="passwort"
|
||||
bind:value={passwort}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
{#if !errorHidden}
|
||||
<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
|
||||
<CrossCircled size={24} />
|
||||
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="w-full text-center self-center">
|
||||
</div>
|
||||
<div class="grid grid-cols-[3fr_2fr] gap-2">
|
||||
|
||||
<div class="w-full text-left self-center">
|
||||
<a
|
||||
class="justify-self-start text-sm font-bold no-underline hover:text-primary"
|
||||
href="/auth/signup">Registrieren</a
|
||||
@@ -74,9 +70,8 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<button class="my-1 rounded-md px-2 py-1 ring-1 w-[35%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Login</button>
|
||||
</div>
|
||||
|
||||
<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
import Login from "#sidebarCards/card-login_1.svelte";
|
||||
import Contact from "#sidebarCards/card-contact.svelte";
|
||||
import Review from "#sidebarCards/card-review.svelte";
|
||||
import VApromo from "#sidebarCards/card-VA-promo.svelte";
|
||||
@@ -11,7 +10,7 @@ import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
|
||||
<div class="hidden
|
||||
xl:flex xl:flex-col xl:grow
|
||||
">
|
||||
<Login client:load />
|
||||
|
||||
<Contact client:load />
|
||||
<Review client:load />
|
||||
<VAGpromo client:load />
|
||||
|
||||
@@ -5,7 +5,9 @@ import BannerPrice from "#content/banner-saeule.svelte";
|
||||
---
|
||||
|
||||
<Layout title="Energieausweis online erstellen - Online Energieausweis">
|
||||
<h1 class="md:hidden">Energieausweis online erstellen</h1>
|
||||
|
||||
<h1>Unsere Ausweise im Detail:</h1>
|
||||
|
||||
<BannerPrice client:load />
|
||||
</Layout>
|
||||
|
||||
|
||||
@@ -18,7 +18,8 @@ module.exports = {
|
||||
"box-heading": 'var(--box-heading)'
|
||||
},
|
||||
boxShadow: {
|
||||
'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
|
||||
'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
|
||||
'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
|
||||
gridTemplateColumns: {
|
||||
|
||||
Reference in New Issue
Block a user