Files
schnittfest/template/landing_page.html
2021-02-05 15:00:47 +01:00

355 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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="Schnittfest" />
<meta name="description" content="Film, auf den Frame genau." />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" content="#000000" />
<meta name="twitter:card" content="product" />
<meta name="twitter:title" content="Schnittfest" />
<meta name="twitter:description" content="Film, auf den Frame genau." />
<meta name="twitter:image" content="/static/1.jpg" />
<meta property="og:url" content="https://schnittfest.gmbh/" />
<meta property="og:title" content="Schnittfest" />
<meta property="og:description" content="Film, auf den Frame genau." />
<meta property="og:image" content="/static/1.jpg" />
<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="/static/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png" />
<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#000000" />
<link rel="shortcut icon" href="/static/favicon.ico" />
<meta name="apple-mobile-web-app-title" content="Schnittfest" />
<meta name="application-name" content="Schnittfest" />
<meta name="msapplication-TileColor" content="#000000" />
<meta name="theme-color" content="#000000" />
<title>Schnittfest</title>
<script type="text/javascript" src="https://api.pirsch.io/pirsch.js"
id="pirschjs"
data-code="EuFJcPQM1jcj3zZqAiYoW797N9iGUgio"></script>
</head>
<body class="bg-beige-to-black">
<nav class="header bg-beige-to-black">
<div class="container" data-aos="fade-in" data-aos-delay="50">
<div id="homeLink" class="wordmark black-to-beige">Schnittfest</div>
<ul class="links hide-sm black-to-beige">
<li class="scrollToService">Gewerke</li>
<li class="scrollToWork">Referenzen</li>
<li class="scrollToRental">Rental</li>
<li class="scrollToFooter">Kontakt</li>
</ul>
<ul class="show-sm black-to-beige">
<li id="mobileMenuOpen">Menü</li>
</ul>
</div>
</nav>
<nav id="mobileMenu" class="mobile-menu show-sm" style="display:none">
<ul>
<li class="scrollToService">Gewerke</li>
<li class="scrollToWork">Referenzen</li>
<li class="scrollToRental">Rental</li>
<li class="scrollToFooter">Kontakt</li>
</ul>
</nav>
<section id="start" class="section-start">
<div class="container" data-aos="fade-in">
<div class="headline">
<h1 data-aos="fade-in">
Film, auf den Frame genau.
<a href="mailto:hi@schnittfest.gmbh">&#10230;</a>
</h1>
</div>
<div id="hero" class="hero" data-aos="fade-in" data-aos-delay="200">
<video src="/static/hero.mp4" autoplay loop muted playsinline />
</div>
</div>
</section>
<section id="service" class="section-service bg-beige">
<div class="container">
<div class="services row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Film</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="100">sleep.shoot.eat.repeat. </p>
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Animation</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Herausstechen und Welten erschaffen.</p>
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="300">Sound</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="300">Keine Musik wäre wie Butter ohne Brot.</p>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 img" data-aos="fade-in"></div>
</div>
</div>
</section>
<section id="work" class="section-work">
<div class="container">
<div class="video row reverse">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Artwork Film</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Seit 25 Jahren bringt DansArt Tanz und Kultur nach Bielefeld. In vier Tanzstudios und einem eigenen Theater finden regelmäßig Tanzkurse, Ausbildungen für angehende Profitänzer *innen, Festivals, Workshops, Performances und Konzerte statt.</p>
</div>
<div class="col-lg-8 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/AnKUnt_qr0I" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="video row reverse">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Imagefilm</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Neubau, Erweiterung und Renovation das sind die Geschäftsfelder von H.O. Schlüter. Die H.O. Schlüter GmbH arbeitet als Partner zusammen mit Schüco International KG. Der Metallbau Lübz stellt sich in diesem Unternehmensfilm vor.</p>
</div>
<div class="col-lg-8 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/ZlRCoYe9G20" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="video row reverse">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Commercial</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Umbauten von Verbrennern zu Elektrofahrzeugen. ESDI EV Technologies ist eine Firma, die sich auf dem Schwerpunkt Elektroumbauten fokussiert hat. Mit Tesla-Technik, Nissan Leaf oder vielen weiteren baut ESDI EV VW Käfer, Porsche, Mini Cooper und mehr zu Elektrofahrzeugen.</p>
</div>
<div class="col-lg-8 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/nCNS4veOjBY" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="video row reverse">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Commercial</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Bachelor Energiemanagement und industrielle Klimaschutztechnologie - ein Film für den neuen Studiengang an der TH OWL.</p>
</div>
<div class="col-lg-8 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>
</div>
<div class="video row reverse">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Imagefilm</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">GOLDBECK und Schüco, das Fenstersystem AWE80 in der Entwicklung und Produktion in Bielefeld.</p>
</div>
<div class="col-lg-8 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/sFjOfG-5cIE" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="video row reverse">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Porträtfilm</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Digitalisierung im Metallbau - Die berühmt-berüchtigte Industrie 4.0.</p>
</div>
<div class="col-lg-8 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/ktjlpv6j-Fw" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="video row reverse">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Kampagne</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Azubi Recruiting Film für die Berufe Metallbauer, Metalltechnik, Technischer Systemplaner, Büromanagement.</p>
</div>
<div class="col-lg-8 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/ji1ux1Y4Y_U" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="video row reverse">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Eventfilm</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Internationaler Reitsport 140 Reiter aus mehr als 30 Nationen die an den German Friendships auf den Bexterhof in Herford teilnehmen.</p>
</div>
<div class="col-lg-8 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/X-hIy1Yv-Bw" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="video row reverse">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Eventfilm</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">50 führende Familienunternehmen aus ganz Deutschland zum Karrieretag Familienunternehmen in Bielefeld bei Schüco - Miele, Hilti, Haribo und viele mehr.</p>
</div>
<div class="col-lg-8 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/b8ASQboLCO8" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<section id="rental" class="section-rental">
<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" data-aos="fade-in">
<h2 class="black-to-beige">Rental</h2>
<p class="black-to-beige">
Ready to Shoot Set mit ARRI Alexa Mini LF inkl. Zubehör. Weitere Details entnehmen Sie bitte der Preisliste. Es gelten die <a href="/agb" target="_blank">allgemeinen Geschäftsbedinungen</a>.
</p>
<a class="button secondary" href="https://www.dropbox.com/sh/9usqua7kgz3f3vh/AAA7b6Cj9HtiyOJ2oohSrZoFa" target="_blank">Preisliste</a>
<a class="button primary" href="mailto:rental@schnittfest.gmbh">Jetzt buchen</a>
</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 id="instagram" class="section-instagram">
<div class="container">
<script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
<iframe src="https://cdn.lightwidget.com/widgets/ea2fc8dd2d55541dbafdc312dbe28aee.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>
</div>
</section>
{{template "footer.html" .}}
<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="static/js/color.js"></script>
<script type="text/javascript" src="static/js/parts.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");
let scrollToFooter = document.getElementsByClassName("scrollToFooter");
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");
addScrollTo(scrollToFooter, "footer");
// 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>