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>
<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. */
  • 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;
      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;
      }
    }
    
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: components/03-organisms/footer/_footer.scss
  • Size: 2.2 KB

There are no notes for this item.