More work.

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 Marvin Blum
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

js/hero.js

@@ -2,7 +2,7 @@ var x = window.screen.width > 512 ? 160 : 80;
 
 var controller = new ScrollMagic.Controller();
 
-var hero = new TweenMax.from("#hero", 1, {
+var hero = new TweenMax.to("#hero", 1, {
     x: this.x,
     ease: Power1.easeOut
 });

js/parts.js

@@ -8,7 +8,7 @@ var part2 = new TweenMax.from("#part2", 1, {
 });
 
 var part2Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
 })
 .setTween(part2)
@@ -20,7 +20,7 @@ var part3 = new TweenMax.from("#part3", 1, {
 });
 
 var part3Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: this.offset
 })
@@ -35,7 +35,7 @@ var part4 = new TweenMax.from("#part4", 1, {
 });
 
 var part4Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 2*this.offset
 })
@@ -48,7 +48,7 @@ var part5 = new TweenMax.from("#part5", 1, {
 });
 
 var part5Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250
 })
 .setTween(part5)
@@ -60,7 +60,7 @@ var part6 = new TweenMax.from("#part6", 1, {
 });
 
 var part6Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 3*this.offset
 })
@@ -73,7 +73,7 @@ var part7 = new TweenMax.from("#part7", 1, {
 });
 
 var part7Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 4*this.offset
 })
@@ -88,7 +88,7 @@ var part8 = new TweenMax.from("#part8", 1, {
 });
 
 var part8Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 5*this.offset
 })
@@ -103,7 +103,7 @@ var part9 = new TweenMax.from("#part9", 1, {
 });
 
 var part9Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 5*this.offset
 })
@@ -118,7 +118,7 @@ var part10 = new TweenMax.from("#part10", 1, {
 });
 
 var part10Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 6*this.offset
 })
@@ -133,7 +133,7 @@ var part11 = new TweenMax.from("#part11", 1, {
 });
 
 var part11Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 7*this.offset
 })
@@ -148,7 +148,7 @@ var part12 = new TweenMax.from("#part12", 1, {
 });
 
 var part12Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 8*this.offset
 })
@@ -163,7 +163,7 @@ var part13 = new TweenMax.from("#part13", 1, {
 });
 
 var part13Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 9*this.offset
 })
@@ -178,7 +178,7 @@ var part14 = new TweenMax.from("#part14", 1, {
 });
 
 var part14Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 10*this.offset
 })
@@ -193,7 +193,7 @@ var part15 = new TweenMax.from("#part15", 1, {
 });
 
 var part15Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 11*this.offset
 })
@@ -208,7 +208,7 @@ var part16 = new TweenMax.from("#part16", 1, {
 });
 
 var part16Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 12*this.offset
 })
@@ -223,7 +223,7 @@ var part17 = new TweenMax.from("#part17", 1, {
 });
 
 var part17Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 13*this.offset
 })
@@ -238,7 +238,7 @@ var part181 = new TweenMax.from("#part18-1", 1, {
 });
 
 var part181Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 14*this.offset
 })
@@ -253,7 +253,7 @@ var part182 = new TweenMax.from("#part18-2", 1, {
 });
 
 var part182Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 15*this.offset
 })
@@ -268,7 +268,7 @@ var part191 = new TweenMax.from("#part19-1", 1, {
 });
 
 var part191Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 16*this.offset
 })
@@ -283,7 +283,7 @@ var part192 = new TweenMax.from("#part19-2", 1, {
 });
 
 var part192Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 18*this.offset
 })
@@ -298,7 +298,7 @@ var part20 = new TweenMax.from("#part20", 1, {
 });
 
 var part20Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 19*this.offset
 })
@@ -313,7 +313,7 @@ var part21 = new TweenMax.from("#part21", 1, {
 });
 
 var part21Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 20*this.offset
 })
@@ -328,7 +328,7 @@ var part22 = new TweenMax.from("#part22", 1, {
 });
 
 var part22Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 21*this.offset
 })
@@ -343,7 +343,7 @@ var part23 = new TweenMax.from("#part23", 1, {
 });
 
 var part23Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 22*this.offset
 })
@@ -358,7 +358,7 @@ var part24 = new TweenMax.from("#part24", 1, {
 });
 
 var part24Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 23*this.offset
 })
