mirror of
https://github.com/Kugelschieber/schnittfest.git
synced 2026-01-18 10:20:27 +00:00
189 lines
11 KiB
HTML
189 lines
11 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 class="header bg-black">
|
|
<div class="container" data-aos="fade-in" data-aos-delay="50">
|
|
<img src="static/wordmark-white.svg" alt="Schnittfest">
|
|
<ul class="hide-sm">
|
|
<li>Leistungen</li>
|
|
<li>Referenzen</li>
|
|
<li>Rental</li>
|
|
<li>Kontakt</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<section id="service" class="section-service bg-black p-t-l p-b-l">
|
|
<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="work" class="section-work bg-beige p-t-l p-b-l">
|
|
<div class="container row reverse">
|
|
<div class="headline col-lg-1">
|
|
<h1 data-aos="fade-in">Referenzen</h1>
|
|
</div>
|
|
<div class="videos col-lg-10">
|
|
<div style="padding:41.77% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://player.vimeo.com/video/267008499?color=fff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:41.89% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://player.vimeo.com/video/303092992?color=fff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:42.5% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://player.vimeo.com/video/278582802?color=fff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:42.5% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://player.vimeo.com/video/261792174?color=fff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
|
|
</div>
|
|
<div style="padding:37.29% 0 0 0;position:relative;" data-aos="fade-in">
|
|
<iframe src="https://player.vimeo.com/video/208213002?color=fff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="instagram" class="section-instagram bg-black">
|
|
|
|
</section>
|
|
|
|
<section id="rental" class="section-rental bg-beige p-t-l p-b-l">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4" style="z-index: 1;">
|
|
<div class="text 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>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<div 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="js/hero.js"></script>
|
|
<script type="text/javascript" src="js/parts.js"></script>
|
|
<script type="text/javascript" src="instafeed.min.js"></script>
|
|
|
|
<script>
|
|
AOS.init({
|
|
duration: 1000,
|
|
easing: "cubic-bezier(0.4, 0.0, 0.2, 1)",
|
|
once: true,
|
|
offset: 32
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|