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="flex__md-6 flex__lg-4"><b>Campus</b>
              <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 class="flex__md-6 flex__lg-4"><b>Stories</b>
              <ul>
                <li><a href="#">News</a></li>
                <li><a href="#">Mindshift Magazine</a></li>
                <li><a href="#">Blog</a></li>
              </ul>
            </div>
            <div class="flex__md-6 flex__lg-4"><b>Legal</b>
              <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 class="flex__md-4"><b>Kontakt</b>
          <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>
</footer>