HTML-Prototype der OTH-Regensburg

<div class="c-logo-slider">
  <div class="o-grid o-grid-1-1@desktop u-mb-medium--desktop-up">
    <div>
      <h2 class="u-headline-light">Unsere Partner</h2>
      <p class="u-mb-none">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="o-flex-line o-flex-line--items-end o-flex-line--end">
      <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><a class="btn btn--secondary u-ml-small u-hide--mobile-only" href="#">Alle Partner</a>
    </div>
  </div>
  <div class="c-logo-slider__slides-container">
    <div class="c-logo-slider__slides">
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/1050/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/1050/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/1050/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1050/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/1051/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/1051/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/1051/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1051/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/1052/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/1052/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/1052/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1052/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/1053/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/1053/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/1053/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1053/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/1054/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/1054/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/1054/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1054/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/1055/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/1055/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/1055/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1055/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/0/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/0/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/0/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/0/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/1/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/1/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/1/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/10/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/10/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/10/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/10/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/100/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/100/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/100/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/100/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/1000/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/1000/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/1000/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1000/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
      <div class="c-logo-slider__slide"><a class="c-logo-slider__link" href="#" target="_blank">
          <picture>
            <source srcset="https://picsum.photos/id/1001/208/208" media="(min-width:768px)"/>
            <source srcset="https://picsum.photos/id/1001/160/160" media="(min-width:500px)"/>
            <source srcset="https://picsum.photos/id/1001/120/120" media="(min-width:0)"/><img class="image__default" src="https://picsum.photos/id/1001/208/208" alt="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa." width="208" height="208"/>
          </picture></a></div>
    </div>
  </div>
</div>
<div class="u-show--mobile-only u-align-left--mobile-only"><a class="btn btn--secondary" href="#">Alle Partner</a></div>