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

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