HTML-Prototype der OTH-Regensburg

Markup: templates/output/06-components/pagefooter/pagefooter.html

<footer class="c-pagefooter">
  <div class="c-pagefooter__content-wrap o-container">
    <div class="c-pagefooter__content">
      <div class="c-pagefooter__content-inner o-grid o-grid-1-1@tablet o-grid-1-1-1@desktop">
        <!-- START PAGEFOOTER CONTACT-->
        <div class="c-pagefooter__column c-pagefooter__contact">
          <div class="c-pagefooter__line-text">Kontakt</div>
          <p class="c-pagefooter__contact-claim">Ostbayerische Technische Hochschule Regensburg</p>
          <div class="c-pagefooter__address-wrap o-grid o-grid-1-1@tablet">
            <address>
              <ul class="o-list-bare c-pagefooter__address">
                <li class="c-pagefooter__address-item">
                  <svg viewBox="0 0 38.021 38.021">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone-white"></use>
                  </svg><a class="c-pagefooter__link" href="tel:+49094194302">+49 (0)941 / 943 - 02</a>
                </li>
                <li class="c-pagefooter__address-item">
                  <svg viewBox="0 0 38.021 38.021">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-letter-white"></use>
                  </svg><a class="c-pagefooter__link" href="mailto:poststelle@oth-regensburg.de">poststelle@oth-regensburg.de</a>
                </li>
                <li class="c-pagefooter__address-item">
                  <svg viewBox="0 0 38.774 38">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-location"></use>
                  </svg>Seybothstraße 2<br/>93053 Regensburg
                </li>
                <li class="c-pagefooter__address-item">
                  <svg viewBox="0 0 36.717 36.96">
                    <use xlink:href="Images/svg/sprite.symbol.svg#icon-write"></use>
                  </svg><a class="c-pagefooter__link" href="#">Kontaktformular</a>
                </li>
              </ul>
            </address>
            <ul class="o-list-bare c-pagefooter__list c-pagefooter__contact-list">
              <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Personenverzeichnis</a></li>
              <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Standorte und Lagepläne</a></li>
              <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Anreise</a></li>
              <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Öffnungszeiten</a></li>
            </ul>
          </div>
        </div>
        <!-- END PAGEFOOTER CONTACT-->
        <!-- START PAGEFOOTER SERVICE-->
        <div class="c-pagefooter__column c-pagefooter__service">
          <div class="c-pagefooter__line-text">Service</div>
          <ul class="o-list-bare c-pagefooter__list c-pagefooter__service-list">
            <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Jobs und Karriere</a></li>
            <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Presse</a></li>
            <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">News</a></li>
            <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Veranstaltungen</a></li>
          </ul>
        </div>
        <!-- END PAGEFOOTER SERVICE-->
        <!-- START PAGEFOOTER QUICKLINKS-->
        <div class="c-pagefooter__column c-pagefooter__quicklinks">
          <div class="c-pagefooter__line-text">Quicklinks</div>
          <ul class="o-list-bare c-pagefooter__list c-pagefooter__quicklinks-list">
            <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Fakultäten</a></li>
            <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Einrichtungen</a></li>
            <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Ansprechpartner Studium</a></li>
            <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Ansprechpartner Wirtschaft</a></li>
            <li class="c-pagefooter__list-item"><a class="c-pagefooter__link" href="#">Ansprechpartner Forschung</a></li>
          </ul>
        </div>
        <!-- END PAGEFOOTER QUICKLINKS-->
      </div>
    </div>
  </div>
  <div class="c-pagefooter-bottom">
    <div class="o-container">
      <div class="o-flex-line">
        <!-- START PAGEFOOTER SOCIALMEDIA LINKS-->
        <ul class="c-pagefooter-socialmedia-list c-pagefooter__list o-list-bare o-flex-line">
          <li class="c-pagefooter-socialmedia-list__item"><a class="c-pagefooter-socialmedia-list__link" href="#" target="_blank" title="OTH Regensburg Facebook">
                            <div class="c-socialmedia-icon"><svg viewBox="0 0 36 36">
  <path class="shape" fill="none" d="M1 1h34v34H1z"/>
  <path class="icon" fill="currentcolor" d="M22.787 8.397a10.947 10.947 0 0 0-2.975-.4c-3.059 0-4.391 1.416-4.391 4.278v1.926h-2.209v2.751h2.21V28h3.456V16.952h3.314l.2-2.748h-3.514v-1.728c0-1.048.2-1.643 1.558-1.643a10.141 10.141 0 0 1 1.983.227z"/>
