<section class="section footer-section footer-section-content footer-layout-4columns">
<div class="frame-container">
<div class="frame-inner">
<div class="row">
<div class="col-12 col-md-4 col-lg-3 col-xl-2">
<img class="footer-brand-logo-inverted" src="holder.js/150x75?auto=yes&text=Logo&theme=lava" alt="" height="" width="" />
<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>
<div class="col-12 col-md-8 col-lg-9 col-xl-10">
<div class="footer-menu">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link" title="Customizings">
<span>Customizings</span>
</a>
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link" title="Features">
<span>Features</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Pages">
<span>Pages</span>
</a>
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link" title="Default">
<span>Default</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="2 Columns">
<span>2 Columns</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="2 Columns 25/75">
<span>2 Columns 25/75</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="2 Columns 50/50">
<span>2 Columns 50/50</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="2 Columns, Offset Right">
<span>2 Columns, Offset Right</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="3 Columns">
<span>3 Columns</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Simple">
<span>Simple</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Subnavigation, Left">
<span>Subnavigation, Left</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Subnavigation, Left and 2 Columns">
<span>Subnavigation, Left and 2 Columns</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Subnavigation, Right">
<span>Subnavigation, Right</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Subnavigation, Right and 2 Columns">
<span>Subnavigation, Right and 2 Columns</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Feature">
<span>Feature</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Startpage">
<span>Startpage</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Content Examples">
<span>Content Examples</span>
</a>
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link" title="Text">
<span>Text</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Media">
<span>Media</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Audio">
<span>Audio</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Card Group">
<span>Card Group</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Icon Group">
<span>Icon Group</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Gallery">
<span>Gallery</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Text and Images">
<span>Text and Images</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Text and Media">
<span>Text and Media</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="File downloads">
<span>File downloads</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Images">
<span>Images</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="Media">
<span>Media</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" title="External Media">
<span>External Media</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section footer-section footer-section-meta footer-layout-4columns">
<div class="frame-container">
<div class="frame-inner">
<div class="row">
<div class="col-12 col-md-auto mt-auto mb-auto order-2 order-md-0">
<div class="footer-copyright">
<!-- ### Begin: Element text ### -->
<div id="c46" 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>
<div class="col-12 col-md-auto ml-auto mr-auto mr-md-0 d-flex align-items-center flex-column flex-md-row">
<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-sociallinks ml-md-5">
<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>
</div>
</section>
{% import '@macro-render' as render %}
{% import '@macro-img' as img %}
{% set footerVariant = '4columns' %}
<section class="section footer-section footer-section-content footer-layout-{{ footerVariant }}">
<div class="frame-container">
<div class="frame-inner">
<div class="row">
<div class="col-12 col-md-4 col-lg-3 col-xl-2">
{% if logo.inverted %}
{% set logoInvertedSrc = img.src(logo.inverted) %}
<img class="footer-brand-logo-inverted"
src="{{ logoInvertedSrc }}"
alt="{{ logoAlt }}"
height="{{ settings.logo.height }}"
width="{{ settings.logo.width }}" />
{% endif %}
{% if footer.language and theme.language.enable|default(true) %}
<div class="footer-language">
{{ render.frames(footer.language) }}
</div>
{% endif %}
</div>
<div class="col-12 col-md-8 col-lg-9 col-xl-10">
<div class="footer-menu">
{{ render.frames(footer.menu) }}
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section footer-section footer-section-meta footer-layout-{{ footerVariant }}">
<div class="frame-container">
<div class="frame-inner">
<div class="row">
<div class="col-12 col-md-auto mt-auto mb-auto order-2 order-md-0">
{% if footer.copyright and theme.copyright.enable|default(true) %}
<div class="footer-copyright">
{{ render.frames(footer.copyright) }}
</div>
{% endif %}
</div>
<div class="col-12 col-md-auto ml-auto mr-auto mr-md-0 d-flex align-items-center flex-column flex-md-row">
{% if footer.meta and theme.meta.enable|default(true) %}
<div class="footer-meta">
{{ render.frames(footer.meta) }}
</div>
{% endif %}
{% if footer.sociallinks and theme.socialmedia.enable|default(true) %}
<div class="footer-sociallinks ml-md-5">
{% include '@page-component-sociallinks' with footer.sociallinks %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</section>
{
"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": "#"
}
}
},
"menu": [
{
"type": "menu-footer",
"context": {
"menu": [
{
"link": "#",
"title": "Customizings",
"children": [
{
"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"
},
{
"link": "#",
"title": "Media"
},
{
"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"
}
]
}
]
}
}
]
}
}
.footer-layout-4columns {
@include padding(map-get($padding, "small") null);
.footer-brand-logo-inverted {
@include img-fluid();
margin-bottom: $spacer;
}
.language-menu {
display: flex;
flex-direction: column;
}
.footer-menu {
> .nav {
@include media-breakpoint-up(sm) {
column-count: 2;
column-gap: $grid-gutter-width;
}
@include media-breakpoint-up(lg) {
column-count: 3;
}
> li {
@include margin(null #{-$nav-link-padding-x} $spacer);
break-inside: avoid-column;
> a {
font-weight: $font-weight-bold;
}
}
ul a {
font-size: $font-size-sm;
}
}
.nav {
display: block;
}
}
.sociallinks {
overflow: unset;
}
.footer-copyright {
text-align: center;
}
}
No notes defined.