HTML-Prototype von TUM Campus Heilbronn

<footer class="page__footer footer frame-space-before-medium">
  <div class="frame--background">
    <div class="container">
      <h2>Follow us</h2>
      <div class="footer__social-media"><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></div>
      <div class="flex">
        <div class="flex__md-8">
          <div class="flex">
            <div class="c-accordion c-accordion--footer flex" data-accordion-lock-desktop="data-accordion-lock-desktop">
              <div class="flex__md-6 flex__lg-4">
                <div class="c-accordion__item">
                  <button class="btn c-accordion__item-trigger" id="c-accordion__id-footer-0" type="button" aria-expanded="false" aria-controls="c-accordion__sect-footer-0"><span class="c-accordion__item-icon">
                      <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
                        <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down-new"></use>
                      </svg></span><span class="c-accordion__item-title u-uppercase">Campus</span></button>
                  <div class="c-accordion__item-panel" id="c-accordion__sect-footer-0" role="region" aria-labelledby="c-accordion__id-footer-0">
                    <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 class="flex__md-6 flex__lg-4">
                <div class="c-accordion__item">
                  <button class="btn c-accordion__item-trigger" id="c-accordion__id-footer-1" type="button" aria-expanded="false" aria-controls="c-accordion__sect-footer-1"><span class="c-accordion__item-icon">
                      <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
                        <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down-new"></use>
                      </svg></span><span class="c-accordion__item-title u-uppercase">Stories</span></button>
                  <div class="c-accordion__item-panel" id="c-accordion__sect-footer-1" role="region" aria-labelledby="c-accordion__id-footer-1">
                    <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 class="flex__md-6 flex__lg-4">
                <div class="c-accordion__item">
                  <button class="btn c-accordion__item-trigger" id="c-accordion__id-footer-2" type="button" aria-expanded="false" aria-controls="c-accordion__sect-footer-2"><span class="c-accordion__item-icon">
                      <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
                        <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down-new"></use>
                      </svg></span><span class="c-accordion__item-title u-uppercase">Legal</span></button>
                  <div class="c-accordion__item-panel" id="c-accordion__sect-footer-2" role="region" aria-labelledby="c-accordion__id-footer-2">
                    <ul>
                      <li><a href="#">Imprint</a></li>
                      <li><a href="#">Privacy Policy</a></li>
                      <li><a href="#">Declaration of Accessibility</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex__md-4">
          <div class="c-accordion c-accordion--footer" data-accordion-lock-desktop="data-accordion-lock-desktop">
            <div class="flex__md-6 flex__lg-4">
              <div class="c-accordion__item">
                <button class="btn c-accordion__item-trigger" id="c-accordion__id-footer-contact" type="button" aria-expanded="false" aria-controls="c-accordion__sect-footer-contact"><span class="c-accordion__item-icon">
                    <svg width="44" height="44" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
                      <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-down-new"></use>
                    </svg></span><span class="c-accordion__item-title u-uppercase">Kontakt</span></button>
                <div class="c-accordion__item-panel" id="c-accordion__sect-footer-contact" role="region" aria-labelledby="c-accordion__id-footer-contact">
                  <ul>
                    <li>Die TUM Campus Heilbronn gGmbH</li>
                    <li>Bildungscampus 2</li>
                    <li>74076 Heilbronn</li>
                    <li id="phone">Telefon&nbsp;<a href="tel:+497131264180">+49 (0) 7131 264180</a></li>
                    <li id="mail">E-Mail&nbsp;<a href="mailto:info.hn@chn.tum.de">info.hn@chn.tum.de</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>