Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--
// https://builtbymax.de
// Maximilian Kobus | KØBY
-->

<a href="https://builtbymax.de" target="_blank" title="Link to builtbymax website" class="trademark">
    <svg width="58px" height="58px" viewBox="0 0 58 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="koby-logo" fill="#E48873" fill-rule="nonzero"><path d="M57.7,41.5 L47.6,3.8 C46.9,1.1 44.1,-0.5 41.5,0.3 L3.8,10.4 C1.1,11.1 -0.5,13.9 0.3,16.5 L10.4,54.2 C11.1,56.9 13.9,58.5 16.5,57.7 L54.2,47.6 C56.8,46.9 58.4,44.2 57.7,41.5 Z M41.4,37.2 C40,38.6 38.2,39.6 36.4,40.2 C34.5,40.8 32.5,39.8 31.9,37.9 C31.9,37.8 31.9,37.8 31.9,37.7 C31.4,35.7 32.1,33.8 34.1,33.1 L34.8,32.8 C35.4,32.6 35.8,32.3 36.3,31.8 C38.1,30 38.1,27.2 36.3,25.5 C34.5,23.8 31.7,23.7 30,25.5 L25.3,30.1 L29.2,34 C30.7,35.5 30.7,37.8 29.2,39.3 C27.7,40.8 25.4,40.8 23.9,39.3 L22,37.4 C21.7,39.1 20.2,40.4 18.3,40.4 C16.2,40.4 14.6,38.7 14.6,36.7 L14.6,20.5 C14.6,18.4 16.3,16.8 18.3,16.8 C20.3,16.8 22,18.5 22,20.5 L22,22.9 L24.7,20.3 C29.4,15.6 36.9,15.6 41.6,20.3 C46.3,25 46.1,32.5 41.4,37.2 L41.4,37.2 Z" id="Shape"></path></g></svg>
</a>

<style>
    .mobile-container.image-3{ background-image: url('https://source.unsplash.com/j14sr5KkTJ0'); }
    .mobile-container.image-2{ background-image: url('https://source.unsplash.com/Snzzz130BWc'); }
    .mobile-container.image-1{ background-image: url('https://source.unsplash.com/b84nM5W-AF0'); }
</style>

<section class="section-container">
    <div class="mobile-container image-1">
        <span class="notch"></span>
        <div class="top-row">
            <span class="logo"><svg width="20px" height="15px" viewBox="0 0 20 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#fff" id="Logo"><path d="M6.40958333,0.36625 C6.86536111,-0.0895277778 7.58465,-0.119912963 8.07556259,0.275094444 L8.17708333,0.36625 L14.2195833,6.40958333 C14.6753611,6.86536111 14.7057463,7.58465 14.3107389,8.07556259 L14.2195833,8.17708333 L8.17708333,14.2195833 C7.72130556,14.6753611 7.00201667,14.7057463 6.51110407,14.3107389 L6.40958333,14.2195833 L0.36625,8.17708333 C-0.0895277778,7.72130556 -0.119912963,7.00201667 0.275094444,6.51110407 L0.36625,6.40958333 L6.40958333,0.36625 Z" id="Path"></path><path d="M16.000332,3.04693685 L16.0845833,3.05041667 L18.1495833,3.34458333 C18.2395833,3.35708333 18.3220833,3.39875 18.38625,3.46291667 C18.5284375,3.60510417 18.5455729,3.82513021 18.4387728,3.98677734 L18.3854167,4.05208333 L18.2379167,4.19958333 C18.17325,4.26491667 18.1603167,4.36171667 18.1991167,4.43963667 L18.2379167,4.49375 L19.26875,5.52541667 L19.3906026,5.65614863 C20.2029529,6.59183193 20.204795,7.98716207 19.3961287,8.92423995 L19.26875,9.06125 L18.2379167,10.09125 C18.17325,10.1565833 18.1603167,10.2539167 18.1991167,10.33205 L18.2379167,10.38625 L18.3854167,10.5329167 C18.4495833,10.5970833 18.49125,10.6804167 18.50375,10.7695833 C18.5321875,10.9686458 18.4138802,11.1549479 18.2314518,11.2201855 L18.1495833,11.2404167 L16.0879167,11.5345833 C16.04875,11.5404167 16.0095833,11.5404167 15.9704167,11.5345833 C15.7713542,11.5061458 15.6246094,11.3411719 15.612806,11.1479655 L15.61625,11.06375 L15.9104167,9.00041667 C15.9229167,8.91125 15.9645833,8.82791667 16.02875,8.76458333 C16.1709375,8.62239583 16.3909635,8.6046224 16.5526107,8.71182129 L16.6179167,8.76541667 L16.7654167,8.91291667 C16.83075,8.97758333 16.92755,8.99051667 17.00547,8.95171667 L17.0595833,8.91291667 L18.0870833,7.88208333 C18.385,7.58416667 18.4098264,7.11609375 18.1615625,6.78981771 L18.0870833,6.70458333 L17.05625,5.67291667 C16.9909167,5.60825 16.8941167,5.59531667 16.8161967,5.63411667 L16.7620833,5.67291667 L16.6145833,5.82041667 C16.5504167,5.88458333 16.4670833,5.92625 16.3779167,5.93875 C16.1788542,5.9671875 15.9925521,5.84888021 15.9273145,5.66645182 L15.9070833,5.58458333 L15.6129167,3.52208333 C15.6070833,3.48291667 15.6070833,3.44291667 15.6129167,3.40375 C15.6413542,3.2046875 15.8069661,3.05858073 16.000332,3.04693685 Z" id="Path"></path></g></svg></span>
            <span class="menu">
                <span></span>
            </span>
        </div>
        <div class="slider-element-container">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="content">
                            <span class="headline">FC Barcelona: Champions League 2019 Highlights</span>
                            <span class="tag">Sports</span>
                            <button class="button" aria-label="Read more">Read more</button>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content">
                            <span class="headline">Formula 1: "Red Bull will attack in 2020"</span>
                            <span class="tag">Sports</span>
                            <button class="button" aria-label="Read more">Read more</button>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="content">
                            <span class="headline">Toronto Raptors: NBA Champions 2019</span>
                            <span class="tag">Sports</span>
                            <button class="button" aria-label="Read more">Read more</button>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
