wm-fontis/wm-fontis-tibi-2023
3
0
Fork 0
generated from cms/tibi-docs
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

footer & menu right side

Browse Source
This commit is contained in:
Robin Grenzdörfer 2023-07-13 20:45:49 +00:00
parent 09a150f102
commit 90b4c95cd8
5 changed files with 159 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/media/arrow-right.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.634 2.105a.375.375 0 0 0-.52.54l4.138 3.98H1.874a.375.375 0 0 0 0 .75h9.376l-4.136 3.98a.375.375 0 0 0 .52.54l4.713-4.535a.5.5 0 0 0 0-.72L7.634 2.105z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 286 B

9
frontend/src/App.svelte
View File

@ -1,4 +1,5 @@
<script lang="ts">
import Footer from "./lib/components/Footer.svelte"
import Header from "./lib/components/Menu/Header.svelte"
import Menu from "./lib/components/Menu/Menu.svelte"
import { location } from "./store"
@ -23,14 +24,20 @@
<main class="">
<Header bind:active="{activeMenu}" />
<Menu bind:active="{activeMenu}" />
<Footer />
</main>
<Menu bind:active="{activeMenu}" />
<style lang="less" global>
@import "./lib/assets/css/main.less";
@import "./lib/assets/css/base.less";
main {
overflow: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
@media @mobile {

3
frontend/src/lib/assets/css/base.less
View File

@ -59,6 +59,3 @@ select {
color: #333;
width: 100%;
}
.text-container {
}

80
frontend/src/lib/components/Footer.svelte Normal file
View File

@ -0,0 +1,80 @@
<script lang="ts">
</script>
<div class="footer">
<button class="upper-part">
<div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> nächstes Thema</div>
<div class="lower">Ihre&nbsp;Bedürfnisse</div>
</button>
<div class="lower-part">
<div class="links">
<button>Datenschutz</button>
<button>Impressum</button>
</div>
<div class="contact">
<button>0711 644 700-0</button>
<button>info@fontis.de</button>
</div>
</div>
</div>
<style lang="less">
@import "../assets/css/main.less";
.footer {
display: flex;
flex-direction: column;
align-items: flex-end;
background-color: @bg-color-secondary;
color: @font-color-secondary;
.upper-part {
padding: 10px 40px;
display: flex;
flex-direction: column;
width: fit-content;
.upper {
color: @font-color-secondary;
font-size: 12px;
display: flex;
gap: 10px;
@media @tablet {
font-size: 14px;
}
}
.lower {
color: @font-color-secondary;
font-size: 22px;
@media @tablet {
font-size: 24px;
}
}
}
.lower-part {
padding: 40px 40px;
width: 100%;
display: flex;
flex-direction: column;
.links,
.contact {
display: flex;
justify-content: space-between;
padding: 10px 0px;
}
button {
color: @font-color-secondary;
}
@media @tablet {
padding: 80px 40px;
flex-direction: row;
justify-content: space-between;
.links,
.contact {
display: flex;
justify-content: flex-start;
gap: 40px;
padding: 0px;
}
}
}
}
</style>

91
frontend/src/lib/components/Menu/Menu.svelte
View File

@ -8,14 +8,25 @@
<Header bind:active="{active}" opened="{true}" />
<div class="menu-content">
<div class="container">
<div class="pages">
{#each ["Ihre Bedürfnisse", "Unsere Lösungen", "Über uns", "Kontakt"] as page}
<button class="page">
{page}
</button>
{/each}
<div class="inner-container">
<div class="pages">
{#each ["Ihre Bedürfnisse", "Unsere Lösungen", "Über uns", "Kontakt"] as page}
<button class="page">
{page}
</button>
{/each}
</div>
<div class="footer-infos">
<div class="upper">
<button>Datenschutz</button>
<button>Impressum</button>
</div>
<div class="lower">
<button>0711 644 700-0</button>
<button>info@fontis.de</button>
</div>
</div>
</div>
<div class="footer-infos"></div>
</div>
</div>
</div>
@ -52,31 +63,65 @@
.container {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
width: 80%;
margin: 10vw 0px;
.footer-infos {
width: 100%;
}
.pages {
.inner-container {
width: 100%;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 20px;
.page {
font-size: 1.6rem;
color: @font-color-secondary;
}
}
@media @tablet {
flex-direction: row;
.footer-infos {
width: 50%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.upper {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 15px;
}
.lower {
display: flex;
flex-direction: column;
align-items: flex-end;
@media @desktop {
flex-direction: row;
justify-content: flex-end;
}
gap: 20px;
}
button {
font-size: 1.6rem;
color: @font-color-secondary;
}
@media @desktop {
.lower {
gap: 40px;
}
}
}
.pages {
width: 100%;
display: flex;
align-items: flex-start;
width: 50%;
flex-direction: column;
gap: 20px;
.page {
font-size: 1.6rem;
color: @font-color-secondary;
}
}
@media @tablet {
flex-direction: row;
.footer-infos {
width: 50%;
}
.pages {
align-items: flex-start;
width: 50%;
}
}
}
}