HTML-Prototype von DZNE

<insert-markup>10.17-</insert-markup>

Forschungsgruppen

Olendae nis excepel iquaece pellit odis pario es doluptat. Rum, tet la con pero et atur, temolor aut antis rerro discien tibus. Genis di consequam qui blabore perchil lentibu saperibus dissite dolupta nos quatiatur? Mo officae molupta essinci reptam quamet qui te nulla. Olendae nis excepel iquaece pellit odis pario es doluptat. Rum, tet la con pero et atur, temolor aut antis rerro discien tibus.



Markup: templates/output/existingfiles/probanden-box_footer.html
<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 active">
                                <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">
                    <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>
<div class="page-container">
    <header class="header">

        <picture class="header__image">
            <img class="right" src="Images/header_forscherfinder.png">
        </picture>
        <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 active">
                                    <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">
                        <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">
            <div class="header__subnavigation__container container-fluid p-0">
                <div class="breadcrumb">
                    <a class="breadcrumb__item" href="#">Forschung </a>
                    <div class="breadcrumb__item-arrow arrow-breadcrumb"></div>
                    <a class="breadcrumb__item" href="#">Forschungsgruppen</a>
                </div>
            </div>
        </div>
    </header>
    <div class="maincontent">
        <div class="content-wrap-subpage">
            <div class="content-wrap container-fluid">
                    <div class="element--dzne-textimage">
                        <div class="element--dzne-textimage__textimage-container">
                            <h1 class="element--dzne-textimage__textimage-container__headline headline--1">
                                Forschungsgruppen
                            </h1>
                            <div class="element--dzne-textimage__textimage-container__text">
                                <p>
                                    Olendae nis excepel iquaece pellit odis pario es doluptat. Rum, tet la con pero et atur,
                                    temolor aut antis rerro discien tibus. Genis di consequam qui blabore perchil lentibu
                                    saperibus dissite dolupta nos quatiatur? Mo officae molupta essinci reptam quamet qui te
                                    nulla. Olendae nis excepel iquaece pellit odis pario es doluptat. Rum, tet la con pero
                                    et atur, temolor aut antis rerro discien tibus.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

        <!-- Footer Grid final START -->
        <section class="dynamic-footer">
            <div class="dynamic-footer__container container-fluid p-0">
                <div class="dynamic-footer__wrap">
                    <div class="dynamic-footer__row ">
                        <div class="dynamic-footer__col">
                            <h4>Spenden</h4>
                            <p>
                                DZNE e. V. <br/>
                                Volksbank Köln Bonn eG <br/>
                                IBAN: DE49 3806 0186 2001 4130 34 <br/>
                                BIC: GENODED1BRS <br/>
                            </p>
                        </div>
                        <div class="dynamic-footer__col is-centered">
                            <h4>
                                In diesen sozialen Netzwerken finden Sie uns
                            </h4>
                            <div class="dynamic-footer__icons">
                                <a href="#" class="dynamic-footer__icon">
                                    <i class="fab fa-facebook-square"></i>
                                </a>
                                <a href="#" class="dynamic-footer__icon">
                                    <i class="fonticon-twitter_x"></i>
                                </a>
                                <a href="#" class="dynamic-footer__icon">
                                    <i class="fab fa-instagram"></i>
                                </a>
                                <a href="#" class="dynamic-footer__icon">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                            </div>
                        </div>
                        <div class="dynamic-footer__col">
                            <h4>
                                <span class="icons">
                                    <i class="fas fa-female"></i>
                                    <i class="fas fa-male"></i>
                                </span>
                                Probanden gesucht
                            </h4>
                            <p>
                                Unterstützen Sie unsere Forschung
                                durch Ihre Studien-Teilnahme!
                            </p>
                            <a href="#" class="dynamic-footer__button">Zur Studienübersicht</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Footer Grid final END -->

        <br/>
        <br/>

        <!-- Footer Probanden-Box final START -->
        <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__col">
                                <h4>
                                    <span>Probanden gesucht</span>
                                    <span class="icons">
                                        <i class="fas fa-female"></i>
                                        <i class="fas fa-male"></i>
                                    </span>
                                </h4>
                            <p>
                                Unterstützen Sie unsere Forschung durch Ihre Studien-Teilnahme!
                                <a href="" class="dynamic-footer__button">
                                    Zur Studienübersicht
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Footer Probanden-Box final END -->

        <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>
</div>
Source: src/scss/_fullpage.scss, line 184