<header id="page-header" class="bp-page-header navbar navbar-has-image navbar-top header-layout-large">
<div class="header-section header-section-top">
<div class="container">
<a href="#" class="navbar-brand navbar-brand-image" title="">
<img class="navbar-brand-logo-normal" src="holder.js/150x75?auto=yes&text=Logo&theme=vine" alt="Fractal" height="" width="" />
</a>
<div class="navbar-search">
<div class="search">
<form name="search" class="search__form form-inline" action="#">
<label class="search__label" for="input645">
<svg class="search__icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-search"></use>
</svg>
</label>
<input class="search__control form-control" id="input645" />
<button class="search__submit" type="submit" name="search" value="">
<svg class="search__submit__icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
</form>
</div>
</div>
<div class="navbar-language">
<ul id="language_menu" class="language-menu">
<li class="active">
<a href="#" title="English">
<span>English</span>
</a>
</li>
<li>
<a href="#" title="German">
<span>German</span>
</a>
</li>
<li class="text-muted">
<span>French (not available)</span>
</li>
</ul>
</div>
<div class="navbar-mmenu">
<m-burger menu="mmenu" fx="collapse">
Menu
</m-burger>
<nav id="mmenu">
<ul class="mmenu">
<li class="active">
<a href="#" title="Home">
<span>Home</span>
</a>
</li>
<li>
<a href="#" title="Customizings">
<span>Customizings</span>
</a>
</li>
<li>
<a href="#" title="Features">
<span>Features</span>
</a>
</li>
<li>
<a href="#" title="Pages">
<span>Pages</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Default">
<span>Default</span>
</a>
</li>
<li>
<a href="#" title="2 Columns">
<span>2 Columns</span>
</a>
</li>
<li>
<a href="#" title="2 Columns 25/75">
<span>2 Columns 25/75</span>
</a>
</li>
<li>
<a href="#" title="2 Columns 50/50">
<span>2 Columns 50/50</span>
</a>
</li>
<li>
<a href="#" title="2 Columns, Offset Right">
<span>2 Columns, Offset Right</span>
</a>
</li>
<li>
<a href="#" title="3 Columns">
<span>3 Columns</span>
</a>
</li>
<li>
<a href="#" title="Simple">
<span>Simple</span>
</a>
</li>
<li>
<a href="#" title="Subnavigation, Left">
<span>Subnavigation, Left</span>
</a>
</li>
<li>
<a href="#" title="Subnavigation, Left and 2 Columns">
<span>Subnavigation, Left and 2 Columns</span>
</a>
</li>
<li>
<a href="#" title="Subnavigation, Right">
<span>Subnavigation, Right</span>
</a>
</li>
<li>
<a href="#" title="Subnavigation, Right and 2 Columns">
<span>Subnavigation, Right and 2 Columns</span>
</a>
</li>
<li>
<a href="#" title="Feature">
<span>Feature</span>
</a>
</li>
<li>
<a href="#" title="Startpage">
<span>Startpage</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Content Examples">
<span>Content Examples</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Text">
<span>Text</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Rich Text">
<span>Rich Text</span>
</a>
</li>
<li>
<a href="#" title="Headers">
<span>Headers</span>
</a>
</li>
<li>
<a href="#" title="Bullet List">
<span>Bullet List</span>
</a>
</li>
<li>
<a href="#" title="Text with Teaser">
<span>Text with Teaser</span>
</a>
</li>
<li>
<a href="#" title="Text and Icon">
<span>Text and Icon</span>
</a>
</li>
<li>
<a href="#" title="Text in Columns">
<span>Text in Columns</span>
</a>
</li>
<li>
<a href="#" title="List Group">
<span>List Group</span>
</a>
</li>
<li>
<a href="#" title="Panel">
<span>Panel</span>
</a>
</li>
<li>
<a href="#" title="Table">
<span>Table</span>
</a>
</li>
<li>
<a href="#" title="Quote">
<span>Quote</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Media">
<span>Media</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Audio">
<span>Audio</span>
</a>
</li>
<li>
<a href="#" title="Card Group">
<span>Card Group</span>
</a>
</li>
<li>
<a href="#" title="Icon Group">
<span>Icon Group</span>
</a>
</li>
<li>
<a href="#" title="Gallery">
<span>Gallery</span>
</a>
</li>
<li>
<a href="#" title="Text and Images">
<span>Text and Images</span>
</a>
</li>
<li>
<a href="#" title="Text and Media">
<span>Text and Media</span>
</a>
</li>
<li>
<a href="#" title="File downloads">
<span>File downloads</span>
</a>
</li>
<li>
<a href="#" title="Images">
<span>Images</span>
</a>
</li>
<li>
<a href="#" title="Media">
<span>Media</span>
</a>
</li>
<li>
<a href="#" title="External Media">
<span>External Media</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Interactive">
<span>Interactive</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Accordion">
<span>Accordion</span>
</a>
</li>
<li>
<a href="#" title="Carousel">
<span>Carousel</span>
</a>
</li>
<li>
<a href="#" title="Tab">
<span>Tab</span>
</a>
</li>
<li>
<a href="#" title="Timeline">
<span>Timeline</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Form elements">
<span>Form elements</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Forms">
<span>Forms</span>
</a>
</li>
<li>
<a href="#" title="Login">
<span>Login</span>
</a>
</li>
<li>
<a href="#" title="Search">
<span>Search</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Menu's">
<span>Menu's</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Abstract">
<span>Abstract</span>
</a>
</li>
<li>
<a href="#" title="Cards">
<span>Cards</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Page 1">
<span>Page 1</span>
</a>
</li>
<li>
<a href="#" title="Page 2">
<span>Page 2</span>
</a>
</li>
<li>
<a href="#" title="Page 3">
<span>Page 3</span>
</a>
</li>
<li>
<a href="#" title="Page 4">
<span>Page 4</span>
</a>
</li>
<li>
<a href="#" title="Page 5">
<span>Page 5</span>
</a>
</li>
<li>
<a href="#" title="Page 6">
<span>Page 6</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Categorized">
<span>Categorized</span>
</a>
</li>
<li>
<a href="#" title="Pages">
<span>Pages</span>
</a>
</li>
<li>
<a href="#" title="Recently Updated">
<span>Recently Updated</span>
</a>
</li>
<li>
<a href="#" title="Related Pages">
<span>Related Pages</span>
</a>
</li>
<li>
<a href="#" title="Sections">
<span>Sections</span>
</a>
</li>
<li>
<a href="#" title="Sitemap">
<span>Sitemap</span>
</a>
</li>
<li>
<a href="#" title="Thumbnails">
<span>Thumbnails</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Page 1">
<span>Page 1</span>
</a>
</li>
<li>
<a href="#" title="Page 2">
<span>Page 2</span>
</a>
</li>
<li>
<a href="#" title="Page 3">
<span>Page 3</span>
</a>
</li>
<li>
<a href="#" title="Page 4">
<span>Page 4</span>
</a>
</li>
<li>
<a href="#" title="Page 5">
<span>Page 5</span>
</a>
</li>
<li>
<a href="#" title="Page 6">
<span>Page 6</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" title="Special elements">
<span>Special elements</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Insert records">
<span>Insert records</span>
</a>
</li>
<li>
<a href="#" title="HTML">
<span>HTML</span>
</a>
</li>
<li>
<a href="#" title="Divider">
<span>Divider</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#" title="And more...">
<span>And more...</span>
</a>
<ul class="mmenu">
<li>
<a href="#" title="Frames">
<span>Frames</span>
</a>
</li>
<li>
<a href="#" title="Images with links">
<span>Images with links</span>
</a>
</li>
<li>
<a href="#" title="Languages and characters">
<span>Languages and characters</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="header-section header-section-bottom">
<div class="container">
<nav id="mainnavigation" class="navbar-expand-lg">
<ul class="navbar-nav navbar-nav-mega" role="menu">
<li class="nav-item active" role="none">
<a href="#" id="nav-item-1" class="nav-link" role="menuitem">
<span class="nav-link-text">
Home <span class="sr-only">(current)</span>
</span>
</a>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-2" class="nav-link" role="menuitem">
<span class="nav-link-text">
Customizings </span>
</a>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-3" class="nav-link" role="menuitem">
<span class="nav-link-text">
Features </span>
</a>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-4" class="nav-link panel-toggle" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Pages </span>
</a>
<div class="panel">
<div class="container">
<div class="row">
<div class="col-12">
<div class="panel-headline">
<a class="h3" href="#" role="menuitem">
Pages
</a>
<button class="panel-close">
<svg class="panel-close-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row">
<ul class="panel-nav panel-nav-level-1" role="menu" aria-label="Pages">
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Default </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns 25/75 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns 50/50 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
2 Columns, Offset Right </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
3 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Simple </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Left </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Left and 2 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Right </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Subnavigation, Right and 2 Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Feature </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Startpage </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item" role="none">
<a href="#" id="nav-item-5" class="nav-link panel-toggle" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Content Examples </span>
</a>
<div class="panel">
<div class="container">
<div class="row">
<div class="col-12">
<div class="panel-headline">
<a class="h3" href="#" role="menuitem">
Content Examples
</a>
<button class="panel-close">
<svg class="panel-close-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row">
<ul class="panel-nav panel-nav-level-1" role="menu" aria-label="Content Examples">
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Text </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Text">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Rich Text </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Headers </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Bullet List </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text with Teaser </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text and Icon </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text in Columns </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
List Group </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Panel </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Table </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Quote </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Media </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Media">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Audio </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Card Group </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Icon Group </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Gallery </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text and Images </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Text and Media </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
File downloads </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Images </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Media </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
External Media </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Interactive </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Interactive">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Accordion </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Carousel </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Tab </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Timeline </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Form elements </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Form elements">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Forms </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Login </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Search </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Menu's </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Menu's">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Abstract </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Cards </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-3" role="menu" aria-label="Cards">
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 1 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 2 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 3 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 4 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 5 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 6 </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Categorized </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Pages </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Recently Updated </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Related Pages </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Sections </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Sitemap </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Thumbnails </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-3" role="menu" aria-label="Thumbnails">
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 1 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 2 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 3 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 4 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 5 </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-3" role="none">
<a class="panel-nav-link panel-nav-link-level-3" href="#" role="menuitem">
<span class="panel-nav-text">
Page 6 </span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
Special elements </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="Special elements">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Insert records </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
HTML </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Divider </span>
</a>
</li>
</ul>
</li>
<li class="panel-nav-item panel-nav-item-level-1" role="none">
<a class="panel-nav-link panel-nav-link-level-1" href="#" role="menuitem">
<span class="panel-nav-text">
And more... </span>
</a>
<button class="panel-nav-toggle" aria-haspopup="true" aria-expanded="false">
<svg class="panel-nav-toggle-icon" height="20px" width="20px">
<use href="../../common/img/svg/symbolSprite.svg#streamline-icon-keyboard-arrow-right"></use>
</svg>
</button>
<ul class="panel-nav panel-nav-level-2" role="menu" aria-label="And more...">
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Frames </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Images with links </span>
</a>
</li>
<li class="panel-nav-item panel-nav-item-level-2" role="none">
<a class="panel-nav-link panel-nav-link-level-2" href="#" role="menuitem">
<span class="panel-nav-text">
Languages and characters </span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- ### Begin: Element text ### -->
<div id="c256" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
Border </div>
</div>
</div>
<!-- ### End: Element text ### -->
<nav aria-label="Breadcrumb" class="breadcrumb-section">
<div class="container">
<p class="sr-only" id="breadcrumb">You are here:</p>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link"><span class="breadcrumb-text">Startpage</span></a></li>
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link"><span class="breadcrumb-text">Subpage</span></a></li>
<li class="breadcrumb-item active" aria-current="page"><span class="breadcrumb-text">Current Page</span></li>
</ol>
</div>
</nav>
{% import '@macro-render' as render %}
{% include '@page-component-header-' ~ headerVariant %}
{{ render.frames(border) }}
{% include '@frame-menu-breadcrumb' %}
{
"siteTitle": "Fractal",
"headerVariant": "large",
"footerVariant": "bootstrap-default",
"settings": {
"logo": {
"width": null,
"height": null,
"linktitle": null
}
},
"logo": {
"normal": {
"url": null,
"holder": {
"width": 150,
"height": 75,
"theme": "vine",
"text": "Logo"
}
},
"inverted": {
"url": null,
"holder": {
"width": 150,
"height": 75,
"theme": "lava",
"text": "Logo"
}
}
},
"theme": {
"navigation": {
"style": "default",
"type": null
},
"meta": {
"enable": null
},
"language": {
"enable": null
},
"copyright": {
"enable": null
},
"socialmedia": {
"enable": null
}
},
"header": {
"mainnavigation": [
{
"type": "menu-main",
"context": {
"menu": [
{
"title": "Home",
"link": "#",
"target": null,
"active": true,
"current": true
},
{
"link": "#",
"title": "Customizings"
},
{
"link": "#",
"title": "Features"
},
{
"link": "#",
"title": "Pages",
"children": [
{
"link": "#",
"title": "Default"
},
{
"link": "#",
"title": "2 Columns"
},
{
"link": "#",
"title": "2 Columns 25/75"
},
{
"link": "#",
"title": "2 Columns 50/50"
},
{
"link": "#",
"title": "2 Columns, Offset Right"
},
{
"link": "#",
"title": "3 Columns"
},
{
"link": "#",
"title": "Simple"
},
{
"link": "#",
"title": "Subnavigation, Left"
},
{
"link": "#",
"title": "Subnavigation, Left and 2 Columns"
},
{
"link": "#",
"title": "Subnavigation, Right"
},
{
"link": "#",
"title": "Subnavigation, Right and 2 Columns"
},
{
"link": "#",
"title": "Feature"
},
{
"link": "#",
"title": "Startpage"
}
]
},
{
"link": "#",
"title": "Content Examples",
"children": [
{
"link": "#",
"title": "Text",
"children": [
{
"link": "#",
"title": "Rich Text"
},
{
"link": "#",
"title": "Headers"
},
{
"link": "#",
"title": "Bullet List"
},
{
"link": "#",
"title": "Text with Teaser"
},
{
"link": "#",
"title": "Text and Icon"
},
{
"link": "#",
"title": "Text in Columns"
},
{
"link": "#",
"title": "List Group"
},
{
"link": "#",
"title": "Panel"
},
{
"link": "#",
"title": "Table"
},
{
"link": "#",
"title": "Quote"
}
]
},
{
"link": "#",
"title": "Media",
"children": [
{
"link": "#",
"title": "Audio"
},
{
"link": "#",
"title": "Card Group"
},
{
"link": "#",
"title": "Icon Group"
},
{
"link": "#",
"title": "Gallery"
},
{
"link": "#",
"title": "Text and Images"
},
{
"link": "#",
"title": "Text and Media"
},
{
"link": "#",
"title": "File downloads"
},
{
"link": "#",
"title": "Images"
},
{
"link": "#",
"title": "Media"
},
{
"link": "#",
"title": "External Media"
}
]
},
{
"link": "#",
"title": "Interactive",
"children": [
{
"link": "#",
"title": "Accordion"
},
{
"link": "#",
"title": "Carousel"
},
{
"link": "#",
"title": "Tab"
},
{
"link": "#",
"title": "Timeline"
}
]
},
{
"link": "#",
"title": "Form elements",
"children": [
{
"link": "#",
"title": "Forms"
},
{
"link": "#",
"title": "Login"
},
{
"link": "#",
"title": "Search"
}
]
},
{
"link": "#",
"title": "Menu's",
"children": [
{
"link": "#",
"title": "Abstract"
},
{
"link": "#",
"title": "Cards",
"children": [
{
"link": "#",
"title": "Page 1"
},
{
"link": "#",
"title": "Page 2"
},
{
"link": "#",
"title": "Page 3"
},
{
"link": "#",
"title": "Page 4"
},
{
"link": "#",
"title": "Page 5"
},
{
"link": "#",
"title": "Page 6"
}
]
},
{
"link": "#",
"title": "Categorized"
},
{
"link": "#",
"title": "Pages"
},
{
"link": "#",
"title": "Recently Updated"
},
{
"link": "#",
"title": "Related Pages"
},
{
"link": "#",
"title": "Sections"
},
{
"link": "#",
"title": "Sitemap"
},
{
"link": "#",
"title": "Thumbnails",
"children": [
{
"link": "#",
"title": "Page 1"
},
{
"link": "#",
"title": "Page 2"
},
{
"link": "#",
"title": "Page 3"
},
{
"link": "#",
"title": "Page 4"
},
{
"link": "#",
"title": "Page 5"
},
{
"link": "#",
"title": "Page 6"
}
]
}
]
},
{
"link": "#",
"title": "Special elements",
"children": [
{
"link": "#",
"title": "Insert records"
},
{
"link": "#",
"title": "HTML"
},
{
"link": "#",
"title": "Divider"
}
]
},
{
"link": "#",
"title": "And more...",
"children": [
{
"link": "#",
"title": "Frames"
},
{
"link": "#",
"title": "Images with links"
},
{
"link": "#",
"title": "Languages and characters"
}
]
}
]
}
]
}
}
]
},
"breadcrumb": [
{
"title": "Startpage"
},
{
"title": "Subpage"
},
{
"title": "Current Page"
}
],
"border": [
{
"type": "text",
"context": {
"bodytext": "Border"
}
}
],
"footer_content": {
"left": [
{
"type": "text",
"context": {
"bodytext": "Footer: Left"
}
}
],
"center": [
{
"type": "text",
"context": {
"bodytext": "Footer: Center"
}
}
],
"right": [
{
"type": "text",
"context": {
"bodytext": "Footer: Right"
}
}
],
"newsletter": [
{
"type": "forms",
"context": {
"background_color_class": "dark",
"frame_class": "section footer-section footer-section-newsletter",
"form": {
"submit": {
"label": "Submit"
},
"fieldsets": [
{
"label": "Newsletter",
"elements": [
{
"type": "input",
"context": {
"label": "Email",
"placeholder": "Please enter your email",
"required": true
}
}
]
}
]
}
}
}
]
},
"footer": {
"meta": [
{
"type": "menu-meta",
"context": {
"menu": [
{
"title": "Imprint"
},
{
"title": "Privacy"
}
]
}
}
],
"language": [
{
"type": "menu-language",
"context": {
"menu": [
{
"title": "English",
"active": true
},
{
"title": "German"
},
{
"title": "French (not available)",
"available": false
}
]
}
}
],
"copyright": [
{
"type": "text",
"context": {
"space_inner_before_class": "none",
"space_inner_after_class": "none",
"bodytext": "© copyright Project {{ \"now\"|date(\"Y\") }}"
}
}
],
"sociallinks": {
"channels": {
"facebook": {
"label": "Facebook",
"url": "#"
},
"instagram": {
"label": "Instagram",
"url": "#"
},
"youtube": {
"label": "Youtube",
"url": "#"
}
}
}
}
}
// mobile
@include media-breakpoint-down(md) {
.navbar-mainnavigation {
.dropdown {
.nav-mobile-toggle {
color: white;
border: none;
display: inline-block;
height: 29px;
width: 29px;
padding: 0;
position: relative;
&::before,
&::after {
@include position(absolute, 45% null null 20%);
content: "";
background: $white;
height: 3px;
width: 60%;
}
&::after {
transform: rotate(90deg);
transition: $transition-base;
}
}
&.show {
.nav-mobile-toggle::after {
transform: rotate(0);
}
}
}
.dropdown-menu {
border: none;
margin: 0;
padding-left: 1rem;
width: 100%;
.dropdown-item {
color: $white;
}
}
}
}
// Desktop
@include media-breakpoint-up(lg) {
.dropdown-hover {
.dropdown-menu {
display: block;
opacity: 0;
pointer-events: none;
left: 50%;
transform: scale(0) translateX(-50%);
transform-origin: top left;
transition: $transition-base;
margin-top: 10px;
min-width: 280px;
padding: 0;
border: none;
border-radius: 0;
box-shadow: $box-shadow;
&::before {
@include position(absolute, 0 null null 50%);
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 7px 8px 7px;
border-color: transparent transparent $white transparent;
transform: translate(-50%, -100%);
}
&::after {
@include position(absolute, 0 0 null);
content: "";
height: 10px;
transform: translateY(-100%);
}
}
@include hover-focus {
.dropdown-menu {
opacity: 1;
pointer-events: unset;
transform: scale(1) translateX(-50%);
}
}
}
.navbar-mainnavigation .dropdown-item {
border-bottom: 1px solid $gray-100;
color: $gray-600;
font-size: 18px;
padding: 14px 30px;
letter-spacing: 1.8px;
@include hover-focus {
background: none;
color: $orange;
}
&.active, &:active {
background: none;
color: $orange;
}
&::last-child {
border-bottom: none;
}
}
}
// Style
$sticky-shadow: .1rem .1rem 1rem 0 rgba($black, .2);
.page-header {
background-color: $green;
background: $hsg-gradient;
transition: $transition-base;
.row {
width: 100vw;
}
.navbar-brand {
display: flex;
align-items: center;
height: 100%;
margin: 0;
&-logo-normal {
border-radius: 50%;
background: $white;
box-shadow: $box-shadow;
padding: 4px;
}
}
// mobile
@include media-breakpoint-down(md) {
box-shadow: $sticky-shadow;
position: sticky;
top: 0;
z-index: 1000;
.navbar-brand {
padding: $grid-gutter-width/2 $grid-gutter-width;
&-logo-normal {
height: 70px;
width: 70px;
}
}
.navbar-toggler-wrap {
align-items: center;
display: flex;
padding: 0 30px;
justify-content: flex-end;
}
.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
width: 30px;
}
.navbar-toggler {
color: $white;
}
}
// desktop
@include media-breakpoint-up(lg) {
&.sticky {
@include position(fixed, 0 0 null);
box-shadow: $sticky-shadow;
z-index: 1000;
.navbar-brand-logo-normal {
transform: scale(.7);
}
#mainnavigation {
.nav-top {
display: none;
}
.nav-bottom {
border-top: none;
}
}
}
.navbar-brand {
justify-content: center;
&-logo-normal {
position: absolute;
transition: transform .3s ease-in-out;
}
}
.navigations-wrap {
border-left: 1px solid rgba($white, .1);
}
}
}
@include media-breakpoint-down(md) {
body {
padding-top: 0 !important;
}
}
#mainnavigation {
align-items: unset;
flex-direction: column;
text-transform: uppercase;
>div {
display: flex;
}
.nav-top {
>.nav {
margin: 0 $grid-gutter-width;
}
.nav-link {
@include Rift-Regular;
color: $white;
opacity: .5;
letter-spacing: 1.6px;
transition: $transition-fade;
@include hover-focus {
opacity: 1;
}
}
}
.nav-bottom {
.nav {
height: fit-content;
@include Rift-Bold;
font-size: 22px;
letter-spacing: 2.2px;
}
.nav-link {
display: inline-block;
}
}
// mobile
@include media-breakpoint-down(md) {
background-color: $green;
background: $hsg-gradient;
display: flex;
height: calc(100vh - 100px);
position: absolute;
overflow: auto;
width: 100%;
z-index: 100;
&:not(.show) {
display: none;
}
.nav-top {
flex-direction: column;
#header-infopoint {
display: none;
}
#header-socialmedia {
margin: $grid-gutter-width;
}
}
.nav-bottom {
flex-direction: column;
margin-left: $grid-gutter-width;
order: -1;
.nav {
flex-direction: column;
.nav-link {
color: white;
}
}
}
}
// Desktop
@include media-breakpoint-up(lg) {
.nav-mobile-toggle {
display: none;
}
>div {
justify-content: space-between;
}
.nav-top {
align-items: center;
height: 50px;
}
.nav-bottom {
align-items: center;
border-top: 1px solid rgba($white, .1);
height: 100px;
.nav {
align-items: center;
@include hover-focus {
.nav-item .nav-link {
// fading out the other menu items
color: rgba($white, .5);
&-icon {
opacity: .5;
}
}
}
.nav-item {
position: relative;
&::after {
content: "";
@include position(absolute, null 1rem 0);
height: 3px;
background: $orange-gradient;
opacity: 0;
transition: $transition-fade;
}
&.active::after {
opacity: .8;
}
@include hover-focus {
&::after {
opacity: 1;
}
}
@include plain-hover-focus {
.nav-link {
color: white;
transition: $transition-base;
&-icon {
opacity: 1;
transition: $transition-base;
}
}
}
}
&:first-child {
margin-left: $grid-gutter-width;
}
&:last-child {
align-items: center;
height: 100%;
color: $white;
background-color: $orange;
padding: 0 $grid-gutter-width;
.nav-item::after {
display: none;
}
}
}
}
}
// smaller desktop version
@include media-breakpoint-between(lg, lg) {
.nav-top {
>.nav {
margin: 0 $grid-gutter-width/2;
.nav-link {
@include padding(null 10px);
}
}
}
.nav-bottom {
.nav {
font-size: 20px;
letter-spacing: 2px;
.nav-link {
@include padding(null 10px);
}
&:first-child {
margin-left: $grid-gutter-width/2;
}
&:last-child {
padding: 0 $grid-gutter-width/2;
}
}
}
}
}
let pageHeader = document.querySelector(".page-header");
if (pageHeader) {
let pageHeaderHeight = pageHeader.offsetHeight + "px",
offsetTopMenu = 50; //pageHeader.querySelector(".nav-bottom").offsetTop
// what should we do when scrolling occurs
let runOnScroll = () => {
if (window.scrollY >= offsetTopMenu) {
document.body.style.paddingTop = pageHeaderHeight;
pageHeader.classList.add("sticky");
} else {
document.body.style.paddingTop = null;
pageHeader.classList.remove("sticky");
}
};
window.addEventListener("scroll", runOnScroll, { passive: true });
}
No notes defined.