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

bannersäulen

Browse Source
This commit is contained in:
Robert Jagtiani
2024-11-19 19:35:04 +01:00
parent a36619fa07
commit 28c9df7e18
7 changed files with 159 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/UMBE_banner-saeule.svelte
View File

@@ -1,28 +1,133 @@
<div class="grid grid-cols-[1fr,1fr,1fr,1fr] gap-4" >
<script>
import { PRICES } from "#lib/constants";
</script>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div id="saeulen">
<div class="saeule">
<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>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
</div>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
</div>
<div class="grid">
<div>
<img class="w-full justify-self-center p-4 bg-secondary rounded-md mb-1" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
<div class="h-[200px] bg-primary rounded-md mb-1"></div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
<div class="name">Verbrauchsausweis<br>Gewerbe</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
<div class="name">Bedarfsausweis<br>Wohngebäude</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
<div class="saeule">
<div class="blue-top">
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
<div class="name">Bedarfsausweis<br>Gewerbe</div>
</div>
<div class="orange">
<div class="ab">ab:</div>
<div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
<div class="mwst">inkl. 19% MwSt.</div>
</div>
<div class="white">
<div class="services">Unsere Leistungen: </div>
<div class="services">Prüfung durch Dipl.Ing.</div>
<div class="services">Vorschau als PDF</div>
<div class="services">PDF per E-Mail</div>
<div class="services">Registrierung beim DiBt</div>
<div class="services">Bearbeitung innhalb 24h</div>
<div class="services">rechtssicher nach GEG</div>
<div class="services">telefonische Beratung</div>
</div>
<div class="blue-bottom">
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
</div>
</div>
</div>
<style lang="scss">
#saeulen{@apply grid grid-cols-[1fr,1fr,1fr,1fr] gap-4;
.saeule{@apply grid;
img{@apply w-full justify-self-center mb-1}
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
.name{@apply w-full}
.name{font-size: clamp(15px, 2vh, 18px)}
.orange{@apply bg-primary text-white text-center 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-center text-black p-4}
.services{@apply py-2}
.services:first-child{@apply font-bold}
.services:nth-child(even){@apply bg-secondary/10}
.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}
}
}
</style>

2
src/pages/UMBE_test.astro
View File

@@ -4,7 +4,7 @@ import BannerPrice from "#components/UMBE_banner-saeule.svelte";
---
<Layout title="Energieausweis online erstellen - Online Energieausweis" client:load>
<Layout title="Energieausweis online erstellen - Online Energieausweis">
<h1>Energieausweis online erstellen</h1>
<BannerPrice client:load />

10
src/style/UMBE_global.css
View File

@@ -37,6 +37,14 @@
font-family: "Antique Olive Compact bold";
}
.promo1{
font-weight: 700;
box-sizing: border-box;
font-family: "Antique Olive Compact bold";
text-shadow: 2px 2px 8px #222;
}
body{
@apply /*bg-[url('/images/pattern.png')] bg-repeat bg-fixed */ max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
}
@@ -112,7 +120,7 @@ li {@apply text-sm bg-white flex
xl:text-lg}
li a {@apply w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white bg-secondary
lg:px-4 py-3 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary
lg:px-4 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary
xl:text-lg}
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}