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
Download Patch File Download Diff File Expand all files Collapse all files

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%;
}
}
}
}