HTML-Prototype von DZNE

Markup: templates/output/existingfiles/Adresse_Personenfoto.html
<div class="page-container">
    <header class="header">
        <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 active">
                            <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">
                            <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>
        <picture class="header__image">
            <source srcset="Images/header_forscher.png" media="(min-width: 1400px)" />
            <source srcset="Images/header_forscher_medium-desktop.png" media="(min-width: 1200px)" />
            <source srcset="Images/header_forscher_small-desktop.png" media="(min-width: 1023px)" />
            <source srcset="Images/header_forscher_table.png" media="(min-width: 768px)" />
            <source srcset="Images/header_forscher_small-table.png" media="(min-width: 575px)" />
            <img src="Images/header_forscher_mobile.png" />
        </picture>
        <div class="container-fluid">
            <div class="subpage-main-headline theme--white-right bottom">
                <h1 class="subpage-main-headline__main theme--white-right__main">
                    Adulte Neurogenese
                </h1>
                <h4 class="subpage-main-headline__name theme--white-right__name">
                    Prof. Dr. Gerd Kempermann
                </h4>
            </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 active">
                        <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">
                        <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 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 class="breadcrumb__item-arrow arrow-breadcrumb"></div>
                    <a class="breadcrumb__item" href="#">Kempermann</a>
                </div>
                <div class="subnav">
                    <ul class="subnav__navigation">
                        <li class="subnav__navigation__item">
                            <a href="#">
                                Curriculum Vitae
                            </a>
                        </li>
                        <li class="subnav__navigation__item active">
                            <a href="#">
                                Forschungsschwerpunkte
                            </a>
                        </li>
                        <li class="subnav__navigation__item">
                            <a href="#">
                                Gruppenmitglieder
                            </a>
                        </li>
                        <li class="subnav__navigation__item">
                            <a href="#">
                                Publikationen
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <div class="header-subnav-mobile__subnavigation">
        <div class="header-subnav-mobile__subnavigation__container">
            <div class="subnav">
                <ul class="subnav__navigation">
                    <li class="subnav__navigation__item">
                        <a href="#">
                            Curriculum Vitae
                        </a>
                    </li>
                    <li class="subnav__navigation__item active">
                        <a href="#">
                            Forschungsschwerpunkte
                        </a>
                    </li>
                    <li class="subnav__navigation__item">
                        <a href="#">
                            Gruppenmitglieder
                        </a>
                    </li>
                    <li class="subnav__navigation__item">
                        <a href="#">
                            Publikationen
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="maincontent">
        <div class="content-wrap-subpage">
            <div class="content-wrap container-fluid">
                <div class="row">
                    <div class="col-12 col-md-4 order-1 order-md-0">
                        <div class="sidebar">
                            <div class="sidebar--item">
                                <!-- Dropdown Menu START -->
                                <div class="dropdown-menu">
                                    <form class="dropdown-menu__form">
                                        <div class="dropdown-menu__form__field input-wrap--select">
                                            <select name="select" class="" size="1" select  onchange="window.location=this.options[this.selectedIndex].value" >
                                                <option selected>
                                                    Klinische Forschung A-Z
                                                </option>
                                                <option value="https://www.faktor-e.de/extranet/dzne2020/Desktop/index27.html">
                                                    Angenstein, Frank
                                                </option>
                                                <option value="https://www.google.de/">
                                                    Aziz, Ahmad
                                                </option>
                                                <option value="https://www.dzne.de/forschung/forschungsbereiche/klinische-forschung/">
                                                    Boecker, Henning
                                                </option>
                                            </select>
                                        </div>
                                    </form>
                                </div>
                                <!-- Dropdown Menu END -->
                                <!-- Address Element with Photo START -->
                                <div class="box-address-photo">
                                    <div class="photo">
                                        <img src="Images/contact_klockgether.png">
                                    </div>
                                    <h4>
                                        <a href="#">
                                            Prof. Dr. Thomas Klockgether
                                        </a>
                                    </h4>
                                    <h4>
                                        Direktor der Klinischen Forschung
                                    </h4>
                                    <p>
                                        Leiter der Klinischen Forschung
                                        am Standort Bonn
                                    </p>
                                    <div class="box-address-photo__links">
                                        <a class="email" href="mailto:bla@test.xyz">
                                            <i class="fal fa-envelope"></i>
                                            <span>
                                                thomas.klockgether@dzne.de
                                            </span>
                                        </a>
                                        <a class="phone" href="tel:#">
                                            <i class="fal fa-phone-alt"></i>
                                            <span>
                                                +49 228 287-15736
                                            </span>
                                        </a>
                                    </div>
                                </div>
                                <!-- Address Element with Photo END -->
                                <!-- Download Button Element START -->
                                <button class="download-btn"><i class="fal fa-download"></i> Flyer Klinische Forschung</button>
                                <!-- Download Button Element END -->
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-8 order-0 order-md-1">
                        <div class="main-column">
                            <div class="element--dzne-textimage__textimage-container__text-not-headline">
                                <h2>Titel</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Content Footer final START -->
                <div class="content__footer">
                    <div class="content__footer__social-media">
                        <a class="facebook" href="#">
                            <img alt="Facebook" src="Images/icon_facebook.svg"/> teilen
                        </a>
                        <a class="twitter" href="#">
                            <img alt="Twitter" src="Images/icon_twitter.png"/> tweet
                        </a>
                    </div>
                    <div class="content__footer__meta">
                        <a class="print" href="javascript:window.print()"></a>
                        <a class="back-to-top" href="#"></a>
                    </div>
                </div>
                <!-- Content Footer final END -->
            </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 206