{% extends "index" %}

{% block content %}


{% endblock %}
                                                    
                                                

                                                    
{% extends "index" %}

{% block content %}

<div class="col-12 d-flex justify-content-center">
    <div class="col-12 max-width py-5 px-5">


    </div>
</div>

<!-- CSS -->
<style>
    .max-width {
        max-width: 1440px;
    }
</style>

{% endblock %}

                                                    
                                                

                                                    
:root{
    --color-white: #ffffff;
    --color-black: #303030;
}

.color-white{
    color: var(--color-white);
}

.background-white{
    background-color: var(--color-white);
}

.color-black{
    color: var(--color-black);
}

.background-black{
    background-color: var(--color-black) !important;
}
                                                    
                                                

                                                    
<style>

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Segoe UI Regular';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/segoe-ui-regular.eot'); /* IE9 Compat Modes */
    src: url('/fonts/segoe-ui-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/segoe-ui-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('/fonts/segoe-ui-regular.woff') format('woff'), /* Modern Browsers */
         url('/fonts/segoe-ui-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/fonts/segoe-ui-regular.svg') format('svg'); /* Legacy iOS */
}

.sr{
    font-family: 'Segoe UI Regular';
}

p, a, .p, li{

}

h1, .h1{ 

}

h2, .h2{

}

h3, .h3{

}

h4, .h4{

}

h5, .h5{

}

h6, .h6{

}


@media (max-width: 1440px) {


}

@media (max-width: 1200px) {


}

@media (max-width: 992px) {


}

@media (max-width: 768px) {

}

@media (max-width: 576px) {

}

</style>
                                                    
                                                

                                                    
<!-- Slider template example: -->

<!-- Loop a Section -->
{% set loopSection = craft.entries.section(['"sectionName"']).all() %}

<!-- Loop an Entry -->
{% set loopSection = entry."FieldName".all() %}

<div class="col-12 w-100 splide" id="sectionExample">
    <div class="splide__track col-12">

        <ul class="col-12 splide__list">
            {% for section in loopSection %}
            <!-- Create a Image variable inside the loop -->
            {% set sectionImage = section.image1.one() %}
                <li class="splide__slide">
                    <img src="{{ sectionImage.url }}" class="col-12">
                </li>
            {% endfor %}
        </ul>
        
    </div>
</div>

<script>

const sectionExample = new Splide( '#artists', {
  perPage: 4,
  type   : 'loop',
  perMove: 1,
  paginationDirection: 'ltr',
  arrows: false,
  pagination: false,
  autoplay : true,
  interval : 5000,
  pauseOnHover: false,
  gap: '3rem',
          breakpoints: {
        1400: {

        },
        1200: {

        },
        992: {

        },
        768: {

        },
        576: {

        }
    }
} );

sectionExample.mount();

</script>

<!-- Inside the folder "sliders" that you should create inside the templates folder, create a new twig template and give it whatever name you want. For now we are going to call it "sliderExample.twig". Use the following code to include it into your template: -->

{% include "sliders/sliderExample" %}
                                                    
                                                

                                                    
<!-- Create an Entries field for the navigation and add it to the Header globals section. Add the pages for navigation in the field. -->

