<footer class="footer">
<h2 class="footer__heading">Get in touch</h2>
<div class="footer__form">
<p class="footer__paragraph"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong>
</p>
<p class="footer__paragraph">Sed do eiusmod <a href="#" class="footer__link">tempor</a> incididunt ut labore et dolore magna.</p>
<form class="form--inverted">
<div class="form-group">
<label class="form-label" for="first_name">Name</label>
<input type="text" id="name" class="form-control">
</div>
<div class="form-group">
<label class="form-label" for="last_name">Email</label>
<input type="email" id="email" class="form-control">
</div>
<div class="form-group">
<label class="form-label" for="bio">Your message</label>
<textarea id="bio" class="form-control" rows="8"></textarea>
</div>
<button type="submit" class="btn btn--small btn--inverted">Submit</button>
</form>
</div>
<h2 class="footer__heading">Offices</h2>
<div class="footer__aside footer__aside--top-left">
<h3 class="footer__subheading">INNOQ Deutschland GmbH</h3><address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">Krischerstr. 100</span><br><span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br>Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br><a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a></address>
<address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">Ohlauer Str. 43</span>
<br><span itemprop="postalCode">10999</span> <span itemprop="addressLocality">Berlin</span>
<br><a href="https://goo.gl/maps/JkQ8JUq5GpM2" class="footer__directions-link">Directions</a>
</address><address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">Ludwigstr. 180 E</span><br><span itemprop="postalCode">63067</span> <span itemprop="addressLocality">Offenbach</span><br><a href="https://goo.gl/maps/ej3YSyw5mUz" class="footer__directions-link">Directions</a></address>
<address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">Kreuzstr. 16</span>
<br><span itemprop="postalCode">80331</span> <span itemprop="addressLocality">München</span>
<br><a href="https://goo.gl/maps/q3oHmZwHahJ2" class="footer__directions-link">Directions</a>
</address>
</div>
<div class="footer__aside footer__aside--top-right">
<h3 class="footer__subheading">INNOQ Schweiz GmbH</h3><address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">Gewerbestr. 11</span><br><span itemprop="postalCode">6330</span> <span itemprop="addressLocality">Cham</span><br>Tel <span itemprop="telephone">(+41) 41 743 01 11</span><br><a href="https://goo.gl/maps/N9qbZPPjr9R2" class="footer__directions-link">Directions</a></address>
<address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">Albulastr. 55</span>
<br><span itemprop="postalCode">8048</span> <span itemprop="addressLocality">Zürich</span>
<br><a href="https://goo.gl/maps/s3CffwfWG362" class="footer__directions-link">Directions</a>
</address>
</div>
<div class="footer__aside footer__aside--bottom-left">
<h2 class="footer__heading">Links</h2>
<ul class="footer__list">
<li class="footer__list__item"><a href="#" class="footer__list__link">Newsletter</a>
</li>
<li class="footer__list__item"><a href="#" class="footer__list__link">Blog</a>
</li>
</ul>
</div>
<div class="footer__aside footer__aside--bottom-right">
<h2 class="footer__heading">Expertise</h2>
<ul class="footer__list">
<li class="footer__list__item"><a href="#" class="footer__list__link">Strategie- und Technologieberatung</a>
</li>
<li class="footer__list__item"><a href="#" class="footer__list__link">Entwicklung digitaler Geschäftsmodelle</a>
</li>
</ul>
</div>
</footer>
<footer class="footer">
<h2 class="footer__heading">Get in touch</h2>
<div class="footer__form">
<p class="footer__paragraph"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
<p class="footer__paragraph">Sed do eiusmod <a href="#" class="footer__link">tempor</a> incididunt ut labore et dolore magna.</p>
<form class="form--inverted">
<div class="form-group">
<label class="form-label" for="first_name">Name</label>
<input type="text" id="name" class="form-control" />
</div>
<div class="form-group">
<label class="form-label" for="last_name">Email</label>
<input type="email" id="email" class="form-control" />
</div>
<div class="form-group">
<label class="form-label" for="bio">Your message</label>
<textarea id="bio" class="form-control" rows="8"></textarea>
</div>
<button type="submit" class="btn btn--small btn--inverted">Submit</button>
</form>
</div>
<h2 class="footer__heading">Offices</h2>
<div class="footer__aside footer__aside--top-left">
<h3 class="footer__subheading">INNOQ Deutschland GmbH</h3>
<address class="footer__address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Krischerstr. 100</span><br/>
<span itemprop="postalCode">40789</span> <span itemprop="addressLocality">Monheim am Rhein</span><br/>
Tel <span itemprop="telephone">(+49) 2173 3366 0</span><br/>
<a href="https://goo.gl/maps/w3Yp3KicooD2" class="footer__directions-link">Directions</a>
</address>
<address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Ohlauer Str. 43</span><br/>
<span itemprop="postalCode">10999</span> <span itemprop="addressLocality">Berlin</span><br/>
<a href="https://goo.gl/maps/JkQ8JUq5GpM2" class="footer__directions-link">Directions</a>
</address>
<address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Ludwigstr. 180 E</span><br/>
<span itemprop="postalCode">63067</span> <span itemprop="addressLocality">Offenbach</span><br/>
<a href="https://goo.gl/maps/ej3YSyw5mUz" class="footer__directions-link">Directions</a>
</address>
<address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Kreuzstr. 16</span><br/>
<span itemprop="postalCode">80331</span> <span itemprop="addressLocality">München</span><br/>
<a href="https://goo.gl/maps/q3oHmZwHahJ2" class="footer__directions-link">Directions</a>
</address>
</div>
<div class="footer__aside footer__aside--top-right">
<h3 class="footer__subheading">INNOQ Schweiz GmbH</h3>
<address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Gewerbestr. 11</span><br/>
<span itemprop="postalCode">6330</span> <span itemprop="addressLocality">Cham</span><br/>
Tel <span itemprop="telephone">(+41) 41 743 01 11</span><br/>
<a href="https://goo.gl/maps/N9qbZPPjr9R2" class="footer__directions-link">Directions</a>
</address>
<address class="footer__address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Albulastr. 55</span><br/>
<span itemprop="postalCode">8048</span> <span itemprop="addressLocality">Zürich</span><br/>
<a href="https://goo.gl/maps/s3CffwfWG362" class="footer__directions-link">Directions</a>
</address>
</div>
<div class="footer__aside footer__aside--bottom-left">
<h2 class="footer__heading">Links</h2>
<ul class="footer__list">
<li class="footer__list__item"><a href="#" class="footer__list__link">Newsletter</a></li>
<li class="footer__list__item"><a href="#" class="footer__list__link">Blog</a></li>
</ul>
</div>
<div class="footer__aside footer__aside--bottom-right">
<h2 class="footer__heading">Expertise</h2>
<ul class="footer__list">
<li class="footer__list__item"><a href="#" class="footer__list__link">Strategie- und Technologieberatung</a></li>
<li class="footer__list__item"><a href="#" class="footer__list__link">Entwicklung digitaler Geschäftsmodelle</a></li>
</ul>
</div>
</footer>
/* No context defined for this component. */
.footer {
@extend %heading-font-regular;
background-color: $footer-body-bg;
padding: $spacer-lg 0;
color: $footer-color;
}
.footer__form {
margin-bottom: $spacer-lg;
}
.footer__paragraph,
.footer__address {
@extend %heading-font-regular;
line-height: $footer-paragraph-line-height;
font-size: $footer-paragraph-font-size;
}
.footer__heading {
color: $footer-heading-color;
}
.footer__subheading {
color: $footer-color;
font-size: $footer-subheading-font-size;
}
.footer__address {
font-style: normal;
}
.footer__directions-link {
@extend %heading-font-bold;
display: block;
margin: $spacer-xs 0 $spacer-lg;
text-transform: uppercase;
line-height: $footer-directions-link-line-height;
color: $footer-color;
font-size: $footer-directions-link-font-size;
&::before {
@extend %icon;
position: relative;
top: -1px;
margin-right: $spacer-xxs;
color: $footer-heading-color;
content: $icon-location-filled;
}
}
.footer__list {
@extend %list-unstyled;
}
.footer__list__item + .footer__list__item {
margin-top: $spacer-xs;
}
.footer__link {
border-bottom: 2px solid $footer-color;
color: $footer-color;
&:hover,
&:focus {
border-bottom: 2px solid $footer-link-hover-color;
}
}
.footer__link,
.footer__directions-link,
.footer__list__link {
@extend %link-unstyled;
transition: standard-transition(color);
&:hover,
&:focus {
color: $footer-link-hover-color;
}
}
.footer__aside--bottom-left {
margin-bottom: $spacer-lg;
}
@media screen and (min-width: $grid-breakpoint-md) {
.footer {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-column-gap: $spacer-lg;
}
.footer__form {
margin-bottom: 0;
grid-column: 1;
grid-row: 2;
}
.footer__heading {
grid-row: 1;
}
.footer__subheading {
grid-row: 2;
}
.footer__aside--top-left {
grid-column: 2;
grid-row: 2;
}
.footer__aside--top-right {
grid-column: 3;
grid-row: 2;
}
.footer__aside--bottom-left {
margin-bottom: 0;
grid-column: 2;
grid-row: 3;
}
.footer__aside--bottom-right {
grid-column: 3;
grid-row: 3;
}
}
There are no notes for this item.