Footer

<div class="stripe stripe--secondary">
    <footer class="footer">
        <div class="footer__form">
            <h2 class="footer__heading">Get in touch</h2>
            <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__list__section">
            <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__list__section">
            <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 class="footer__offices">
            <div class="footer__offices__section">
                <h2 class="footer__heading">Offices</h2>
                <h3 class="footer__subheading">INNOQ Deutschland GmbH</h3>
                <ul class="footer__offices__section__list">
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                </ul>
            </div>

            <div class="footer__offices__section">
                <h3 class="footer__subheading">INNOQ Schweiz GmbH</h3>
                <ul class="footer__offices__section__list">
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                </ul>
            </div>
        </div>
    </footer>
</div>
<div class="stripe stripe--secondary">
    <footer class="footer">
        <div class="footer__form">
            <h2 class="footer__heading">Get in touch</h2>
            <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__list__section">
            <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__list__section">
            <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 class="footer__offices">
            <div class="footer__offices__section">
                <h2 class="footer__heading">Offices</h2>
                <h3 class="footer__subheading">INNOQ Deutschland GmbH</h3>
                <ul class="footer__offices__section__list">
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                </ul>
            </div>

            <div class="footer__offices__section">
                <h3 class="footer__subheading">INNOQ Schweiz GmbH</h3>
                <ul class="footer__offices__section__list">
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                </ul>
            </div>
        </div>
    </footer>
</div>
/* No context defined. */
  • Content:
    .footer {
      @extend %container-vertical-spacing-xl;
    
      display: grid;
      gap: $spacer-base;
      align-items: start;
    
      width: 100%;
      max-width: $default-page-layout-content-width-xl;
      margin: 0 auto;
      padding: 0 $spacer-sm;
    
      color: $footer-color;
    }
    
    .footer__form,
    .footer__offices__section,
    .footer__list__section {
      display: grid;
      gap: $spacer-xs;
    }
    
    .footer__offices {
      display: grid;
      gap: $spacer-base;
    }
    
    .footer__offices__section__list {
      @extend %list-unstyled;
    
      display: grid;
      gap: $spacer-base;
    }
    
    .footer__paragraph,
    .footer__address {
      @extend %heading-font-regular;
    
      font-size: $font-size-base;
      line-height: $paragraph-line-height;
    }
    
    .footer__heading {
      color: $footer-heading-color;
    }
    
    .footer__subheading {
      font-size: $font-size-sm;
      color: $footer-color;
    }
    
    .footer__directions-link {
      @extend %heading-font-bold;
    
      display: block;
    
      margin-top: $spacer-xs;
    
      font-size: $font-size-xxs;
      color: $footer-color;
      text-transform: uppercase;
    
      &::before {
        content: asset-url('icons/pin.svg');
    
        display: inline-block;
    
        width: $font-size-xxs;
        height: $font-size-xxs;
        margin-right: $spacer-xxs;
    
        color: $footer-heading-color;
      }
    }
    
    .footer__link {
      hyphens: none;
      color: $footer-color;
      border-bottom: 2px solid $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__list {
      @extend %list-unstyled;
    
      line-height: $paragraph-line-height;
    
      > * + * {
        margin-top: $spacer-xs;
      }
    }
    
    .footer__list__item {
      @extend %heading-font-regular;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: $spacer-xl $spacer-lg;
    
        padding: 0 $spacer-base;
      }
    
      .footer__form {
        grid-row: 1 / 2;
      }
    
      .footer__offices {
        grid-row: 1;
      }
    
      .footer__offices__section__list {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: $spacer-md;
      }
    }
    
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: components/03-organisms/footer/_footer.scss
  • Size: 2.2 KB

No notes defined.