You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
4.8 KiB
119 lines
4.8 KiB
{% load static %}
|
|
{% load st_extratags %}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<title>Sinnes-Tau.de</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="{% static 'css/w3.css' %}">
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|
<link rel="stylesheet" href="{% static 'css/sinnes-tau.css' %}">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
|
|
<link rel="stylesheet" href="{% static 'css/all.css' %}">
|
|
<style>
|
|
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
|
|
body, html {
|
|
height: 100%;
|
|
color: #777;
|
|
line-height: 1.8;
|
|
}
|
|
{% block style %}<!-- Style here -->{% endblock %}
|
|
|
|
</style>
|
|
|
|
<body>
|
|
<!-- Navbar (sit on top) -->
|
|
<div class="w3-top">
|
|
<div class="w3-bar" id="myNavbar">
|
|
<a class="w3-bar-item w3-button st-hover-bl w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
|
|
<i class="fa fa-bars"></i>
|
|
</a>
|
|
<a href="{% url 'index' %}#home" class="w3-bar-item w3-button st-hover-bl">HOME</a>
|
|
<a href="{% url 'index' %}#about" class="w3-bar-item w3-button w3-hide-small st-hover-bl"><i class="fa fa-user"></i> Tanja Sünkel</a>
|
|
<a href="{% url 'index' %}#portfolio" class="w3-bar-item w3-button w3-hide-small st-hover-bl"><i class="fa fa-th"></i> Meine Arbeit</a>
|
|
<a href="{% url 'index' %}#termine" class="w3-bar-item w3-button w3-hide-small st-hover-bl"><i class="fa fa-calendar"></i> Termine</a>
|
|
<a href="{% url 'index' %}#contact" class="w3-bar-item w3-button w3-hide-small st-hover-bl"><i class="fa fa-envelope"></i> Kontakt</a>
|
|
<a href="{% url 'impressum' %}" class="w3-bar-item w3-button w3-hide-small w3-right st-hover-bl" title="Impressum">
|
|
<i class="fa fa-info"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navbar on small screens -->
|
|
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
|
|
<a href="{% url 'index' %}#about" class="w3-bar-item w3-button" onclick="toggleFunction()"> Tanja Sünkel</a>
|
|
<a href="{% url 'index' %}#portfolio" class="w3-bar-item w3-button" onclick="toggleFunction()">Meine Arbeit</a>
|
|
<a href="{% url 'index' %}#termine" class="w3-bar-item w3-button" onclick="toggleFunction()">Termine</a>
|
|
<a href="{% url 'index' %}#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">Kontakt</a>
|
|
<a href="{% url 'impressum' %}" class="w3-bar-item w3-button">Impressum</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% block content %}<!-- Content here -->{% endblock %}
|
|
|
|
|
|
<!-- Footer -->
|
|
<footer class="w3-center st-br w3-padding-64 w3-opacity w3-hover-opacity-off">
|
|
<a href="#home" class="w3-button st-bl"><i class="fa fa-arrow-up w3-margin-right"></i>Nach oben</a>
|
|
<div class="w3-xlarge w3-section">
|
|
<i class="fa fa-facebook-official w3-hover-opacity"></i>
|
|
<i class="fa fa-instagram w3-hover-opacity"></i>
|
|
<i class="fa fa-snapchat w3-hover-opacity"></i>
|
|
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
|
|
<i class="fa fa-twitter w3-hover-opacity"></i>
|
|
<i class="fa fa-linkedin w3-hover-opacity"></i>
|
|
</div>
|
|
<p>Powered by <a href="https://www.kuntner.de" title="W3.CSS" target="_blank" class="w3-hover-text-green">kuntner.de</a></p>
|
|
</footer>
|
|
|
|
|
|
<script>
|
|
{% block javascript %}<!-- Javascript here -->{% endblock %}
|
|
// Modal Image Gallery
|
|
function onClick(element) {
|
|
document.getElementById("img01").src = element.src;
|
|
document.getElementById("modal01").style.display = "block";
|
|
var captionText = document.getElementById("caption");
|
|
captionText.innerHTML = element.alt;
|
|
}
|
|
|
|
// 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", "");
|
|
}
|
|
}
|
|
|
|
document.getElementsByClassName("tablink")[0].click();
|
|
|
|
function openCity(evt, cityName) {
|
|
var i, x, tablinks;
|
|
x = document.getElementsByClassName("honig");
|
|
for (i = 0; i < x.length; i++) {
|
|
x[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tablink");
|
|
for (i = 0; i < x.length; i++) {
|
|
tablinks[i].classList.remove("w3-light-grey");
|
|
}
|
|
document.getElementById(cityName).style.display = "block";
|
|
evt.currentTarget.classList.add("w3-light-grey");
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|