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

17
js/hero.js Normal file
View File

@@ -0,0 +1,17 @@
var x = window.screen.width > 512 ? 160 : 80;
var controller = new ScrollMagic.Controller();
var hero = new TweenMax.from("#hero", 1, {
x: this.x,
ease: Power1.easeOut
});
var heroScene = new ScrollMagic.Scene({
triggerElement: "#start",
triggerHook: 0,
duration: 320
})
.setTween(hero)
.addTo(controller);

2
js/instafeed.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

72
js/parts.js
View File

@@ -9,7 +9,7 @@ var part2 = new TweenMax.from("#part2", 1, {
var part2Scene = new ScrollMagic.Scene({ var part2Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
}) })
.setTween(part2) .setTween(part2)
.addTo(controller); .addTo(controller);
@@ -21,7 +21,7 @@ var part3 = new TweenMax.from("#part3", 1, {
var part3Scene = new ScrollMagic.Scene({ var part3Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: this.offset offset: this.offset
}) })
.setTween(part3) .setTween(part3)
@@ -36,7 +36,7 @@ var part4 = new TweenMax.from("#part4", 1, {
var part4Scene = new ScrollMagic.Scene({ var part4Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 2*this.offset offset: 2*this.offset
}) })
.setTween(part4) .setTween(part4)
@@ -49,7 +49,7 @@ var part5 = new TweenMax.from("#part5", 1, {
var part5Scene = new ScrollMagic.Scene({ var part5Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250" duration: 250
}) })
.setTween(part5) .setTween(part5)
.addTo(controller); .addTo(controller);
@@ -61,7 +61,7 @@ var part6 = new TweenMax.from("#part6", 1, {
var part6Scene = new ScrollMagic.Scene({ var part6Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 3*this.offset offset: 3*this.offset
}) })
.setTween(part6) .setTween(part6)
@@ -74,7 +74,7 @@ var part7 = new TweenMax.from("#part7", 1, {
var part7Scene = new ScrollMagic.Scene({ var part7Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 4*this.offset offset: 4*this.offset
}) })
.setTween(part7) .setTween(part7)
@@ -89,7 +89,7 @@ var part8 = new TweenMax.from("#part8", 1, {
var part8Scene = new ScrollMagic.Scene({ var part8Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 5*this.offset offset: 5*this.offset
}) })
.setTween(part8) .setTween(part8)
@@ -104,7 +104,7 @@ var part9 = new TweenMax.from("#part9", 1, {
var part9Scene = new ScrollMagic.Scene({ var part9Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 5*this.offset offset: 5*this.offset
}) })
.setTween(part9) .setTween(part9)
@@ -119,7 +119,7 @@ var part10 = new TweenMax.from("#part10", 1, {
var part10Scene = new ScrollMagic.Scene({ var part10Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 6*this.offset offset: 6*this.offset
}) })
.setTween(part10) .setTween(part10)
@@ -134,7 +134,7 @@ var part11 = new TweenMax.from("#part11", 1, {
var part11Scene = new ScrollMagic.Scene({ var part11Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 7*this.offset offset: 7*this.offset
}) })
.setTween(part11) .setTween(part11)
@@ -149,7 +149,7 @@ var part12 = new TweenMax.from("#part12", 1, {
var part12Scene = new ScrollMagic.Scene({ var part12Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 8*this.offset offset: 8*this.offset
}) })
.setTween(part12) .setTween(part12)
@@ -164,7 +164,7 @@ var part13 = new TweenMax.from("#part13", 1, {
var part13Scene = new ScrollMagic.Scene({ var part13Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 9*this.offset offset: 9*this.offset
}) })
.setTween(part13) .setTween(part13)
@@ -179,7 +179,7 @@ var part14 = new TweenMax.from("#part14", 1, {
var part14Scene = new ScrollMagic.Scene({ var part14Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 10*this.offset offset: 10*this.offset
}) })
.setTween(part14) .setTween(part14)
@@ -194,7 +194,7 @@ var part15 = new TweenMax.from("#part15", 1, {
var part15Scene = new ScrollMagic.Scene({ var part15Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 11*this.offset offset: 11*this.offset
}) })
.setTween(part15) .setTween(part15)
@@ -209,7 +209,7 @@ var part16 = new TweenMax.from("#part16", 1, {
var part16Scene = new ScrollMagic.Scene({ var part16Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 12*this.offset offset: 12*this.offset
}) })
.setTween(part16) .setTween(part16)
@@ -224,7 +224,7 @@ var part17 = new TweenMax.from("#part17", 1, {
var part17Scene = new ScrollMagic.Scene({ var part17Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 13*this.offset offset: 13*this.offset
}) })
.setTween(part17) .setTween(part17)
@@ -239,7 +239,7 @@ var part181 = new TweenMax.from("#part18-1", 1, {
var part181Scene = new ScrollMagic.Scene({ var part181Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 14*this.offset offset: 14*this.offset
}) })
.setTween(part181) .setTween(part181)
@@ -254,7 +254,7 @@ var part182 = new TweenMax.from("#part18-2", 1, {
var part182Scene = new ScrollMagic.Scene({ var part182Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 15*this.offset offset: 15*this.offset
}) })
.setTween(part182) .setTween(part182)
@@ -269,7 +269,7 @@ var part191 = new TweenMax.from("#part19-1", 1, {
var part191Scene = new ScrollMagic.Scene({ var part191Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 16*this.offset offset: 16*this.offset
}) })
.setTween(part191) .setTween(part191)
@@ -284,7 +284,7 @@ var part192 = new TweenMax.from("#part19-2", 1, {
var part192Scene = new ScrollMagic.Scene({ var part192Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 18*this.offset offset: 18*this.offset
}) })
.setTween(part192) .setTween(part192)
@@ -299,7 +299,7 @@ var part20 = new TweenMax.from("#part20", 1, {
var part20Scene = new ScrollMagic.Scene({ var part20Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 19*this.offset offset: 19*this.offset
}) })
.setTween(part20) .setTween(part20)
@@ -314,7 +314,7 @@ var part21 = new TweenMax.from("#part21", 1, {
var part21Scene = new ScrollMagic.Scene({ var part21Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 20*this.offset offset: 20*this.offset
}) })
.setTween(part21) .setTween(part21)
@@ -329,7 +329,7 @@ var part22 = new TweenMax.from("#part22", 1, {
var part22Scene = new ScrollMagic.Scene({ var part22Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 21*this.offset offset: 21*this.offset
}) })
.setTween(part22) .setTween(part22)
@@ -344,7 +344,7 @@ var part23 = new TweenMax.from("#part23", 1, {
var part23Scene = new ScrollMagic.Scene({ var part23Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 22*this.offset offset: 22*this.offset
}) })
.setTween(part23) .setTween(part23)
@@ -359,7 +359,7 @@ var part24 = new TweenMax.from("#part24", 1, {
var part24Scene = new ScrollMagic.Scene({ var part24Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 23*this.offset offset: 23*this.offset
}) })
.setTween(part24) .setTween(part24)
@@ -374,7 +374,7 @@ var part25 = new TweenMax.from("#part25", 1, {
var part25Scene = new ScrollMagic.Scene({ var part25Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 24*this.offset offset: 24*this.offset
}) })
.setTween(part25) .setTween(part25)
@@ -389,7 +389,7 @@ var part26 = new TweenMax.from("#part26", 1, {
var part26Scene = new ScrollMagic.Scene({ var part26Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 25*this.offset offset: 25*this.offset
}) })
.setTween(part26) .setTween(part26)
@@ -404,7 +404,7 @@ var part27 = new TweenMax.from("#part27", 1, {
var part27Scene = new ScrollMagic.Scene({ var part27Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 26*this.offset offset: 26*this.offset
}) })
.setTween(part27) .setTween(part27)
@@ -419,7 +419,7 @@ var part28 = new TweenMax.from("#part28", 1, {
var part28Scene = new ScrollMagic.Scene({ var part28Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 33*this.offset offset: 33*this.offset
}) })
.setTween(part28) .setTween(part28)
@@ -434,7 +434,7 @@ var part291 = new TweenMax.from("#part29-1", 1, {
var part291Scene = new ScrollMagic.Scene({ var part291Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 32*this.offset offset: 32*this.offset
}) })
.setTween(part291) .setTween(part291)
@@ -449,7 +449,7 @@ var part292 = new TweenMax.from("#part29-2", 1, {
var part292Scene = new ScrollMagic.Scene({ var part292Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 31*this.offset offset: 31*this.offset
}) })
.setTween(part292) .setTween(part292)
@@ -464,7 +464,7 @@ var part30 = new TweenMax.from("#part30", 1, {
var part30Scene = new ScrollMagic.Scene({ var part30Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 34*this.offset offset: 34*this.offset
}) })
.setTween(part30) .setTween(part30)
@@ -479,7 +479,7 @@ var part311 = new TweenMax.from("#part31-1", 1, {
var part311Scene = new ScrollMagic.Scene({ var part311Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 30*this.offset offset: 30*this.offset
}) })
.setTween(part311) .setTween(part311)
@@ -494,7 +494,7 @@ var part312 = new TweenMax.from("#part31-2", 1, {
var part312Scene = new ScrollMagic.Scene({ var part312Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 29*this.offset offset: 29*this.offset
}) })
.setTween(part312) .setTween(part312)
@@ -509,7 +509,7 @@ var part321 = new TweenMax.from("#part32-1", 1, {
var part321Scene = new ScrollMagic.Scene({ var part321Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 28*this.offset offset: 28*this.offset
}) })
.setTween(part321) .setTween(part321)
@@ -524,7 +524,7 @@ var part322 = new TweenMax.from("#part32-2", 1, {
var part322Scene = new ScrollMagic.Scene({ var part322Scene = new ScrollMagic.Scene({
triggerElement: "#rental", triggerElement: "#rental",
duration: "250", duration: 250,
offset: 27*this.offset offset: 27*this.offset
}) })
.setTween(part322) .setTween(part322)

BIN
static/hero.mp4 Normal file
View File

Binary file not shown.

2
static/main.css
View File

File diff suppressed because one or more lines are too long

219
style/sass/main.scss
View File

@@ -11,6 +11,7 @@ html {
--red: #F5303C; --red: #F5303C;
--pink: #CE2867; --pink: #CE2867;
--purple: #571B47; --purple: #571B47;
--grey: #3d3d3d;
} }
body { body {
@@ -29,19 +30,19 @@ h1, h2, h3 {
} }
h1 { h1 {
font-size: 80px;
}
h2 {
font-size: 64px; font-size: 64px;
} }
h2 {
font-size: 40px;
}
h3 { h3 {
font-size: 48px; font-size: 32px;
} }
p { p {
font-size: 20px; font-size: 18px;
font-weight: 500; font-weight: 500;
line-height: 1.4; line-height: 1.4;
} }
@@ -54,6 +55,15 @@ button {
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
} }
[data-aos="fade-in"] {
opacity: 0;
transition-property: opacity;
&.aos-animate {
opacity: 1;
}
}
.bg { // background .bg { // background
&-white { &-white {
background-color: white; background-color: white;
@@ -83,6 +93,10 @@ button {
background-color: var(--purple); background-color: var(--purple);
} }
&-grey {
background-color: var(--grey);
}
&-black { &-black {
background-color: black; background-color: black;
} }
@@ -103,7 +117,7 @@ button {
} }
.header { .header {
position: fixed; position: sticky;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@@ -127,6 +141,7 @@ button {
text-align: right; text-align: right;
li { li {
display: inline-flex;
margin-left: 64px; margin-left: 64px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
@@ -154,74 +169,57 @@ button {
} }
.section-start { .section-start {
.container {
padding: 0;
overflow: hidden;
}
.hero { .hero {
max-height: 320px; position: relative;
padding-right: 64px; width: 100%;
} max-width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
z-index: 1;
h1 { video {
height: 192px; width: 100%;
max-height: 192px; max-width: 100%;
margin-bottom: 64px;
color: white;
}
button.primary {
color: black;
background-color: var(--yellow);
margin-right: 32px;
&:hover {
background-color: var(--orange);
}
}
button.secondary {
color: var(--beige);
background-color: var(--purple);
&:hover {
background-color: var(--pink);
} }
} }
.stripe { .stripe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 160px;
display: flex; display: flex;
flex-direction: column; z-index: -1;
flex: 1;
div {
height: 64px;
width: 100%;
}
}
}
.section-work { & > div {
h2 { width: 20%;
position: sticky;
top: 256px;
color: white;
writing-mode: vertical-lr;
-webkit-text-orientation: mixed;
text-orientation: mixed
}
.videos > div {
margin-bottom: 64px;
&:last-of-type {
margin: 0;
} }
} }
} }
.section-service { .section-service {
.container {
padding: 0;
}
.square { .square {
padding: 64px; padding: 32px;
} }
h3 { h1 {
color: white;
margin-bottom: 96px;
margin-left: 32px;
}
h2 {
color: white; color: white;
margin-bottom: 32px; margin-bottom: 32px;
} }
@@ -233,13 +231,46 @@ button {
margin-top: 64px; margin-top: 64px;
&:hover { &:hover {
background-color: var(--pink); background-color: black;
}
}
}
.section-work {
h1 {
position: sticky;
top: 256px;
margin-left: 64px;
color: black;
writing-mode: vertical-lr;
-webkit-text-orientation: mixed;
text-orientation: mixed;
}
.videos > div {
margin-bottom: 64px;
&:last-of-type {
margin: 0;
} }
} }
} }
.section-rental { .section-rental {
overflow: hidden; .text {
position: sticky;
top: 256px;
padding: 32px;
h2 {
margin-bottom: 32px;
color: white;
}
p {
color: black;
}
}
.parts { .parts {
position: relative; position: relative;
@@ -249,7 +280,7 @@ button {
img:not(#part0) { img:not(#part0) {
position: absolute; position: absolute;
filter: contrast(1.3) saturate(0.6) sepia(0.1); filter: contrast(1.3) saturate(0.6);
} }
#part0 { #part0 {
@@ -478,3 +509,67 @@ button {
} }
} }
} }
@media only screen and (max-width: 1023px) {
h1 {
font-size: 48px;
}
h2 {
font-size: 32px;
}
.p { // padding
&-t { // top
&-l { // large
padding-top: 128px;
}
}
&-b { // bottom
&-l { // large
padding-bottom: 128px;
}
}
}
}
@media only screen and (max-width: 767px) {
.section-service {
padding-bottom: 0;
}
}
@media only screen and (max-width: 511px) {
h1 {
font-size: 40px;
}
h2 {
font-size: 28px;
}
.p { // padding
&-t { // top
&-l { // large
padding-top: 64px;
}
}
&-b { // bottom
&-l { // large
padding-bottom: 64px;
}
}
}
.section-start {
.stripe {
width: 80px;
}
}
.section-service {
padding-bottom: 0;
}
}

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/main.css" />
<link rel="stylesheet" type="text/css" href="static/manrope.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="apple-touch-icon" sizes="180x180" href="" />
<link rel="icon" type="image/png" sizes="32x32" href="" /> <link rel="icon" type="image/png" sizes="32x32" href="" />
<link rel="icon" type="image/png" sizes="16x16" href="" /> <link rel="icon" type="image/png" sizes="16x16" href="" />
@@ -30,129 +31,158 @@
<title>Schnittfest</title> <title>Schnittfest</title>
</head> </head>
<body> <body>
<!--<nav class="header bg-black"> <section id="start" class="section-start">
<div class="container"> <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"> <img src="static/wordmark-white.svg" alt="Schnittfest">
<ul class="hide-sm"> <ul class="hide-sm">
<li>Referenzen</li>
<li>Leistungen</li> <li>Leistungen</li>
<li>Referenzen</li>
<li>Rental</li> <li>Rental</li>
<li>Kontakt</li> <li>Kontakt</li>
</ul> </ul>
</div> </div>
</nav>--> </nav>
<section id="start" class="section-start bg-black p-t-l p-b-l"> <section id="service" class="section-service bg-black p-t-l p-b-l">
<div class="container row"> <div class="container">
<div class="hero"> <h1 data-aos="fade-in">Film, auf den Frame genau.</h1>
<h1>Film, auf den<br>Frame genau.</h1> <div class="squares">
<button class="primary">Jetzt buchen</button> <div class="row">
<button class="secondary">Mehr erfahren</button> <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">
</div> <h2>Film</h3>
<div class="stripe"> <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 class="bg-yellow"></div> <button class="primary">Jetzt buchen</button>
<div class="bg-orange"></div> </div>
<div class="bg-red"></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">
<div class="bg-pink"></div> <h2>Animation</h3>
<div class="bg-purple"></div> <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>
</div> </div>
</section> </section>
<section id="work" class="section-work bg-purple p-t-l p-b-l"> <section id="work" class="section-work bg-beige p-t-l p-b-l">
<div class="container row"> <div class="container row reverse">
<div class="headline col-lg-2"> <div class="headline col-lg-1">
<h2>Referenzen</h2> <h1 data-aos="fade-in">Referenzen</h1>
</div> </div>
<div class="videos col-lg-10"> <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> <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>
<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> <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>
<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> <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>
<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> <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>
<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> <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> </div>
</div> </div>
</section> </section>
<section id="service" class="section-service bg-black p-t-l p-b-l"> <section id="instagram" class="section-instagram bg-black">
<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>
<section id="rental" class="section-rental bg-beige p-t-l p-b-l"> <section id="rental" class="section-rental bg-beige p-t-l p-b-l">
<div class="container"> <div class="container">
<div class="parts"> <div class="row">
<img id="part0" src="static/blank.png" alt="0"> <div class="col-lg-4" style="z-index: 1;">
<img id="part1" src="static/part1.png" alt="1"> <div class="text bg-red" data-aos="fade-in">
<img id="part2" src="static/part2.png" alt="2"> <h2>Rental</h3>
<img id="part3" src="static/part3.png" alt="3"> <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>
<img id="part4" src="static/part4.png" alt="4"> </div>
<img id="part5" src="static/part5.png" alt="5"> </div>
<img id="part6" src="static/part6.png" alt="6"> <div class="col-lg-8">
<img id="part7" src="static/part7.png" alt="7"> <div class="parts" data-aos="fade-in" data-aos-delay="100">
<img id="part8" src="static/part8.png" alt="8"> <img id="part0" src="static/blank.png" alt="0">
<img id="part9" src="static/part9.png" alt="9"> <img id="part1" src="static/part1.png" alt="1">
<img id="part10" src="static/part10.png" alt="10"> <img id="part2" src="static/part2.png" alt="2">
<img id="part11" src="static/part11.png" alt="11"> <img id="part3" src="static/part3.png" alt="3">
<img id="part12" src="static/part12.png" alt="12"> <img id="part4" src="static/part4.png" alt="4">
<img id="part13" src="static/part13.png" alt="13"> <img id="part5" src="static/part5.png" alt="5">
<img id="part14" src="static/part14.png" alt="14"> <img id="part6" src="static/part6.png" alt="6">
<img id="part15" src="static/part15.png" alt="15"> <img id="part7" src="static/part7.png" alt="7">
<img id="part16" src="static/part16.png" alt="16"> <img id="part8" src="static/part8.png" alt="8">
<img id="part17" src="static/part17.png" alt="17"> <img id="part9" src="static/part9.png" alt="9">
<img id="part18-1" src="static/part18.png" alt="18-1"> <img id="part10" src="static/part10.png" alt="10">
<img id="part18-2" src="static/part18.png" alt="18-2"> <img id="part11" src="static/part11.png" alt="11">
<img id="part19-1" src="static/part19.png" alt="19-1"> <img id="part12" src="static/part12.png" alt="12">
<img id="part19-2" src="static/part19.png" alt="19-2"> <img id="part13" src="static/part13.png" alt="13">
<img id="part20" src="static/part20.png" alt="20"> <img id="part14" src="static/part14.png" alt="14">
<img id="part21" src="static/part21.png" alt="21"> <img id="part15" src="static/part15.png" alt="15">
<img id="part22" src="static/part22.png" alt="22"> <img id="part16" src="static/part16.png" alt="16">
<img id="part23" src="static/part23.png" alt="23"> <img id="part17" src="static/part17.png" alt="17">
<img id="part24" src="static/part24.png" alt="24"> <img id="part18-1" src="static/part18.png" alt="18-1">
<img id="part25" src="static/part25.png" alt="25"> <img id="part18-2" src="static/part18.png" alt="18-2">
<img id="part26" src="static/part26.png" alt="26"> <img id="part19-1" src="static/part19.png" alt="19-1">
<img id="part27" src="static/part27.png" alt="27"> <img id="part19-2" src="static/part19.png" alt="19-2">
<img id="part28" src="static/part28.png" alt="28"> <img id="part20" src="static/part20.png" alt="20">
<img id="part29-1" src="static/part29.png" alt="29-1"> <img id="part21" src="static/part21.png" alt="21">
<img id="part29-2" src="static/part29.png" alt="29-2"> <img id="part22" src="static/part22.png" alt="22">
<img id="part30" src="static/part30.png" alt="30"> <img id="part23" src="static/part23.png" alt="23">
<img id="part31-1" src="static/part31.png" alt="31-1"> <img id="part24" src="static/part24.png" alt="24">
<img id="part31-2" src="static/part31.png" alt="31-2"> <img id="part25" src="static/part25.png" alt="25">
<img id="part32-1" src="static/part32.png" alt="32-1"> <img id="part26" src="static/part26.png" alt="26">
<img id="part32-2" src="static/part32.png" alt="32-1"> <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>
</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> <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 type="text/javascript" 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 type="text/javascript" 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 type="text/javascript" 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 type="text/javascript" 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://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> </body>
</html> </html>