Files
schnittfest/template/landing_page.html

159 lines
8.8 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 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>
<!--<nav class="header bg-black">
<div class="container">
<img src="static/wordmark-white.svg" alt="Schnittfest">
<ul class="hide-sm">
<li>Referenzen</li>
<li>Leistungen</li>
<li>Rental</li>
<li>Kontakt</li>
</ul>
</div>
</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>
</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>
</div>
<div class="videos col-lg-10">
<div style="padding:41.77% 0 0 0;position:relative;">
<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;">
<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;">
<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;">
<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;">
<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>
<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>
</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 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>
</body>
</html>