Started moving stuff to Shifu.

This commit is contained in:
2024-06-01 15:29:49 +02:00
parent 3388a32880
commit 99c9b43377
66 changed files with 52 additions and 2332 deletions
+354
View File
@@ -0,0 +1,354 @@
<!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">Imagefilm</h2>
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Schüco Stories auf den schwedischen Inseln in der Nähe von Stockholm. Bei diesem Bauprojekt wurde das komplette vorhaben von der Entstehung bis zum fertigen Objekt filmisch begleitet.</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/6z9AUO9lqBs" 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">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">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>