mirror of
https://github.com/Kugelschieber/schnittfest.git
synced 2026-01-18 10:20:27 +00:00
A lot of work.
This commit is contained in:
@@ -30,121 +30,153 @@
|
||||
|
||||
<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">
|
||||
<body class="bg-beige-to-black">
|
||||
<nav class="header bg-beige-to-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>
|
||||
<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>Kontakt</li>
|
||||
<li class="scrollToFooter">Kontakt</li>
|
||||
</ul>
|
||||
<ul class="show-sm">
|
||||
<ul class="show-sm black-to-beige">
|
||||
<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>
|
||||
<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="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>
|
||||
<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 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 id="hero" class="hero" data-aos="fade-in" data-aos-delay="200">
|
||||
<video src="/static/hero.mp4" autoplay loop muted />
|
||||
</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">
|
||||
<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">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 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">Kurz-Porträtfilm über die Holztechniker im Fachbereich Architektur und Innenarchitektur in Detmold.</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/8Q8Yb7QhUIA" 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 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 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 ab 700€ pro Tag. Weitere Details entnehmen Sie bitte der <a href="static/Schnittfest_Rental_Preisliste.pdf">Preisliste</a>. Es gelten die <a href="/agb">allgemeinen Geschäftsbedinungen</a>.
|
||||
</p>
|
||||
<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">
|
||||
@@ -193,7 +225,38 @@
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li>© 2020 Schnittfest GmbH</li>
|
||||
<li>
|
||||
<a href="tel:+49017693124984">+49 176 93124984</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:hi@schnitffest.gmbh">hi@schnittfest.gmbh</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://instagram.com/schnittfest.gmbh">Instagram</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/https://vimeo.com/schnittfest">Vimeo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/agb">AGB</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/impressum">Impressum</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<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>
|
||||
@@ -201,7 +264,7 @@
|
||||
<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/color.js"></script>
|
||||
<script type="text/javascript" src="js/parts.js"></script>
|
||||
<script type="text/javascript" src="js/instafeed.min.js"></script>
|
||||
|
||||
@@ -238,6 +301,7 @@
|
||||
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) {
|
||||
@@ -263,6 +327,7 @@
|
||||
addScrollTo(scrollToService, "service");
|
||||
addScrollTo(scrollToWork, "work");
|
||||
addScrollTo(scrollToRental, "rental");
|
||||
addScrollTo(scrollToFooter, "footer");
|
||||
|
||||
// click on logo navigation
|
||||
let homeLink = document.getElementById("homeLink");
|
||||
|
||||
Reference in New Issue
Block a user