index.html

---
layout: default
footerlogos: yes

---

<!-- Hero -->
<div class="hero-container fond__blue">
    <div class="hero-pattern">
      <div class="hero-pattern-wrap">
        {% include inline-svg/optimized/stories_header.svg %}
      </div>
   </div>
    <div id="animation-wrapper" class="text-center">
      <h1 class="cta text__white animated-claim">
      {{ site.data.homehero.de.headline }}
      {{ site.data.homehero.de.claims[0] }}<span class="marker"></span>
      </h1>
      <h5 class="highlight highlight-hero cta-sub">
      <a href="/stadtgeschichten" ><span class="highlight-white">Jetzt lesen</span></a>
      </h5>
    </div>
</div>

<!-- Lab Map -->
<div class="jumbotron fond__green map-container" style="padding:0px;">
    <div id="lab-map" class="lab-map-home"></div>
    {% include h4c-map-legend.html %}
</div>

<!-- About -->
<div class="jumbotron fond__blue animated">
  <div class="container text-center text__black">
    <div class="row">
      <div class="col-lg-10 col-lg-offset-1">
        <p>Jede Woche treffen sich in ganz Deutschland Teams zu ihren Projekten für Code for Germany. Sie arbeiten gemeinsam an nützlichen Anwendungen und Visualisierungen rund um offene Daten und digitale Werkzeuge für Bürgerinnen. Diese lokalen Gruppen nennen wir Labs.</p>
        <p>Die Labs bestehen aus Interessierten zu Open Data. Dazu gehören auch Programmiererinnen und Designer. Sie erproben, wie Daten und Software dabei helfen können die Städte und Nachbarschaften zu verbessern. Dazu wird Code für Dienste geschrieben und bestehende Daten so aufbereitet, dass sie von allen genutzt werden können.</p>
        <p>Wo gerade welche Anwendungen und Projekte entstehen, wann das nächste Treffen stattfindet und wie man mitmachen kann, erfährst Du durch einen Klick auf die jeweilige Stadt.</p>
      </div>
    </div>
    <!--
    <div class="row">
      <div class="col-lg-4 highlight">
        <p class="highlight-red" >Use civic tech to make your community better!</p>
      </div>
      <div class="col-lg-4 highlight">
        <p class="highlight-red" >Use civic tech to make your community better!</p>
      </div>
      <div class="col-lg-4 highlight">
        <p class="highlight-red" >Use civic tech to make your community better!</p>
      </div>
    </div>
    -->
  </div>
</div>


<!-- Newsletter -->
{% include newsletter-form.html %}

<script src="js/lib/jquery.cookie.js"></script>
<script src="js/lib/prettyCheckbox.min.js"></script>

<script src="js/Application.js"></script>

{% include leaflet.html %}

<script type="text/javascript">

$(document).ready(function() {
  
  app = new Application();
  
  {% if page.lang == 'en' %}
    {% assign homehero = site.data.homehero.en %}
  {% else %} 
    {% assign homehero = site.data.homehero.de %}
  {% endif %}

  herodata = {
    headline : '{{ homehero.headline }}',
    claims: [{% for claim in homehero.claims %}'{{ claim }}',{% endfor %}]
  }

  app.init(herodata);
  $(":checkbox").prettyCheckbox();

});
</script>