{{ "<!-- HEADER -->" | safeHTML }}
<header>
    <!-- infotext for desktop -->
    {{ partial "functions/infotext.html" (dict "context" . "class" "desktop") }}
    <div class="header-content">
        <div class="header-content-inner">
            <div class="logo">
                <img src="/img/logo.svg" alt="{{ .Site.Params.static.slogan_1 }}, {{ .Site.Params.static.slogan_2 }}" />
                <h1 id="start">
                    <span class="logo-blue">{{ .Site.Params.static.slogan_1 }}</span>
                    <span class="logo-green">{{ .Site.Params.static.slogan_2 }}</span>
                </h1>
            </div>

            <!-- infotext for mobile -->
            {{ partial "functions/infotext.html" (dict "context" . "class" "mobile") }}

            <hr />
            <p>{{ i18n "start_subtitle1" | markdownify }}
            <br /><br />
            {{ i18n "start_subtitle2" | markdownify }}
            <br /><br />
            {{ i18n "start_subtitle3" | markdownify }}</p>
            <div class="arrow-bounce">
              <a class="fa fa-chevron-down fa-3x hiddenlink page-scroll" href="#about" title="{{ i18n "navigation_links_about" }}"></a>
            </div>
        </div>
    </div>
</header>