<footer class="footer">
<nav class="footer__nav">
<ul class="footer__nav__ul">
<li class="footer__nav__li"><a class="footer__nav__a" href="#"><span class="footer__nav__a__text">Kontakt</span></a></li>
<li class="footer__nav__li"><a class="footer__nav__a" href="#"><span class="footer__nav__a__text">Datenschutz</span></a></li>
<li class="footer__nav__li"><a class="footer__nav__a" href="#"><span class="footer__nav__a__text">Impressum</span></a></li>
</ul>
</nav>
<div class="footer__social"><span class="footer__social__label">Folgen Sie uns</span>
<ul class="footer__social__ul">
<li class="footer__social__li"><a class="footer__social__a" href="#"><svg class="icon icon--linkedin" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-linkedin"></use>
</svg><span class="footer__social__a__text">LinkedIn</span></a></li>
<li class="footer__social__li"><a class="footer__social__a" href="#"><svg class="icon icon--twitter" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-twitter"></use>
</svg><span class="footer__social__a__text">Twitter</span></a></li>
</ul>
</div>
<div class="footer__logo-left"><a class="footer__logo-left__a" href="#"><img class="footer__logo-left__img" src="../images/logos/muds-logo.png" alt="Alternativ-Text" /></a></div>
<div class="footer__logo-right"><a class="footer__logo-right__a" href="#"><img class="footer__logo-right__img" src="../images/logos/hida-logo.svg" alt="Alternativ-Text" /></a></div>
</footer>
#{tag || 'footer'}.footer()&attributes(attr)
//- Nav
nav.footer__nav
ul.footer__nav__ul
each item in navItems
li.footer__nav__li
a.footer__nav__a(href=item.href)
span.footer__nav__a__text #{item.text}
//- Social
.footer__social
span.footer__social__label #{socialLabel}
ul.footer__social__ul
each item in socialItems
li.footer__social__li
a.footer__social__a(href=item.href)
+include('@icon', { icon: item.icon })
span.footer__social__a__text #{item.text}
//- Logo left
.footer__logo-left
a.footer__logo-left__a(href=logoLeft.href)
img.footer__logo-left__img(src=logoLeft.src, alt=logoLeft.alt)
//- Logo right
.footer__logo-right
a.footer__logo-right__a(href=logoRight.href)
img.footer__logo-right__img(src=logoRight.src, alt=logoRight.alt)
{
"navItems": [
{
"text": "Kontakt",
"href": "#"
},
{
"text": "Datenschutz",
"href": "#"
},
{
"text": "Impressum",
"href": "#"
}
],
"socialLabel": "Folgen Sie uns",
"socialItems": [
{
"icon": "linkedin",
"text": "LinkedIn",
"href": "#"
},
{
"icon": "twitter",
"text": "Twitter",
"href": "#"
}
],
"logoLeft": {
"href": "#",
"src": "../images/logos/muds-logo.png",
"alt": "Alternativ-Text"
},
"logoRight": {
"href": "#",
"src": "../images/logos/hida-logo.svg",
"alt": "Alternativ-Text"
}
}
.footer {
background: $color-dark;
color: #fff;
display: flex;
flex-wrap: wrap;
font-size: $font-size-default-mobile;
padding: 5rem;
position: relative;
@include mq($from: m) {
font-size: $font-size-default;
}
@include mq($from: l) {
align-items: stretch;
padding: 4rem 9rem;
}
}
.footer__nav__a,
.footer__social__a {
color: #fff;
transition: color 0.2s;
@media(hover: hover) and (pointer: fine) {
&:hover {
color: $color-green;
}
}
&:focus {
color: $color-green;
}
}
.footer__nav {
width: 100%;
@include mq($from: l) {
padding-bottom: 10rem;
width: 50%;
}
}
.footer__nav__ul {
display: flex;
list-style: none;
padding: 0;
@include mq($until: l) {
justify-content: center;
}
}
.footer__nav__li:not(:last-child) {
margin-right: 2.5rem;
@include mq($from: s) {
margin-right: 5rem;
}
}
.footer__social {
padding: 3rem 0;
text-align: center;
width: 100%;
@include mq($from: s) {
padding: 4rem 0;
}
@include mq($from: l) {
padding: 0;
text-align: right;
width: 50%;
}
}
.footer__social__label {
display: block;
margin-bottom: 0.8rem;
@include mq($from: l) {
display: inline-block;
margin: 0 1rem 0 0;
}
}
.footer__social__ul {
display: inline-flex;
list-style: none;
padding: 0;
@include mq($from: l) {
margin: -1.4rem -1.4rem 0 0;
}
}
.footer__social__a {
display: inline-block;
padding: 1.2rem;
@include mq($from: m) {
padding: 1.4rem;
}
}
.footer__social__a .icon {
height: 2.5rem;
width: 2.5rem;
}
.footer__social__a__text {
@include hidden-visually();
}
.footer__logo-left {
text-align: center;
width: 100%;
@include mq($from: l) {
padding-right: 5rem;
text-align: left;
width: 50%;
}
}
.footer__logo-left__img {
max-width: 40.4rem;
}
.footer__logo-right {
padding-top: 5rem;
text-align: center;
width: 100%;
@include mq($from: l) {
padding: 0 0 0 4rem;
text-align: right;
width: 50%;
}
}
.footer__logo-right__img {
max-width: 40.4rem;
}
There are no notes for this item.