HTML-Prototype von DZNE

<insert-markup>10.13-</insert-markup>
Markup: templates/output/existingfiles/element_2.html
<div class="page-container">
    <header class="header theme--subpage-without-image">
        <div class="top-bar">
            <div class="container-fluid top-bar__container">
                <a href="#">
                    <div class="top-bar__logo">
                        <img src="./Images/dzne_logo.svg">
                    </div>
                </a>
                <div class="top-bar__container only-mobile">
                    <div class="top-bar__container__mobile-languages">
                        <a href="#" class="active">DE</a>
                        <a href="#">EN</a>
                    </div>
                    <div class="top-bar__container__menu-toggle only-mobile" data-toggle="collapse" data-target="#navbarMobile" aria-controls="navbarMobile" aria-expanded="false" aria-label="Navigation">
                        <i class="fal fa-bars open"></i>
                        <i class="fal fa-times close"></i>
                    </div>
                </div>
                <nav class="top-bar__navigation navigation__main only-desktop">
                    <ul class="navigation__main__nav">
                        <li class="navigation__main__nav__item">
                            <a href="#">
                                Forschung
                            </a>
                            <div class="navigation__main__nav__item__sub navigation--dropdown theme--grey">
                                <ul class="navigation--dropdown__nav">
                                    <li class="navigation--dropdown__nav__item has-dropdown">
                                        <a href="#">
                                            Forschungsbereiche
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Forschungsgruppen
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Studien
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Brain Bank
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Core Facilities
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Defeat PD
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Neuroimaging
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            PRECISE
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Kooperationen
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Publikationen
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="navigation__main__nav__item active">
                            <a href="#">
                                Aktuelles
                            </a>
                            <div class="navigation__main__nav__item__sub navigation--dropdown theme--grey">
                                <ul class="navigation--dropdown__nav">
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Veranstaltungen
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Presse
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Im Fokus
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="navigation__main__nav__item">
                            <a href="#">
                                Spenden
                            </a>
                        </li>
                        <li class="navigation__main__nav__item">
                            <a href="#">
                                &Uuml;ber uns
                            </a>
                            <div class="navigation__main__nav__item__sub navigation--dropdown theme--grey">
                                <ul class="navigation--dropdown__nav">
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Vorstand
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Standorte
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Administration
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Organisation
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Technologietransfer
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Betriebsrat
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Beauftragter für Medizinproduktesicherheit
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Ausschreibungen / Veröffentlichungen
                                        </a>
                                    </li>
                                    <li class="navigation--dropdown__nav__item">
                                        <a href="#">
                                            Info-Hotline
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="navigation__main__nav__item navigation__main__nav__item--external">
                            <a href="#">
                                Karriere
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="top-bar__right only-desktop">
                    <div class="top-bar__right__languages">
                        <a href="#" class="active">DE</a>
                        <a href="#">EN</a>
                    </div>
                    <div class="top-bar__right__search">
                        <form action="" class="search-bar">
                            <span class="search-trigger" id="search-trigger">
                                <i class="fal fa-search"></i>
                            </span>
                            <input class="search-bar__input" id="search-input" type="search" name="search" required>
                            <input type="submit" class="search-bar__button search-btn" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <nav class="top-bar__navigation-mobile only-mobile">
            <div class="top-bar__navigation-mobile--wrapper navigation-mobile__main">
                <ul class="navigation-mobile__main__nav">
                    <li class="navigation-mobile__main__nav__item">
                        <a href="#">
                            Forschung
                        </a>

                        <div class="navigation-mobile__main__nav__item__sub navigation-mobile--dropdown theme--grey">
                            <ul class="navigation-mobile--dropdown__nav">
                                <li class="navigation-mobile--dropdown__nav__item has-dropdown">
                                    <a href="#">
                                        &Uuml;bersicht
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item has-dropdown">
                                    <a href="#">
                                        Forschungsbereiche
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Forschungsgruppen
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Studien
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Brain Bank
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Core Facilities
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Defeat PD
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Neuroimaging
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        PRECISE
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Kooperationen
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Publikationen
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navigation-mobile__main__nav__item active">
                        <a href="#">
                            Aktuelles
                        </a>

                        <div class="navigation-mobile__main__nav__item__sub navigation-mobile--dropdown theme--grey">
                            <ul class="navigation-mobile--dropdown__nav">
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Veranstaltungen
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Presse
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Im Fokus
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navigation-mobile__main__nav__item">
                        <a href="#">
                            Spenden
                        </a>
                    </li>
                    <li class="navigation-mobile__main__nav__item">
                        <a href="#">
                            &Uuml;ber uns
                        </a>

                        <div class="navigation-mobile__main__nav__item__sub navigation-mobile--dropdown theme--grey">
                            <ul class="navigation-mobile--dropdown__nav">
                                <li class="navigation-mobile--dropdown__nav__item has-dropdown">
                                    <a href="#">
                                        &Uuml;bersicht
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Vorstand
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Standorte
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Administration
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Organisation
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Technologietransfer
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Betriebsrat
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Beauftragter für Medizinproduktesicherheit
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Ausschreibungen / Veröffentlichungen
                                    </a>
                                </li>
                                <li class="navigation-mobile--dropdown__nav__item">
                                    <a href="#">
                                        Info-Hotline
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="navigation-mobile__main__nav__item navigation-mobile__main__nav__item--external">
                        <a href="#">
                            Karriere
                        </a>
                    </li>
                    <li class="navigation-mobile__main__nav__item navigation-mobile__main__nav__item--search">
                        <div class="navigation-mobile__main__nav__item__search">
                            <form action="" class="search-bar-mobile">
                                <span class="search-trigger" id="search-trigger">
                                    <i class="fal fa-search"></i>
                                </span>
                                <input class="search-bar-mobile__input" id="search-input" type="search" name="search" placeholder="Suchbegriff eingeben…">
                                <input type="submit" class="search-bar-mobile__button search-btn" />
                            </form>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="header__subnavigation desktop">
            <div class="header__subnavigation__container container-fluid">
            </div>
        </div>
    </header>
    <div class="maincontent">
        <div class="content-wrap-subpage">
            <div class="container-fluid">
                <div class="content-wrap">
                    <div class="row">
                        <div class="col-12">
                            <div class="main-column">
                                <div class="element--dzne-textimage">
                                    <div class="element--dzne-textimage__textimage-container">
                                        <h1 class="element--dzne-textimage__textimage-container__headline headline--1">
                                            Headline 1
                                        </h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-8">
                            <div class="main-column">
                                <div class="element--dzne-textimage">
                                    <div class="element--dzne-textimage__textimage-container">
                                         <h2 class="element--dzne-textimage__textimage-container__headline headline--1">
                                            Headline 2
                                         </h2>
                                         <div class="element--dzne-textimage__textimage-container__text">
                                            <p>
                                                Wenn Sie unsere Forschung am Standort Tübingen durch Ihre Teilnahme unterstützen möchten,
                                                finden sie hier eine Übersicht aller Studien, für die wir aktuell Probanden suchen:
                                            </p>
                                         </div>
                                         <div class="element--dzne-accordion">
                                             <div class="element--dzne-accordion__accordion-container">
                                                 <h3 class="element--dzne-accordion__accordion-container__accordion-headline">DZNE-Studien<span class="toggle-icon-accordion open"></span></h3>
                                                 <div class="element--dzne-accordion__accordion-container__accordion-content open-content">
                                                     <h5 class="element--dzne-accordion__accordion-container__accordion-content__headline">Gesunde Probanden / Kontrollen</h5>
                                                     <ul>
                                                         <li>
                                                             <a href="#" target="" title="DANCER (Etablierung eines Rekrutierungspools von Studieninteressenten, Angehörigen und einer Vergleichsgruppe für Studien des DZNE)">
                                                                 <span>DANCER (Etablierung eines Rekrutierungspools von Studieninteressenten, Angehörigen und einer Vergleichsgruppe für Studien des DZNE)</span>
                                                             </a>
                                                         </li>
                                                         <li>
                                                             <a href="#" target="" title="DANCER-FTD (Rekrutierung von Angehörigen und einer Vergleichsgruppe für die DESCRIBE-FTD-Studie)">
                                                                 <span>DANCER-FTD (Rekrutierung von Angehörigen und einer Vergleichsgruppe für die DESCRIBE-FTD-Studie)</span>
                                                             </a>
                                                         </li>
                                                         <li>
                                                             <a href="#" target="" title="DANCER-PSP (Rekrutierung von Angehörigen und einer Vergleichsgruppe für die DESCRIBE-PSP-Studie)">
                                                                 <span>DANCER-PSP (Rekrutierung von Angehörigen und einer Vergleichsgruppe für die DESCRIBE-PSP-Studie)</span>
                                                             </a>
                                                         </li>
                                                     </ul>
                                                 </div>
                                             </div>
                                             <div class="element--dzne-accordion__accordion-container">
                                                 <h3 class="element--dzne-accordion__accordion-container__accordion-headline">Studien in Kooperation mit dem DZNE<span class="toggle-icon-accordion"></span></h3>
                                                 <div class="element--dzne-accordion__accordion-container__accordion-content">
                                                     <ul>
                                                         <li>
                                                             <a href="#" target="_blank" title="TREND (Tübinger Erhebung von Risikofaktoren zur Erkennung von NeuroDegeneration)">
                                                                 <span>TREND (Tübinger Erhebung von Risikofaktoren zur Erkennung von NeuroDegeneration)</span>
                                                             </a>
                                                         </li>
                                                     </ul>
                                                 </div>
                                             </div>
                                         </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-4">
                            <div class="sidebar">
                                <div class="sidebar--item">
                                    <h4 class="headline--4">Headline 4</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="element--dzne-widget">
                        <div class="element--dzne-widget__social-media">
                            <div class="element--dzne-widget__social-media__icons">
                                <a href="#" class="element--dzne-widget__social-media__icons__text facebook">
                                    <img alt="Facebook" class="element--dzne-widget__social-media__icons__icon"
                                         src="Images/icon_facebook.svg"/> teilen
                                </a>
                                <a href="#" class="element--dzne-widget__social-media__icons__text twitter">
                                    <img alt="Twitter" class="element--dzne-widget__social-media__icons__icon"
                                         src="Images/icon_twitter.png"/> tweet
                                </a>
                            </div>
                        </div>
                        <div class="element--dzne-widget__widget-right">
                            <div class="element--dzne-widget__widget-right__icons">
                                <a href="javascript:window.print()"><div class="element--dzne-widget__widget-right__icons__icon print"></div></a>
                            </div>
                            <div class="element--dzne-widget__widget-right__icons">
                                <div class="element--dzne-widget__widget-right__icons_icon back-to-top"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="dynamic-footer dynamic-footer--small">
        <div class="dynamic-footer__container container-fluid">
            <div class="dynamic-footer__wrap">
                <div class="dynamic-footer__row">
                    <div class="dynamic-footer--small__column dynamic-footer--small__column--probands">
                        <div class="dynamic-footer--small__column--probands__headline dynamic-footer__headline">
                            <h4>Probanden gesucht</h4>
                            <span class="icons">
                                <i class="fas fa-female"></i>
                                <i class="fas fa-male"></i>
                            </span>
                        </div>
                        <div class="dynamic-footer--small__column--probands__text dynamic-footer__text">
                            Unterstützen Sie unsere Forschung durch Ihre Studien-Teilnahme!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="footer">
        <nav class="footer__navigation">
            <ul class="footer__navigation__items">
                <li class="footer__navigation__items__item">
                    <a href="#">Kontakt</a>
                </li>
                <li class="footer__navigation__items__item">
                    <a href="#">Impressum</a>
                </li>
                <li class="footer__navigation__items__item">
                    <a href="#">Datenschutz</a>
                </li>
            </ul>
        </nav>
        <div class="footer__bottomline">
            <div class="container-fluid footer__bottomline__container">
                <div class="footer__bottomline__icons">
                    <div class="footer__bottomline__icons__icon">
                        <a href="#">
                           <img src="Images/logo_helmholtz.svg" width="736" height="100"/>
                        </a>
                    </div>
                    <div class="footer__bottomline__icons__icon">
                        <a href="#">
                            <img src="Images/logo_dzg.png"/>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
Source: src/scss/_fullpage.scss, line 140