{% extends "st_base.html" %}
{% load static %}

{% load st_extratags %}

{% block javascript %}
// Modal Image Gallery


// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
    var navbar = document.getElementById("myNavbar");
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " st-br";
    } else {
        navbar.className = navbar.className.replace(" w3-card w3-animate-top st-br", "");
    }
}

// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}


{% endblock %}

{% block style %}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  top:0px;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url("{% static 'img/ext_biene.jpg'%}");
  min-height: 100%;
}


{% endblock %}

{% block content %}

<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container" id="top">
  <div class="w3-display-middle" style="white-space:nowrap;">
     <img src="{% static 'img/logo2.png' %}" style="width:100%" alt="Logo"><br>
    <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">SINNES TAU</span>
  </div>
</div>

<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
  <h3 class="w3-center">Tanja Sünkel</h3>
  <p class="w3-center">Hey ihr Lieben, ich bastel gerade an einer neuen Homepage, Ihr könnt mich über info@sinnes-tau.de erreichen. Bis bald</p>
 
</div>


 <!-- Termine -->
  

        {% include "termine_schnipp.html" %}



<!-- Container (Contact Section) -->
<div class="w3-content w3-container w3-padding-64" id="contact">
  <h3 class="w3-center">Hier finden Sie Sinnes-Tau</h3>
  <p class="w3-center"><em>Haben Sie Fragen, Wünsche oder Anregungen, dann freue ich mich auf eine Nachricht.</em></p>

  <div class="w3-row w3-padding-32 w3-section">
    <div class="w3-col m4 w3-container">
	<iframe class="stframe" src="https://www.openstreetmap.org/export/embed.html?bbox=11.3%2C50.1%2C11.4%2C50.3&amp;layer=mapnik&marker=50.230407%2C11.358549"></iframe>
       <br/><small><a href="https://www.openstreetmap.org/?mlat=50.2304078&amp;mlon=11.358549#map=15/50.2304/11.35845">Größere Karte anzeigen</a></small>
      
    
    </div>
    <div class="w3-col m8 w3-panel">
      <div class="w3-large w3-margin-bottom">
        <i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Vogtendorf 3, 96317
Kronach<br>
        <i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> Email: info@sinnes-tau.de<br>
      </div>
      <p>Komme auf eine Tasse <i class="fa fa-coffee"></i> vorbei, oder hinterlasse mir eine Nachricht:</p>

      {% if form %}
        {% include "kontaktformular.html" %}
      {% endif %}
    
    </div>
  </div>
</div>
{% endblock %}