<header class="col-12 fixed-top">

    <ul class="d-flex align-items-center flex-wrap lang-switcher mb-0 ps-0 position-relative " style="list-style-type: none;">

    <!-- Language Switcher -->
    {% set currentLanguage = currentSite.language %}

    {# Decide which languages should be omitted from language links #}
    {% set languageExceptions = currentSite.language %}
    {% set otherLocales = craft.app.sites.getAllSites() %}
    {% set otherLocales = craft.app.sites.getAllSites()|without(currentSite.id) %}

        {% for site in otherLocales %}

            {% if entry is defined %}
            {% set localeEntry = craft.entries.id(entry.id).siteId(site.id).one() %} 
            {% endif %}

            {% if entry is defined %}
            
                {# If entry is localized in other language go there #}
                <li>
                    <a href="{{ localeEntry.url }}" class="{% if localeEntry.siteId is defined and localeEntry.siteId != currentSite.id %} color-white {% else %} color-white active-language {% endif %}" aria-label="{{ localeEntry.site.language }}">{{ localeEntry.site.language }}</a>
                </li>         

            {% endif %}

        {% endfor %}
    </ul>

    <!-- Navigation -->
    {% set navigationPages = entry."FieldName".all() %}
    <nav class="col-12">
        <ul class="mb-0 ps-0" style="list-style-type: none;">
            {% for navigationPage in navigationPages %}
                <li>
                    <a href="{{ navigationPage.url }}">{{ navigationPage.title }}</a>
                </li>
            {% endfor %}
        </ul>
    </nav>

</header>
                                                    
                                                

                                                    
<!-- The code should be placed around the section/element that you wish to be cached. -->

{% cache %}

{% endcache %}
                                                    
                                                

                                                    
<!-- MobileDetect Plugin required -->

{% if craft.mobileDetect.isMobile %}

{% else %}

{% endif %}
                                                    
                                                

                                                    
{% set currentLanguage = currentSite.language %}

{% if currentLanguage == "de" %}

{% elseif currentLanguage == "en" %}

{% endif %}
                                                    
                                                

                                                    
<!-- 1.	Method – Create variable. -->

{% set image1 = entry.handle.one %}
{{ image1.url }}

<!-- 2.	Method – Without variable. -->

{{ entry.handle.one().url }}

<!-- 3.	Method – Using the WebP Me Plugin. -->

{{ WebP(entry.handle.one()) }}
{{ WebP(entry.handle.one(), {quality: 95}) }}

<!-- 4.	Method – Using the “IsWebPSupported” function with Image Transform. -->

{% if IsWebPSupported() == "1" %}
   	 {{ entry.handle.one().getUrl('mobileJpeg') }}
{% else %}
 	{{ entry.handle.one().getUrl('mobileWebP') }}
{% endif %}

<!-- Notice: The images can be inserted into the template as follows: -->

<div style=”background-image: url(‘{{ image1.url }}’);”></div>

<!-- Or -->

<img src=”{{ image1.url }}” class=”col-12”>

<!-- Or it can be added using css, but the css has to be inside the template, because if it’s added inside a css template, the twig functions won’t work. -->

<div class=”image1”></div>

<style>

.image1{
    background-image: url(‘{{ image1.url }}’);”
}

</style>

<!-- For Mobile images that are added separately. -->


@media (max-width: 576px) {
    {% if IsWebPSupported() == "1" %}
        .image1{
                background-image: url('{{ entry.image1.one().getUrl('mobileWebP') }}');
        }
    {% else %}
        .image1 {
                background-image: url('{{ entry.image1.one().getUrl('mobileJpeg') }}');
        }
    {% endif %}
}
                                                    
                                                

                                                    
->defaultImageQuality(100)
->extraAllowedFileExtensions(['webmanifest'])
->maxUploadFileSize('167772160')
                                                    
                                                

                                                    
  jQuery(document).ready(function( $ ) { // When jQuery is ready

    var height1 = $(".start-screen").height(); 
    var height = '96';

    let heightF = height1 - height;
  
    function check_from_top_de(){ // Create our function
        var scroll = $(window).scrollTop(); // Check scroll distance
        if (scroll >= heightF ) { // If it is equal or more than 300 - you can change this to what you want
            $(".hamburger-menu").addClass("invert-filter");
            $("header").addClass("background-white");
            $("header").addClass("sticky-header");
            $("header").addClass("shadow");
            $(".header-container").removeClass("py-md-5");
            $(".header-container").removeClass("py-4");
        } else {
            $(".hamburger-menu").removeClass("invert-filter"); // When scrolled to the top, remove the class
            $("header").removeClass("background-white");
            $("header").removeClass("sticky-header");
            $("header").removeClass("shadow");
            $(".header-container").addClass("py-md-5");
            $(".header-container").addClass("py-4");
        }
  }
  
  check_from_top_de(); // On load, run the function
  
  $(window).scroll(function() { // When scroll - run function
    check_from_top_de();
  });
  
});
                                                    
                                                

                                                    
{% set navigation = globals.navigation.all() %}
{% for navigationLinks in navigation %}

    <a href="{{ navigationLinks.url }}" class="{{ navigationLinks.id == entry.id ? 'active' }}">
        {{ navigationLinks.title }}
    </a>

{% endfor %}  
                                                    
                                                

                                                    
© {{ "now"|date('Y') }}
                                                    
                                                

                                                    
{{ craft.formie.renderForm('kontaktForm') }}
                                                    
                                                

                                                    
COLLATE=utf8mb4_general_ci -> COLLATE=utf8_general_ci
CHARSET=utf8mb4 -> CHARSET=utf8
                                                    
                                                

                                                    
Code Snippet
                                                    
                                                

                                                    
    {% if currentUser %}

    {% endif %}