@@ -373,7 +373,7 @@ var part25 = new TweenMax.from("#part25", 1, {
 });
 
 var part25Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 24*this.offset
 })
@@ -388,7 +388,7 @@ var part26 = new TweenMax.from("#part26", 1, {
 });
 
 var part26Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 25*this.offset
 })
@@ -403,7 +403,7 @@ var part27 = new TweenMax.from("#part27", 1, {
 });
 
 var part27Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 26*this.offset
 })
@@ -418,7 +418,7 @@ var part28 = new TweenMax.from("#part28", 1, {
 });
 
 var part28Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 33*this.offset
 })
@@ -433,7 +433,7 @@ var part291 = new TweenMax.from("#part29-1", 1, {
 });
 
 var part291Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 32*this.offset
 })
@@ -448,7 +448,7 @@ var part292 = new TweenMax.from("#part29-2", 1, {
 });
 
 var part292Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 31*this.offset
 })
@@ -463,7 +463,7 @@ var part30 = new TweenMax.from("#part30", 1, {
 });
 
 var part30Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 34*this.offset
 })
@@ -478,7 +478,7 @@ var part311 = new TweenMax.from("#part31-1", 1, {
 });
 
 var part311Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 30*this.offset
 })
@@ -493,7 +493,7 @@ var part312 = new TweenMax.from("#part31-2", 1, {
 });
 
 var part312Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 29*this.offset
 })
@@ -508,7 +508,7 @@ var part321 = new TweenMax.from("#part32-1", 1, {
 });
 
 var part321Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 28*this.offset
 })
@@ -523,7 +523,7 @@ var part322 = new TweenMax.from("#part32-2", 1, {
 });
 
 var part322Scene = new ScrollMagic.Scene({
-    triggerElement: "#rental",
+    triggerElement: "#parts",
     duration: 250,
     offset: 27*this.offset
 })

style/sass/_grid.scss

@@ -496,13 +496,13 @@
   }
 }
 
