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 frame--blue" id="c000002">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--default" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Teaser "Hero" - in 50-50 grid</h2>
        </header>
        <div class="flex">
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--default" id="c">
              <div class="c-teaser-hero-container">
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/1/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--default" id="c">
              <div class="c-teaser-hero-container">
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__image"><img src="https://placeholder2.in2code.de/images/work/2/635/635"/></div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__content c-teaser-hero--blue-grey">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Weiterbildung am TUM Campus Heilbronn – Wissen, das bewegt</h4>
                    </header>
                    <div class="c-textmedia__bodytext">
                      <p>Am TUM Campus Heilbronn treffen Wissenschaft, Technologie und Unternehmertum aufeinander. Wir bieten Unternehmen aller Größen ein dynamisches Umfeld, um Innovationen voranzutreiben, Fachkräfte zu gewinnen und gemeinsam an Zukunftslösungen zu arbeiten. Profitieren Sie von unserem Netzwerk, modernster Technologie und praxisnahen Kooperationen – so sind Sie optimal für die Zukunft gerüstet.</p>
                      <p><a class="btn btn--primary btn--filled" href="#">Mehr erfahren</a></p>
                    </div>
                  </div>
                </div>
                <div class="c-teaser-hero">
                  <div class="c-teaser-hero__content c-teaser-hero--blue-grey">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Unternehmen x TUM Campus Heilbronn - Ihr Partner für Innovation, Talente und Wachstum</h4>
                    </header>
                    <div class="c-textmedia__bodytext">
                      <p>Am TUM Campus Heilbronn treffen Wissenschaft, Technologie und Unternehmertum aufeinander. Wir bieten Unternehmen aller Größen ein dynamisches Umfeld, um Innovationen voranzutreiben, Fachkräfte zu gewinnen und gemeinsam an Zukunftslösungen zu arbeiten. Profitieren Sie von unserem Netzwerk, modernster Technologie und praxisnahen Kooperationen – so sind Sie optimal für die Zukunft gerüstet.</p>
                      <p><a class="btn btn--primary btn--filled" href="#">Mehr erfahren</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>