276 lines
No EOL
13 KiB
HTML
276 lines
No EOL
13 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">
|
||
<link rel="stylesheet" href="css/slider.css">
|
||
<link rel="stylesheet" href="css/progressbar.css">
|
||
<link rel="stylesheet" href="Font-Awesome/css/all.min.css">
|
||
<!-- <script src="https://kit.fontawesome.com/7de2ddcd5c.js" crossorigin="anonymous"></script> -->
|
||
</head>
|
||
<body>
|
||
<div class="progress"></div>
|
||
<header class="header" id="header">
|
||
<div class="header-container">
|
||
<a class="home" href="#"><img id="logo" 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>
|
||
</div>
|
||
<a href="javascript:void(0);" id="menu-icon" class="menu-icon" onclick="myFunction()">☰</a>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<div class="section">
|
||
<div class="slider">
|
||
<div class=slide-links>
|
||
<a onclick="scrollToSlide(0)"></a>
|
||
<a onclick="scrollToSlide(1)"></a>
|
||
<a onclick="scrollToSlide(2)"></a>
|
||
</div>
|
||
|
||
<div class="slides">
|
||
|
||
<div class="slide" id="slide-1">
|
||
<img src="images/133200.jpg">
|
||
<span class="slider-navigation-right" onclick="scrollToSlide(1)">
|
||
<i class="fas fa-angle-right"></i>
|
||
</span>
|
||
<span class="slider-navigation-left" onclick="scrollToSlide(2)">
|
||
<i class="fas fa-angle-left"></i>
|
||
</span>
|
||
</div>
|
||
<div class="slide" id="slide-2">
|
||
<img src="images/39612.jpg">
|
||
<span class="slider-navigation-right" onclick="scrollToSlide(2)">
|
||
<i class="fas fa-angle-right"></i>
|
||
</span>
|
||
<span class="slider-navigation-left" onclick="scrollToSlide(0)">
|
||
<i class="fas fa-angle-left"></i>
|
||
</span>
|
||
</div>
|
||
<div class="slide" id="slide-3">
|
||
<img src="images/7046.jpg">
|
||
<span class="slider-navigation-right" onclick="scrollToSlide(0)">
|
||
<i class="fas fa-angle-right"></i>
|
||
</span>
|
||
<span class="slider-navigation-left" onclick="scrollToSlide(1)">
|
||
<i class="fas fa-angle-left"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<div class="videoWrapper">
|
||
<iframe class="video" src="https://kompetenzzentrum-lingen.digital/wp-content/uploads/2020/08/200818-Video-Hof-Langenberg-Kompetenzzentrum-Lingen.mp4?_=5" frameborder="0" allowfullscreen></iframe>
|
||
</div>
|
||
</div>
|
||
<div class="section row">
|
||
<div class="services">
|
||
<div class="service-icon col-4">
|
||
<img src="images/logo_meyer_zu_theenhausen.jpg">
|
||
</div>
|
||
<div class="service-description col-8">
|
||
<div class="title">
|
||
<h1 class="content-title">Onlineshop</h1>
|
||
<div class="divider"></div>
|
||
</div>
|
||
<p>Bewerben Sie Ihre Produkte online und geben Sie Ihren Kunden die Möglichkeit diese zu bestellen.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="team">
|
||
<div class="title">
|
||
<h1 class="content-title">Das Team</h1>
|
||
<div class="divider"></div>
|
||
</div>
|
||
<div class="teammember">
|
||
<img class="avatar" src="images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg" alt="Avatar">
|
||
<h1 class="teammember-title">Julian Hörnschemeyer</h1>
|
||
<p>Entwicklung</p>
|
||
<p>Finanzen</p>
|
||
<div class="social-media">
|
||
<span>
|
||
<a href="https://twitter.com/jhoernschen"><i href="#" class="fab fa-twitter"></i></a>
|
||
<a href="https://chaos.social/@hoernschen"><i href="#" class="fab fa-mastodon"></i></a>
|
||
<a href="https://github.com/hoernschen"><i href="#" class="fab fa-github"></i></a>
|
||
<a href="#"><i href="#" class="fab fa-xing"></i></a>
|
||
<a href="https://www.linkedin.com/in/julian-hörnschemeyer-a9ba64197"><i href="#" class="fab fa-linkedin"></i></a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="teammember">
|
||
<img class="avatar" src="images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg" alt="Avatar">
|
||
<h1 class="teammember-title">Julian Hörnschemeyer</h1>
|
||
<p>Entwicklung</p>
|
||
<p>Finanzen</p>
|
||
<div class="social-media">
|
||
<a href="https://www.linkedin.com/in/julian-hörnschemeyer-a9ba64197"><i href="#" class="fab fa-linkedin"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="teammember">
|
||
<img class="avatar" src="images/5c01d38c-2dd2-4e81-96dd-8087bf0f9d2c.jpeg" alt="Avatar">
|
||
<h1 class="teammember-title">Julian Hörnschemeyer</h1>
|
||
<p>Entwicklung</p>
|
||
<p>Finanzen</p>
|
||
<div class="social-media">
|
||
<a href="https://www.linkedin.com/in/julian-hörnschemeyer-a9ba64197"><i href="#" class="fab fa-linkedin"></i></a>
|
||
</div>
|
||
</div>
|
||
<div><a href="#"> > Weitere Teammitglieder < </a></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="references">
|
||
<div class="title">
|
||
<h1 class="content-title">Unsere Referenzen</h1>
|
||
<div class="divider"></div>
|
||
</div>
|
||
<div class="reference-logos">
|
||
<img class="reference-logo" src="images/logo_gemuesegaertner.png" alt="Die Gemüsegärtner">
|
||
<img class="reference-logo" src="images/logo_meyer_zu_theenhausen.jpg" alt="Meyer zu Theenhausen">
|
||
<img class="reference-logo" src="images/logo_dicke_eiche.png" alt="Dicke Eiche">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="funding">
|
||
<div class="title">
|
||
<h1 class="content-title">Gefördert duch</h1>
|
||
<div class="divider"></div>
|
||
</div>
|
||
<div class="funding-logos">
|
||
<img class="funding-logo" src="images/NBank_logo.png" alt="NBank">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="title">
|
||
<h1 class="content-title">Test</h1>
|
||
<div class="divider"></div>
|
||
</div>
|
||
<p>
|
||
A sticky header is a menu or navigation bar that stays at the top of the page no matter where you scroll. In other words, a “fixed” header. This feature is useful for users because it enables them to easily find their way out of a page no matter where they are. Without easy access to the navigational panel, the user experience can become stressful. Like most things, when a problem is solved well, the problem and solution both go by unnoticed. That’s what we want! Personally, I’ve left websites solely because simple navigation options were not available, and in some cases I’d even rather call the company than deal with their website.
|
||
|
||
In this tutorial we’ll go over how to make a sticky header using HTML and CSS. For advanced animated effects, we’ll add some Javascript at the end. For those who don’t already know, HTML is what sets the structure of the website, CSS gives it color and traits, and Javascript adds animations and behaviors — as explained in W3Schools. In terms of browser compatibility, it looks like everything in this tutorial is compatible with current browsers. A good tip for web development is to test along the way, not just after you’re done adding the coding that you think you need. Otherwise, something could go wrong and it’ll take longer to pinpoint exactly what the problem is. So, take it slow. Now, let’s get to the coding and building!
|
||
A sticky header is a menu or navigation bar that stays at the top of the page no matter where you scroll. In other words, a “fixed” header. This feature is useful for users because it enables them to easily find their way out of a page no matter where they are. Without easy access to the navigational panel, the user experience can become stressful. Like most things, when a problem is solved well, the problem and solution both go by unnoticed. That’s what we want! Personally, I’ve left websites solely because simple navigation options were not available, and in some cases I’d even rather call the company than deal with their website.
|
||
|
||
In this tutorial we’ll go over how to make a sticky header using HTML and CSS. For advanced animated effects, we’ll add some Javascript at the end. For those who don’t already know, HTML is what sets the structure of the website, CSS gives it color and traits, and Javascript adds animations and behaviors — as explained in W3Schools. In terms of browser compatibility, it looks like everything in this tutorial is compatible with current browsers. A good tip for web development is to test along the way, not just after you’re done adding the coding that you think you need. Otherwise, something could go wrong and it’ll take longer to pinpoint exactly what the problem is. So, take it slow. Now, let’s get to the coding and building!
|
||
|
||
</p>
|
||
</div>
|
||
|
||
|
||
<footer class="footer">
|
||
<div class="social-media-footer">
|
||
<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-xing"></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>
|
||
function scrollToSlide(slideNr) {
|
||
const slider = document.querySelector('.slider');
|
||
const slides = slider.querySelector('.slides');
|
||
const width = slider.querySelector('.slide').clientWidth;
|
||
slides.scrollTo({left: slideNr * width, top: 0, behavior:'smooth'});
|
||
}
|
||
</script>
|
||
<script>
|
||
const scrollToTopButton = document.getElementById('totop');
|
||
const logo = document.getElementById('logo');
|
||
const header = document.getElementById("header");
|
||
const menuIcon = document.getElementById("menu-icon");
|
||
var sticky = header.offsetTop;
|
||
const scrollFunc = () => {
|
||
let y = window.scrollY;
|
||
if (y > 0) {
|
||
scrollToTopButton.className = "totop show";
|
||
logo.className = "small-logo"
|
||
menuIcon.classList.add("small-icon")
|
||
} else {
|
||
scrollToTopButton.className = "totop hide";
|
||
logo.className = "logo"
|
||
menuIcon.classList.remove("small-icon")
|
||
}
|
||
};
|
||
|
||
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 headerItems = document.getElementById("header-items");
|
||
if (headerItems.className === "header-items") {
|
||
headerItems.classList.add("responsive")
|
||
} else {
|
||
headerItems.classList.remove("responsive")
|
||
}
|
||
}
|
||
|
||
var h = document.documentElement,
|
||
b = document.body,
|
||
st = 'scrollTop',
|
||
sh = 'scrollHeight',
|
||
progress = document.querySelector('.progress'),
|
||
scroll;
|
||
|
||
document.addEventListener('scroll', function() {
|
||
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
|
||
progress.style.setProperty('--scroll', scroll + '%');
|
||
});
|
||
</script>
|
||
</body> |