</svg>

                            </div></a></li>
          <li class="c-pagefooter-socialmedia-list__item"><a class="c-pagefooter-socialmedia-list__link" href="#" target="_blank" title="OTH Regensburg Instagram">
                            <div class="c-socialmedia-icon"><svg viewBox="0 0 36 36">
  <path class="shape" fill="none" d="M1 1h34v34H1z"/>
  <path class="icon icon--instagram" fill="currentcolor" d="M 13.5,7 C 9.9162419,7 7,9.9162419 7,13.5 v 9 c 0,3.583758 2.9162419,6.5 6.5,6.5 h 9 c 3.583758,0 6.5,-2.916242 6.5,-6.5 v -9 C 29,9.9162419 26.083758,7 22.5,7 Z m 0,1 h 9 c 3.043242,0 5.5,2.456758 5.5,5.5 v 9 c 0,3.043242 -2.456758,5.5 -5.5,5.5 h -9 C 10.456758,28 8,25.543242 8,22.5 v -9 C 8,10.456758 10.456758,8 13.5,8 Z M 24,11 a 1,1 0 0 0 -1,1 1,1 0 0 0 1,1 1,1 0 0 0 1,-1 1,1 0 0 0 -1,-1 z m -6,1.5 c -3.031644,0 -5.5,2.468356 -5.5,5.5 0,3.031644 2.468356,5.5 5.5,5.5 3.031644,0 5.5,-2.468356 5.5,-5.5 0,-3.031644 -2.468356,-5.5 -5.5,-5.5 z m 0,1 c 2.491203,0 4.5,2.008797 4.5,4.5 0,2.491203 -2.008797,4.5 -4.5,4.5 -2.491203,0 -4.5,-2.008797 -4.5,-4.5 0,-2.491203 2.008797,-4.5 4.5,-4.5 z"/>
</svg>

                            </div></a></li>
          <li class="c-pagefooter-socialmedia-list__item"><a class="c-pagefooter-socialmedia-list__link" href="#" target="_blank" title="OTH Regensburg YouTube">
                            <div class="c-socialmedia-icon"><svg viewBox="0 0 36 36">
  <path class="shape" fill="none" d="M1 1h34v34H1z"/>
  <path class="icon icon--youtube" fill="currentcolor" d="M18 10s-6.254 0-7.814.418a2.503 2.503 0 0 0-1.768 1.768C8 13.746 8 18 8 18s0 4.254.418 5.814c.23.861.908 1.538 1.768 1.768C11.746 26 18 26 18 26s6.254 0 7.814-.418a2.505 2.505 0 0 0 1.768-1.768C28 22.254 28 18 28 18s0-4.254-.418-5.814a2.505 2.505 0 0 0-1.768-1.768C24.254 10 18 10 18 10Zm0 2c2.882 0 6.49.134 7.297.35a.508.508 0 0 1 .353.353c.241.898.35 3.639.35 5.297s-.109 4.398-.35 5.297a.508.508 0 0 1-.353.353c-.805.216-4.415.35-7.297.35-2.881 0-6.49-.134-7.297-.35a.508.508 0 0 1-.353-.353C10.109 22.399 10 19.658 10 18s.109-4.399.35-5.299a.505.505 0 0 1 .353-.351c.805-.216 4.415-.35 7.297-.35Zm-2 2.535v6.93L22 18Z"/>
</svg>

                            </div></a></li>
          <li class="c-pagefooter-socialmedia-list__item"><a class="c-pagefooter-socialmedia-list__link" href="#" target="_blank" title="OTH Regensburg Twitter">
                            <div class="c-socialmedia-icon"><svg viewBox="0 0 36 36">
  <path class="shape" fill="none" d="M1 1h34v34H1z"/>
  <path class="icon" fill="currentcolor" d="M26.965 12.742a7.5 7.5 0 0 1-2.119.581 3.718 3.718 0 0 0 1.622-2.042 7.622 7.622 0 0 1-2.345.888 3.689 3.689 0 0 0-6.383 2.519 3.776 3.776 0 0 0 .1.843 10.451 10.451 0 0 1-7.61-3.845 3.616 3.616 0 0 0-.5 1.856 3.69 3.69 0 0 0 1.641 3.072 3.678 3.678 0 0 1-1.671-.462v.046a3.692 3.692 0 0 0 2.959 3.62 3.724 3.724 0 0 1-1.659.064 3.7 3.7 0 0 0 3.453 2.563 7.4 7.4 0 0 1-4.576 1.578 7.832 7.832 0 0 1-.877-.05 10.5 10.5 0 0 0 5.668 1.658 10.423 10.423 0 0 0 10.498-10.49c0-.157 0-.315-.011-.472A7.452 7.452 0 0 0 27 12.757l-.035-.015z"/>
