UMBE-new
This commit is contained in:
Robert Jagtiani
@@ -10,12 +10,12 @@ const currentYear = new Date().getFullYear();
|
||||
<div class="
|
||||
justify-self-center
|
||||
md:col-end-2 md:justify-self-start md:px-4">
|
||||
<a class=" text-white font-normal text-lg no-underline" style="text-shadow:1px 1px 2px #222" href="/">Impressum und Datenschutz</a>
|
||||
<a class=" text-white font-bold text-lg no-underline whitespace-nowrap" style="text-shadow:1px 1px 2px #222" href="/">Impressum und Datenschutz</a>
|
||||
</div>
|
||||
<div class="
|
||||
justify-self-center
|
||||
md:col-end-5 md:justify-self-end md:px-6">
|
||||
<a class=" text-white font-normal text-lg no-underline whitespace-nowrap" style="text-shadow:1px 1px 2px #222" href="/">© {currentYear} <span class="">IB Cornelsen Hamburg</span></a>
|
||||
<a class=" text-white font-bold text-lg no-underline whitespace-nowrap" style="text-shadow:1px 1px 2px #222" href="/">© {currentYear} IB Cornelsen Hamburg</a>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
@@ -3,6 +3,7 @@ md:bg-[url('/images/header/header-bg.jpg')] md:bg-cover md:grid md:grid-cols-2
|
||||
lg:grid lg:grid-cols-3">
|
||||
|
||||
|
||||
|
||||
<div class="
|
||||
justify-self-center px-2 py-2
|
||||
xs:px-6 xs:py-4
|
||||
@@ -10,17 +11,18 @@ lg:grid lg:grid-cols-3">
|
||||
md:col-end-4 md:justify-self-end
|
||||
xl:my-4 xl:mr-9 xl:p-0">
|
||||
|
||||
|
||||
<a href="/">
|
||||
<img class="
|
||||
w-full
|
||||
md:w-[350px]
|
||||
lg:w-[420px]"
|
||||
src="/images/header/UMBE_logo-big.svg" alt="IBCornelsen-Logo"/>
|
||||
src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
|
||||
<h2 class="text-secondary font-normal absolute
|
||||
top-1 right-2 text-[1.1rem]
|
||||
xs:top-[1.7rem] xs:right-6 xs:text-[1.6rem]
|
||||
xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
|
||||
|
||||
md:top-[1.25rem] md:right-4 md:text-[1.1rem]
|
||||
xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
|
||||
@@ -29,7 +31,7 @@ lg:grid lg:grid-cols-3">
|
||||
|
||||
<h2 class="text-primary font-normal absolute
|
||||
top-[1.6rem] right-2 text-[0.85rem]
|
||||
xs:top-[3.5rem] xs:right-6 xs:text-[1.2rem]
|
||||
xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
|
||||
|
||||
md:top-[2.5rem] md:right-4 md:text-[0.9rem]
|
||||
xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
|
||||
@@ -40,7 +42,7 @@ lg:grid lg:grid-cols-3">
|
||||
|
||||
<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-[36px]">
|
||||
lg:h-[14px] xl:h-[18px]">
|
||||
|
||||
<!-- <a
|
||||
class="header-button hidden md:block"
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
---
|
||||
import Navigation from "./UMBE_card-navigation.svelte";
|
||||
import Navigation from "#components/UMBE_card-navigation.svelte";
|
||||
import Preistabelle from "#components/UMBE_card-price-info.svelte";
|
||||
|
||||
---
|
||||
|
||||
<div class="flex flex-col grow">
|
||||
|
||||
<Navigation client:load>
|
||||
<Navigation client:load />
|
||||
|
||||
<Preistabelle client:load />
|
||||
|
||||
|
||||
</div>
|
||||
@@ -1,13 +1,24 @@
|
||||
---
|
||||
import Contact from "./UMBE_card-contact.svelte";
|
||||
import Login from "#components/UMBE_card-login.svelte";
|
||||
import Contact from "#components/UMBE_card-contact.svelte";
|
||||
import Review from "#components/UMBE_card-review.svelte";
|
||||
import VApromo from "#components/UMBE_card-VA-promo.svelte";
|
||||
import VAGpromo from "#components/UMBE_card-VA-G-promo.svelte";
|
||||
import BApromo from "#components/UMBE_card-BA-promo.svelte";
|
||||
import BAGpromo from "#components/UMBE_card-BA-G-promo.svelte";
|
||||
---
|
||||
|
||||
<div class="hidden
|
||||
xl:flex xl:flex-col xl:grow
|
||||
">
|
||||
|
||||
<Contact client:load>
|
||||
|
||||
<Login client:load />
|
||||
<Contact client:load />
|
||||
<Review client:load />
|
||||
<VApromo client:load />
|
||||
<VAGpromo client:load />
|
||||
<BApromo client:load />
|
||||
<BAGpromo client:load />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
28
src/components/UMBE_banner-saeule.svelte
Normal file
28
src/components/UMBE_banner-saeule.svelte
Normal file
@@ -0,0 +1,28 @@
|
||||
<div class="grid grid-cols-[1fr,1fr,1fr,1fr] gap-4" >
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
28
src/components/UMBE_card-BA-G-promo.svelte
Normal file
28
src/components/UMBE_card-BA-G-promo.svelte
Normal file
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-BA-G-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Bedarfssausweis Gewerbe</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<a href="#" id="link-BA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Bedarfssausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">300</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
28
src/components/UMBE_card-BA-promo.svelte
Normal file
28
src/components/UMBE_card-BA-promo.svelte
Normal file
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-BA-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Bedarfssausweis Wohngebäude</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<a href="#" id="link-BA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Bedarfssausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
29
src/components/UMBE_card-VA-G-promo.svelte
Normal file
29
src/components/UMBE_card-VA-G-promo.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-VA-G-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Verbrauchsausweis Gewerbe</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
|
||||
<a href="#" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Verbrauchsausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
29
src/components/UMBE_card-VA-promo.svelte
Normal file
29
src/components/UMBE_card-VA-promo.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-VA-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Verbrauchsausweis Wohngebäude</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<a href="" id="link-VA-promo"
|
||||
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||
hover:bg-primary
|
||||
" >jetzt Verbrauchsausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,4 +1,4 @@
|
||||
<div id ="card-contact" class="box card bg-white px-6 py-4">
|
||||
<div id ="card-contact" class="box card bg-white px-6 py-4 mb-5">
|
||||
|
||||
<div class="grid grid-cols-[max-content,1fr]">
|
||||
<div class="">
|
||||
@@ -11,13 +11,10 @@
|
||||
<img class="w-[100px] !min-w-[100px] mt-[0px] justify-self-end" src="/images/right-sidebar/UMBE_telefon-1.svg" alt="Telefon - Rufen sie uns an."/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
h2{ @apply text-lg}
|
||||
p{ @apply text-lg}
|
||||
|
||||
</style>
|
||||
|
||||
44
src/components/UMBE_card-login.svelte
Normal file
44
src/components/UMBE_card-login.svelte
Normal file
@@ -0,0 +1,44 @@
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<div id ="card-login"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<div class="grid grid-cols-[2rem,1fr,1fr]">
|
||||
<img class="w-6 align-middle" src="/images/right-sidebar/UMBE_user-icon.svg" alt="user-icon"/>
|
||||
<h2 class="text-secondary">Kunden Login</h2>
|
||||
<div class="justify-self-end text-secondary">
|
||||
<a class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary" href="">Kontakt</a> /
|
||||
<a class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary" href="">AGB</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mb-4">
|
||||
<form action="" method="">
|
||||
<input class="my-1 rounded-md px-2 py-1 ring-1 w-full" id="user" name="user" type="email" placeholder="e-mail" />
|
||||
<input class="my-1 rounded-md px-2 py-1 ring-1 w-full" id="password" name="password" type="password" placeholder="password" />
|
||||
<button class="my-1 rounded-md px-2 py-1 ring-1 w-full bg-secondary text-white font-bold hover:bg-primary">einloggen</button>
|
||||
</form>
|
||||
|
||||
<div class="grid grid-cols-[1fr,1fr]">
|
||||
<a class="justify-self-start text-sm font-bold no-underline hover:text-primary" href="">Registrieren</a>
|
||||
<a class="justify-self-end text-sm font-bold no-underline hover:text-primary" href="">Passwort vergessen</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
@@ -1,21 +1,18 @@
|
||||
<script>
|
||||
let innerWidth
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function dropdown(){
|
||||
|
||||
const innerWidth = window.innerWidth;
|
||||
console.log(innerWidth);
|
||||
if(innerWidth<1024){
|
||||
|
||||
|
||||
|
||||
const check_element = this.lastChild;
|
||||
|
||||
const rotate_list = document.querySelectorAll(".dd-symbol");
|
||||
const rotate_element = this.childNodes[0].lastChild;
|
||||
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
|
||||
const rotate_element = this.childNodes[0].children[0];
|
||||
|
||||
console.log(rotate_element);
|
||||
|
||||
var first_check = check_element.classList.contains("show-dropdown-content");
|
||||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||||
@@ -42,7 +39,25 @@ if(innerWidth<1024){
|
||||
|
||||
}
|
||||
|
||||
function hover(){
|
||||
const innerWidth = window.innerWidth;
|
||||
console.log(innerWidth);
|
||||
if(innerWidth>1024){
|
||||
const check_element = this.firstChild.lastChild;
|
||||
console.log(check_element);
|
||||
check_element.style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
|
||||
function hoverout(){
|
||||
const innerWidth = window.innerWidth;
|
||||
console.log(innerWidth);
|
||||
if(innerWidth>1024){
|
||||
const check_element = this.firstChild.lastChild;
|
||||
console.log(check_element);
|
||||
check_element.style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
function hamburger(){
|
||||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||||
@@ -52,7 +67,6 @@ if(innerWidth<1024){
|
||||
element.classList.toggle("hidden");
|
||||
|
||||
const spans = this.children;
|
||||
console.log(spans);
|
||||
var first_check = spans[0].classList.contains("hamburger-swing-0");
|
||||
|
||||
if(first_check == true){
|
||||
@@ -85,11 +99,11 @@ if(innerWidth<1024){
|
||||
|
||||
<nav id="card-navigation" class="card-navigation hidden box lg:block">
|
||||
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||||
{#if innerWidth > 1023}
|
||||
<a href="" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol">❯</span></a>
|
||||
<a href="" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||
{:else}
|
||||
<a href="#" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol">❯</span></a>
|
||||
<a href="#" class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content energieasusweis-erstellen">
|
||||
@@ -107,8 +121,8 @@ if(innerWidth<1024){
|
||||
<div class="nav-element-child">Welcher Energieausweis?</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
|
||||
<a href="#" class="nav-element-child">Verbrauchsausweis<span class="dd-symbol">❯</span></a>
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||||
<a href="#" class="nav-element-child">Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||
<ul class="dropdown-content verbrauchsausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="">Verbrauchsausweis</a></li>
|
||||
@@ -123,8 +137,8 @@ if(innerWidth<1024){
|
||||
<li><a href="">Statistiken zum Verbrauchsausweis Gewerbe</a></li>
|
||||
</div>
|
||||
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
|
||||
<a href="#" class="nav-element-child">Bedarfsausweis<span class="dd-symbol">❯</span></a>
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||||
<a href="#" class="nav-element-child">Bedarfsausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||
<ul class="dropdown-content bedarfsausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="">Bedarfsausweis</a></li>
|
||||
@@ -141,8 +155,8 @@ if(innerWidth<1024){
|
||||
</div>
|
||||
|
||||
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown}>
|
||||
<a href="#" class="nav-element-child">Energieausweis<span class="dd-symbol">❯</span></a>
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||||
<a href="#" class="nav-element-child">Energieausweis<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||
<ul class="dropdown-content energieausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="">Energieausweis</a></li>
|
||||
@@ -170,4 +184,48 @@ if(innerWidth<1024){
|
||||
</div>
|
||||
|
||||
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
.dd-symbol::before{
|
||||
content:'❯';
|
||||
font-size:0.95rem;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:-7px;
|
||||
animation-name: flim;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.dd-symbol{visibility: hidden;}
|
||||
|
||||
.dd-symbol::after{
|
||||
content:'❯';
|
||||
font-size:0.95rem;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:-7px;
|
||||
animation-name: flim;
|
||||
animation-duration: 2s;
|
||||
animation-delay: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes flim{
|
||||
0% {opacity: 0;}
|
||||
16.66% {opacity: 0.25;}
|
||||
33.32% {opacity: 0.5;}
|
||||
49.98% {opacity: 0.75;}
|
||||
66.64% {opacity: 0.5;}
|
||||
83.33% {opacity: 0.25;}
|
||||
100% {opacity: 0;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
41
src/components/UMBE_card-price-info.svelte
Normal file
41
src/components/UMBE_card-price-info.svelte
Normal file
@@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div id ="card-price-info"
|
||||
class=" box card hidden bg-white px-6 py-4 mt-5
|
||||
lg:block">
|
||||
|
||||
<div class="grid grid-cols-[max-content]">
|
||||
|
||||
<h2>Was wird der Energieausweis kosten?</h2>
|
||||
<hr class="mb-4 bg-primary h-[2px]">
|
||||
<p>Verbrauchsausweis Wohngebäude</p>
|
||||
<p>ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>Bedarfsausweis Wohngebäude</p>
|
||||
<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>Verbrauchsausweis Gewerbe</p>
|
||||
<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>Bedarfsausweis Gewerbe</p>
|
||||
<p>ab 300€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>GEG-Nachweis Wohngebäude</p>
|
||||
<p>ab 400€ inkl. MwSt.</p>
|
||||
<hr>
|
||||
<p>GEG-Nachweis Gewerbe</p>
|
||||
<p>ab 450€ inkl. MwSt.</p>
|
||||
<hr class="mt-2">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
0
src/components/UMBE_card-review.svelte
Normal file
0
src/components/UMBE_card-review.svelte
Normal file
@@ -1,10 +1,10 @@
|
||||
---
|
||||
import "../style/UMBE_global.css";
|
||||
import "../../svelte-dialogs.config"
|
||||
import Footer from "../components/UMBE_Footer.astro";
|
||||
import Header from "../components/UMBE_Header.astro";
|
||||
import SidebarLeft from "../components/UMBE_SidebarLeft.astro";
|
||||
import SidebarRight from "../components/UMBE_SidebarRight.astro";
|
||||
import Footer from "#components/UMBE_Footer.astro";
|
||||
import Header from "#components/UMBE_Header.astro";
|
||||
import SidebarLeft from "#components/UMBE_SidebarLeft.astro";
|
||||
import SidebarRight from "#components/UMBE_SidebarRight.astro";
|
||||
import { NotificationWrapper } from "@ibcornelsen/ui";
|
||||
|
||||
export interface Props {
|
||||
@@ -41,8 +41,8 @@ const { title } = Astro.props;
|
||||
class="w-full p-0
|
||||
|
||||
|
||||
lg:grid grid-cols-[max-content,6fr] lg:gap-1 lg:p-3
|
||||
xl:grid-cols-[2fr,6fr,2fr] xl:gap-3 xl:py-4 xl:px-3
|
||||
lg:grid grid-cols-[max-content,6fr] lg:gap-3 lg:p-3
|
||||
xl:grid-cols-[2fr,6fr,2fr] xl:py-4 xl:px-3
|
||||
2xl:grid-cols-[2fr,6fr,2fr] 2xl:gap-5 2xl:py-4 2xl:px-9
|
||||
|
||||
">
|
||||
|
||||
@@ -12,6 +12,7 @@ export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
|
||||
BedarfsausweisWohnen: [135, 145, 290],
|
||||
VerbrauchsausweisWohnen: [45, 55, 180],
|
||||
VerbrauchsausweisGewerbe: [85, 95, 360],
|
||||
BedarfsausweisGewerbe: [300, 0, 0]
|
||||
};
|
||||
|
||||
export const SERVICES: Record<Enums.Ausweisart, Record<Enums.Service, number>> = {
|
||||
|
||||
@@ -1,9 +1,18 @@
|
||||
---
|
||||
import Layout from "#layouts/UMBE_Layout.astro";
|
||||
import BannerPrice from "#components/UMBE_banner-saeule.svelte";
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Energieausweis online erstellen - Online Energieausweis">
|
||||
<Layout title="Energieausweis online erstellen - Online Energieausweis" client:load>
|
||||
<h1>Energieausweis online erstellen</h1>
|
||||
|
||||
<BannerPrice client:load />
|
||||
|
||||
|
||||
|
||||
</Layout>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,14 +1,44 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Abel:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
|
||||
/*@import url('https://fonts.googleapis.com/css2?family=Abel:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Heron';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display:swap;
|
||||
src: url("/fonts/HeronSans-Light.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Heron';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display:swap;
|
||||
src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Antique Olive Compact bold';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display:swap;
|
||||
src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
|
||||
}
|
||||
|
||||
* {
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
font-family: "Abel", "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-family: "Heron";
|
||||
}
|
||||
|
||||
.promo{
|
||||
font-weight: 700;
|
||||
box-sizing: border-box;
|
||||
font-family: "Antique Olive Compact bold";
|
||||
}
|
||||
|
||||
body{
|
||||
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
|
||||
@apply /*bg-[url('/images/pattern.png')] bg-repeat bg-fixed */ max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
|
||||
}
|
||||
|
||||
|
||||
@@ -32,7 +62,7 @@ article {
|
||||
/*BOXES*/
|
||||
.box{
|
||||
@apply rounded-none
|
||||
xl:rounded-xl xl:shadow-box xl:ring-1 xl:ring-gray-200
|
||||
xl:rounded-xl lg:shadow-box lg:ring-1 lg:ring-gray-300
|
||||
}
|
||||
|
||||
.card{
|
||||
@@ -70,13 +100,13 @@ article {
|
||||
}
|
||||
|
||||
.nav-element-child{
|
||||
@apply px-4 py-3 w-full justify-start text-sm bg-white flex !no-underline text-black
|
||||
@apply px-6 py-3 w-full justify-start text-sm bg-white flex !no-underline text-black
|
||||
xl:text-lg
|
||||
}
|
||||
|
||||
.dropdown-content{
|
||||
@apply !relative z-[1] !p-0 !scale-100 hidden
|
||||
lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0;
|
||||
lg:!absolute lg:min-w-max lg:p-2 lg:shadow-lg lg:!top-0 lg:ring-gray-300 lg:ring-1;
|
||||
|
||||
li {@apply text-sm bg-white flex
|
||||
xl:text-lg}
|
||||
@@ -104,6 +134,7 @@ li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
|
||||
|
||||
.show-dropdown-content{@apply block !visible !opacity-100 lg:!invisible}
|
||||
.dd-symbol{ @apply absolute right-[20px] rotate-0 transition-all duration-300 origin-center md:transition-none}
|
||||
.dd-symbol-clone{ @apply absolute right-[20px] lg:text-primary}
|
||||
.rotate-symbol{@apply rotate-[90deg] transition-all duration-300 origin-center lg:rotate-0 md:transition-none}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user