Created
May 25, 2021 06:07
-
-
Save motion-work/f512ce2e5a39916a02d76c8e21341efa to your computer and use it in GitHub Desktop.
Quai Café
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| new Glide(".glide").mount(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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