Skip to content

Instantly share code, notes, and snippets.

@motion-work

motion-work/index.html

Created May 25, 2021 06:07
Show Gist options
  • Save motion-work/f512ce2e5a39916a02d76c8e21341efa to your computer and use it in GitHub Desktop.
Save motion-work/f512ce2e5a39916a02d76c8e21341efa to your computer and use it in GitHub Desktop.
Download ZIP
Quai Café
Raw
index.html
<section class="hero-section">
<img class="hero-section__cover-image" src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621503559/eldora/Sushi-Bowls_sst_1177552363_freigestellt-mit-Schatten_lowres_1_dtikls.png" alt="">
<div class="container">
<h1>Oase am See</h1>
<p>Willkommen im Quai Café. Willkommen in unserer Oase am See. Wir sind die Anlaufstelle für den perfekten Barista-Kaffee am Morgen, eine entspannte Mittagspause oder den Apéro nach Feierabend. Kommen Sie vorbei und probieren Sie unsere Sushi-Spezialitäten oder gönnen Sie sich ein Apéroplättchen mit einem kühlen Drink.</p>
</div>
</section>
<section class="morning-section">
<div class="morning-section__left">
<div class="morning-section__left--image-large">
<img src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621494684/eldora/Pl%C3%A4%C3%A4tli_HG_-_hover_vorher_2x_x3pmki.png" class="background" alt="">
<img src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621462864/eldora/Flavors_Alpk%C3%A4se-Sandwich-0278_freigestellt_qfzfyw.png" alt="">
</div>
</div>
<div class="morning-section__right">
<div class="morning-section__right--image-container">
<div class="morning-section__right--image-medium">
<img src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621461430/eldora/Ellipse_4_2x_debghr.png" alt="dashed border">
<img src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621462734/eldora/Smart_Eating_MG_8895-HDR_freigestellt_2x_s9tkyh.png" alt="">
</div>
<div class="morning-section__right--badge">
<p>Chocolate overnight bowl</p>
</div>
</div>
<div class="morning-section__content">
<svg class="morning-section__content--arrow-mobile" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 113.4 41" xml:space="preserve">
<path d="M86.7,9.5c1.7,0.4,3.5,0.9,5.3,1.2c3.8,0.7,7.3,2.1,10.8,3.9c1.2,0.6,1.8,1.6,1.9,3c0.1,1.1-0.2,1.8-1.3,2.2
c-5.6,1.9-10.7,4.8-15.9,7.4c-0.9,0.4-1.7,1-2.5-0.1c-0.8-1-0.6-2,0.6-2.7c1.8-1.1,3.7-2,5.6-3c0.9-0.5,1.8-1,2.8-1.5
c-0.1-0.2-0.1-0.3-0.2-0.5c-3.1,0.1-6.2,0.2-9.3,0.5c-7.2,0.6-14.3,1.3-21.5,2c-9.8,0.9-19.6,1.9-29.5,2.9c-5.4,0.5-10.8,1-16.1,1.4
c-1.1,0.1-2.2,0-3.3-0.2c-2-0.4-2.8-1.3-3-3.5c0.7,0,1.3-0.1,2-0.1c2.5-0.1,5,0.1,7.5-0.2c10.8-1,21.5-2.2,32.3-3.2
c12.6-1.1,25.3-2.1,37.9-3.1c0.8-0.1,1.5-0.2,2.3-0.3c0-0.2,0-0.3,0.1-0.5c-1.8-0.3-3.7-0.7-5.5-1c-1.7-0.4-2.7-1.5-2.6-3.1
C85,9.6,85.5,9.2,86.7,9.5z" />
</svg>
<div class="morning-section__text">
<h2>Am Morgen</h2>
<p>Frühstücken ist wichtig und schafft die Basis für einen energiegeladenen Start in den Tag. Ob ein Birchermüesli mit Nüssen, ein gefülltes Gipfeli mit Ei, ein supergesunder Smoothie oder eine Frühstücks-Etagère - Wir haben was für jeden Geschmack.</p>
<a href="#" class="btn-link">Menü Frühstück (PDF)</a>
</div>
<svg class="morning-section__content--arrow-desktop" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 113.4 41" xml:space="preserve">
<path d="M86.7,9.5c1.7,0.4,3.5,0.9,5.3,1.2c3.8,0.7,7.3,2.1,10.8,3.9c1.2,0.6,1.8,1.6,1.9,3c0.1,1.1-0.2,1.8-1.3,2.2
c-5.6,1.9-10.7,4.8-15.9,7.4c-0.9,0.4-1.7,1-2.5-0.1c-0.8-1-0.6-2,0.6-2.7c1.8-1.1,3.7-2,5.6-3c0.9-0.5,1.8-1,2.8-1.5
c-0.1-0.2-0.1-0.3-0.2-0.5c-3.1,0.1-6.2,0.2-9.3,0.5c-7.2,0.6-14.3,1.3-21.5,2c-9.8,0.9-19.6,1.9-29.5,2.9c-5.4,0.5-10.8,1-16.1,1.4
c-1.1,0.1-2.2,0-3.3-0.2c-2-0.4-2.8-1.3-3-3.5c0.7,0,1.3-0.1,2-0.1c2.5-0.1,5,0.1,7.5-0.2c10.8-1,21.5-2.2,32.3-3.2
c12.6-1.1,25.3-2.1,37.9-3.1c0.8-0.1,1.5-0.2,2.3-0.3c0-0.2,0-0.3,0.1-0.5c-1.8-0.3-3.7-0.7-5.5-1c-1.7-0.4-2.7-1.5-2.6-3.1
C85,9.6,85.5,9.2,86.7,9.5z" />
</svg>
<div class="morning-section__content--image-small">
<img src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621494684/eldora/Pl%C3%A4%C3%A4tli_HG_-_hover_vorher_2x_x3pmki.png" class="background" alt="">
<img src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621462960/eldora/Flavors_Brainy_Nut_M%C3%BCesli-3676_freigestellt_rnel0g.png" alt="">
</div>
</div>
</div>
</section>
<section class="lunch-section">
<div class="lunch-section__left">
<div class="lunch-section__left--text">
<h2>Am Mittag</h2>
<p>Willkommen im Quai Café. Willkommen in unserer Oase am See. Wir sind die Anlaufstelle für den perfekten Barista-Kaffee am Morgen, eine entspannte Mittagspause oder den Apéro nach Feierabend. Kommen Sie vorbei und probieren Sie unsere Sushi-Spezialitäten oder gönnen Sie sich ein Apéroplättchen mit einem kühlen Drink.</p>
<a href="#" class="btn-link">Menü Mittag (PDF)</a>
</div>
</div>
<div class="lunch-section__right">
<div class="lunch-section__right--image-container">
<div class="lunch-section__right--image-medium">
<img class="dashed-border" src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621550137/eldora/Ellipse_5_2x_xkzwim.png" alt="dashed border">
<img class="image-cover" src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621462734/eldora/Smart_Eating_MG_8895-HDR_freigestellt_2x_s9tkyh.png" alt="">
</div>
<div class="lunch-section__right--badge">
<p>Tägliche Sushi Bowl</p>
</div>
<div class="lunch-section__right--slide">
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<div>
<p>Montag, 10.10.</p>
<p>Gekochter Thunfisch und geräucherter Lachs Gurken, Avocado, Schalotten, Sesam, Mayo, Sesamöl, Surimi, Ingwer</p>
</div>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
</section>
<section class="evening-section">
<div class="evening-section__left">
<div class="evening-section__left--image-large">
<img class="background" src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621494684/eldora/Pl%C3%A4%C3%A4tli_HG_-_hover_vorher_2x_x3pmki.png" alt="">
<img class="foreground" src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621512187/eldora/Aperoplatte_Catering_sst_281040638_freigestellt_2x_ekc0sq.png" alt="">
</div>
</div>
<div class="evening-section__right">
<div class="evening-section__right--content container">
<h2>Am Abend</h2>
<p>Auch am Abend kommt man in den Genuss unserer frischen Sushis. Warum aber nicht einfach mit ein paar Freunden oder Arbeitskollegen ein Apéroplättli mit orientalischen Antipasti oder Käse und Fleisch teilen.</p>
<a href="#" class="btn-link">Menu Abend (PDF)</a>
</div>
<div class="evening-section__right--image-cup">
<img class="background" src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621514598/eldora/Ellipse_8_2x_my6bh1.png" alt="">
<img src="https://res.cloudinary.com/delicious-cookie/image/upload/v1621514193/eldora/Weinglas_freigestellt_2x_qarhe0.png" alt="">
</div>
</div>
</section>
Raw
script.js
new Glide(".glide").mount();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.min.css"></script>
Raw
style.scss
body {
background-image: url("https://res.cloudinary.com/delicious-cookie/image/upload/v1621463219/eldora/Weisser_Beton_Background_sst_1097759942_vcozqo.png");
background-size: 100%;
}
img {
width: 100%;
}
a {
text-decoration: none;
}
h2 {
font-size: 2rem;
text-transform: uppercase;
text-decoration: underline;
@media only screen and (min-width: 800px) {
font-size: 3rem;
}
}
button {
cursor: pointer;
}
/**
* Helpers
*/
.container {
max-width: 64rem;
margin: 0 auto;
padding: 0 4rem;
}
.btn-link {
background-color: #313444;
border-radius: 0.1875rem;
padding: 0.625rem;
color: #fff;
font-weight: bold;
display: inline-block;
}
/**
* Hero Section
*/
.hero-section {
overflow: hidden;
&__cover-image {
margin-top: -56%;
}
h1 {
font-size: 10vw;
margin: 1rem 0 0 0;
@media only screen and (min-width: 550px) {
font-size: 6vw;
}
}
p {
font-size: 1rem;
max-width: 31.6875rem;
@media only screen and (min-width: 580px) {
font-size: 1.25rem;
}
@media only screen and (min-width: 1100px) {
margin-bottom: 6rem;
}
}
}
/**
* Morning Section
*/
.morning-section {
position: relative;
display: flex;
flex-direction: column;
padding: 3rem 0;
overflow: hidden;
@media only screen and (min-width: 1100px) {
flex-direction: row;
justify-content: space-between;
overflow: visible;
}
img {
border-radius: 50%;
}
&__left {
overflow: hidden;
display: flex;
justify-content: flex-start;
&--image-large {
padding-top: 1.5rem;
margin-left: -3rem;
width: 75%;
object-fit: contain;
position: relative;
@media only screen and (min-width: 460px) {
margin-left: -6rem;
}
@media only screen and (min-width: 1100px) {
position: absolute;
right: 60vw;
top: 0;
width: 800px;
margin-left: 0;
}
.background {
position: absolute;
top: 14vw;
right: -22vw;
z-index: -1;
transform: scaleY(-1) rotate(105deg);
@media only screen and (min-width: 580px) {
top: 13%;
right: -29%;
}
}
}
}
&__right {
display: flex;
flex-direction: column;
padding-left: 4rem;
padding-right: 4rem;
@media only screen and (min-width: 1100px) {
padding-right: 0;
right: 0;
}
&--image-container {
align-self: flex-end;
width: 78%;
max-width: 300px;
margin-right: -8rem;
margin-top: -6rem;
position: relative;
@media only screen and (min-width: 1100px) {
max-width: none;
margin-right: 2rem;
margin-top: -10rem;
width: 550px;
}
}
&--image-medium {
display: flex;
justify-content: center;
align-items: center;
position: relative;
img:first-child {
position: absolute;
transform: scale(1.1);
}
}
&--badge {
transform: scale(0.45);
left: -16vw;
bottom: -22vw;
position: absolute;
color: #fff;
background-color: #005fac;
border-radius: 50%;
width: 80%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
text-align: center;
padding: 1rem;
font-size: 5vw;
box-shadow: 1px 5px 24px 3px rgba(0, 0, 0, 0.3);
@media only screen and (min-width: 570px) {
bottom: -18vw;
}
@media only screen and (min-width: 630px) {
bottom: -13vw;
font-size: 2rem;
}
@media only screen and (min-width: 840px) {
font-size: 1.6rem;
transform: scale(0.6);
left: -7rem;
bottom: 2rem;
width: 192px;
height: 192px;
}
@media only screen and (min-width: 1100px) {
transform: scale(0.8);
left: -5vw;
bottom: -1rem;
}
@media only screen and (min-width: 1300px) {
transform: scale(1);
left: -7rem;
bottom: 2rem;
}
}
}
&__content {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 1rem;
@media only screen and (min-width: 570px) and (max-width: 1099px) {
margin-top: -10%;
}
@media only screen and (min-width: 1100px) {
margin-top: 4rem;
flex-direction: row;
overflow: hidden;
padding-top: 2rem;
}
&--image-small {
margin-top: 2rem;
width: 100%;
position: relative;
align-self: flex-end;
@media only screen and (min-width: 580px) {
margin-top: -18vw;
margin-right: -16rem;
width: 400px;
}
@media only screen and (min-width: 1100px) {
margin-top: -2rem;
margin-right: -16rem;
width: 500px;
}
.background {
transform: rotate(271deg);
position: absolute;
z-index: -1;
bottom: 4vw;
left: -18vw;
@media only screen and (min-width: 580px) {
bottom: 1.3rem;
left: -6rem;
}
@media only screen and (min-width: 1100px) {
bottom: 1.8rem;
left: -7.9rem;
}
}
}
&--arrow-mobile {
transform: scale(0.6) rotate(339deg);
margin-top: -4rem;
margin-left: -7rem;
height: 20vw;
@media only screen and (min-width: 430px) {
margin-left: -35vw;
}
@media only screen and (min-width: 840px) {
display: none;
}
}
&--arrow-desktop {
transform: rotate(312deg);
margin-top: 2rem;
margin-left: 1rem;
height: 52px;
display: none;
@media only screen and (min-width: 840px) and (max-width: 1099px) {
position: absolute;
right: 18rem;
display: inline-block;
}
@media only screen and (min-width: 1300px) {
display: inline-block;
}
}
}
&__text {
max-width: 370px;
margin-right: 2rem;
p {
@media only screen and (min-width: 840px) {
font-size: 1.25rem;
}
}
@media only screen and (min-width: 1300px) {
margin-right: 0;
}
.btn-link {
margin-top: 1rem;
}
}
}
/**
* Lunch Section
*/
.lunch-section {
position: relative;
display: flex;
flex-wrap: wrap;
overflow: hidden;
&__left {
width: 100%;
display: flex;
justify-content: flex-end;
@media only screen and (min-width: 1100px) {
width: 45%;
}
&--text {
max-width: 23.125rem;
padding-right: 3.6rem;
p {
@media only screen and (min-width: 840px) {
font-size: 1.25rem;
}
}
}
}
&__right {
width: 100%;
display: flex;
justify-content: flex-end;
transform: translateX(11%);
@media only screen and (min-width: 1100px) {
width: 55%;
}
&--image-container {
max-width: 45rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.image-cover {
position: absolute;
top: -1rem;
right: 0;
bottom: 0px;
left: 0;
transform: scale(0.9);
}
}
&--slide {
display: flex;
justify-content: center;
align-items: center;
left: -13vw;
top: 19vw;
position: absolute;
color: #fff;
background-color: #313444;
border-radius: 50%;
width: 280px;
height: 280px;
text-align: center;
font-size: 1.25rem;
box-shadow: 1px 5px 24px 3px rgba(0, 0, 0, 0.3);
button {
width: 60%;
background: none;
color: #fff;
border: none;
}
@media only screen and (min-width: 570px) {
}
@media only screen and (min-width: 630px) {
}
@media only screen and (min-width: 840px) {
}
@media only screen and (min-width: 1100px) {
}
@media only screen and (min-width: 1300px) {
top: 14rem;
left: -11rem;
bottom: auto;
}
}
&--badge {
transform: scale(0.45);
left: -16vw;
bottom: -22vw;
position: absolute;
color: #fff;
background-color: #005fac;
border-radius: 50%;
width: 80%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
text-align: center;
padding: 1rem;
font-size: 5vw;
box-shadow: 1px 5px 24px 3px rgba(0, 0, 0, 0.3);
@media only screen and (min-width: 570px) {
bottom: -18vw;
}
@media only screen and (min-width: 630px) {
bottom: -13vw;
font-size: 2rem;
}
@media only screen and (min-width: 840px) {
font-size: 1.6rem;
transform: scale(0.6);
left: -7rem;
top: 2rem;
width: 192px;
height: 192px;
}
@media only screen and (min-width: 1100px) {
transform: scale(0.8);
left: -5vw;
top: -1rem;
}
@media only screen and (min-width: 1300px) {
top: 0;
left: -1rem;
bottom: auto;
}
}
}
}
/**
* Evening Section
*/
.evening-section {
position: relative;
display: flex;
flex-wrap: wrap-reverse;
align-items: center;
overflow: hidden;
@media only screen and (min-width: 1100px) {
margin-top: -4vw;
}
@media only screen and (min-width: 1230px) {
margin-top: -8rem;
}
@media only screen and (min-width: 1390px) {
margin-top: -12rem;
}
&__left {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
@media only screen and (min-width: 1100px) {
width: 50%;
}
&--image-large {
padding-top: 1.5rem;
object-fit: contain;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: -17vw;
@media only screen and (min-width: 1100px) {
margin-top: 0;
}
.foreground {
width: 120%;
}
.background {
position: absolute;
z-index: -1;
width: 89%;
margin-top: -10vw;
margin-left: -2rem;
}
}
}
&__right {
width: 100%;
max-width: 55rem;
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-wrap: wrap;
@media only screen and (min-width: 1100px) {
width: 50%;
}
&--content {
width: 100%;
max-width: 24rem;
p {
@media only screen and (min-width: 840px) {
font-size: 1.25rem;
}
}
}
&--image-cup {
position: relative;
max-width: 11rem;
margin-top: -30%;
margin-right: -22%;
@media only screen and (min-width: 500px) {
margin-top: -18%;
margin-right: -3%;
}
@media only screen and (min-width: 840px) {
max-width: 20rem;
}
.background {
position: absolute;
transform: scale(0.6);
z-index: -1;
top: 2rem;
left: -0.5rem;
@media only screen and (min-width: 1100px) {
top: 2.4vw;
left: -0.7rem;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment