<!-- Required styles for Material Web -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/totop.css">
<script src="https://kit.fontawesome.com/7de2ddcd5c.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
<a href="#"><img class="logo" src="images/NEO Logo.png"></a>
<div class="header-items" id="header-items">
<a class="header-item" href="#">Über uns</a>
<a class="header-item" href="#">Blog</a>
<div class="header-item dropdown">
<button class="dropbtn">Portfolio
<i class="fas fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Tauschmärkte</a>
<a href="#">Konsumkritischer Stadtrundgang</a>
<a href="#">Workshops</a>
</div>
</div>
</div>
<a href="javascript:void(0);" class="menu-icon" onclick="myFunction()">☰</a>
</header>
<footer class="footer">
<div class="social-media">
<span>
<a href="#"><i href="#" class="fab fa-facebook"></i></a>
<a href="#"><i href="#" class="fab fa-instagram"></i></a>
<a href="#"><i href="#" class="fab fa-twitter"></i></a>
<a href="#"><i href="#" class="fab fa-youtube"></i></a>
<a href="#"><i href="#" class="fab fa-mastodon"></i></a>
<a href="#"><i href="#" class="fab fa-github"></i></a>
<a href="#"><i href="#" class="fab fa-lastfm"></i></a>
<a href="#"><i href="#" class="fab fa-linkedin"></i></a>
<a href="#"><i href="#" class="fas fa-rss-square"></i></a>
<a href="#"><i href="#" class="fas fa-link"></i></a>
</span>
</div>
<div>
<ul class="links">
<li class="link"><a href="#">Über uns</a></li>
<li class="link"><a href="#">Impressum</a></li>
<li class="link"><a href="#">Datenschutz</a></li>
<li class="link"><a href="#">Kontakt</a></li>
<li class="link"><a href="#">Jobs</a></li>
</ul>
</div>
<div class="copyright">
© 2020 <a href="https://nutfactory.org">Nutfactory</a>
</div>
</footer>
<a class="totop hide" id="totop"><i href="#" class="fas fa-chevron-up"></i></a>
<script>
const scrollToTopButton = document.getElementById('totop');
const scrollFunc = () => {
let y = window.scrollY;
if (y > 0) {
scrollToTopButton.className = "totop show";
} else {
scrollToTopButton.className = "totop hide";
}
};
window.addEventListener("scroll", scrollFunc);
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 10);
}
};
scrollToTopButton.onclick = function(e) {
e.preventDefault();
scrollToTop();
}
function myFunction() {
var x = document.getElementById("header-items");
if (x.className === "header-items") {
x.className += " responsive";
} else {
x.className = "header-items";
}
}
</script>
</body>