generated from cms/tibi-docs
81 lines
2.2 KiB
Svelte
81 lines
2.2 KiB
Svelte
|
<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 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>
|