</section>
<div class="infobox-container">
    <a href="#" aria-label="Toggle infobox" class="infobox-toggle"><svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m35.488 31.107-10.377-3.892c-.348-.169-.767-.024-.935.324-.094.194-.094.42.001.614l3.931 10.335c.071.29.326.498.625.509h.034c.137-.008.468-.082.591-.586l1.142-4.688c.022-.09.092-.161.182-.184l4.733-1.182c.5-.126.575-.458.583-.594.007-.312-.206-.586-.51-.656zm-15.361-2.564c-.385-.397-1.018-.406-1.415-.021s-.406 1.018-.021 1.415l1.949 2.006c.381.4 1.014.415 1.414.034s.415-1.014.034-1.414c-.004-.004-.008-.009-.013-.013zm.384-11.443c.542.114 1.073-.233 1.187-.775s-.233-1.072-.775-1.186c-1.079-.224-2.197-.179-3.255.132-.532.148-.843.7-.695 1.232s.7.843 1.232.695c.01-.003.019-.006.029-.009.74-.216 1.522-.247 2.277-.089zm-5.491 3.954c.052-.55.208-1.085.458-1.577.095-.188.202-.37.322-.543.28-.476.121-1.089-.355-1.369-.427-.252-.975-.152-1.286.235-.632.909-1.021 1.964-1.129 3.066-.033.551.386 1.025.938 1.059.525.031.985-.349 1.052-.871zm1.308 3.578c-.213-.209-.403-.438-.569-.686-.329-.444-.955-.536-1.399-.207-.414.307-.527.879-.26 1.32.237.354.509.683.811.982l1.185 1.221c.385.396 1.018.405 1.414.021.396-.385.405-1.018.021-1.415zm8.672-4.632c.249 0 .49-.092.674-.26l1.108-1.011c.408-.372.437-1.005.065-1.413s-1.005-.437-1.413-.065l-.266.243c-.095.087-.242.087-.337 0l-.266-.243c-.402-.379-1.035-.36-1.414.042s-.36 1.035.042 1.414c.008.008.016.015.025.022l1.108 1.011c.184.168.425.26.674.26zm4.483-2.9c.755-.158 1.538-.127 2.279.089.53.155 1.086-.149 1.242-.679.155-.53-.149-1.086-.68-1.242-1.058-.309-2.176-.353-3.255-.127-.541.114-.887.646-.773 1.186s.646.887 1.187.773zm7.487 3.755c-.077-.795-.302-1.569-.662-2.282-.138-.272-.295-.535-.47-.786-.343-.433-.972-.506-1.405-.163-.396.313-.496.873-.233 1.304.122.175.231.358.327.548.25.491.405 1.024.457 1.572.053.55.542.952 1.092.899s.952-.542.899-1.092zm-1.333 2.81c-.459-.308-1.08-.185-1.388.273v.001c-.173.256-.371.493-.591.709l-1.18 1.215c-.385.397-.375 1.03.021 1.415.397.385 1.03.375 1.415-.022l1.164-1.2c.31-.304.588-.64.831-1 .309-.458.189-1.079-.268-1.389-.002 0-.003-.001-.004-.002z" fill="#fff" transform="translate(-13 -15)"/></svg></a>
    <div class="infobox-detail-container">
        <h4>Materials</h4>
        <ul>
            <li><a href="https://unsplash.com/" target="_blank" aria-label="Link to: Unsplash">Photos from Unsplash</a></li>
            <li><a href="https://streamlineicons.com/" target="_blank" aria-label="Link to: Streamline">Icons by Streamline</a></li>
            <li><a href="https://fonts.google.com/" target="_blank" aria-label="Link to: Google Fonts">Fonts by Google Fonts</a></li>
        </ul>
    </div>
    <div class="social-media-links">
        <a href="https://www.koby.dev" target="_blank" aria-label="visit website: www.koby.dev"><svg height="18" viewBox="0 0 20 18" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m5.4425 11.0714286c0 .345.28.625.625.625h.59c.115 0 .20833333.0933333.20833333.2083333 0 .02-.0025.0391667-.00833333.0583333l-.16666667.5758334c-.09583333.3316666.09583334.6783333.4275.7741666.05666667.0158334.115.0241695.17333334.0241695.27833333 0 .52333333-.1841695.60083333-.4516695l.3-1.0383333c.02583333-.0891667.1075-.1508333.2-.1508333h1.16666667c.11583333 0 .20916666.0941666.20916666.2091666 0 .0191667-.0025.0383334-.00833333.0575l-.16666667.5758334c-.09583333.3316666.095.6783333.42666667.7741666.0566667.0158334.115.0241695.1733333.0241695.2783334.0008305.5241667-.1841695.6008334-.4516695l.3008333-1.0383333c.025-.0891667.1066667-.1508333.2-.1508333h1.4133333c.345 0 .625-.28.625-.625s-.28-.625-.625-.625h-.93c-.0658333 0-.1275-.0308334-.1666666-.0833334-.0391667-.0525-.0516667-.12-.0333334-.1825l.3616667-1.24999996c.0258333-.08916667.1075-.15083334.2-.15083334h1.4016667c.345 0 .625-.28.625-.625s-.28-.625-.625-.625h-.9166667c-.1158333 0-.2091667-.09416666-.2083333-.21 0-.01916666.0025-.0375.0075-.05583333l.0541666-.18583333c.0958334-.33166667-.0958333-.67833334-.4275-.77416667-.3316666-.09583333-.6783333.09583333-.7741666.4275l-.1875.64833333c-.0258334.08916667-.1075.15-.2.15h-1.1666667c-.06583333 0-.1275-.03083333-.16666667-.08333333-.03916666-.0525-.05166666-.12-.03333333-.1825l.05333333-.18583333c.10083334-.33-.08583333-.67916667-.41583333-.78-.33-.10083334-.67916667.08583333-.78.41583333-.00166667.00583333-.00333333.01166667-.005.0175l-.1875.64833333c-.02583333.08916667-.1075.15-.2.15h-1.08333333c-.345 0-.625.28-.625.625s.28.625.625.625h.59583333c.06583333 0 .1275.03083334.16666667.08333334.03916666.0525.05166666.12.03416666.18333333l-.36166666 1.25000003c-.02583334.0891666-.1075.15-.2.15h-1.07166667c-.345 0-.625.28-.625.625zm3.59333333-2.14083336c.02583334-.08916667.1075-.15083334.20083334-.15083334h1.16666663c.115 0 .2083334.09333334.2083334.20833334 0 .02-.0025.03916666-.0083334.05833333l-.3616666 1.25000003c-.0258334.0891666-.1075.15-.2.15h-1.1666667c-.115 0-.20833333-.0933334-.20833333-.2083334 0-.0191666.0025-.0383333.00833333-.0575zm10.96416667-6.40083334c0-1.38083333-1.1191667-2.5-2.5-2.5h-15c-1.38083333 0-2.5 1.11916667-2.5 2.5v12.0833333c0 1.3808334 1.11916667 2.5 2.5 2.5h15c1.3808333 0 2.5-1.1191666 2.5-2.5zm-11.955-.83333333c.215-.38916667.70416667-.53083333 1.09333333-.31666667.13333334.07333334.24333334.18333334.31666667.31666667.08.12416667.12416667.26833333.12833333.41666667-.00416666.14833333-.04833333.2925-.12833333.41666666-.215.38916667-.70416667.53083334-1.09333333.31666667-.13333334-.07333333-.24333334-.18333333-.31666667-.31666667-.08-.12416666-.12416667-.26833333-.12833333-.41666666.00416666-.14833334.04833333-.2925.12833333-.41666667zm-2.91666667 0c.215-.38916667.70416667-.53083333 1.09333334-.31666667.13333333.07333334.24333333.18333334.31666666.31666667.08.12416667.12416667.26833333.12833334.41666667-.00416667.14833333-.04833334.2925-.12833334.41666666-.215.38916667-.70416666.53083334-1.09333333.31666667-.13333333-.07333333-.24333333-.18333333-.31666667-.31666667-.08-.12416666-.12416666-.26833333-.12833333-.41666666.00416667-.14833334.04833333-.2925.12833333-.41666667zm-2.96833333.07666667c.13333333-.29833334.42916667-.49166667.75666667-.49333334.2925.00333334.56083333.1625.705.41666667.08.12416667.12416666.26833333.12833333.41666667-.00416667.14833333-.04833333.2925-.12833333.41666666-.215.38916667-.70416667.53083334-1.09333334.31666667-.13333333-.07333333-.24333333-.18333333-.31666666-.31666667-.08-.12416666-.12416667-.26833333-.12833334-.41666666.00083334-.1175.02666667-.23333334.07666667-.34zm16.1733333 12.83999996c0 .46-.3733333.8333334-.8333333.8333334h-15c-.46 0-.83333333-.3733334-.83333333-.8333334v-10.2083333c0-.115.09333333-.20833333.20833333-.20833333h16.25c.115 0 .2083333.09333333.2083333.20833333z" fill="#fff"/></svg></a>
        <a href="https://twitter.com/builtbymax" target="_blank" aria-label="visit twitter: @builtbymax"><svg height="16" viewBox="0 0 20 16" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m19.4333333 3.36666667c.1766667-.1475.2008334-.41.0541667-.58666667-.0566667-.06833333-.1341667-.11666667-.2208333-.13833333l-.6583334-.16666667c-.2233333-.05583333-.3591666-.2825-.3033333-.505.0066667-.0275.0166667-.05333333.0283333-.07833333l.3666667-.74166667c.1-.2075.0125-.45666667-.1941667-.55666667-.09-.04333333-.1925-.0525-.2891666-.02666666l-1.6666667.46666666c-.1258333.03666667-.2616667.01166667-.3666667-.06666666-.7208333-.54083334-1.5983333-.83333334-2.5-.83333334-2.3008333 0-4.16666663 1.86583334-4.16666663 4.16666667v.3c.00083333.10583333-.07833334.19583333-.18333334.20833333-2.34166666.275-4.58333333-.91666666-7-3.7-.10666666-.11833333-.27083333-.16666666-.425-.125-.13833333.06333334-.23083333.1975-.24166666.35-.33416667 1.37083334-.19916667 2.81416667.38333333 4.1.05166667.1025.01083333.22833334-.09166667.28-.03916666.01916667-.0825.02666667-.125.02l-.93333333-.18333333c-.2275-.03666667-.44083333.11833333-.4775.345-.0075.04916667-.00666667.09833333.0025.14666667.14583333 1.29583333.8725 2.45416666 1.975 3.15.10333333.05.14666667.175.09666667.27833333-.02083334.0425-.05416667.07666667-.09666667.09666667l-.44166667.175c-.21333333.08583333-.3175.32833333-.23166666.54166663.00416666.0116667.00916666.0225.015.0333334.49583333 1.085 1.4925 1.8575 2.66666666 2.0666666.10833334.0391667.16416667.1591667.125.2666667-.02083333.0583333-.06666666.1033333-.125.125-1.13333333.4683333-2.34916666.7041667-3.575.6916667-.23-.0458334-.45416666.1033333-.5.3333333-.04583333.23.10333334.4541667.33333334.5 2.12333333 1.0066667 4.43416666 1.555 6.78333333 1.6083333 2.06583333.0316667 4.0958333-.5483333 5.8333333-1.6666666 2.9033334-1.9383334 4.6425-5.20083337 4.6333334-8.6916667v-.725c.0008333-.1225.0558333-.23833333.15-.31666667z" fill="#fff"/></svg></a>
        <a href="https://www.instagram.com/koby.dev/" target="_blank" aria-label="visit instagram: @koby.dev"><svg height="19" viewBox="0 0 19 19" width="19" xmlns="http://www.w3.org/2000/svg"><path d="m13.8541667 0h-8.70833337c-2.8405.00475-5.14108333 2.30533333-5.14583333 5.14583333v8.70833337c.00475 2.8405 2.30533333 5.1410833 5.14583333 5.1458333h8.70833337c2.8405-.00475 5.1410833-2.3053333 5.1458333-5.1458333v-8.70833337c-.00475-2.8405-2.3053333-5.14108333-5.1458333-5.14583333zm-4.3541667 13.8541667c-2.40508333 0-4.35416667-1.9490834-4.35416667-4.3541667 0-2.40508333 1.94908334-4.35416667 4.35416667-4.35416667 2.4050833 0 4.3541667 1.94908334 4.3541667 4.35416667 0 2.4050833-1.9490834 4.3541667-4.3541667 4.3541667zm5.1458333-8.70833337c-.6555 0-1.1875-.532-1.1875-1.1875s.532-1.1875 1.1875-1.1875 1.1875.532 1.1875 1.1875-.532 1.1875-1.1875 1.1875z" fill="#fff"/></svg></a>
    </div>
