mirror of
https://github.com/Kugelschieber/schnittfest.git
synced 2026-01-18 10:20:27 +00:00
A lot of work.
This commit is contained in:
51
js/color.js
Normal file
51
js/color.js
Normal file
@@ -0,0 +1,51 @@
|
||||
var controller = new ScrollMagic.Controller();
|
||||
|
||||
var backgroundColor = new TweenMax.to(".bg-beige-to-black", 1, {
|
||||
backgroundColor: "#000",
|
||||
ease: Power1.easeOut
|
||||
});
|
||||
|
||||
var backgroundColorScene = new ScrollMagic.Scene({
|
||||
triggerElement: "#work",
|
||||
duration: 256
|
||||
})
|
||||
.setTween(backgroundColor)
|
||||
.addTo(controller);
|
||||
|
||||
var textColor = new TweenMax.to(".black-to-beige", 1, {
|
||||
color: "#f7eee0",
|
||||
ease: Power1.easeOut
|
||||
});
|
||||
|
||||
var textColorScene = new ScrollMagic.Scene({
|
||||
triggerElement: "#work",
|
||||
duration: 256
|
||||
})
|
||||
.setTween(textColor)
|
||||
.addTo(controller);
|
||||
|
||||
|
||||
var reverseBackgroundColor = new TweenMax.to(".bg-beige-to-black", 1, {
|
||||
backgroundColor: "#f7eee0",
|
||||
ease: Power1.easeOut
|
||||
});
|
||||
|
||||
var reverseBackgroundColorScene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: 256
|
||||
})
|
||||
.setTween(reverseBackgroundColor)
|
||||
.addTo(controller);
|
||||
|
||||
var reverseTextColor = new TweenMax.to(".black-to-beige", 1, {
|
||||
color: "#000",
|
||||
ease: Power1.easeOut
|
||||
});
|
||||
|
||||
var reverseTextColorScene = new ScrollMagic.Scene({
|
||||
triggerElement: "#rental",
|
||||
duration: 256
|
||||
})
|
||||
.setTween(reverseTextColor)
|
||||
.addTo(controller);
|
||||
|
||||
17
js/hero.js
17
js/hero.js
@@ -1,17 +0,0 @@
|
||||
var x = window.screen.width > 512 ? 160 : 80;
|
||||
|
||||
var controller = new ScrollMagic.Controller();
|
||||
|
||||
var hero = new TweenMax.to("#hero", 1, {
|
||||
x: this.x,
|
||||
ease: Power1.easeOut
|
||||
});
|
||||
|
||||
var heroScene = new ScrollMagic.Scene({
|
||||
triggerElement: "#start",
|
||||
triggerHook: 0,
|
||||
duration: 320
|
||||
})
|
||||
.setTween(hero)
|
||||
.addTo(controller);
|
||||
|
||||
BIN
static/1.jpeg
BIN
static/1.jpeg
Binary file not shown.
|
Before Width: | Height: | Size: 290 KiB |
BIN
static/1.jpg
Normal file
BIN
static/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 263 KiB |
BIN
static/Schnittfest_Rental_Preisliste.pdf
Normal file
BIN
static/Schnittfest_Rental_Preisliste.pdf
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -3,7 +3,6 @@
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding: 0 32px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -16,7 +16,6 @@ time, mark, audio, video {
|
||||
border: 0;
|
||||
outline: none;
|
||||
font: inherit;
|
||||
color: var(--black-100);
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
@@ -1,44 +1,52 @@
|
||||
@import "_reset.scss";
|
||||
@import "_grid.scss";
|
||||
|
||||
* {
|
||||
color: var(--black);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: black;
|
||||
color: var(--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;
|
||||
--white: #fff;
|
||||
--beige: #f7eee0;
|
||||
--yellow: #febb28;
|
||||
--orange: #fe6732;
|
||||
--red: #f5303c;
|
||||
--pink: #ce2867;
|
||||
--purple: #571b47;
|
||||
--grey: #3d3d3d;
|
||||
--black: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--beige);
|
||||
padding: 0 16px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -2%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 64px;
|
||||
font-size: 96px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@@ -48,15 +56,21 @@ h3 {
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
|
||||
a {
|
||||
color: var(--red);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
button, a.button {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
padding: 23px 32px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
[data-aos="fade-in"] {
|
||||
@@ -68,60 +82,24 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
&-grey {
|
||||
background-color: var(--grey);
|
||||
}
|
||||
|
||||
&-black {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 96px;
|
||||
color: white;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
background-color: var(--beige);
|
||||
z-index: 100;
|
||||
-webkit-backface-visibility: hidden; /* Correct fixed positioning on mobile */
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
.wordmark {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -132,27 +110,39 @@ button {
|
||||
text-align: right;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
margin-left: 64px;
|
||||
margin-left: 48px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease-in-out;
|
||||
|
||||
&:nth-of-type(1):hover {
|
||||
color: var(--yellow);
|
||||
&:nth-of-type(1):hover::before {
|
||||
background-color: var(--pink);
|
||||
}
|
||||
|
||||
&:nth-of-type(2):hover {
|
||||
color: var(--orange);
|
||||
&:nth-of-type(2):hover::before {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
&:nth-of-type(3):hover {
|
||||
color: var(--red);
|
||||
&:nth-of-type(3):hover::before {
|
||||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
&:nth-of-type(4):hover {
|
||||
color: var(--pink);
|
||||
&:nth-of-type(4):hover::before {
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -192,114 +182,114 @@ button {
|
||||
}
|
||||
|
||||
.section-start {
|
||||
.container {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
padding: 128px 0;
|
||||
|
||||
.headline {
|
||||
display: flex;
|
||||
margin-bottom: 96px;
|
||||
|
||||
h1 {
|
||||
flex: 1;
|
||||
|
||||
a {
|
||||
color: var(--red);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
video {
|
||||
height: 100%;
|
||||
min-height: 384px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
transform: scale(1.004);
|
||||
}
|
||||
}
|
||||
|
||||
.stripe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 160px;
|
||||
display: flex;
|
||||
z-index: -1;
|
||||
|
||||
& > div {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-service {
|
||||
padding: 96px 0 128px;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.square {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
margin-bottom: 96px;
|
||||
margin-left: 32px;
|
||||
}
|
||||
padding: 128px 0;
|
||||
|
||||
h2 {
|
||||
color: white;
|
||||
margin-bottom: 32px;
|
||||
margin: 0 96px 24px 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 8px solid;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
color: white;
|
||||
background-color: var(--purple);
|
||||
margin-top: 64px;
|
||||
&:nth-of-type(2) {
|
||||
border-color: var(--orange);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: black;
|
||||
&:nth-of-type(3) {
|
||||
border-color: var(--yellow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-image {
|
||||
width: 100vw;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
p {
|
||||
margin: 0 96px 64px 0;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
min-height: 512px;
|
||||
background-image: url("1.jpg");
|
||||
background-position: center 33%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-work {
|
||||
padding: 128px 0;
|
||||
|
||||
h1 {
|
||||
position: sticky;
|
||||
top: 128px;
|
||||
margin-left: 64px;
|
||||
color: black;
|
||||
writing-mode: vertical-lr;
|
||||
-webkit-text-orientation: mixed;
|
||||
text-orientation: mixed;
|
||||
.video {
|
||||
margin-bottom: 128px;
|
||||
|
||||
&:nth-of-type(4n+1) h2 {
|
||||
border-color: var(--pink);
|
||||
}
|
||||
|
||||
.videos > div {
|
||||
margin-bottom: 64px;
|
||||
&:nth-of-type(4n+2) h2 {
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+3) h2 {
|
||||
border-color: var(--orange);
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+4) h2 {
|
||||
border-color: var(--yellow);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-instagram {
|
||||
padding: 64px 0;
|
||||
h2 {
|
||||
margin: 0 0 24px 96px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 8px solid;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-left: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-rental {
|
||||
@@ -308,25 +298,22 @@ button {
|
||||
.square {
|
||||
position: sticky;
|
||||
top: 128px;
|
||||
padding: 32px;
|
||||
padding: 32px 0;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32px;
|
||||
color: white;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 8px solid var(--red);
|
||||
}
|
||||
|
||||
p {
|
||||
color: black;
|
||||
}
|
||||
|
||||
button {
|
||||
button, a.button {
|
||||
display: inline-flex;
|
||||
color: black;
|
||||
color: var(--black);
|
||||
background-color: var(--yellow);
|
||||
margin-top: 48px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--beige);
|
||||
box-shadow: inset 0 0 0 2px var(--black);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -569,45 +556,147 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
.section-instagram {
|
||||
padding: 64px 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 128px 0;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
|
||||
&:first-of-type {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+1):hover a::before {
|
||||
background-color: var(--pink);
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+2):hover a::before {
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+3):hover a::before {
|
||||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
&:nth-of-type(4n+4):hover a::before {
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.section-work {
|
||||
h1 {
|
||||
writing-mode: initial;
|
||||
margin-left: 0;
|
||||
margin-bottom: 32px;
|
||||
.section-start {
|
||||
padding: 64px 0;
|
||||
|
||||
.headline {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.videos > div {
|
||||
margin-bottom: 16px;
|
||||
.section-service {
|
||||
padding: 64px 0;
|
||||
|
||||
h2 {
|
||||
margin: 0 32px 24px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 32px 32px 0;
|
||||
}
|
||||
|
||||
.img {
|
||||
margin-top: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-work {
|
||||
padding: 64px 0;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.video {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-rental {
|
||||
.container {
|
||||
padding: 64px 0;
|
||||
|
||||
.square {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.square {
|
||||
position: static;
|
||||
.parts {
|
||||
margin: 64px -16px 0 -16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.parts {
|
||||
overflow: hidden;
|
||||
footer {
|
||||
padding: 64px 0;
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
|
||||
li {
|
||||
margin: 12px 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.section-service {
|
||||
padding-bottom: 0;
|
||||
h2, p {
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -619,53 +708,4 @@ button {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.section-start {
|
||||
.stripe {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-service {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
89
template/index.html
Normal file
89
template/index.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<base href="/" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="copyright" content="Schnittfest GmbH" />
|
||||
<meta name="author" content="Emvi Software GmbH" />
|
||||
<meta name="title" content="" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="msapplication-TileColor" content="#000000" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@schnittfest" />
|
||||
<meta name="twitter:title" content="" />
|
||||
<meta name="twitter:description" content="" />
|
||||
<meta name="twitter:image" content="" />
|
||||
<meta property="og:url" content="https://schnittfest.gmbh/" />
|
||||
<meta property="og:title" content="" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:image" content="" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="static/main.css" />
|
||||
<link rel="stylesheet" type="text/css" href="static/manrope.css" />
|
||||
<link 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="" />
|
||||
<link rel="mask-icon" href="" color="#000000" />
|
||||
|
||||
<title>Schnittfest - AGB</title>
|
||||
</head>
|
||||
<body class="bg-beige">
|
||||
<nav class="header bg-beige">
|
||||
<div class="container">
|
||||
<div id="homeLink" class="wordmark">Schnittfest</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section id="text" class="section-text">
|
||||
<div class="container">
|
||||
<h1>Allgemeine Geschäftsbedingungen</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li>© 2020 Schnittfest GmbH</li>
|
||||
<li>
|
||||
<a href="tel:+49017693124984">+49 176 93124984</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:hi@schnitffest.gmbh">hi@schnittfest.gmbh</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://instagram.com/schnittfest.gmbh">Instagram</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/https://vimeo.com/schnittfest">Vimeo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/agb">AGB</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/impressum">Impressum</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// click on logo navigation
|
||||
let homeLink = document.getElementById("homeLink");
|
||||
|
||||
homeLink.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if(window.location.pathname === "/") {
|
||||
window.scrollTo({top: 0, behavior: "smooth"});
|
||||
}
|
||||
else {
|
||||
window.location = "/";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -30,121 +30,153 @@
|
||||
|
||||
<title>Schnittfest</title>
|
||||
</head>
|
||||
<body>
|
||||
<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 id="mobileMenu" class="mobile-menu show-sm" style="display:none">
|
||||
<ul>
|
||||
<li class="scrollToService">Leistungen</li>
|
||||
<li class="scrollToWork">Referenzen</li>
|
||||
<li class="scrollToRental">Rental</li>
|
||||
<li>Kontakt</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav class="header bg-black">
|
||||
<body class="bg-beige-to-black">
|
||||
<nav class="header bg-beige-to-black">
|
||||
<div class="container" data-aos="fade-in" data-aos-delay="50">
|
||||
<img id="homeLink" src="static/wordmark-white.svg" alt="Schnittfest">
|
||||
<ul class="hide-sm">
|
||||
<li class="scrollToService">Leistungen</li>
|
||||
<div id="homeLink" class="wordmark black-to-beige">Schnittfest</div>
|
||||
<ul class="links hide-sm black-to-beige">
|
||||
<li class="scrollToService">Gewerke</li>
|
||||
<li class="scrollToWork">Referenzen</li>
|
||||
<li class="scrollToRental">Rental</li>
|
||||
<li>Kontakt</li>
|
||||
<li class="scrollToFooter">Kontakt</li>
|
||||
</ul>
|
||||
<ul class="show-sm">
|
||||
<ul class="show-sm black-to-beige">
|
||||
<li id="mobileMenuOpen">Menü</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section id="service" class="section-service bg-black">
|
||||
<nav id="mobileMenu" class="mobile-menu show-sm" style="display:none">
|
||||
<ul>
|
||||
<li class="scrollToService">Gewerke</li>
|
||||
<li class="scrollToWork">Referenzen</li>
|
||||
<li class="scrollToRental">Rental</li>
|
||||
<li class="scrollToFooter">Kontakt</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="start" class="section-start">
|
||||
<div class="container" data-aos="fade-in">
|
||||
<div class="headline">
|
||||
<h1 data-aos="fade-in">
|
||||
Film, auf den Frame genau.
|
||||
<a href="mailto:hi@schnittfest.gmbh">⟶</a>
|
||||
</h1>
|
||||
</div>
|
||||
<div id="hero" class="hero" data-aos="fade-in" data-aos-delay="200">
|
||||
<video src="/static/hero.mp4" autoplay loop muted />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="service" class="section-service bg-beige">
|
||||
<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 class="services row">
|
||||
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Film</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="100">sleep.shoot.eat.repeat. </p>
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Animation</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Herausstechen und Welten erschaffen.</p>
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="300">Sound</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="300">Keine Musik wäre wie Butter ohne Brot.</p>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 img" data-aos="fade-in"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="image-1" class="section-image">
|
||||
<img src="/static/1.jpeg" alt="Schnittfest" data-aos="fade-in" />
|
||||
</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>
|
||||
<section id="work" class="section-work">
|
||||
<div class="container">
|
||||
<div class="video row reverse">
|
||||
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Commercial</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Bachelor Energiemanagement und industrielle Klimaschutztechnologie - ein Film für den neuen Studiengang an der TH OWL.</p>
|
||||
</div>
|
||||
<div class="videos col-lg-10 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
|
||||
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
||||
<iframe src="https://www.youtube.com/embed/L4Te_ifGui4" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video row reverse">
|
||||
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Imagefilm</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">GOLDBECK und Schüco, das Fenstersystem AWE80 in der Entwicklung und Produktion in Bielefeld.</p>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
|
||||
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
||||
<iframe src="https://www.youtube.com/embed/sFjOfG-5cIE" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video row reverse">
|
||||
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Porträtfilm</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Digitalisierung im Metallbau - Die berühmt-berüchtigte Industrie 4.0.</p>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
|
||||
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
||||
<iframe src="https://www.youtube.com/embed/ktjlpv6j-Fw" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video row reverse">
|
||||
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Kampagne</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Azubi Recruiting Film für die Berufe Metallbauer, Metalltechnik, Technischer Systemplaner, Büromanagement.</p>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
|
||||
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
||||
<iframe src="https://www.youtube.com/embed/ji1ux1Y4Y_U" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video row reverse">
|
||||
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Eventfilm</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Internationaler Reitsport – 140 Reiter aus mehr als 30 Nationen die an den German Friendships auf den Bexterhof in Herford teilnehmen.</p>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
|
||||
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
||||
<iframe src="https://www.youtube.com/embed/X-hIy1Yv-Bw" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video row reverse">
|
||||
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Eventfilm</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">50 führende Familienunternehmen aus ganz Deutschland zum Karrieretag Familienunternehmen in Bielefeld bei Schüco - Miele, Hilti, Haribo und viele mehr.</p>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
|
||||
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
||||
<iframe src="https://www.youtube.com/embed/b8ASQboLCO8" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
||||
<iframe src="https://www.youtube.com/embed/GBXwL-BdUUU" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video row reverse">
|
||||
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
|
||||
<h2 class="black-to-beige" data-aos="fade-in" data-aos-delay="100">Porträtfilm</h2>
|
||||
<p class="black-to-beige" data-aos="fade-in" data-aos-delay="200">Kurz-Porträtfilm über die Holztechniker im Fachbereich Architektur und Innenarchitektur in Detmold.</p>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
|
||||
<div style="padding:56.25% 0 0 0;position:relative;" data-aos="fade-in">
|
||||
<iframe src="https://www.youtube.com/embed/8Q8Yb7QhUIA" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="instagram" class="section-instagram bg-black">
|
||||
<div class="container">
|
||||
<iframe src="//lightwidget.com/widgets/120f6220e1895e639660c488bda317d2.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="rental" class="section-rental bg-beige">
|
||||
<section id="rental" class="section-rental">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="z-index: 1;">
|
||||
<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 class="square" data-aos="fade-in">
|
||||
<h2 class="black-to-beige">Rental</h2>
|
||||
<p class="black-to-beige">
|
||||
Ready to Shoot Set mit ARRI Alexa Mini LF inkl. Zubehör ab 700€ pro Tag. Weitere Details entnehmen Sie bitte der <a href="static/Schnittfest_Rental_Preisliste.pdf">Preisliste</a>. Es gelten die <a href="/agb">allgemeinen Geschäftsbedinungen</a>.
|
||||
</p>
|
||||
<a class="button primary" href="mailto:rental@schnittfest.gmbh">Jetzt buchen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
|
||||
@@ -193,7 +225,38 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="height: 100vh; display: flex; justify-content: center; align-items: center; font-family: monospace; font-size: 32px; color: white; background-color: black;">Spacer</section>
|
||||
<section id="instagram" class="section-instagram">
|
||||
<div class="container">
|
||||
<script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
|
||||
<iframe src="https://cdn.lightwidget.com/widgets/ea2fc8dd2d55541dbafdc312dbe28aee.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li>© 2020 Schnittfest GmbH</li>
|
||||
<li>
|
||||
<a href="tel:+49017693124984">+49 176 93124984</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="mailto:hi@schnitffest.gmbh">hi@schnittfest.gmbh</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://instagram.com/schnittfest.gmbh">Instagram</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/https://vimeo.com/schnittfest">Vimeo</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/agb">AGB</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/impressum">Impressum</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<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>
|
||||
@@ -201,7 +264,7 @@
|
||||
<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/color.js"></script>
|
||||
<script type="text/javascript" src="js/parts.js"></script>
|
||||
<script type="text/javascript" src="js/instafeed.min.js"></script>
|
||||
|
||||
@@ -238,6 +301,7 @@
|
||||
let scrollToService = document.getElementsByClassName("scrollToService");
|
||||
let scrollToWork = document.getElementsByClassName("scrollToWork");
|
||||
let scrollToRental = document.getElementsByClassName("scrollToRental");
|
||||
let scrollToFooter = document.getElementsByClassName("scrollToFooter");
|
||||
|
||||
function addScrollTo(nodes, anchor) {
|
||||
for (let node of nodes) {
|
||||
@@ -263,6 +327,7 @@
|
||||
addScrollTo(scrollToService, "service");
|
||||
addScrollTo(scrollToWork, "work");
|
||||
addScrollTo(scrollToRental, "rental");
|
||||
addScrollTo(scrollToFooter, "footer");
|
||||
|
||||
// click on logo navigation
|
||||
let homeLink = document.getElementById("homeLink");
|
||||
|
||||
Reference in New Issue
Block a user