</svg>

                            </div></a></li>
          <li class="c-pagefooter-socialmedia-list__item"><a class="c-pagefooter-socialmedia-list__link" href="#" target="_blank" title="OTH Regensburg LinkedIn">
                            <div class="c-socialmedia-icon"><svg viewBox="0 0 36 36">
  <path class="shape" fill="none" d="M1 1h34v34H1z"/>
  <path class="icon" fill="currentcolor" d="M14.018 28.419h-2.99v-9.627h2.99zm-1.497-10.94a1.74 1.74 0 1 1 1.732-1.748 1.746 1.746 0 0 1-1.732 1.748zm12.685 10.94h-2.983v-4.686c0-1.117-.023-2.549-1.554-2.549-1.554 0-1.792 1.213-1.792 2.469v4.766H15.89v-9.627h2.868v1.313h.042a3.141 3.141 0 0 1 2.829-1.555c3.026 0 3.582 1.992 3.582 4.58v5.289z"/>
</svg>

                            </div></a></li>
        </ul>
        <!-- END PAGEFOOTER SOCIALMEDIA LINKS-->
        <!-- START PAGEFOOTER IMPORTANT LINKS-->
        <ul class="c-pagefooter-important-links-list c-pagefooter__list o-list-bare o-flex-line">
          <li class="c-pagefooter__list-item c-pagefooter-important-links__item"><a class="c-pagefooter__link" href="#">Impressum</a></li>
          <li class="c-pagefooter__list-item c-pagefooter-important-links__item"><a class="c-pagefooter__link" href="#">Datenschutz</a></li>
          <li class="c-pagefooter__list-item c-pagefooter-important-links__item"><a class="c-pagefooter__link" href="#">Barrierefreiheit</a></li>
          <li class="c-pagefooter__list-item c-pagefooter-important-links__item"><a class="c-pagefooter__link" href="#">Leichte Sprache</a></li>
          <li class="c-pagefooter__list-item c-pagefooter-important-links__item"><a class="c-pagefooter__link" href="#">Weiterer Footermenüpunkt</a></li>
        </ul>
        <!-- END PAGEFOOTER IMPORTANT LINKS-->
      </div>
    </div>
  </div>
  <!-- START PAGEFOOTER PARTNER LOGOS-->
  <div class="c-pagefooter-partner">
    <div class="c-pagefooter-partner__content-wrap">
      <div class="o-container">
        <div class="o-flex-line c-pagefooter-partner__content"><a class="c-pagefooter-partner__link" href="#" target="_blank"><img class="c-pagefooter-partner__logo" src="Images/partnerlogos/partnerlogo-1.png" alt="Partnerlogo 1" height="80" width="160"/></a><a class="c-pagefooter-partner__link" href="#" target="_blank"><img class="c-pagefooter-partner__logo" src="Images/partnerlogos/partnerlogo-2.png" alt="Partnerlogo 2" height="80" width="160"/></a><a class="c-pagefooter-partner__link" href="#" target="_blank"><img class="c-pagefooter-partner__logo" src="Images/partnerlogos/partnerlogo-3.png" alt="Partnerlogo 3" height="80" width="160"/></a><a class="c-pagefooter-partner__link" href="#" target="_blank"><img class="c-pagefooter-partner__logo" src="Images/partnerlogos/partnerlogo-4.png" alt="Partnerlogo 4" height="80" width="160"/></a><a class="c-pagefooter-partner__link" href="#" target="_blank"><img class="c-pagefooter-partner__logo" src="Images/partnerlogos/partnerlogo-5.png" alt="Partnerlogo 5" height="80" width="160"/></a><a class="c-pagefooter-partner__link" href="#" target="_blank"><img class="c-pagefooter-partner__logo" src="Images/partnerlogos/partnerlogo-6.png" alt="Partnerlogo 6" height="80" width="160"/></a><a class="c-pagefooter-partner__link" href="#" target="_blank"><img class="c-pagefooter-partner__logo" src="Images/partnerlogos/partnerlogo-7.png" alt="Partnerlogo 7" height="80" width="160"/></a><a class="c-pagefooter-partner__link" href="#" target="_blank"><img class="c-pagefooter-partner__logo" src="Images/partnerlogos/partnerlogo-8.png" alt="Partnerlogo 8" height="80" width="160"/></a>
        </div>
      </div>
    </div>
  </div>
  <!-- END PAGEFOOTER PARTNER LOGOS-->
</footer>
Source: assets/sass/06-components/_components.pagefooter.scss, line 7