-@media only screen and (max-width: 785px) {
+@media only screen and (max-width: 767px) {
   .hide-sm {
     display: none !important;
   }
 }
 
-@media only screen and (min-width: 786px) {
+@media only screen and (min-width: 768px) {
   .col-md,
   .col-md-1,
   .col-md-2,

style/sass/main.scss

@@ -18,6 +18,10 @@ body {
     overflow-x: hidden;
 }
 
+section {
+    width: 100vw;
+}
+
 h1, h2, h3, p {
     margin-block-start: 0;
     margin-block-end: 0;
@@ -102,20 +106,6 @@ button {
     }
 }
 
-.p { // padding
-    &-t { // top
-        &-l { // large
-            padding-top: 192px;
-        }
-    }
-
-    &-b { // bottom
-        &-l { // large
-            padding-bottom: 192px;
-        }
-    }
-}
-
 .header {
     position: sticky;
     top: 0;
@@ -186,6 +176,7 @@ button {
         video {
             width: 100%;
             max-width: 100%;
+            transform: scale(1.004);
         }
     }
 
@@ -205,6 +196,8 @@ button {
 }
 
 .section-service {
+    padding: 96px 0 128px;
+
     .container {
         padding: 0;
     }
@@ -236,10 +229,26 @@ button {
     }
 }
 
+.section-image {
+    width: 100vw;
+    max-height: 80vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+
+    img {
+        width: 100%;
+        display: block;
+    }
+}
+
 .section-work {
+    padding: 128px 0;
+
     h1 {
         position: sticky;
-        top: 256px;
+        top: 128px;
         margin-left: 64px;
         color: black;
         writing-mode: vertical-lr;
@@ -256,10 +265,16 @@ button {
     }
 }
 
+.section-instagram {
+    padding: 64px 0;
+}
+
 .section-rental {
-    .text {
+    padding: 128px 0;
+
+    .square {
         position: sticky;
-        top: 256px;
+        top: 128px;
         padding: 32px;
 
         h2 {
@@ -270,6 +285,17 @@ button {
         p {
             color: black;
         }
+
+        button {
+            display: inline-flex;
+            color: black;
+            background-color: var(--yellow);
+            margin-top: 48px;
+    
+            &:hover {
+                background-color: var(--beige);
+            }
+        }
     }
 
     .parts {
@@ -516,20 +542,32 @@ button {
     }
 
     h2 {
-        font-size: 32px;
+        font-size: 36px;
     }
 
-    .p { // padding
+    .section-work {
-        &-t { // top
+        h1 {
-            &-l { // large
+            writing-mode: initial;
-                padding-top: 128px;
+            margin-left: 0;
-            }
+            margin-bottom: 32px;
         }
 
-        &-b { // bottom
+        .videos > div {
-            &-l { // large
+            margin-bottom: 16px;
-                padding-bottom: 128px;
+        }
-            }
+    }
+
+    .section-rental {
+        .container {
+            padding: 0;
+        }
+
+        .square {
+            position: static;
+        }
+
+        .parts {
+            overflow: hidden;
         }
     }
 }
@@ -546,21 +584,15 @@ button {
     }
 
     h2 {
-        font-size: 28px;
+        font-size: 32px;
     }
 
-    .p { // padding
+    .container {
-        &-t { // top
+        padding: 0 16px;
-            &-l { // large
+    }
-                padding-top: 64px;
-            }
-        }
 
-        &-b { // bottom
+    .header {
-            &-l { // large
+        height: 64px;
-                padding-bottom: 64px;
-            }
-        }
     }
 
     .section-start {
@@ -570,6 +602,37 @@ button {
     }
 
     .section-service {
-        padding-bottom: 0;
+        padding-top: 32px;
+        
+        h1 {
+            margin-left: 16px;
+            margin-bottom: 64px;
+        }
+
+        h2 {
+            margin-bottom: 16px;
+        }
+
+        button {
+            margin-top: 32px;
+        }
+
+        .square {
+            padding: 32px 16px;
+        }
+    }
+
+    .section-rental {
+        .square {
+            padding: 32px 16px;
+
+            h2 {
+                margin-bottom: 16px;
+            }
+    
+            button {
+                margin-top: 32px;
+            }
+        }
     }
 }

template/landing_page.html

@@ -58,7 +58,7 @@
         </div>
     </nav>
 
-    <section id="service" class="section-service bg-black p-t-l p-b-l">
+    <section id="service" class="section-service bg-black">
         <div class="container">
             <h1 data-aos="fade-in">Film, auf den Frame genau.</h1>
             <div class="squares">
@@ -81,12 +81,16 @@
         </div>
     </section>
 
-    <section id="work" class="section-work bg-beige p-t-l p-b-l">
+    <section id="image-1" class="section-image">
-        <div class="container row reverse">
+        <img src="/static/1.jpeg" alt="Schnittfest" data-aos="fade-in" />
-            <div class="headline col-lg-1">
+    </section>
+
+    <section id="work" class="section-work bg-beige">
+        <div class="container row reverse start-lg start-md start-sm start-xs">
+            <div class="headline col-lg-1 col-md-12 col-sm-12 col-xs-12">
                 <h1 data-aos="fade-in">Referenzen</h1>
             </div>
-            <div class="videos col-lg-10">
+            <div class="videos col-lg-10 col-md-12 col-sm-12 col-xs-12">
                 <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>
@@ -107,20 +111,21 @@
     </section>
 
     <section id="instagram" class="section-instagram bg-black">
-
+        <div class="container">
-    </section>
+            <iframe src="//lightwidget.com/widgets/120f6220e1895e639660c488bda317d2.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>    </section>
-
+        </div>
-    <section id="rental" class="section-rental bg-beige p-t-l p-b-l">
+    <section id="rental" class="section-rental bg-beige">
         <div class="container">
             <div class="row">
-                <div class="col-lg-4" style="z-index: 1;">
+                <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="z-index: 1;">
-                    <div class="text bg-red" data-aos="fade-in">
+                    <div class="square 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>
+                        <button class="primary">Jetzt buchen</button>
                     </div>
                 </div>
-                <div class="col-lg-8">
+                <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
-                    <div class="parts" data-aos="fade-in" data-aos-delay="100">
+                    <div id="parts" 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">
@@ -163,7 +168,7 @@
                 </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>
 
@@ -172,9 +177,10 @@
     <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="https://cdn.lightwidget.com/widgets/lightwidget.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 type="text/javascript" src="js/instafeed.min.js"></script>
 
     <script>
         AOS.init({