<!--
@int:
place directly after <body>, has to be the first focusable element
update translation for aria-label and link title if we have additional languages
-->
<nav class="c-menu-skip" aria-label="Sprunglink-Navigation">
<ul class="c-menu-skip__list" role="menu">
<li class="c-menu-skip__item" role="menuitem">
<a href="#main-menu" class="c-menu-skip__link u-typo:xl">Direkt zur Hauptnavigation</a>
</li>
<li class="c-menu-skip__item" role="menuitem">
<a href="#main-content" class="c-menu-skip__link u-typo:xl">Direkt zum Hauptinhalt</a>
</li>
</ul>
</nav>
<!-- APP Container (mainly to separate "page" from "off canvas" div) -->
<div class="c-app">
<!-- Header -->
<header class="c-header u-color-bg:g1 o-space-b:small">
<div class="c-header__row c-header__row--top u-color-bg:primary u-color-c:white">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12">
</div>
</div>
</div>
</div>
<div class="c-header__row c-header__row--center">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:2">
<div class="c-logo u-typo:xl">
<a href="/components/preview/homepage" class="c-logo__link">
<img class="c-logo__image" src="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/logo.svg" alt="image alt text" title="image title" role="img">
</a>
</div>
</div>
<div class="o-grid__col:10">
<div class="c-site-header">
<a href="/" class="c-site-header__link">
<span class="u-typo:xl">Freie Grundschule Pfefferwerk</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="c-header__row c-header__row--bottom">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12">
<!--
@int:
update translation for aria-label if we have additional languages
-->
<nav id="main-menu" class="c-menu-main u-typo:l" aria-label="Haupt-Navigation">
<ul class="c-menu-main__list" role="menu">
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link" aria-current="true">Schule</a>
</li>
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link">Konzept</a>
</li>
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link">Team</a>
</li>
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link">Träger</a>
</li>
<li class="c-menu-main__item" role="menuitem">
<a href="#" class="c-menu-main__link">Formelles</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<main class="c-main">
<!-- todo: add image -->
<article id="main-content" class="c-main__article">
<!-- main content -->
<div class="o-grid">
<div class="o-grid__row o-grid__row--center">
<div class="o-grid__col:12 o-grid__col:8@md">
<div id="c14" class="c-text o-space-b:default">
<h2 class="c-text__headline u-typo:xl">Page-Title</h2>
<p class="u-typo:l">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<div class="c-text__text">Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed
semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</div>
</div>
</div>
</div>
</div>
<section class="c-section u-color-bg:g1">
<!--
@int:
optional colored class: u-color-bg:g1
section width: "wide" o-grid__col:12, "narrow" o-grid__col:12 o-grid__col:8@md
-->
<div class="c-section__grid o-grid">
<div class="c-section__row o-grid__row o-grid__row--center">
<div class="c-section__col o-grid__col:12 o-grid__col:8@md ">
<div class="c-text-media c-text-media--above o-space-b:default">
<h2 class="c-text-media__headline u-typo:xl">Text Media: image above</h2>
<div class="c-text-media__content">
<div class="c-text-media__image">
<figure class="c-figure">
<div class="c-figure__inner">
<!--
@int:
aspect ratio of images 16:9
-->
<!--
todo: lightbox JS
@int:
lightbox image: set image max-width to 1280px
-->
<a href="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" class="c-figure__link js-lightbox-trigger" title="image title" data-description="Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.">
<picture>
<!--[if IE 9]>
<video style="display: none;"><![endif]-->
<!--
@int:
set image max-width to 950px
-->
<source media="(min-width: 700px)" srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png">
<!--
@int:
set image max-width to 640px
-->
<source media="(min-width: 350px)" srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_640x360.png">
<!--
@int:
set image max-width to 320px
-->
<source srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png">
<!--[if IE 9]></video><![endif]-->
<!--
@int:
set image max-width to 950px
-->
<img src="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" alt="image alt text" title="image title">
</picture>
<div class="c-figure__copyright u-typo:s">Copyright © 2018 Freie Grundschule Pfefferwerk</div>
</a>
</div>
<figcaption class="c-figure__figcaption u-typo:s">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</figcaption>
</figure>
</div>
<div class="c-text-media__text">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit
tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit
tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="c-section ">
<!--
@int:
optional colored class: u-color-bg:g1
section width: "wide" o-grid__col:12, "narrow" o-grid__col:12 o-grid__col:8@md
-->
<div class="c-section__grid o-grid">
<div class="c-section__row o-grid__row o-grid__row--center">
<div class="c-section__col o-grid__col:12 o-grid__col:8@md ">
<div class="c-text-media c-text-media--left o-space-b:default">
<h2 class="c-text-media__headline u-typo:xl">Text Media: image left</h2>
<div class="c-text-media__content">
<div class="c-text-media__image">
<figure class="c-figure">
<div class="c-figure__inner">
<!--
@int:
aspect ratio of images 16:9
-->
<!--
todo: lightbox JS
@int:
lightbox image: set image max-width to 1280px
-->
<a href="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_1280x720.png" class="c-figure__link js-lightbox-trigger" title="image title" data-description="Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.">
<picture>
<!--[if IE 9]>
<video style="display: none;"><![endif]-->
<!--
@int:
set image max-width to 320px
-->
<source srcset="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png">
<!--[if IE 9]></video><![endif]-->
<!--
@int:
set image max-width to 320px
-->
<img src="/typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/images/test-images/img_16x9_320x180.png" alt="image alt text" title="image title">
</picture>
<div class="c-figure__copyright u-typo:s">Copyright © 2018 Freie Grundschule Pfefferwerk</div>
</a>
</div>
<figcaption class="c-figure__figcaption u-typo:s">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</figcaption>
</figure>
</div>
<div class="c-text-media__text">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</p>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit
tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit
tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</article>
</main>
<!-- Footer -->
<footer class="c-footer">
<div class="c-footer__row c-footer__row--top u-color-bg:g1">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12 o-grid__col:6@md">
<nav class="c-menu-meta" aria-label="Footer-Navigation">
<ul class="c-menu-meta__list" role="menu">
<li class="c-menu-meta__item" role="menuitem">
<a href="#" class="c-menu-meta__link">Imprint</a>
</li>
<li class="c-menu-meta__item" role="menuitem">
<a href="#" class="c-menu-meta__link">Contact</a>
</li>
<li class="c-menu-meta__item" role="menuitem">
<a href="#" class="c-menu-meta__link">Privacy</a>
</li>
<li class="c-menu-meta__item" role="menuitem">
<a href="#" class="c-menu-meta__link">Sitemap</a>
</li>
</ul>
</nav>
</div>
<div class="o-grid__col:12 o-grid__col:6@md">
<!--
@int:
link title required due to accessibility
-->
<nav class="c-menu-social" aria-label="Social-Navigation">
<ul class="c-menu-social__list" role="menu">
<li class="c-menu-social__item" role="menuitem">
<a href="#" class="c-menu-social__link" title="besuchen sie uns auf instagram">
<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--instagram" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#instagram"></use>
</svg>
</a>
</li>
<li class="c-menu-social__item" role="menuitem">
<a href="#" class="c-menu-social__link" title="besuchen sie uns auf youtube">
<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--youtube" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#youtube"></use>
</svg>
</a>
</li>
<li class="c-menu-social__item" role="menuitem">
<a href="#" class="c-menu-social__link" title="besuchen sie uns auf twitter">
<svg width="32px" height="32px" viewBox="0 0 32 32" class="o-icons o-icons--twitter" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../typo3conf/ext/fgp_template/Resources/Public/Frontend/_Default/icons/sprite/sprite.svg#twitter"></use>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="c-footer__row c-footer__row--bottom u-color-bg:primary u-color-c:white">
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12">
<p><small>Copyright © 2018 Freie Grundschule Pfefferwerk</small></p>
</div>
</div>
</div>
</div>
</footer>
<div class="c-cookie-disclaimer js-cookie-disclaimer">
<!--
@int:
update cookie disclaimer text if we have additional languages
-->
<div class="o-grid">
<div class="o-grid__row">
<div class="o-grid__col:12">
<div class="c-cookie-disclaimer__inner">
<p class="c-cookie-disclaimer__text">
Wir verwenden Cookies, um die angebotenen Funktionen für Sie zu verbessern und auf Sie zugeschnittene Inhalte bieten zu können. Indem Sie mit der Navigation auf unserer Website fortfahren, erklären Sie sich mit der Verwendung von Cookies einverstanden.
</p>
<button class="c-button c-button--secondary c-cookie-disclaimer__button js-cookie-disclaimer-toggle">
OK
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{{#extend "@one-column"}}
{{#content "mainContent"}}
<!-- main content -->
<div class="o-grid">
<div class="o-grid__row o-grid__row--center">
<div class="o-grid__col:12 o-grid__col:8@md">
{{render '@ce-text' ceTextIntroData merge=true}}
</div>
</div>
</div>
{{#extend "@ce-section" narrow=true color='g1'}}
{{#content "sectionContent"}}
{{render '@ce-text-media--above'}}
{{/content}}
{{/extend}}
{{#extend "@ce-section" narrow=true}}
{{#content "sectionContent"}}
{{render '@ce-text-media--left'}}
{{/content}}
{{/extend}}
{{/content}}
{{/extend}}
{
"headerData": {
"logoData": {
"logoLink": null
},
"menuTopicsData": {
"menuMainItems": [
{
"current": null
}
]
}
},
"menuBreadcrumb": null,
"ceTextIntroData": {
"intro": true,
"title": "Page-Title",
"introText": true
}
}
There are no notes for this item.