hippie/source/pages/demo/elements.njk

<!-- page-elements.njk -->
{% set pageId = "elements" %}
{% set pageClass = "" %}

{% extends "hippie/demo-extended.njk" %}

{% block title %}Elements{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}

{% block body_content %}
<div class="temp__layer">
  <!-- <div class="exp_overlay_btn exp_help_btn">
  <span class="span__solo">?</span>
</div> -->
{% include "hippie/partials/nav-page-meta.njk" %}
</div>
<div id="begin" class="">
  <article>
    <header>
      <h1>Bereiche</h1>
      <p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
      <nav>
        <p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
      </nav>
    </header>
    <section>
      <p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
      <p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
      <p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br>Folgende Bereiche sind vorgegeben:</p>
    </section>
    <div class="overflow">
      <aside class="left">
        <p>Ein Bereich, der seitlich zum hauptsächlichen Inhalt verläuft, wird mit <code>&lt;aside&gt;</code> markiert.</p>
      </aside>
      <section class="bside">
        <header>
          <p>Um einleitenden Inhalt festzuhalten, wird das <code>&lt;header&gt;</code> Element eingesetzt. Es beinhaltet häufig auch Navigationselemente. Dabei bezieht es sich auf den nächsten, umgebenden Abschnitt.</p>
          <nav>
            <p>Das Element <code>&lt;nav&gt;</code> umfasst Elemente, die zur Navigation innerhalb des Dokumentes dienen.</p>
          </nav>
        </header>
        <footer>
          <p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
        </footer>
      </section>
    </div>
    <footer>
      <p>Auch abschließender Inhalt kann für einen Abschnitt definiert werden. Dazu wird <code>&lt;footer&gt;</code> eingesetzt.</p>
    </footer>
  </article>
</div>
{% include "hippie/partials/footer.njk" %}
{% endblock %}

{% block script %}
{{ super() }}
<script src="../vendor/jq-sticky-anything.min.js" type="text/javascript"></script>
<script src="../js/all.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
  console.log('HIPPIE');

});
</script>
{% endblock %}