Footer 

<div class="dark-background">
    <div class="page-layout-xl--default">
        <footer class="footer">
            <h2 class="footer__heading">Get in touch</h2>
            <div class="footer__left">
                <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>
                <div class="footer__flex">
                    <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-left">
                        <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>
                </div>
            </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>
                <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>
        </footer>
    </div>
</div>
 
<div class="dark-background">
    <div class="page-layout-xl--default">
        <footer class="footer">
            <h2 class="footer__heading">Get in touch</h2>
            <div class="footer__left">
                <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>
                <div class="footer__flex">
                    <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-left">
                        <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>
                </div>
            </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>
                <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>
        </footer>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .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;

  font-size: $font-size-base;
}

.footer__heading {
  color: $footer-heading-color;
}

.footer__subheading {
  color: $footer-color;
  font-size: $font-size-sm;
}

.footer__address {
  line-height: $paragraph-line-height;
  font-size: $font-size-base;
}

.footer__directions-link {
  @extend %heading-font-bold;

  display: block;
  margin: $spacer-xs 0 $spacer-lg;
  text-transform: uppercase;

  color: $footer-color;
  font-size: $font-size-xxs;

  &::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;

  &-secondary {
    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__flex {
    display: flex;
    flex-wrap: wrap;
  }

  .footer__left {
    margin-bottom: $spacer-lg;
    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-right: $spacer-xxl;
    margin-bottom: $spacer-lg;
  }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: components/03-organisms/footer/_footer.scss
  • Size: 2.2 KB

No notes defined.