HTML-Prototype von TUM Campus Heilbronn

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type- frame-space-before-none frame--full frame--background frame--blue-dark-721" id="c000001">
      <div class="c-search">
        <div class="c-search__searchbar">
          <input type="text" name="tx_solr[q]" value="" placeholder="Suchbegriff eingeben"/>
          <button type="submit"><span class="u-visually-hidden">Suchen</span></button>
        </div>
        <div class="c-search__filters"><a class="c-search__filter c-search__filter-reset" href="#"><span>Komplette Seite</span></a>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_seiten" name="filter_types[]" value="seiten"/>
            <label for="filter_type_seiten"><span>Seiten (12)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_events" name="filter_types[]" value="events" checked="checked"/>
            <label for="filter_type_events"><span>Events (5)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_personen" name="filter_types[]" value="personen"/>
            <label for="filter_type_personen"><span>Personen (24)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_news" name="filter_types[]" value="news"/>
            <label for="filter_type_news"><span>News (8)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_downloads" name="filter_types[]" value="downloads"/>
            <label for="filter_type_downloads"><span>Downloads (3)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_studiengaenge" name="filter_types[]" value="studiengaenge" checked="checked"/>
            <label for="filter_type_studiengaenge"><span>Studiengänge (14)</span></label>
          </div>
        </div>
        <div class="c-search__results-navigation">
          <div class="c-search__results-label">Suchergebnisse (46)</div>
          <nav class="c-search__pagination">
            <ul>
              <li class="c-search__pagination-previous"><a href="#"><span class="u-visually-hidden">Previous</span></a></li>
              <li class="c-search__pagination-current"><span>Seite 2 / 4</span></li>
              <li class="c-search__pagination-next"><a href="#"><span class="u-visually-hidden">Next</span></a></li>
            </ul>
          </nav>
        </div>
        <div class="c-search__result-list">
          <article class="c-search__result"><span class="c-search__result-title"><a href="#">Master Wirtschaftsinformatik (Information Engineering)</a></span>
            <nav aria-label="Breadcrumb">
              <ul>
                <li>Home</li>
                <li>Studiengänge</li>
                <li>Heilbronn</li>
                <li>Master</li>
              </ul>
            </nav>
            <p>Jetzt für das Wintersemester am TUM Campus Heilbronn anmelden. Die Bewerbung für diesen zukunftsorientierten Studiengang läuft bis zum 31. Mai.</p>
          </article>
          <article class="c-search__result"><span class="c-search__result-title"><a href="#">Management &amp; Technology (TUM-BWL) Bachelor</a></span>
            <nav aria-label="Breadcrumb">
              <ul>
                <li>Home</li>
                <li>Studiengänge</li>
                <li>Heilbronn</li>
                <li>Bachelor</li>
              </ul>
            </nav>
            <p>Der Bachelor an der Schnittstelle von Management und Technologie. Reiche deine Bewerbung direkt online über das TUMonline-Portal ein.</p>
          </article>
          <article class="c-search__result"><span class="c-search__result-title"><a href="#">Campus Life &amp; Wohnen am Bildungscampus</a></span>
            <nav aria-label="Breadcrumb">
              <ul>
                <li>Home</li>
                <li>Campus Heilbronn</li>
                <li>Studentenleben</li>
              </ul>
            </nav>
            <p>Moderne Ausstattung und beste Bedingungen. Erfahre alles über Wohnheime und wie die Bewerbung für einen Wohnplatz abläuft.</p>
          </article>
          <article class="c-search__result"><span class="c-search__result-title"><a href="#">Career Service &amp; Netzwerk für Studierende</a></span>
            <nav aria-label="Breadcrumb">
              <ul>
                <li>Home</li>
                <li>Partner &amp; Karriere</li>
                <li>Services</li>
              </ul>
            </nav>
            <p>Wir unterstützen dich beim Berufseinstieg. Nutze unseren Check-Service für deine Bewerbung bei regionalen Top-Unternehmen.</p>
          </article>
        </div>
        <div class="c-search__results-navigation">
          <div class="c-search__results-label">Suchergebnisse (46)</div>
          <nav class="c-search__pagination">
            <ul>
              <li class="c-search__pagination-previous"><a href="#"><span class="u-visually-hidden">Previous</span></a></li>
              <li class="c-search__pagination-current"><span>Seite 2 / 4</span></li>
              <li class="c-search__pagination-next"><a href="#"><span class="u-visually-hidden">Next</span></a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <!-- Grid/ Element container-->
    <div class="frame frame-type- frame-space-before-none frame--full frame--background" id="c000002">
      <div class="c-search">
        <div class="c-search__searchbar">
          <input type="text" name="tx_solr[q]" value="" placeholder="Suchbegriff eingeben"/>
          <button type="submit"><span class="u-visually-hidden">Suchen</span></button>
        </div>
        <div class="c-search__filters"><a class="c-search__filter c-search__filter-reset" href="#"><span>Komplette Seite</span></a>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_seiten" name="filter_types[]" value="seiten"/>
            <label for="filter_type_seiten"><span>Seiten (12)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_events" name="filter_types[]" value="events" checked="checked"/>
            <label for="filter_type_events"><span>Events (5)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_personen" name="filter_types[]" value="personen"/>
            <label for="filter_type_personen"><span>Personen (24)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_news" name="filter_types[]" value="news"/>
            <label for="filter_type_news"><span>News (8)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_downloads" name="filter_types[]" value="downloads"/>
            <label for="filter_type_downloads"><span>Downloads (3)</span></label>
          </div>
          <div class="c-search__filter">
            <input type="checkbox" id="filter_type_studiengaenge" name="filter_types[]" value="studiengaenge" checked="checked"/>
            <label for="filter_type_studiengaenge"><span>Studiengänge (14)</span></label>
          </div>
        </div>
        <div class="c-search__results-navigation">
          <div class="c-search__results-label">Suchergebnisse (46)</div>
          <nav class="c-search__pagination">
            <ul>
              <li class="c-search__pagination-previous"><a href="#"><span class="u-visually-hidden">Previous</span></a></li>
              <li class="c-search__pagination-current"><span>Seite 2 / 4</span></li>
              <li class="c-search__pagination-next"><a href="#"><span class="u-visually-hidden">Next</span></a></li>
            </ul>
          </nav>
        </div>
        <div class="c-search__result-list">
          <article class="c-search__result"><span class="c-search__result-title"><a href="#">Master Wirtschaftsinformatik (Information Engineering)</a></span>
            <nav aria-label="Breadcrumb">
              <ul>
                <li>Home</li>
                <li>Studiengänge</li>
                <li>Heilbronn</li>
                <li>Master</li>
              </ul>
            </nav>
            <p>Jetzt für das Wintersemester am TUM Campus Heilbronn anmelden. Die Bewerbung für diesen zukunftsorientierten Studiengang läuft bis zum 31. Mai.</p>
          </article>
          <article class="c-search__result"><span class="c-search__result-title"><a href="#">Management &amp; Technology (TUM-BWL) Bachelor</a></span>
            <nav aria-label="Breadcrumb">
              <ul>
                <li>Home</li>
                <li>Studiengänge</li>
                <li>Heilbronn</li>
                <li>Bachelor</li>
              </ul>
            </nav>
            <p>Der Bachelor an der Schnittstelle von Management und Technologie. Reiche deine Bewerbung direkt online über das TUMonline-Portal ein.</p>
          </article>
          <article class="c-search__result"><span class="c-search__result-title"><a href="#">Campus Life &amp; Wohnen am Bildungscampus</a></span>
            <nav aria-label="Breadcrumb">
              <ul>
                <li>Home</li>
                <li>Campus Heilbronn</li>
                <li>Studentenleben</li>
              </ul>
            </nav>
            <p>Moderne Ausstattung und beste Bedingungen. Erfahre alles über Wohnheime und wie die Bewerbung für einen Wohnplatz abläuft.</p>
          </article>
          <article class="c-search__result"><span class="c-search__result-title"><a href="#">Career Service &amp; Netzwerk für Studierende</a></span>
            <nav aria-label="Breadcrumb">
              <ul>
                <li>Home</li>
                <li>Partner &amp; Karriere</li>
                <li>Services</li>
              </ul>
            </nav>
            <p>Wir unterstützen dich beim Berufseinstieg. Nutze unseren Check-Service für deine Bewerbung bei regionalen Top-Unternehmen.</p>
          </article>
        </div>
        <div class="c-search__results-navigation">
          <div class="c-search__results-label">Suchergebnisse (46)</div>
          <nav class="c-search__pagination">
            <ul>
              <li class="c-search__pagination-previous"><a href="#"><span class="u-visually-hidden">Previous</span></a></li>
              <li class="c-search__pagination-current"><span>Seite 2 / 4</span></li>
              <li class="c-search__pagination-next"><a href="#"><span class="u-visually-hidden">Next</span></a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </main>
</div>