hoernschen/squirrel-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity
This repository has been archived on 2021-02-21. You can view files and clone it, but cannot push or open issues or pull requests.
squirrel-theme/index.html

276 lines
13 KiB
HTML
Raw Permalink Normal View History

Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
<!-- Required styles for Material Web -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
changes
2021-02-17 18:56:58 +00:00
<!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
<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">
changes
2021-02-17 18:56:58 +00:00
<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> -->
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
</head>
<body>
changes
2021-02-17 18:56:58 +00:00
<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>
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
</div>
</div>
</div>
changes
2021-02-17 18:56:58 +00:00
<a href="javascript:void(0);" id="menu-icon" class="menu-icon" onclick="myFunction()">&#9776;</a>
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
</header>
Navigation for mobile
2020-12-13 23:35:01 +00:00
changes
2021-02-17 18:56:58 +00:00
<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.
Navigation for mobile
2020-12-13 23:35:01 +00:00
changes
2021-02-17 18:56:58 +00:00
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>
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
<footer class="footer">
changes
2021-02-17 18:56:58 +00:00
<div class="social-media-footer">
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
<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>
changes
2021-02-17 18:56:58 +00:00
<a href="#"><i href="#" class="fab fa-xing"></i></a>
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
<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>
changes
2021-02-17 18:56:58 +00:00
<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>
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
<script>
const scrollToTopButton = document.getElementById('totop');
changes
2021-02-17 18:56:58 +00:00
const logo = document.getElementById('logo');
const header = document.getElementById("header");
const menuIcon = document.getElementById("menu-icon");
var sticky = header.offsetTop;
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
const scrollFunc = () => {
let y = window.scrollY;
if (y > 0) {
scrollToTopButton.className = "totop show";
changes
2021-02-17 18:56:58 +00:00
logo.className = "small-logo"
menuIcon.classList.add("small-icon")
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
} else {
scrollToTopButton.className = "totop hide";
changes
2021-02-17 18:56:58 +00:00
logo.className = "logo"
menuIcon.classList.remove("small-icon")
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
}
};
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();
}
Navigation for mobile
2020-12-13 23:35:01 +00:00
function myFunction() {
changes
2021-02-17 18:56:58 +00:00
var headerItems = document.getElementById("header-items");
if (headerItems.className === "header-items") {
headerItems.classList.add("responsive")
Navigation for mobile
2020-12-13 23:35:01 +00:00
} else {
changes
2021-02-17 18:56:58 +00:00
headerItems.classList.remove("responsive")
Navigation for mobile
2020-12-13 23:35:01 +00:00
}
}
changes
2021-02-17 18:56:58 +00:00
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 + '%');
});
Header, Footer and ToTop-Button
2020-12-13 21:33:38 +00:00
</script>
</body>
Reference in a new issue Copy permalink