HTML-Prototype von DZNE

<insert-markup>10.12-</insert-markup>

Pressebilder

Die Nutzungsrechte aller auf dieser Internetseite verwendeten Bilder und Filme liegen, sofern nicht anders angegeben, beim Deutschen Zentrum für Neurodegenerative Erkrankungen. Für nicht-kommerzielle Zwecke, zur Verbreitung in Presse und Medien, zur persönlichen Information und für pädagogische Zwecke gewährt das DZNE unter folgenden Bedingungen ein unentgeltliches, nicht-übertragbares Nutzungsrecht: Geben Sie als Rechteinhaber das DZNE sowie den Urheber, wie unter den Bildern angegeben, gut lesbar an. Beispiel: "Quelle: DZNE/Name des Fotographen". Eine Bearbeitung der Bilder ist von dem gewährten Nutzungsrecht nicht gedeckt.

Markup: templates/output/existingfiles/Element_1.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">
                            <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 active">
                                        <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">
                        <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 active">
                                    <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">
                <div class="breadcrumb">
                    <a class="breadcrumb__item" href="#">Das DZNE </a>
                    <div class="breadcrumb__item-arrow arrow-breadcrumb"></div>
                    <a class="breadcrumb__item" href="#">Vorstand</a>
                </div>
            </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 col-md-12">
                            <div class="main-column">
                                <h1>Pressebilder</h1>
                                <div class="textimage__two-cols four-one">
                                    <div class="textimage__two-cols--left">
                                        <p>Die Nutzungsrechte aller auf dieser Internetseite verwendeten Bilder und Filme liegen, sofern nicht anders angegeben,
                                            beim Deutschen Zentrum für Neurodegenerative Erkrankungen. Für nicht-kommerzielle Zwecke, zur Verbreitung in Presse
                                            und Medien, zur persönlichen Information und für pädagogische Zwecke gewährt das DZNE unter folgenden Bedingungen
                                            ein unentgeltliches, nicht-übertragbares Nutzungsrecht: Geben Sie als Rechteinhaber das DZNE sowie den Urheber,
                                            wie unter den Bildern angegeben, gut lesbar an. Beispiel: "Quelle: DZNE/Name des Fotographen".
                                            Eine Bearbeitung der Bilder ist von dem gewährten Nutzungsrecht nicht gedeckt.
                                        </p>
                                    </div>
                                    <div class="textimage__two-cols--right">
                                        <div class="element--dzne-card-infobox">
                                            <h3 class="element--dzne-card-infobox__headline">Kommunikation</h3>
                                            <div class="element--dzne-card-infobox__card-infobox-block">
                                                <p>
                                                    <strong>
                                                        <a href="#" class="link-internal">Ansprechpartner</a><br>
                                                        <a href="#" class="link-internal">Preise und Auszeichnungen</a><br>
                                                        <a href="#" class="link-internal">Social Media</a><br>
                                                        <a href="#" class="link-internal">Veranstaltungskalender</a><br>
                                                        <a href="#" class="link-internal">Archiv Pressemitteilungen</a>
                                                    </strong>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </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--full">
        <div class="dynamic-footer__container container-fluid">
            <div class="dynamic-footer__wrap">
                <div class="dynamic-footer__row">
                    <div class="dynamic-footer--full__column dynamic-footer--full__column--donate">
                        <div class="dynamic-footer--full__column--donate__headline dynamic-footer__headline dynamic-footer--full__headline">
                            Spenden
                        </div>
                        <div class="dynamic-footer--full__column--donate__text dynamic-footer__text">
                            <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>
                    <div class="dynamic-footer--full__column dynamic-footer--full__column--social">
                        <div class="dynamic-footer--full__column--social__headline dynamic-footer__headline dynamic-footer--full__headline">
                            In diesen sozialen Netzwerken finden Sie uns
                        </div>
                        <div class="dynamic-footer--full__column--social__icons dynamic-footer__icons">
                            <a href="#" class="dynamic-footer--full__column--social__icons__icon dynamic-footer__icons__icon">
                                <i class="fab fa-facebook-square"></i>
                            </a>
                            <a href="#" class="dynamic-footer--full__column--social__icons__icon dynamic-footer__icons__icon">
                                <i class="fonticon-twitter_x"></i>
                            </a>
                            <a href="#" class="dynamic-footer--full__column--social__icons__icon dynamic-footer__icons__icon">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="#" class="dynamic-footer--full__column--social__icons__icon dynamic-footer__icons__icon">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </div>
                    </div>
                    <div class="dynamic-footer--full__column dynamic-footer--full__column--probands">
                        <div class="dynamic-footer--full__column--probands__headline dynamic-footer__headline dynamic-footer--full__headline">
                            <span class="icons">
                                <i class="fas fa-female"></i>
                                <i class="fas fa-male"></i>
                            </span>
                            <h4>Probanden gesucht</h4>
                        </div>
                        <div class="dynamic-footer--full__column--probands__text dynamic-footer__text">
                            <p>
                                Unterstützen Sie unsere Forschung durch Ihre Studien-Teilnahme! Eine Übersicht aller Studien
                                an den Standorten des DZNE finden Sie <a href="#">hier</a>.
                            </p>
                        </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 129