HTML-Prototype von in2code

<insert-markup>4.1.1-</insert-markup>

Welcome at TUM Campus Heilbronn

Since fall 2018 the renowned Technical University of Munich is present at the Bildungscampus Heilbronn and offers a wide variety of services to its more than 500 students in five programs. The state-of-the-art campus of the Dieter Schwarz Foundation and the excellence in research and teaching are now an integral part of one of the most innovative regions in Germany.

dfgdfg

dfgfdg

fdgdfg

dfgdfg

rferf

dfgdfg
01
03
Markup: templates/output/06-components/stage/stage-home.html

<div class="c-stage-home">
  <picture class="c-stage-home__image">
    <source srcset="https://placeholder.in2code.de/2560x800" media="(min-width: 1920px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/1920x800" media="(min-width: 768px)" type="image/webp"/>
    <source srcset="https://placeholder.in2code.de/768x800" type="image/webp"/><img loading="eager" src="https://placeholder.in2code.de/2560x800" width="2560" height="1080" alt=""/>
  </picture>
  <div class="c-stage-home__content">
    <div class="container">
      <header class="frame__header">
        <h1>Welcome at TUM Campus Heilbronn</h1>
      </header>
      <p>Since fall 2018 the renowned<a href="https://www.tum.de/en/" target="_blank" rel="noreferrer">
          <u>Technical University of Munich</u></a> is present at the Bildungscampus Heilbronn and offers a wide variety of services to its more than 500 students in five programs. The state-of-the-art campus of the Dieter Schwarz Foundation and the excellence in research and teaching are now an integral part of one of the most innovative regions in Germany.</p>
    </div>
  </div>
</div>
<div class="c-stage-cards container">
  <div class="c-stage-card c-stage-card--grey">
    <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
    <div class="c-stage-card__content">
      <p>dfgdfg</p><a class="btn btn--icon" href="/"><span>dfgfdg</span>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
        </svg></a>
    </div>
  </div>
  <div class="c-stage-card c-stage-card--orange">
    <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
    <div class="c-stage-card__content">
      <p>fdgdfg</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
        </svg></a>
    </div>
  </div>
  <div class="c-stage-card c-stage-card--purple">
    <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
    <div class="c-stage-card__content">
      <p>rferf</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
        </svg></a>
    </div>
  </div>
</div>
<div class="c-stage-cards-slider container">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">
        <div class="c-stage-card c-stage-card--grey c-stage-card--slider">
          <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
          <div class="c-stage-card__content">
            <p>dfgdfg</p><a class="btn btn--icon" href="/"><span>dfgfdg</span>
              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
              </svg></a>
          </div>
        </div>
      </li>
      <li class="glide__slide">
        <div class="c-stage-card c-stage-card--orange c-stage-card--slider">
          <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
          <div class="c-stage-card__content">
            <p>fdgdfg</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
              </svg></a>
          </div>
        </div>
      </li>
      <li class="glide__slide">
        <div class="c-stage-card c-stage-card--purple c-stage-card--slider">
          <div class="c-stage-card__image"><img src="https://placeholder.in2code.de/200x113" width="200" height="113" alt=""/></div>
          <div class="c-stage-card__content">
            <p>rferf</p><a class="btn btn--icon" href="/"><span>dfgdfg</span>
              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-right"></use>
              </svg></a>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="glide__nav">
    <div data-glide-el="controls">
      <button class="btn glide__arrow glide__arrow--prev" type="button" data-glide-dir="&lt;">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
        </svg><span class="u-visually-hidden">Vorheriger Slide</span>
      </button>
    </div>
    <div class="glide__counter glide__counter--current">01</div>
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="btn glide__bullet glide__bullet--active" type="button" data-glide-dir="=0"><span class="u-visually-hidden">Slide 1</span></button>
      <button class="btn glide__bullet" type="button" data-glide-dir="=1"><span class="u-visually-hidden">Slide 2</span></button>
      <button class="btn glide__bullet" type="button" data-glide-dir="=2"><span class="u-visually-hidden">Slide 3</span></button>
    </div>
    <div class="glide__counter glide__counter--total">03</div>
    <div data-glide-el="controls">
      <button class="btn glide__arrow glide__arrow--right" type="button" data-glide-dir="&gt;">
        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
        </svg><span class="u-visually-hidden">Nächster Slide</span>
      </button>
    </div>
  </div>
</div>
Source: assets/sass/06-components/stage/_components.stage-home.scss, line 11