marvin/schnittfest
1
0
Fork 0
mirror of https://github.com/Kugelschieber/schnittfest.git synced 2026-01-18 10:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

More work.

Browse Source
This commit is contained in:
Daniel Schramm
2020-01-19 15:21:19 +01:00
parent a15c0ce995
commit 8a09e4832b
7 changed files with 330 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
template/landing_page.html
View File

@@ -22,6 +22,7 @@
<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="" />
@@ -30,129 +31,158 @@
<title>Schnittfest</title>
</head>
<body>
<!--<nav class="header bg-black">
<div class="container">
<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>Referenzen</li>
<li>Leistungen</li>
<li>Referenzen</li>
<li>Rental</li>
<li>Kontakt</li>
</ul>
</div>
</nav>-->
</nav>
<section id="start" class="section-start bg-black p-t-l p-b-l">
<div class="container row">
<div class="hero">
<h1>Film, auf den<br>Frame genau.</h1>
<button class="primary">Jetzt buchen</button>
<button class="secondary">Mehr erfahren</button>
</div>
<div class="stripe">
<div class="bg-yellow"></div>
<div class="bg-orange"></div>
<div class="bg-red"></div>
<div class="bg-pink"></div>
<div class="bg-purple"></div>
<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-purple p-t-l p-b-l">
<div class="container row">
<div class="headline col-lg-2">
<h2>Referenzen</h2>
<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;">
<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;">
<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;">
<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;">
<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;">
<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="service" class="section-service bg-black p-t-l p-b-l">
<div class="container row">
<div class="square bg-yellow col-lg-4 col-md-6 col-sm-12 col-xs-12">
<h3>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">
<h3>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-red col-lg-4 col-md-6 col-sm-12 col-xs-12">
<h3>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>
<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="parts">
<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 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>-->
<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 src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="js/parts.js"></script>
<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>