<div class="backendlayout-special_start layout-default">
<div id="top"></div>
<div class="body-bg">
<header id="page-header" class="bp-page-header navbar navbar-mainnavigation navbar-default navbar-has-image navbar-top header-layout-bootstrap-default">
<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="" />
<img class="navbar-brand-logo-inverted" src="holder.js/150x75?auto=yes&text=Logo&theme=lava" alt="Fractal" height="" width="" />
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#mainnavigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav id="mainnavigation" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" id="nav-item-1" class="nav-link" title="Home">
<span class="nav-link-text">
Home <span class="sr-only">(current)</span>
</span>
</a>
</li>
<li class="nav-item">
<a href="#" id="nav-item-2" class="nav-link" title="Customizings">
<span class="nav-link-text">
Customizings </span>
</a>
</li>
<li class="nav-item">
<a href="#" id="nav-item-3" class="nav-link" title="Features">
<span class="nav-link-text">
Features </span>
</a>
</li>
<li class="nav-item dropdown dropdown-hover">
<a href="#" id="nav-item-4" class="nav-link dropdown-toggle" title="Pages" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Pages </span>
</a>
<ul class="dropdown-menu" aria-labelledby="nav-item-4">
<li>
<a href="#" class="dropdown-item" title="Default">
<span class="dropdown-text">
Default </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="2 Columns">
<span class="dropdown-text">
2 Columns </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="2 Columns 25/75">
<span class="dropdown-text">
2 Columns 25/75 </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="2 Columns 50/50">
<span class="dropdown-text">
2 Columns 50/50 </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="2 Columns, Offset Right">
<span class="dropdown-text">
2 Columns, Offset Right </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="3 Columns">
<span class="dropdown-text">
3 Columns </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Simple">
<span class="dropdown-text">
Simple </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Subnavigation, Left">
<span class="dropdown-text">
Subnavigation, Left </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Subnavigation, Left and 2 Columns">
<span class="dropdown-text">
Subnavigation, Left and 2 Columns </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Subnavigation, Right">
<span class="dropdown-text">
Subnavigation, Right </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Subnavigation, Right and 2 Columns">
<span class="dropdown-text">
Subnavigation, Right and 2 Columns </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Feature">
<span class="dropdown-text">
Feature </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Startpage">
<span class="dropdown-text">
Startpage </span>
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-hover">
<a href="#" id="nav-item-5" class="nav-link dropdown-toggle" title="Content Examples" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-text">
Content Examples </span>
</a>
<ul class="dropdown-menu" aria-labelledby="nav-item-5">
<li>
<a href="#" class="dropdown-item" title="Text">
<span class="dropdown-text">
Text </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Media">
<span class="dropdown-text">
Media </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Interactive">
<span class="dropdown-text">
Interactive </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Form elements">
<span class="dropdown-text">
Form elements </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Menu's">
<span class="dropdown-text">
Menu's </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="Special elements">
<span class="dropdown-text">
Special elements </span>
</a>
</li>
<li>
<a href="#" class="dropdown-item" title="And more...">
<span class="dropdown-text">
And more... </span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<!-- ### Begin: Element text ### -->
<div id="c285" 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>
<!-- ### Begin: Element text ### -->
<div id="c517" 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">
Content Before </div>
</div>
</div>
<!-- ### End: Element text ### -->
<div class="section section-default">
<div class="container">
<div class="section-row">
<div class="section-column section-column-third">
<!-- ### Begin: Element text ### -->
<div id="c502" 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">
Middle 1 </div>
</div>
</div>
<!-- ### End: Element text ### -->
</div>
<div class="section-column section-column-third">
<!-- ### Begin: Element text ### -->
<div id="c828" 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">
Middle 2 </div>
</div>
</div>
<!-- ### End: Element text ### -->
</div>
<div class="section-column section-column-third">
<!-- ### Begin: Element text ### -->
<div id="c421" 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">
Middle 3 </div>
</div>
</div>
<!-- ### End: Element text ### -->
</div>
</div>
</div>
</div>
<div class="section section-light">
<!-- ### Begin: Element text ### -->
<div id="c298" 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">
Normal </div>
</div>
</div>
<!-- ### End: Element text ### -->
</div>
<!-- ### Begin: Element text ### -->
<div id="c135" 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">
Content After </div>
</div>
</div>
<!-- ### End: Element text ### -->
<footer id="page-footer" class="bp-page-footer">
<section class="section footer-section footer-section-content">
<div class="container">
<div class="section-row">
<div class="section-column footer-section-content-column footer-section-content-column-left">
<!-- ### Begin: Element text ### -->
<div id="c640" 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">
Footer: Left </div>
</div>
</div>
<!-- ### End: Element text ### -->
</div>
<div class="section-column footer-section-content-column footer-section-content-column-middle">
<!-- ### Begin: Element text ### -->
<div id="c71" 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">
Footer: Center </div>
</div>
</div>
<!-- ### End: Element text ### -->
</div>
<div class="section-column footer-section-content-column footer-section-content-column-right">
<!-- ### Begin: Element text ### -->
<div id="c587" 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">
Footer: Right </div>
</div>
</div>
<!-- ### End: Element text ### -->
</div>
</div>
</div>
</section>
<!-- ### Begin: Element form_formframework ### -->
<div id="c592" class="frame frame-section footer-section footer-section-newsletter frame-type-form_formframework frame-layout-0 frame-background-dark frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<div class="form-container form-identifier-contactform-760">
<form enctype="multipart/form-data" method="post" novalidate="novalidate" id="contactform-760">
<div class="form-row row">
<div class="col-12">
<fieldset id="contactform-760-fieldset-" class="form-fieldset form-fieldset-">
<div class="form-fieldset-inner">
<legend>Newsletter</legend>
<div class="form-element form-element-type-text form-group">
<div class="input">
<label for="input747">
Email * </label>
<input class="form-control" id="input747" placeholder="Please enter your email" required="true" type="text" />
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-actions">
<nav class="form-navigation">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<span class="btn-group next submit">
<button class="btn btn-primary" type="submit" name="tx_form_formframework[contactform-760][__currentPage]" value="1">
Submit
</button>
</span>
</div>
</div>
</nav>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- ### End: Element form_formframework ### -->
<section class="section footer-section footer-section-meta">
<div class="frame frame-background-none frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<div class="footer-meta">
<ul id="meta_menu" class="meta-menu">
<li>
<a href="#" title="Imprint">
<span>Imprint</span>
</a>
</li>
<li>
<a href="#" title="Privacy">
<span>Privacy</span>
</a>
</li>
</ul>
</div>
<div class="footer-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="footer-copyright">
<!-- ### Begin: Element text ### -->
<div id="c984" class="frame frame-default frame-type-text frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-none frame-space-inner-after-none">
<div class="frame-container">
<div class="frame-inner">
© copyright Project 2021 </div>
</div>
</div>
<!-- ### End: Element text ### -->
</div>
<div class="footer-sociallinks">
<div class="sociallinks">
<ul class="sociallinks-list">
<li class="sociallinks-item sociallinks-item-facebook" title="Facebook">
<a class="sociallinks-link sociallinks-link-facebook" href="#" rel="noopener" target="_blank">
<span class="sociallinks-link-icon bootstrappackageicon bootstrappackageicon-facebook"></span>
<span class="sociallinks-link-label">Facebook</span>
</a>
</li>
<li class="sociallinks-item sociallinks-item-instagram" title="Instagram">
<a class="sociallinks-link sociallinks-link-instagram" href="#" rel="noopener" target="_blank">
<span class="sociallinks-link-icon bootstrappackageicon bootstrappackageicon-instagram"></span>
<span class="sociallinks-link-label">Instagram</span>
</a>
</li>
<li class="sociallinks-item sociallinks-item-youtube" title="Youtube">
<a class="sociallinks-link sociallinks-link-youtube" href="#" rel="noopener" target="_blank">
<span class="sociallinks-link-icon bootstrappackageicon bootstrappackageicon-youtube"></span>
<span class="sociallinks-link-label">Youtube</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</footer>
</div>
</div>
{% extends '@page-layout-default' %}
{% import '@macro-render' as render %}
{% set pagelayout = 'special_start' %}
{% block main %}
{% include '@page-partial-header' %}
{{ render.frames(content_before) }}
<div class="section section-default">
<div class="container">
<div class="section-row">
<div class="section-column section-column-third">
{{ render.frames(middle1) }}
</div>
<div class="section-column section-column-third">
{{ render.frames(middle2) }}
</div>
<div class="section-column section-column-third">
{{ render.frames(middle3) }}
</div>
</div>
</div>
</div>
<div class="section section-light">
{{ render.frames(normal) }}
</div>
{{ render.frames(content_after) }}
{% include '@page-partial-footer' %}
{% endblock %}
{
"siteTitle": "Fractal",
"headerVariant": "bootstrap-default",
"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": "#"
}
}
}
},
"subnav": [
{
"type": "menu-subnavigation",
"context": {
"menu": [
{
"title": "Default",
"link": "/components/preview/page-template-default",
"active": true,
"current": true
},
{
"title": "2 Columns",
"link": "/components/preview/page-template-2columns"
},
{
"title": "2 Columns 25/75",
"link": "/components/preview/page-template-2columns2575"
},
{
"title": "2 Columns 50/50",
"link": "/components/preview/page-template-2columns5050"
},
{
"title": "2 Columns, Offset Right",
"link": "/components/preview/page-template-2columns-offset-right"
},
{
"title": "3 Columns",
"link": "/components/preview/page-template-3columns"
},
{
"title": "Simple",
"link": "/components/preview/page-template-simple"
},
{
"title": "Subnavigation, Left",
"link": "/components/preview/page-template-subnavigation-left"
},
{
"title": "Subnavigation, Left and 2 Columns",
"link": "/components/preview/page-template-subnavigation-left-2columns"
},
{
"title": "Subnavigation, Right",
"link": "/components/preview/page-template-subnavigation-right"
},
{
"title": "Subnavigation, Right and 2 Columns",
"link": "/components/preview/page-template-subnavigation-right-2columns"
},
{
"title": "Feature",
"link": "/components/preview/page-template-feature"
},
{
"title": "Startpage",
"link": "/components/preview/page-template-startpage"
}
]
}
}
],
"content_before": [
{
"type": "text",
"context": {
"bodytext": "Content Before"
}
}
],
"middle1": [
{
"type": "text",
"context": {
"bodytext": "Middle 1"
}
}
],
"middle2": [
{
"type": "text",
"context": {
"bodytext": "Middle 2"
}
}
],
"middle3": [
{
"type": "text",
"context": {
"bodytext": "Middle 3"
}
}
],
"normal": [
{
"type": "text",
"context": {
"bodytext": "Normal"
}
}
],
"content_after": [
{
"type": "text",
"context": {
"bodytext": "Content After"
}
}
]
}
No notes defined.