mirror of
https://github.com/Kugelschieber/schnittfest.git
synced 2026-01-18 10:20:27 +00:00
Started moving stuff to Shifu.
This commit is contained in:
354
tpl/landing_page.html
Normal file
354
tpl/landing_page.html
Normal 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">⟶</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>
|
||||
Reference in New Issue
Block a user