skillbox/client/src/layouts/DefaultFooter.vue

104 lines
2.6 KiB
Vue

<template>
<footer class="default-footer">
<div class="default-footer__section">
<div class="default-footer__info">
<div class="default-footer__who-are-we who-are-we">
<h5 class="who-are-we__title">Wer sind wir?</h5>
<p class="who-are-we__text">
mySkillbox ist ein Angebot des hep Verlags in Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für
Berufsbildung (EHB)
</p>
</div>
<a href="https://www.hep-verlag.ch/" target="_blank">
<hep-logo class="default-footer__logo-hep">
</hep-logo>
</a>
<a href="https://www.ehb.swiss/" target="_blank">
<ehb-logo class="default-footer__logo-ehb">
</ehb-logo>
</a>
</div>
</div>
<div class="default-footer__section">
<div class="default-footer__links">
<a href="https://www.hep-verlag.ch/datenschutz" target="_blank" class="default-footer__link">Datenschutz</a>
<a href="https://www.hep-verlag.ch/impressum" target="_blank" class="default-footer__link">Impressum</a>
<a href="https://www.hep-verlag.ch/agb" target="_blank" class="default-footer__link">AGB</a>
<a href="https://www.hep-verlag.ch/kontakt-verlag" target="_blank" class="default-footer__link">Kontakt</a>
<a href="https://www.hep-verlag.ch/kundenservice" target="_blank" class="default-footer__link">Hilfe</a>
</div>
</div>
</footer>
</template>
<script>
import HepLogo from '@/components/icons/HepLogo';
import EhbLogo from '@/components/icons/EhbLogo';
export default {
components: {
HepLogo,
EhbLogo
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.default-footer {
background-color: $color-silver-light;
&__section {
width: 100%;
border-bottom: $color-silver 1px solid;
display: flex;
justify-content: center;
}
&__info {
width: $footer-width;
padding: 2*$large-spacing 0;
display: flex;
justify-content: space-between;
}
&__who-are-we {
width: 330px;
}
&__logo-hep {
width: 147px;
height: 35px;
}
&__logo-ehb {
width: 100px;
height: 32px;
}
&__links {
width: $footer-width;
padding: $large-spacing 0;
}
&__link {
@include aside-with-cheese;
margin-right: $large-spacing;
}
}
.who-are-we {
&__title {
@include heading-4;
}
&__text {
@include aside-text;
}
}
</style>