Added basic start, work and service sections.

static/wordmark-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="131" height="28" fill="#fff"><path d="M12.508 22.647c3.35 0 6.424-1.708 6.424-5.125 0-3.258-2.802-4.055-4.396-4.5l-2.938-.797c-1.094-.296-2.37-.752-2.37-1.982 0-1.276 1.435-2.12 3.075-2.073 1.686.023 3.2 1.002 3.554 2.734l2.96-.5c-.752-3.052-3.12-4.784-6.47-4.806S6.334 7.202 6.334 10.37c0 2.893 2.2 3.782 3.668 4.214l4.237 1.23c1.23.387 1.822.98 1.822 1.914 0 1.503-1.64 2.346-3.394 2.346-1.982 0-3.622-1.093-4.1-3.053l-2.87.433c.524 3.212 3.212 5.194 6.8 5.194zm13.787 0c2.734 0 4.715-1.4 5.467-3.895l-2.802-.615c-.433 1.253-1.207 1.936-2.665 1.936-2.073 0-3.12-1.572-3.12-3.918 0-2.255.957-3.918 3.12-3.918 1.253 0 2.323.774 2.734 2.096l2.734-.752c-.592-2.415-2.642-3.918-5.444-3.918-3.736 0-6.037 2.7-6.06 6.492.023 3.713 2.232 6.492 6.037 6.492zM40.057 9.662c-1.777 0-3.12.638-4 1.708V5.904h-2.46v16.4h2.78V15.97c0-2.984 1.48-3.736 2.87-3.736 2.642 0 2.893 2.62 2.893 4.146v5.923h2.78v-6.88c0-1.458-.32-5.763-4.852-5.763zm13.803 0c-1.777 0-3.12.638-4 1.708v-1.367H47.4v12.3h2.78V15.97c0-2.984 1.48-3.736 2.87-3.736 2.642 0 2.893 2.62 2.893 4.146v5.923h2.78v-6.88c0-1.458-.32-5.763-4.852-5.763zM61.446 8.1h2.734V5.585h-2.734V8.1zm0 14.215h2.734v-12.3h-2.734v12.3zm17.798-10.16h3.622v-2.14h-3.622V6.587H76.5v3.417h-5.763V6.587h-2.734v3.417H65.78v2.14h2.232v5.125c0 1.412-.1 2.46.478 3.53.957 1.754 3.44 1.982 5.877 1.503v-2.3c-1.55.228-2.825.228-3.37-.66-.296-.478-.25-1.253-.25-2.2v-5H76.5v5.125c0 1.412-.1 2.46.478 3.53.957 1.754 3.44 1.982 5.877 1.503V20c-1.55.228-2.825.228-3.37-.66-.296-.478-.25-1.253-.25-2.2v-5zm11.176-4.35h1.412V5.562h-1.526c-.9 0-2.346-.1-3.37 1.07-.843.934-.82 2.232-.82 3.166v.205h-1.982v2.14h1.982v10.16h2.756v-10.16h2.96v-2.14h-2.96v-.797c0-.843.478-1.412 1.55-1.412zm4.6 9.136h8.884c.32-4.442-1.913-7.267-5.717-7.267-3.622 0-6.128 2.597-6.128 6.63 0 3.736 2.55 6.355 6.264 6.355 2.392 0 4.5-1.276 5.445-3.508l-2.7-.82c-.524 1.14-1.526 1.754-2.87 1.754-1.868 0-2.96-1.116-3.166-3.144zm3.28-4.875c1.686 0 2.575.866 2.825 2.78H95.1c.32-1.822 1.367-2.78 3.212-2.78zm12.452 10.592c3.166 0 5.057-1.503 5.057-3.986 0-1.913-1.048-2.87-4-3.645-2.87-.73-3.35-.98-3.35-1.708 0-.82.866-1.32 2.142-1.276 1.344.1 2.186.73 2.323 1.754l2.802-.5c-.296-2.2-2.3-3.622-5.17-3.622-2.94 0-4.83 1.48-4.83 3.78 0 1.845 1.07 2.756 4.168 3.576 2.78.73 3.12.934 3.12 1.777 0 .9-.774 1.458-2.073 1.458-1.503 0-2.55-.73-2.824-1.96l-2.802.433c.4 2.483 2.392 3.918 5.444 3.918zM121.5 12.145h3.622v-2.14H121.5V6.587h-2.733v3.417h-2.233v2.14h2.233v5.125c0 1.412-.092 2.46.478 3.53.957 1.754 3.44 1.982 5.877 1.503v-2.3c-1.55.228-2.825.228-3.37-.66-.296-.478-.25-1.253-.25-2.2v-5zM7.12 2.373H2.373V7.12H0V0h7.12v2.373zm116.744 0h4.746V7.12h2.373V0h-7.12v2.373zm0 23.254h4.746V20.88h2.373V28h-7.12v-2.373zm-116.744 0H2.373V20.88H0V28h7.12v-2.373z"/></svg>

style/sass/_grid.scss