</div>
              
            
!

CSS

              
                // https://builtbymax.de
// Maximilian Kobus | KØBY

// Colors
// -----------------------

@base__color-1: #000;
@base__color-2: #FFF;
@base__color-3: #F02B67;
@base__color-4: #202637;
@base__color-5: #EADBC9;

@bg-color: @base__color-5;

// VAR definition
// -----------------------

@layout__max-width: 1024px;

// Style definition
// -----------------------

section.section-container{
  width: 100%;
  height: 100%;
  .flex();
  flex-direction: column;
  align-items: center;
  justify-content: center;
};

.trademark{
  position: absolute;
  z-index: 99;
  left: 50px;
  top: 50px;
  .transition();
  &:hover{
    .translate(0,-3px);
  }
}

.mobile-container{
  overflow: hidden;
  width: 100%;
  max-width: 375px;
  height: 657px;
  border-radius: 26px;
  background-color: @base__color-5;
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  .shadow(0px 20px 30px -30px @base__color-4);
  .transition();
  &::before,
  &::after{
    content: '';
    display: block;
    height: 140px;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
  }
  &::before{
    top: 0;
    .gradient(@base__color-1, fade(@base__color-1, 0%));
  }
  &::after{
    bottom: 0;
    .gradient(fade(@base__color-1, 0%),@base__color-1);
  }
  .notch{
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 200px;
    height: 26px;
    background-color: @base__color-5;
    z-index: 99;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    .translate(-50%,0);
  }
}

