mirror of
https://github.com/Kugelschieber/schnittfest.git
synced 2026-01-18 10:20:27 +00:00
284 lines
15 KiB
HTML
284 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<base href="/" />
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="copyright" content="Schnittfest GmbH" />
|
|
<meta name="author" content="Emvi Software GmbH" />
|
|
<meta name="title" content="" />
|
|
<meta name="description" content="" />
|
|
<meta name="msapplication-TileColor" content="#000000" />
|
|
<meta name="theme-color" content="#000000" />
|
|
<meta name="twitter:card" content="product" />
|
|
<meta name="twitter:site" content="@schnittfest" />
|
|
<meta name="twitter:title" content="" />
|
|
<meta name="twitter:description" content="" />
|
|
<meta name="twitter:image" content="" />
|
|
<meta property="og:url" content="https://schnittfest.gmbh/" />
|
|
<meta property="og:title" content="" />
|
|
<meta property="og:description" content="" />
|
|
<meta property="og:image" content="" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="static/main.css" />
|
|
<link rel="stylesheet" type="text/css" href="static/manrope.css" />
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="" />
|
|
<link rel="mask-icon" href="" color="#000000" />
|
|
|
|
<title>Schnittfest</title>
|
|
</head>
|
|
<body>
|
|
<section id="start" class="section-start">
|
|
<div class="container" data-aos="fade-in">
|
|
<div id="hero" class="hero">
|
|
<video src="/static/hero.mp4" autoplay loop muted />
|
|
</div>
|
|
<div class="stripe">
|
|
<div class="bg-purple"></div>
|
|
<div class="bg-pink"></div>
|
|
<div class="bg-red"></div>
|
|
<div class="bg-orange"></div>
|
|
<div class="bg-yellow"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<nav id="mobileMenu" class="mobile-menu show-sm" style="display:none">
|
|
<ul>
|
|
<li class="scrollToService">Leistungen</li>
|
|
<li class="scrollToWork">Referenzen</li>
|
|
<li class="scrollToRental">Rental</li>
|
|
<li>Kontakt</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<nav class="header bg-black">
|
|
<div class="container" data-aos="fade-in" data-aos-delay="50">
|
|
<img id="homeLink" src="static/wordmark-white.svg" alt="Schnittfest">
|
|
<ul class="hide-sm">
|
|
<li class="scrollToService">Leistungen</li>
|
|
<li class="scrollToWork">Referenzen</li>
|
|
<li class="scrollToRental">Rental</li>
|
|
<li>Kontakt</li>
|
|
</ul>
|
|
<ul class="show-sm">
|
|
<li id="mobileMenuOpen">Menü</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<section id="service" class="section-service bg-black">
|
|
<div class="container">
|
|
<h1 data-aos="fade-in">Film, auf den Frame genau.</h1>
|
|
<div class="squares">
|
|
<div class="row">
|
|
<div class="square bg-red col-lg-4 col-md-6 col-sm-12 col-xs-12" data-aos="fade-in" data-aos-delay="100">
|
|
<h2>Film</h3>
|
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
|
<button class="primary">Jetzt buchen</button>
|
|
</div>
|
|
<div class="square bg-orange col-lg-4 col-md-6 col-sm-12 col-xs-12" data-aos="fade-in" data-aos-delay="200">
|
|
<h2>Animation</h3>
|
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
|
</div>
|
|
<div class="square bg-yellow col-lg-4 col-md-6 col-sm-12 col-xs-12" data-aos="fade-in" data-aos-delay="300">
|
|
<h2>Sound</h3>
|
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="image-1" class="section-image">
|
|
<img src="/static/1.jpeg" alt="Schnittfest" data-aos="fade-in" />
|
|
</section>
|
|
|
|
<section id="work" class="section-work bg-beige">
|
|
<div class="container row reverse start-lg start-md start-sm start-xs">
|
|
<div class="headline col-lg-1 col-md-12 col-sm-12 col-xs-12">
|
|
<h1 data-aos="fade-in">Referenzen</h1>
|
|
</div>
|
|
<div class="videos col-lg-10 col-md-12 col-sm-12 col-xs-12">
|
|
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://www.youtube.com/embed/L4Te_ifGui4" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://www.youtube.com/embed/sFjOfG-5cIE" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://www.youtube.com/embed/ktjlpv6j-Fw" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://www.youtube.com/embed/ji1ux1Y4Y_U" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://www.youtube.com/embed/X-hIy1Yv-Bw" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://www.youtube.com/embed/b8ASQboLCO8" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://www.youtube.com/embed/GBXwL-BdUUU" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://www.youtube.com/embed/8Q8Yb7QhUIA" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="instagram" class="section-instagram bg-black">
|
|
<div class="container">
|
|
<iframe src="//lightwidget.com/widgets/120f6220e1895e639660c488bda317d2.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="rental" class="section-rental bg-beige">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="z-index: 1;">
|
|
<div class="square bg-red" data-aos="fade-in">
|
|
<h2>Rental</h3>
|
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
|
<button class="primary">Jetzt buchen</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
|
|
<div id="parts" class="parts" data-aos="fade-in" data-aos-delay="100">
|
|
<img id="part0" src="static/blank.png" alt="0">
|
|
<img id="part1" src="static/part1.png" alt="1">
|
|
<img id="part2" src="static/part2.png" alt="2">
|
|
<img id="part3" src="static/part3.png" alt="3">
|
|
<img id="part4" src="static/part4.png" alt="4">
|
|
<img id="part5" src="static/part5.png" alt="5">
|
|
<img id="part6" src="static/part6.png" alt="6">
|
|
<img id="part7" src="static/part7.png" alt="7">
|
|
<img id="part8" src="static/part8.png" alt="8">
|
|
<img id="part9" src="static/part9.png" alt="9">
|
|
<img id="part10" src="static/part10.png" alt="10">
|
|
<img id="part11" src="static/part11.png" alt="11">
|
|
<img id="part12" src="static/part12.png" alt="12">
|
|
<img id="part13" src="static/part13.png" alt="13">
|
|
<img id="part14" src="static/part14.png" alt="14">
|
|
<img id="part15" src="static/part15.png" alt="15">
|
|
<img id="part16" src="static/part16.png" alt="16">
|
|
<img id="part17" src="static/part17.png" alt="17">
|
|
<img id="part18-1" src="static/part18.png" alt="18-1">
|
|
<img id="part18-2" src="static/part18.png" alt="18-2">
|
|
<img id="part19-1" src="static/part19.png" alt="19-1">
|
|
<img id="part19-2" src="static/part19.png" alt="19-2">
|
|
<img id="part20" src="static/part20.png" alt="20">
|
|
<img id="part21" src="static/part21.png" alt="21">
|
|
<img id="part22" src="static/part22.png" alt="22">
|
|
<img id="part23" src="static/part23.png" alt="23">
|
|
<img id="part24" src="static/part24.png" alt="24">
|
|
<img id="part25" src="static/part25.png" alt="25">
|
|
<img id="part26" src="static/part26.png" alt="26">
|
|
<img id="part27" src="static/part27.png" alt="27">
|
|
<img id="part28" src="static/part28.png" alt="28">
|
|
<img id="part29-1" src="static/part29.png" alt="29-1">
|
|
<img id="part29-2" src="static/part29.png" alt="29-2">
|
|
<img id="part30" src="static/part30.png" alt="30">
|
|
<img id="part31-1" src="static/part31.png" alt="31-1">
|
|
<img id="part31-2" src="static/part31.png" alt="31-2">
|
|
<img id="part32-1" src="static/part32.png" alt="32-1">
|
|
<img id="part32-2" src="static/part32.png" alt="32-1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style="height: 100vh; display: flex; justify-content: center; align-items: center; font-family: monospace; font-size: 32px; color: white; background-color: black;">Spacer</section>
|
|
|
|
<script type="text/javascript" src="https://player.vimeo.com/api/player.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
|
|
<script type="text/javascript" src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script type="text/javascript" src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
|
|
<script type="text/javascript" src="js/hero.js"></script>
|
|
<script type="text/javascript" src="js/parts.js"></script>
|
|
<script type="text/javascript" src="js/instafeed.min.js"></script>
|
|
|
|
<script>
|
|
AOS.init({
|
|
duration: 1000,
|
|
easing: "cubic-bezier(0.4, 0.0, 0.2, 1)",
|
|
once: true,
|
|
offset: 32
|
|
});
|
|
|
|
// navbar mobile menu
|
|
let mobileMenu = document.getElementById("mobileMenu");
|
|
let mobileMenuOpen = document.getElementById("mobileMenuOpen");
|
|
let mobileMenuClose = document.getElementById("mobileMenuClose");
|
|
|
|
function toggleMobileMenu() {
|
|
let hidden = mobileMenu.style.display;
|
|
|
|
if(hidden) {
|
|
mobileMenu.style.display = "";
|
|
} else {
|
|
mobileMenu.style.display = "none"
|
|
}
|
|
}
|
|
|
|
mobileMenuOpen.addEventListener("click", e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleMobileMenu();
|
|
});
|
|
|
|
// scroll to from navigation
|
|
let scrollToService = document.getElementsByClassName("scrollToService");
|
|
let scrollToWork = document.getElementsByClassName("scrollToWork");
|
|
let scrollToRental = document.getElementsByClassName("scrollToRental");
|
|
|
|
function addScrollTo(nodes, anchor) {
|
|
for (let node of nodes) {
|
|
node.addEventListener("click", () => {
|
|
toggleMobileMenu();
|
|
let section = document.getElementById(anchor);
|
|
|
|
if (window.location.pathname === "/") {
|
|
window.scrollTo({top: section.offsetTop, behavior: "smooth"});
|
|
} else {
|
|
window.location = `/#${anchor}`;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener("click", e => {
|
|
if(!mobileMenu.style.display) {
|
|
mobileMenu.style.display = "none"
|
|
}
|
|
});
|
|
|
|
addScrollTo(scrollToService, "service");
|
|
addScrollTo(scrollToWork, "work");
|
|
addScrollTo(scrollToRental, "rental");
|
|
|
|
// click on logo navigation
|
|
let homeLink = document.getElementById("homeLink");
|
|
|
|
homeLink.addEventListener("click", e => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if(window.location.pathname === "/") {
|
|
window.scrollTo({top: 0, behavior: "smooth"});
|
|
}
|
|
else {
|
|
window.location = "/";
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|