@@ -1,8 +1,9 @@
 .container {
+  max-width: 1600px;
   width: 100%;
   margin-right: auto;
   margin-left: auto;
-  padding: 0 16px;
+  padding: 0 32px;
   position: relative;
   box-sizing: border-box;
 }
@@ -963,4 +964,4 @@
   .show-md {
     display: none !important;
   }
-}
+}

style/sass/_reset.scss

@@ -0,0 +1,59 @@
+html, body, div, span, applet, object, iframe, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, input, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, button,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, section, summary,
+time, mark, audio, video {
+
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: none;
+	font: inherit;
+	color: var(--black-100);
+	text-decoration: none;
+	vertical-align: baseline;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* HTML5 display-role reset for older browsers */
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+
+body {
+	line-height: 1;
+}
+
+ol, ul {
+ 	list-style: none;
+}
+
+blockquote, q {
+ 	quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ 	content: '';
+ 	content: none;
+}
+
+table {
+ 	border-collapse: collapse;
+ 	border-spacing: 0;
+}
+
+textarea:focus, input:focus, button:focus {
+ 	outline: none;
+}

style/sass/main.scss

@@ -1,4 +1,235 @@
-html, body {
+@import "_reset.scss";
-    font-family: sans-serif;
+@import "_grid.scss";
-    font-size: 40px;
+
+html {
+    background-color: black;
+    font-family: "Manrope", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+    --beige: #F7EEE0;
+    --yellow: #FEBB28;
+    --orange: #FE6732;
+    --red: #F5303C;
+    --pink: #CE2867;
+    --purple: #571B47;
+}
+
+h1, h2, h3, p {
+    margin-block-start: 0;
+    margin-block-end: 0;
+}
+
+h1, h2, h3 {
+    font-weight: 700;
+    line-height: 1.1;
+    letter-spacing: -2%;
+}
+
+h1 {
+    font-size: 80px;
+}
+
+h2 {
+    font-size: 64px;
+}
+
+h3 {
+    font-size: 48px;
+}
+
+p {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 1.4;
+}
+
+button {
+    font-size: 18px;
+    font-weight: 600;
+    padding: 23px 32px;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+}
+
+.bg { // background
+    &-white {
+        background-color: white;
+    }
+
+    &-beige {
+        background-color: var(--beige);
+    }
+
+    &-yellow {
+        background-color: var(--yellow);
+    }
+
+    &-orange {
+        background-color: var(--orange);
+    }
+
+    &-red {
+        background-color: var(--red);
+    }
+
+    &-pink {
+        background-color: var(--pink);
+    }
+
+    &-purple {
+        background-color: var(--purple);
+    }
+
+    &-black {
+        background-color: black;
+    }
+}
+
+.p { // padding
+    &-t, &-b { // top
+        &-l { // large
+            padding-top: 256px;
+        }
+    }
+
+    &-b { // bottom
+        &-l { // large
+            padding-bottom: 256px;
+        }
+    }
+}
+
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 96px;
+    color: white;
+    z-index: 100;
+
+    .container {
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        img {
+            cursor: pointer;
+        }
+
+        ul {
+            display: flex;
+            flex: 1;
+            justify-content: flex-end;
+            text-align: right;
+
+            li {
+                margin-left: 64px;
+                font-size: 18px;
+                font-weight: 600;
+                cursor: pointer;
+                transition: color 0.2s ease-in-out;
+
+                &:nth-of-type(1):hover {
+                    color: var(--yellow);
+                }
+
+                &:nth-of-type(2):hover {
+                    color: var(--orange);
+                }
+
+                &:nth-of-type(3):hover {
+                    color: var(--red);
+                }
+
+                &:nth-of-type(4):hover {
+                    color: var(--pink);
+                }
+            }
+        }
+    }
+}
+
+.section-start {
+    .hero {
+        max-height: 320px;
+        padding-right: 64px;
+    }
+
+    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(--yellow);
+        background-color: var(--purple);
+
+        &:hover {
+            background-color: var(--pink);
+        }
+    }
+
+    .stripe {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+    
+        div {
+            height: 64px;
+            width: 100%;
+        }
+    }
+}
+
+.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;
+        }
+    }
+}
+
+.section-service {
+    .square {
+        padding: 64px;
+    }
+
+    h3 {
+        color: white;
+        margin-bottom: 32px;
+    }
+
+    button {
+        display: inline-flex;
+        color: white;
+        background-color: var(--purple);
+        margin-top: 64px;
+
+        &:hover {
+            background-color: var(--pink);
+        }
+    }
 }

template/landing_page.html

@@ -21,7 +21,6 @@
     <meta property="og:image" content="" />
 
     <link rel="stylesheet" type="text/css" href="static/main.css" />
-    <link rel="stylesheet" type="text/css" href="static/grid.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="" />
@@ -31,10 +30,78 @@
     <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>
 
-<h1>Schnittfest GmbH</h1>
+    <section id="start" class="section-start bg-black p-t-l p-b-l">
-<p>Schnittfest befindet sich aktuell im Wartungsmodus.</p>
+        <div class="container row">
-<p>Wir sind bald wieder für Sie da!</p>
+            <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>
 </body>
+
+<script src="https://player.vimeo.com/api/player.js"></script>
 </html>