102 lines
No EOL
3.5 KiB
HTML
102 lines
No EOL
3.5 KiB
HTML
<!-- 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> |