HTML-Prototype von TUM Campus Heilbronn

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none frame--full frame--background" id="c000001">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <div class="c-slider c-card-slider">
          <section class="splide c-slider__section" aria-label="Slider Cards">
            <div class="c-slider__track splide__track">
              <ul class="c-slider__list splide__list">
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue-dark-301"><a href="#" title="Karrierewege, die begeistern"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Karrierewege, die begeistern</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/1/648/432" width="648" height="432" alt="Karrierewege, die begeistern" title="Karrierewege, die begeistern"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue-dark-301">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Lerne von erfahrenen Persönlichkeiten und gestalte deinen eigenen Erfolgsweg.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue-dark-301"></div>
                    </div>
                  </div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue-dark-540"><a href="#" title="Auf der Spur der Algorithmen, die uns helfen, besser zu entscheiden"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Auf der Spur der Algorithmen, die uns helfen, besser zu entscheiden</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/2/648/432" width="648" height="432" alt="Auf der Spur der Algorithmen, die uns helfen, besser zu entscheiden" title="Auf der Spur der Algorithmen, die uns helfen, besser zu entscheiden"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue-dark-540">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Entdecke, wie moderne Technologien unseren Alltag smarter und effizienter machen.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue-dark-540"></div>
                    </div>
                  </div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue"><a href="#" title="Wie Chatbots Minderheitensprachen noch cooler machen können"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Wie Chatbots Minderheitensprachen noch cooler machen können</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/3/648/432" width="648" height="432" alt="Wie Chatbots Minderheitensprachen noch cooler machen können" title="Wie Chatbots Minderheitensprachen noch cooler machen können"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Innovative KI-Lösungen für mehr Vielfalt und digitale Teilhabe weltweit.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue"></div>
                    </div>
                  </div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue-light-542"><a href="#" title="Wer die Vorteile kennt, bildet sich weiter"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Wer die Vorteile kennt, bildet sich weiter</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/4/648/432" width="648" height="432" alt="Wer die Vorteile kennt, bildet sich weiter" title="Wer die Vorteile kennt, bildet sich weiter"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue-light-542">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Nutze Weiterbildungsangebote, um dein Wissen gezielt auszubauen.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue-light-542"></div>
                    </div>
                  </div>
                </li>
                <li class="c-slider__slide splide__slide">
                  <div class="c-card-slide c-card-slide--blue-light-283"><a href="#" title="Einblicke, die inspirieren"></a>
                    <div class="c-card-slide__head">
                      <!-- Grid/ Element header-->
                      <header class="frame__header">
                        <h3>Einblicke, die inspirieren</h3>
                      </header><img class="c-card-slide__image" src="https://placeholder2.in2code.de/images/work/5/648/432" width="648" height="432" alt="Einblicke, die inspirieren" title="Einblicke, die inspirieren"/>
                    </div>
                    <div class="c-card-slide__bottom c-card-slide--blue-light-283">
                      <div class="c-card-slide__bodytext c-textmedia__bodytext">
                        <p>Spannende Geschichten und Perspektiven aus Forschung und Praxis.</p>
                      </div>
                      <div class="c-card-slide__color c-card-slide--blue-light-283"></div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="c-slider__arrows splide__arrows">
              <button class="c-slider__button c-slider__arrow c-slider__arrow--prev splide__arrow splide__arrow--prev" type="button">
                <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
                </svg>
              </button>
              <div class="c-slider__pagination splide__pagination"></div>
              <button class="c-slider__button c-slider__arrow c-slider__arrow--next splide__arrow splide__arrow--next" type="button">
                <svg width="26px" height="26px" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
                  <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
                </svg>
              </button>
              <button class="c-slider__autoplay-button" type="button" aria-pressed="false" aria-label="Play video" data-play="Play video" data-pause="Pause video"></button>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
</div>