HTML-Prototype von in2code

Markup: templates/output/10-page/footer.html

<footer class="page__footer footer frame-space-before-medium">
  <div class="footer__top frame--background frame--grey-light">
    <div class="container flex">
      <div class="flex__md-6 flex__lg-4 flex__xl-2">
        <div class="c-accordion">
          <div class="c-accordion__item">
            <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f1" id="c-accordion__id-f1"><span class="c-accordion__item-icon">
                <svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg></span><span class="c-accordion__item-title">Campus</span></button>
            <div class="c-accordion__item-panel" id="c-accordion__sect-f1" role="region" aria-labelledby="c-accordion__id-f1">
              <div>
                <ul>
                  <li><a href="#">Campus Heilbronn</a></li>
                  <li><a href="#">Student Services</a></li>
                  <li><a href="#">Explore Heilbronn</a></li>
                  <li><a href="#">Alumni</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex__md-6 flex__lg-4 flex__xl-2">
        <div class="c-accordion">
          <div class="c-accordion__item">
            <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f2" id="c-accordion__id-f2"><span class="c-accordion__item-icon">
                <svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg></span><span class="c-accordion__item-title">Stories</span></button>
            <div class="c-accordion__item-panel" id="c-accordion__sect-f2" role="region" aria-labelledby="c-accordion__id-f2">
              <div>
                <ul>
                  <li><a href="#">News</a></li>
                  <li><a href="#">Mindshift Magazine</a></li>
                  <li><a href="#">Blog</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex__md-6 flex__lg-4 flex__xl-2">
        <div class="c-accordion">
          <div class="c-accordion__item">
            <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f3" id="c-accordion__id-f3"><span class="c-accordion__item-icon">
                <svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg></span><span class="c-accordion__item-title">Events</span></button>
            <div class="c-accordion__item-panel" id="c-accordion__sect-f3" role="region" aria-labelledby="c-accordion__id-f3">
              <div>
                <ul>
                  <li><a href="#">Events</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex__md-6 flex__lg-4 flex__xl-2">
        <div class="c-accordion">
          <div class="c-accordion__item">
            <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f4" id="c-accordion__id-f4"><span class="c-accordion__item-icon">
                <svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg></span><span class="c-accordion__item-title">Study Programs</span></button>
            <div class="c-accordion__item-panel" id="c-accordion__sect-f4" role="region" aria-labelledby="c-accordion__id-f4">
              <div>
                <ul>
                  <li><a href="#">Overview</a></li>
                  <li><a href="#">Bachelor in Management &amp; Data Science</a></li>
                  <li><a href="#">Bachelor in Information Engineering</a></li>
                  <li><a href="#">Master in Management &amp; Digital Technology</a></li>
                  <li><a href="#">Master in Management</a></li>
                  <li><a href="#">Master in Management &amp; Innovation</a></li>
                  <li><a href="#">Going Abroad</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex__md-6 flex__lg-4 flex__xl-2">
        <div class="c-accordion">
          <div class="c-accordion__item">
            <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f5" id="c-accordion__id-f5"><span class="c-accordion__item-icon">
                <svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg></span><span class="c-accordion__item-title">Continuing Education</span></button>
            <div class="c-accordion__item-panel" id="c-accordion__sect-f5" role="region" aria-labelledby="c-accordion__id-f5">
              <div>
                <ul>
                  <li><a href="#">About Us</a></li>
                  <li><a href="#">Business Design &amp; Innovation</a></li>
                  <li><a href="#">Design Your Business</a></li>
                  <li><a href="#">Mastering Digital Transformation</a></li>
                  <li><a href="#">Sustainable Investing</a></li>
                  <li><a href="#">Healthy Leadership</a></li>
                  <li><a href="#">Summer School TUM - HEC</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex__md-6 flex__lg-4 flex__xl-2">
        <div class="c-accordion">
          <div class="c-accordion__item">
            <button class="btn c-accordion__item-trigger" type="button" aria-expanded="false" aria-controls="c-accordion__sect-f6" id="c-accordion__id-f6"><span class="c-accordion__item-icon">
                <svg width="12" height="12" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg></span><span class="c-accordion__item-title">Research</span></button>
            <div class="c-accordion__item-panel" id="c-accordion__sect-f6" role="region" aria-labelledby="c-accordion__id-f6">
              <div>
                <ul>
                  <li><a href="#">Professors</a></li>
                  <li><a href="#">Center for Digital Transformation</a></li>
                  <li><a href="#">Global Center for Family Enterprise</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer__bottom">
    <div class="container flex">
      <div class="footer__social-media flex--order-lg-1"><a href="https://www.instagram.com/tum.campus.hn/" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-instagram"></use>
          </svg><span class="u-visually-hidden">Instagram</span></a><a href="https://www.facebook.com/TUM.Campus.Heilbronn" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-facebook"></use>
          </svg><span class="u-visually-hidden">Facebook</span></a><a href="https://www.tiktok.com/@tum.campus.hn" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-tiktok"></use>
          </svg><span class="u-visually-hidden">TikTok</span></a><a href="https://www.youtube.com/@TUM.Campus.Heilbronn" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-youtube"></use>
          </svg><span class="u-visually-hidden">YouTube</span></a><a href="https://www.linkedin.com/company/tum-campus-heilbronn/" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-linkedin"></use>
          </svg><span class="u-visually-hidden">Linkedin</span></a><a href="https://www.xing.com/pages/tum-campus-heilbronn" target="_blank">
          <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-xing"></use>
          </svg><span class="u-visually-hidden">Xing</span></a></div>
      <div class="footer__copyright"><a href="#">Downloads</a><a href="#">Imprint</a><a href="#">Privacy Policy</a></div>
    </div>
  </div>
</footer>
Source: assets/sass/08-page/_page.footer.scss, line 9