mirror of
https://github.com/Kugelschieber/schnittfest.git
synced 2026-01-18 02:10:27 +00:00
More work.
This commit is contained in:
17
js/hero.js
Normal file
17
js/hero.js
Normal 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
2
js/instafeed.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
72
js/parts.js
72
js/parts.js
@@ -9,7 +9,7 @@ var part2 = new TweenMax.from("#part2", 1, {
|
||||
|
||||
var part2Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
})
|
||||
.setTween(part2)
|
||||
.addTo(controller);
|
||||
@@ -21,7 +21,7 @@ var part3 = new TweenMax.from("#part3", 1, {
|
||||
|
||||
var part3Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: this.offset
|
||||
})
|
||||
.setTween(part3)
|
||||
@@ -36,7 +36,7 @@ var part4 = new TweenMax.from("#part4", 1, {
|
||||
|
||||
var part4Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 2*this.offset
|
||||
})
|
||||
.setTween(part4)
|
||||
@@ -49,7 +49,7 @@ var part5 = new TweenMax.from("#part5", 1, {
|
||||
|
||||
var part5Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250"
|
||||
duration: 250
|
||||
})
|
||||
.setTween(part5)
|
||||
.addTo(controller);
|
||||
@@ -61,7 +61,7 @@ var part6 = new TweenMax.from("#part6", 1, {
|
||||
|
||||
var part6Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 3*this.offset
|
||||
})
|
||||
.setTween(part6)
|
||||
@@ -74,7 +74,7 @@ var part7 = new TweenMax.from("#part7", 1, {
|
||||
|
||||
var part7Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 4*this.offset
|
||||
})
|
||||
.setTween(part7)
|
||||
@@ -89,7 +89,7 @@ var part8 = new TweenMax.from("#part8", 1, {
|
||||
|
||||
var part8Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 5*this.offset
|
||||
})
|
||||
.setTween(part8)
|
||||
@@ -104,7 +104,7 @@ var part9 = new TweenMax.from("#part9", 1, {
|
||||
|
||||
var part9Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 5*this.offset
|
||||
})
|
||||
.setTween(part9)
|
||||
@@ -119,7 +119,7 @@ var part10 = new TweenMax.from("#part10", 1, {
|
||||
|
||||
var part10Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 6*this.offset
|
||||
})
|
||||
.setTween(part10)
|
||||
@@ -134,7 +134,7 @@ var part11 = new TweenMax.from("#part11", 1, {
|
||||
|
||||
var part11Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 7*this.offset
|
||||
})
|
||||
.setTween(part11)
|
||||
@@ -149,7 +149,7 @@ var part12 = new TweenMax.from("#part12", 1, {
|
||||
|
||||
var part12Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 8*this.offset
|
||||
})
|
||||
.setTween(part12)
|
||||
@@ -164,7 +164,7 @@ var part13 = new TweenMax.from("#part13", 1, {
|
||||
|
||||
var part13Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 9*this.offset
|
||||
})
|
||||
.setTween(part13)
|
||||
@@ -179,7 +179,7 @@ var part14 = new TweenMax.from("#part14", 1, {
|
||||
|
||||
var part14Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 10*this.offset
|
||||
})
|
||||
.setTween(part14)
|
||||
@@ -194,7 +194,7 @@ var part15 = new TweenMax.from("#part15", 1, {
|
||||
|
||||
var part15Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 11*this.offset
|
||||
})
|
||||
.setTween(part15)
|
||||
@@ -209,7 +209,7 @@ var part16 = new TweenMax.from("#part16", 1, {
|
||||
|
||||
var part16Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 12*this.offset
|
||||
})
|
||||
.setTween(part16)
|
||||
@@ -224,7 +224,7 @@ var part17 = new TweenMax.from("#part17", 1, {
|
||||
|
||||
var part17Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 13*this.offset
|
||||
})
|
||||
.setTween(part17)
|
||||
@@ -239,7 +239,7 @@ var part181 = new TweenMax.from("#part18-1", 1, {
|
||||
|
||||
var part181Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 14*this.offset
|
||||
})
|
||||
.setTween(part181)
|
||||
@@ -254,7 +254,7 @@ var part182 = new TweenMax.from("#part18-2", 1, {
|
||||
|
||||
var part182Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 15*this.offset
|
||||
})
|
||||
.setTween(part182)
|
||||
@@ -269,7 +269,7 @@ var part191 = new TweenMax.from("#part19-1", 1, {
|
||||
|
||||
var part191Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 16*this.offset
|
||||
})
|
||||
.setTween(part191)
|
||||
@@ -284,7 +284,7 @@ var part192 = new TweenMax.from("#part19-2", 1, {
|
||||
|
||||
var part192Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 18*this.offset
|
||||
})
|
||||
.setTween(part192)
|
||||
@@ -299,7 +299,7 @@ var part20 = new TweenMax.from("#part20", 1, {
|
||||
|
||||
var part20Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 19*this.offset
|
||||
})
|
||||
.setTween(part20)
|
||||
@@ -314,7 +314,7 @@ var part21 = new TweenMax.from("#part21", 1, {
|
||||
|
||||
var part21Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 20*this.offset
|
||||
})
|
||||
.setTween(part21)
|
||||
@@ -329,7 +329,7 @@ var part22 = new TweenMax.from("#part22", 1, {
|
||||
|
||||
var part22Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 21*this.offset
|
||||
})
|
||||
.setTween(part22)
|
||||
@@ -344,7 +344,7 @@ var part23 = new TweenMax.from("#part23", 1, {
|
||||
|
||||
var part23Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 22*this.offset
|
||||
})
|
||||
.setTween(part23)
|
||||
@@ -359,7 +359,7 @@ var part24 = new TweenMax.from("#part24", 1, {
|
||||
|
||||
var part24Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 23*this.offset
|
||||
})
|
||||
.setTween(part24)
|
||||
@@ -374,7 +374,7 @@ var part25 = new TweenMax.from("#part25", 1, {
|
||||
|
||||
var part25Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 24*this.offset
|
||||
})
|
||||
.setTween(part25)
|
||||
@@ -389,7 +389,7 @@ var part26 = new TweenMax.from("#part26", 1, {
|
||||
|
||||
var part26Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 25*this.offset
|
||||
})
|
||||
.setTween(part26)
|
||||
@@ -404,7 +404,7 @@ var part27 = new TweenMax.from("#part27", 1, {
|
||||
|
||||
var part27Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 26*this.offset
|
||||
})
|
||||
.setTween(part27)
|
||||
@@ -419,7 +419,7 @@ var part28 = new TweenMax.from("#part28", 1, {
|
||||
|
||||
var part28Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 33*this.offset
|
||||
})
|
||||
.setTween(part28)
|
||||
@@ -434,7 +434,7 @@ var part291 = new TweenMax.from("#part29-1", 1, {
|
||||
|
||||
var part291Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 32*this.offset
|
||||
})
|
||||
.setTween(part291)
|
||||
@@ -449,7 +449,7 @@ var part292 = new TweenMax.from("#part29-2", 1, {
|
||||
|
||||
var part292Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 31*this.offset
|
||||
})
|
||||
.setTween(part292)
|
||||
@@ -464,7 +464,7 @@ var part30 = new TweenMax.from("#part30", 1, {
|
||||
|
||||
var part30Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 34*this.offset
|
||||
})
|
||||
.setTween(part30)
|
||||
@@ -479,7 +479,7 @@ var part311 = new TweenMax.from("#part31-1", 1, {
|
||||
|
||||
var part311Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 30*this.offset
|
||||
})
|
||||
.setTween(part311)
|
||||
@@ -494,7 +494,7 @@ var part312 = new TweenMax.from("#part31-2", 1, {
|
||||
|
||||
var part312Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 29*this.offset
|
||||
})
|
||||
.setTween(part312)
|
||||
@@ -509,7 +509,7 @@ var part321 = new TweenMax.from("#part32-1", 1, {
|
||||
|
||||
var part321Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 28*this.offset
|
||||
})
|
||||
.setTween(part321)
|
||||
@@ -524,7 +524,7 @@ var part322 = new TweenMax.from("#part32-2", 1, {
|
||||
|
||||
var part322Scene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: "250",
|
||||
duration: 250,
|
||||
offset: 27*this.offset
|
||||
})
|
||||
.setTween(part322)
|
||||
|
||||
BIN
static/hero.mp4
Normal file
BIN
static/hero.mp4
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -11,6 +11,7 @@ html {
|
||||
--red: #F5303C;
|
||||
--pink: #CE2867;
|
||||
--purple: #571B47;
|
||||
--grey: #3d3d3d;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -29,19 +30,19 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 48px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -54,6 +55,15 @@ button {
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
[data-aos="fade-in"] {
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
|
||||
&.aos-animate {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bg { // background
|
||||
&-white {
|
||||
background-color: white;
|
||||
@@ -83,6 +93,10 @@ button {
|
||||
background-color: var(--purple);
|
||||
}
|
||||
|
||||
&-grey {
|
||||
background-color: var(--grey);
|
||||
}
|
||||
|
||||
&-black {
|
||||
background-color: black;
|
||||
}
|
||||
@@ -103,7 +117,7 @@ button {
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -127,6 +141,7 @@ button {
|
||||
text-align: right;
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
margin-left: 64px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
@@ -154,74 +169,57 @@ button {
|
||||
}
|
||||
|
||||
.section-start {
|
||||
.container {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero {
|
||||
max-height: 320px;
|
||||
padding-right: 64px;
|
||||
}
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
h1 {
|
||||
height: 192px;
|
||||
max-height: 192px;
|
||||
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);
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.stripe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
div {
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
z-index: -1;
|
||||
|
||||
.section-work {
|
||||
h2 {
|
||||
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;
|
||||
& > div {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-service {
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.square {
|
||||
padding: 64px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
h1 {
|
||||
color: white;
|
||||
margin-bottom: 96px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
@@ -233,13 +231,46 @@ button {
|
||||
margin-top: 64px;
|
||||
|
||||
&: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 {
|
||||
overflow: hidden;
|
||||
.text {
|
||||
position: sticky;
|
||||
top: 256px;
|
||||
padding: 32px;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
p {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.parts {
|
||||
position: relative;
|
||||
@@ -249,7 +280,7 @@ button {
|
||||
|
||||
img:not(#part0) {
|
||||
position: absolute;
|
||||
filter: contrast(1.3) saturate(0.6) sepia(0.1);
|
||||
filter: contrast(1.3) saturate(0.6);
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user