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="#">
Ü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="#">
Ü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="#">
Ü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="#">
Ü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