.top-row{
  .flex();
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 50px 40px 0;
  position: relative;
  z-index: 2;
  .menu{
    cursor: pointer;
    span,
    span::before,
    span::after{
      content: '';
      width: 20px;
      height: 2px;
      border-radius: 6px;
      display: block;
      background-color: @base__color-2;
    }
    span{
      position: relative;
      margin: 5px 0;
      &::before{
        position: absolute;
        left: 0;
        width: 14px;
        top: -8px;
      }
      &::after{
        position: absolute;
        left: 0;
        bottom: -8px;
      }
    }
  }
}

.slider-element-container{
  position: relative;
  z-index: 2;
  height: calc(100% - 67px);
  padding-bottom: 25px;
  width: 100%;
  .flex();
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  .swiper-container {
    width: 100%;
    padding: 0 20px 40px;
  }
  .swiper-pagination-bullet{
    background-color: fade(@base__color-2, 90%);
    &.swiper-pagination-bullet-active{
      background-color: @base__color-3;
    }
  }
  .swiper-slide{
    width: 100%;
    padding: 30px;
    background-color: @base__color-2;
    border-radius: 8px;
    .transition(all, .35s);
    opacity: .3;
    height: 100%;
    .scale(.85);
    .content{
      .transition(all, .35s);
      opacity: 0;
      height: 100%;
      .flex();
      flex-direction: column;
      align-items: flex-start;
      .headline{
        font-family: 'Merriweather', serif;
        font-size: 22px;
        line-height: 26px;
        font-weight: 700;
        color: @base__color-4;
        margin-bottom: 15px;
      }
      .tag{
        padding: 4px 5px;
        background-color: @base__color-4;
        color: @base__color-2;
        font-size: 10px;
        line-height: 10px;
        font-weight: 700;
        text-transform: uppercase;
        display: inline-block;
        margin-bottom: 40px;
        border-radius: 4px;
      }
      button.button{
        cursor: pointer;
        width: 100%;
        margin-top: auto;
        padding: 10px 15px;
        text-align: center;
        text-transform: uppercase;
        font-weight: 600;
        color: @base__color-2;
        background-color: @base__color-3;
        border-radius: 6px;
        border: 0 none;
        -webkit-appearance: none;
        .shadow(0 10px 10px -10px fade(@base__color-3, 60%));
        .transition();
        &:hover{
          .translate(0,-2px);
          .shadow(0 10px 10px -10px @base__color-3);
        }
        &:focus{
          outline: 1px dashed @base__color-4;
        }
      }
    }
    &.swiper-slide-active{
      opacity: 1;
      .scale(1);
      .content{
        opacity: 1;
      }
    }
  }
}

