<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="c366" 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="c245" 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="c161" 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="c62" 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-892">
<form enctype="multipart/form-data" method="post" novalidate="novalidate" id="contactform-892">
<div class="form-row row">
<div class="col-12">
<fieldset id="contactform-892-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="input616">
Email * </label>
<input class="form-control" id="input616" 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-892][__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="c833" 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>
{% import '@macro-render' as render %}
<footer id="page-footer" class="bp-page-footer">
{% if pagelayout != 'simple' %}
<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">
{{ render.frames(footer_content.left) }}
</div>
<div class="section-column footer-section-content-column footer-section-content-column-middle">
{{ render.frames(footer_content.center) }}
</div>
<div class="section-column footer-section-content-column footer-section-content-column-right">
{{ render.frames(footer_content.right) }}
</div>
</div>
</div>
</section>
{% endif %}
{% if footer_content.newsletter %}
{{ render.frames(footer_content.newsletter) }}
{% endif %}
{% include '@page-component-footer-variant-' ~ footerVariant %}
</footer>
{
"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": "#"
}
}
}
}
}
// Variables
$link-color-footer: $white;
// Style
.footer-section {
a:not(.btn):not(.cc-btn) {
color: rgba($link-color-footer, .5);
transition: $transition-base;
@include hover-focus {
color: $link-color-footer;
}
}
}
.page-footer {
&>.section {
@include padding($grid-gutter-width*2 null);
}
.footer-section-main {
@include padding($grid-gutter-width*4 null);
background: $primary;
color: $white;
position: relative;
a {
color: $white;
}
&:after {
content: '';
@include position(absolute, 0);
display: block;
z-index: 1;
opacity: .08;
background-image: url(../img/field.jpg);
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
filter: grayscale(100%);
}
.section {
position: relative;
z-index: 2;
}
}
}
.footer-section {
&-brand-socialmedia {
.logo {
img {
background: $white;
border-radius: 50%;
padding: 4px;
}
}
.slogan {
@include Rift-Regular;
font-size: $h3-font-size;
margin-top: 1rem;
letter-spacing: 1.8px;
}
.sociallinks {
padding: 1rem 0;
.sociallinks-link-icon {
transition: $transition-fade;
@include hover-focus {
opacity: 1;
}
}
.sociallinks-item {
@include margin(null $grid-gutter-width/2);
}
}
}
&-content {
background-color: transparent;
text-align: center;
.element-header {
a {
color: $link-color-footer !important;
font-weight: bold;
@include hover-focus {
text-decoration: none;
}
}
}
.nav {
flex-direction: column;
.nav-link {
padding: 5px 0;
}
}
}
&-meta {
background-color: transparent;
text-align: center;
a {
color: $white;
@include hover-focus {
text-decoration: none;
}
}
.meta-menu li {
padding: 0 $grid-gutter-width/2;
}
.footer-copyright {
@include Rift-Regular;
color: rgba($link-color-footer, .5);
letter-spacing: .8px;
padding: 2rem 0;
@include media-breakpoint-down(md) {
padding: 2rem;
}
}
}
.hbl-wrap {
display: inline-flex;
margin-top: 30px;
justify-content: center;
}
}
No notes defined.