HTML-Prototype von TUM Campus Heilbronn

<!-- Grid/ Element container-->
<div class="frame frame-type-container frame-space-before-medium frame--small" id="c78234">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Testimonials</h2>
  </header>
  <section class="c-testimonials splide" aria-label="Testimonials">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <div class="c-testimonial">
            <div class="c-testimonial__media">
              <video class="c-testimonial__video" preload="metadata" muted="muted" loop="loop" playsinline="playsinline" tabindex="0" aria-label="Video abspielen: Abdul Berrada – Exzellenz mit Fokus">
                <source src="/images/video.mp4" type="video/mp4"/>
              </video>
              <p class="c-testimonial__name">Abdul Berrada</p>
              <div class="c-testimonial__play" aria-hidden="true">
                <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
              </div>
              <button class="c-testimonial__mute" type="button" aria-label="Ton ausschalten" aria-pressed="false">
                <svg class="c-testimonial__mute-on" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                </svg>
                <svg class="c-testimonial__mute-off" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <line x1="23" y1="9" x2="17" y2="15"></line>
                  <line x1="17" y1="9" x2="23" y2="15"></line>
                </svg>
              </button>
            </div>
            <div class="c-testimonial__content rte-content">
              <h3>Exzellenz mit Fokus</h3>
              <p>Top-Uni-Vibe mit Fokus auf Skills, die dich wirklich weiterbringen.</p>
            </div>
          </div>
        </li>
        <li class="splide__slide">
          <div class="c-testimonial">
            <div class="c-testimonial__media">
              <video class="c-testimonial__video" preload="metadata" muted="muted" loop="loop" playsinline="playsinline" tabindex="0" aria-label="Video abspielen: Daniel Kurth – Persönlich betreut">
                <source src="/images/video.mp4" type="video/mp4"/>
              </video>
              <p class="c-testimonial__name">Daniel Kurth</p>
              <div class="c-testimonial__play" aria-hidden="true">
                <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
              </div>
              <button class="c-testimonial__mute" type="button" aria-label="Ton ausschalten" aria-pressed="false">
                <svg class="c-testimonial__mute-on" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                </svg>
                <svg class="c-testimonial__mute-off" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <line x1="23" y1="9" x2="17" y2="15"></line>
                  <line x1="17" y1="9" x2="23" y2="15"></line>
                </svg>
              </button>
            </div>
            <div class="c-testimonial__content rte-content">
              <h3>Persönlich betreut</h3>
              <p>Hier kennt man deinen Namen – nicht nur deine Matrikelnummer.</p>
            </div>
          </div>
        </li>
        <li class="splide__slide">
          <div class="c-testimonial">
            <div class="c-testimonial__media">
              <video class="c-testimonial__video" preload="metadata" muted="muted" loop="loop" playsinline="playsinline" tabindex="0" aria-label="Video abspielen: Janet Parker – Nähe zu Profs">
                <source src="/images/video.mp4" type="video/mp4"/>
              </video>
              <p class="c-testimonial__name">Janet Parker</p>
              <div class="c-testimonial__play" aria-hidden="true">
                <svg width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
              </div>
              <button class="c-testimonial__mute" type="button" aria-label="Ton ausschalten" aria-pressed="false">
                <svg class="c-testimonial__mute-on" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                </svg>
                <svg class="c-testimonial__mute-off" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <line x1="23" y1="9" x2="17" y2="15"></line>
                  <line x1="17" y1="9" x2="23" y2="15"></line>
                </svg>
              </button>
            </div>
            <div class="c-testimonial__content rte-content">
              <h3>Nähe zu Profs</h3>
              <p>Lernen auf Augenhöhe – mit Mentor:innen statt Massenuni.</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </section>
</div>