IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Test Design

Browse Source
This commit is contained in:
Jens Cornelsen
2024-11-27 14:43:16 +01:00
parent 22693d1204
commit 410fd11c07
1 changed files with 166 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/components/design/content/banner-saeule.svelte
View File

@@ -140,8 +140,173 @@
</div>
<style lang="scss">
<div rounded="md" class="shadow-xl pt-8 pr-8 pb-8 pl-8 sm:p-16 flex">
<div class="flex lg:flex-col flex-col w-1/2 rounded-none shadow-* ml-4 pl-4 pt-4 pr-4 pb-4 border-0">
<div class="lg:w-full w-full rounded-2xl shadow-xl mb-6 text-white bg-indigo-800">
<p class="mb-4 text-4xl text-center text-white mt-4 font-bold">Verbrauchsausweis Wohngebäude</p>
</div>
<div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
<p class="block text-3xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-0">
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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">Einfache Berechnungsmethode anhand von 3 Jahresverbräuchen der Heizung.</span>
</p>
</div>
<div class="lg:w-1/6 w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-black mt-4 font-medium decoration-black">✔</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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">Zulässig bei Vermietung und Verkauf.</span>
</p>
</div>
<div class="lg:w-1/6 items-end w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">
Nicht zulässig bei unsanierten
<br/>
Gebäuden die vor 1978 gebaut
<br/>
wurden und weniger als 5
<br/>
Wohneinheiten haben.
</span>
</p>
</div>
<div class="lg:w-1/6 items-end w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">
Für bauliche und energetische
<br/>
Maßnahmen ungeeignet.
</span>
</p>
</div>
<div class="lg:w-1/6 items-end w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">
Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.
<br/>
</span>
</p>
</div>
<div class="lg:w-1/6 items-end w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
</div>
</div>
</div>
<div class="flex lg:flex-col flex-col w-1/2 rounded-2xl shadow-xl ml-4 pl-4 pt-4 pr-4 pb-4 border-2">
<div class="lg:w-full w-full">
<p class="mb-4 text-4xl text-center text-gray-700 mt-4 font-bold">Bedarfsausweis Wohngebäude</p>
</div>
<div class="lg:mb-0 lg:pr-5 lg:w-full mb-6 w-full">
<p class="block text-3xl font-light tracking-tight text-gray-900 leading-6 sm:text-3xl text-right pr-0">
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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">
Berechnung mit Erfassung der
<br/>
Gebäudegeometrie, U-Werte der
<br/>
Außenbauteile sowie dem
<br/>
Wirkungsgrad der Heizung.
</span>
</p>
</div>
<div class="lg:w-1/6 w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">Zulässig bei Vermietung und Verkauf.</span>
</p>
</div>
<div class="lg:w-1/6 items-end w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">✔</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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">
Nicht zulässig bei unsanierten
<br/>
Gebäuden die vor 1978 gebaut
<br/>
wurden und weniger als 5
<br/>
Wohneinheiten haben.
</span>
</p>
</div>
<div class="lg:w-1/6 items-end w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">
Für bauliche und energetische
<br/>
Maßnahmen ungeeignet.
</span>
</p>
</div>
<div class="lg:w-1/6 items-end w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</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="mb-4 text-2xl text-center text-gray-700 mt-4 font-medium">
<span class="s-jv164Nce4e8Q">
Wird nicht immer bei den Banken für die Finanzierungsunterlagen akzeptiert.
<br/>
</span>
</p>
</div>
<div class="lg:w-1/6 items-end w-1/6 h-16">
<p class="mb-4 text-2xl text-center text-red-700 mt-4 font-medium">✘</p>
</div>
</div>
</div>
</div>
<style lang="scss">
#saeulen{@apply grid grid-cols-[1fr] gap-4
lg:grid-cols-[1fr,1fr,1fr]
xl:grid-cols-[1fr,1fr,1fr,1fr];
@@ -164,6 +329,4 @@ img{@apply w-full justify-self-center mb-1 min-h-[50px] }
}
}
</style>