HTML-Prototype der OTH-Regensburg

<div class="c-quote-slider">
  <div class="c-quote-slider__slides-container">
    <div class="c-slider-controls o-flex-line">
      <button class="btn btn--arrow btn--arrow-left c-slider-controls__button c-slider-controls__button--prev" title="Previous slide">
        <svg viewBox="0 0 13.455 24.081" role="img" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
        </svg>
      </button>
      <button class="btn btn--arrow btn--arrow-right c-slider-controls__button c-slider-controls__button--next" title="Next slide">
        <svg viewBox="0 0 13.455 24.081" role="img" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
        </svg>
      </button>
    </div>
    <div class="c-quote-slider__slides">
      <div class="c-quote-slider__slide">
        <div class="c-quote o-grid o-grid-1-1@desktop">
          <!-- START QUOTE IMAGE-->
          <div class="c-quote__image-wrap">
            <link rel="preload" as="image" href="https://picsum.photos/1200/600"/>
            <picture class="picture__mobile">
              <source srcset="https://unsplash.com/photos/OQMZwNd3ThU/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjE5MjU0&amp;force=true&amp;w=1920/640/640" media="(min-width:320px)"/>
              <source srcset="https://unsplash.com/photos/OQMZwNd3ThU/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjE5MjU0&amp;force=true&amp;w=1920/320/320" media="(min-width:0)"/><img class="image__default" src="https://unsplash.com/photos/OQMZwNd3ThU/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjE5MjU0&amp;force=true&amp;w=1920/640x640" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="640" height="640"/>
            </picture>
            <picture class="picture__desktop">
              <source srcset="https://unsplash.com/photos/OQMZwNd3ThU/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjE5MjU0&amp;force=true&amp;w=1920/1200/600" media="(min-width:960px)"/>
              <source srcset="https://unsplash.com/photos/OQMZwNd3ThU/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjE5MjU0&amp;force=true&amp;w=1920/960/480" media="(min-width:768px)"/><img class="image__default" src="https://unsplash.com/photos/OQMZwNd3ThU/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjE5MjU0&amp;force=true&amp;w=1920/1200/600" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="1200" height="600"/>
            </picture>
          </div>
          <!-- END QUOTE IMAGE-->
          <!-- START QUOTE TEXT BLOCK-->
          <div class="c-quote__text-container o-container o-flex-line">
            <div class="c-quote__shadow">
              <div class="c-quote__text-wrap">
                <p class="c-quote__text">Accusamus, accusantium, aperiam asperiores consequuntur doloremque earum eveniet facilis fugiat ipsa ipsam, modi velit!</p>
                <p class="c-quote__author">Max Mustermann<br/>Einkauf</p>
              </div>
            </div>
          </div>
          <!-- END QUOTE TEXT BLOCK-->
        </div>
      </div>
      <div class="c-quote-slider__slide">
        <div class="c-quote o-grid o-grid-1-1@desktop">
          <!-- START QUOTE IMAGE-->
          <div class="c-quote__image-wrap">
            <picture class="picture__mobile">
              <source srcset="https://unsplash.com/photos/14CswSK3rL8/download?force=true&amp;w=1920/640/640" media="(min-width:320px)"/>
              <source srcset="https://unsplash.com/photos/14CswSK3rL8/download?force=true&amp;w=1920/320/320" media="(min-width:0)"/><img class="image__default" src="https://unsplash.com/photos/14CswSK3rL8/download?force=true&amp;w=1920/640x640" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="640" height="640"/>
            </picture>
            <picture class="picture__desktop">
              <source srcset="https://unsplash.com/photos/14CswSK3rL8/download?force=true&amp;w=1920/1200/600" media="(min-width:960px)"/>
              <source srcset="https://unsplash.com/photos/14CswSK3rL8/download?force=true&amp;w=1920/960/480" media="(min-width:768px)"/><img class="image__default" src="https://unsplash.com/photos/14CswSK3rL8/download?force=true&amp;w=1920/1200/600" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="1200" height="600"/>
            </picture>
          </div>
          <!-- END QUOTE IMAGE-->
          <!-- START QUOTE TEXT BLOCK-->
          <div class="c-quote__text-container o-container o-flex-line">
            <div class="c-quote__shadow">
              <div class="c-quote__text-wrap">
                <p class="c-quote__text">Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.</p>
                <p class="c-quote__author">Maxine Mustermann<br/>Entwicklung</p>
              </div>
            </div>
          </div>
          <!-- END QUOTE TEXT BLOCK-->
        </div>
      </div>
      <div class="c-quote-slider__slide">
        <div class="c-quote o-grid o-grid-1-1@desktop">
          <!-- START QUOTE IMAGE-->
          <div class="c-quote__image-wrap">
            <picture class="picture__mobile">
              <source srcset="https://unsplash.com/photos/84nJeywULhQ/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjIxNTIx&amp;force=true&amp;w=1920/640/640" media="(min-width:320px)"/>
              <source srcset="https://unsplash.com/photos/84nJeywULhQ/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjIxNTIx&amp;force=true&amp;w=1920/320/320" media="(min-width:0)"/><img class="image__default" src="https://unsplash.com/photos/84nJeywULhQ/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjIxNTIx&amp;force=true&amp;w=1920/640x640" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="640" height="640"/>
            </picture>
            <picture class="picture__desktop">
              <source srcset="https://unsplash.com/photos/84nJeywULhQ/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjIxNTIx&amp;force=true&amp;w=1920/1200/600" media="(min-width:960px)"/>
              <source srcset="https://unsplash.com/photos/84nJeywULhQ/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjIxNTIx&amp;force=true&amp;w=1920/960/480" media="(min-width:768px)"/><img class="image__default" src="https://unsplash.com/photos/84nJeywULhQ/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjU1MjIxNTIx&amp;force=true&amp;w=1920/1200/600" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="1200" height="600"/>
            </picture>
          </div>
          <!-- END QUOTE IMAGE-->
          <!-- START QUOTE TEXT BLOCK-->
          <div class="c-quote__text-container o-container o-flex-line">
            <div class="c-quote__shadow">
              <div class="c-quote__text-wrap">
                <p class="c-quote__text">Cumque ducimus fugiat in, optio sunt velit voluptates.</p>
                <p class="c-quote__author">Maxine Mustermann-Musterfrau<br/>Geschäftsführung</p>
              </div>
            </div>
          </div>
          <!-- END QUOTE TEXT BLOCK-->
        </div>
      </div>
    </div>
  </div>
</div>