@media screen and ( max-height: 670px ) {
  .mobile-container{
    .scale(.7);
  }
}

// Koby's Infobox
// -----------------------

@info-color: #E48873;

.infobox-container{
  display: none;
}

@media screen and (min-width: 1024px) {

  .infobox-container{
    display: block;
    position: absolute;
    right: 50px;
    bottom: 50px;
    z-index: 99;
    .infobox-toggle{
      width: 50px;
      height: 50px;
      border-radius: 100px;
      background: @info-color;
      .flex();
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .social-media-links{
      .flex();
      flex-direction: row;
      position: absolute;
      right: 80px;
      bottom: 15px;
      a{
        margin: 0 15px;
        .transition();
        &:hover{
          .translate(0,-2px);
          svg path{
            fill: @info-color;
          }
        }
      }
    }
    .infobox-detail-container{
      display: none;
      &.active{ .flex(); }
      flex-direction: column;
      position: absolute;
      bottom: 80px;
      min-width: 240px;
      right: 0;
      background: #FFF;
      border-radius: 12px;
      padding: 20px;
      h4{
        font-family: 'Source Sans Pro', sans-serif;
        margin-bottom: 15px;
        font-size: 22px;
        line-height: 24px;
        font-weight: 600;
        color: #000;
      }
      p{
        margin-bottom: 15px;
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #000;
      }
      ul{
        list-style: none;
        padding: 0;
        li{
          display: block;
          list-style: none;
          padding: 0;
          margin-bottom: 6px;
          &:last-child{ margin: 0; }
          a{
            display: block;
            width: 100%;
            padding: 5px 8px;
            font-family: 'Source Sans Pro', sans-serif;
            font-weight: 600;
            font-size: 18px;
            line-height: 20px;
            background-color: #F4F4F4;
            border-radius: 4px;
            color: #000;
            text-decoration: none;
            .transition();
            &:hover{
              background-color: @info-color;
              color: #FFF;
            }
          }
        }
      }
    }
  }

}

// Generals
// -----------------------

*{
  box-sizing: border-box;
}
html{
  width: 100%;
  height: 100%;
  background-color: @bg-color;
  font-family: 'Source Sans Pro', sans-serif;
}
body{
  position: relative;
  width: 100%;
  height: 100%;
}
.main-content {
  max-width: @layout__max-width;
  margin: 0 auto;
  width: 100%;
  padding: 0 15px;
}

// Mixins
// -----------------------

.transition(@attribute: all, @duration: .25s) {
  -webkit-transition: @attribute @duration ease;
  -moz-transition: @attribute @duration ease;
  -o-transition: @attribute @duration ease;
  transition: @attribute @duration ease;
}
.transition-delay(@delay) {
  -webkit-transition-delay: @delay;
  -moz-transition-delay: @delay;
  -ms-transition-delay: @delay;
  -o-transition-delay: @delay;
  transition-delay: @delay;
}
.translate(@transX,@transY) {
  -webkit-transform: translate(@transX, @transY);
  -moz-transform: translate(@transX, @transY);
  -o-transform: translate(@transX, @transY);
  -ms-transform: translate(@transX, @transY);
  transform: translate(@transX, @transY);
}
.rotate(@deg) {
  -moz-transform: rotate(@deg);
  -ms-transform: rotate(@deg);
  -o-transform: rotate(@deg);
  -webkit-transform: rotate(@deg);
  transform: rotate(@deg);
}
.scale(@scale) {
  -moz-transform: scale(@scale);
  -ms-transform: scale(@scale);
  -o-transform: scale(@scale);
  -webkit-transform: scale(@scale);
  transform: scale(@scale);
}
.translate_rotate(@transX,@transY,@rotate) {
  -webkit-transform: translate(@transX, @transY) rotate(@rotate);
  -moz-transform: translate(@transX, @transY) rotate(@rotate);
  -o-transform: translate(@transX, @transY) rotate(@rotate);
  -ms-transform: translate(@transX, @transY) rotate(@rotate);
  transform: translate(@transX, @transY) rotate(@rotate);
}
.shadow(@shadow-attributes){
  -webkit-box-shadow: @shadow-attributes;
  -moz-box-shadow: @shadow-attributes;
  box-shadow: @shadow-attributes;
}
.flex(){
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.gradient(@color-start: #fff, @color-end: #000) {
  background: -moz-linear-gradient(top, @color-start 0%, @color-end 100%);
  background: -webkit-linear-gradient(top, @color-start 0%, @color-end 100%);
  background: linear-gradient(to bottom, @color-start 0%, @color-end 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@color-start, endColorstr=@color-end, GradientType=0);
}
              
            
!

JS

              
                // https://builtbymax.de
// Maximilian Kobus | KØBY

(function () {
    document.addEventListener('DOMContentLoaded', function () {

        'use strict';

        Slider.init();
        conf.InfoBox();

    });
}());

const Slider = {

    init: () => {
        Slider.initialize();
    },

    //  Click Handler Button
    // - - - - - - - - - - - - - - - - - - - - - - - - - -

    initialize: () => {
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            loop: false,
            grabCursor: true,
            slidesPerView: 1.35,
            centeredSlides: true,
            spaceBetween: 20,
            roundLengths: true,
            pagination: {
                el: '.swiper-pagination',
            },
        })

        mySwiper.on('slideChange', function () {
            if(mySwiper.activeIndex === 1){
                let mobileContainer = conf.qS('.mobile-container');
                mobileContainer.className = '';
                mobileContainer.classList.add('mobile-container');
                mobileContainer.classList.add('image-2');
            }else if(mySwiper.activeIndex === 2){
                let mobileContainer = conf.qS('.mobile-container');
                mobileContainer.className = '';
                mobileContainer.classList.add('mobile-container');
                mobileContainer.classList.add('image-3');
            }else if(mySwiper.activeIndex === 0){
                let mobileContainer = conf.qS('.mobile-container');
                mobileContainer.className = '';
                mobileContainer.classList.add('mobile-container');
                mobileContainer.classList.add('image-1');
            }
        });
    },
};

//  Config Functions
// - - - - - - - - - - - - - - - - - - - - - - - - - -

const conf = {
    qS: (selector) => {
        return document.querySelector(selector);
    },
    qSA: (selector) => {
        return document.querySelectorAll(selector);
    },
    CqS: (container, selector) => {
        return container.querySelector(selector);
    },
    InfoBox: () => {
    let toggle = conf.qS('.infobox-container .infobox-toggle'),
        detail = conf.qS('.infobox-container .infobox-detail-container');

    if(toggle){
        toggle.onclick = (e) => {
            e.preventDefault();
            detail.classList.toggle('active');
        }
    }
}
};
              
            
!
999px

Console