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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                header
  input#navopen(type='checkbox', name='nav')
  label(for='navopen')
    svg.ham(viewBox='0 0 100 100', onclick="this.classList.toggle('active')")
      path.line.top(d='m 30,33 h 40 c 13.100415,0 14.380204,31.80258 6.899646,33.421777 -24.612039,5.327373 9.016154,-52.337577 -12.75751,-30.563913 l -28.284272,28.284272')
      path.line.middle(d='m 70,50 c 0,0 -32.213436,0 -40,0 -7.786564,0 -6.428571,-4.640244 -6.428571,-8.571429 0,-5.895471 6.073743,-11.783399 12.286435,-5.570707 6.212692,6.212692 28.284272,28.284272 28.284272,28.284272')
      path.line.bottom(d='m 69.575405,67.073826 h -40 c -13.100415,0 -14.380204,-31.80258 -6.899646,-33.421777 24.612039,-5.327373 -9.016154,52.337577 12.75751,30.563913 l 28.284272,-28.284272')
  .navigation
    ul
      li Men's
      li Women's
      li For children
      li.line
      li DEMIX CLUB
      li Gift cards
      li.line
      li Terms and conditions
      li Privacy policy
      li Contact us
    .copy © 2019 built by Andrej Sharapov
  .logo
    svg(viewBox='0 0 190 33')
      path(d='M17.4080691,13.401856 C17.5734577,13.816656 17.9659275,14.789056 18.0748739,15.061056 C18.1536304,15.278656 18.1418169,15.547936 18.0013679,15.790016 C17.7322832,16.251056 13.2877927,24.037056 13.2877927,24.037056 C13.2877927,24.037056 22.0612642,18.625616 23.4500035,17.759296 C24.6405389,17.024896 24.8505561,15.479936 24.1653748,14.396016 C23.6849603,13.641216 16.0744594,1.655536 15.7358066,1.119696 C15.4522832,0.669536 15.7528705,0.004496 16.3343558,0.004496 L18.0919378,0.004496 C18.5684145,0.004496 19.1905907,0.083376 19.8206425,0.617856 C24.5237168,4.578176 34.7095544,13.162496 37.5789154,15.591456 C38.3940449,16.282336 38.6906943,17.524016 38.0212642,18.675936 C37.422715,19.700016 36.3660656,20.714576 34.2304525,21.545536 C31.9438895,22.434976 9.95376857,30.937696 6.31784456,32.376576 C5.3504525,32.754656 4.26755095,33.000816 2.96675648,33.000816 L0.630314335,33.000816 C0.0632677029,33.000816 -0.187440415,32.304496 0.157775475,31.911456 C1.10941623,30.804416 15.9195717,13.945856 16.531247,13.244096 C16.7977064,12.944896 17.2597444,13.021056 17.4080691,13.401856')
      path(d='M107.089821,17.8094208 C106.781324,17.4407415 106.227371,17.2351583 105.575503,17.2351583 L92.9378628,17.2351583 L94.3153683,14.4871961 L109.615471,14.4871961 C110.798489,14.4871961 112.043207,13.8307004 112.463031,13.0124793 L113.061247,11.8200967 C113.301338,11.3623314 113.25171,10.9292361 112.939189,10.5687802 C112.619962,10.2138065 112.072715,10 111.408776,10 L90.6026758,10 C89.4196574,10 88.1709158,10.652384 87.7604809,11.4664935 L79.9005176,27.1579745 C79.6537201,27.6280747 79.6953001,28.0940633 80.0105034,28.4298492 C80.3310719,28.7889346 80.8742946,29 81.5301858,29 L102.208864,29 C103.39993,29 104.6366,28.347616 105.059106,27.5184304 L105.684148,26.3013778 C105.90412,25.8600592 105.847785,25.4077761 105.556725,25.0706196 C105.254935,24.7224987 104.692934,24.5265094 104.055821,24.5265094 L89.2868696,24.5265094 L90.7046138,21.7072784 L103.783539,21.7072784 C104.945097,21.7072784 106.227371,21.0494121 106.63244,20.2366732 L107.237362,19.0621078 C107.455993,18.605713 107.410389,18.1506889 107.089821,17.8094208')
      path(d='M189.944182,10.5921409 C190.140728,11.0108401 189.812253,11.5203252 189.052991,11.9905149 L176.754028,19.398374 L181.671729,26.9647696 C181.926162,27.3631436 181.900584,27.7764228 181.596341,28.1409214 C181.273251,28.5379404 180.641879,28.7886179 179.906849,28.7886179 L176.153619,29 C174.697021,29 173.677941,28.5379404 173.077532,27.5867209 L170.337997,23.304878 L163.364636,27.5054201 C162.459983,28.0528455 161.043772,28.7886179 159.239852,28.7886179 L154.923906,28.7886179 C153.995022,28.7886179 153.716357,28.3848238 153.64097,28.2154472 C153.437692,27.7859079 153.702895,27.1829268 154.467542,26.7195122 L167.45711,18.895664 L162.842307,11.8319783 C162.582488,11.4390244 162.624221,11.0108401 162.906925,10.6707317 C163.235399,10.2574526 163.880233,10 164.615263,10 L168.503114,10 C169.969136,10 170.945137,10.5149051 171.557662,11.4701897 L173.869103,15.0298103 L180.557068,10.9891599 C181.457682,10.4417344 183.052939,10 184.850128,10 L188.654514,10 C189.591475,10 189.875525,10.401084 189.944182,10.5921409')
      path(d='M158.229352,10.5823597 C158.5374,10.9304053 158.581968,11.3784797 158.352571,11.8292947 L150.623844,27.5146401 C150.21224,28.3546084 148.966939,29 147.789803,29 L144.512697,29 C143.861208,29 143.31852,28.7848695 143.011782,28.4258618 C142.714221,28.0901486 142.657855,27.6475552 142.887252,27.2172941 L150.581897,11.4867301 C151.00661,10.668686 152.219139,10 153.373992,10 L156.714018,10 C157.361574,10 157.923926,10.2137603 158.229352,10.5823597')
      path(d='M147.394609,10.5603952 C147.714185,10.9097858 147.752481,11.3852311 147.517421,11.8524555 L139.796103,27.4941949 C139.368242,28.3532848 138.16257,29 136.981989,29 L133.778309,29 C133.12067,29 132.606972,28.8122882 132.276831,28.4464556 C131.971782,28.088844 131.932165,27.6408019 132.163263,27.159876 L136.933128,17.3920098 L126.813672,27.6914978 C126.046426,28.4259032 124.66512,29 123.608672,29 L122.344895,29 C121.1313,29 120.169932,28.31218 120.151444,27.4037643 L120.045799,17.3920098 L115.089735,27.4476094 C114.663194,28.31218 113.45224,28.9493041 112.265056,28.9493041 L109.069299,28.9493041 C108.41034,28.9493041 107.888718,28.7533713 107.578387,28.4012404 C107.266734,28.0573304 107.217874,27.5777746 107.454254,27.1160309 L115.183495,11.5181366 C115.607395,10.6782289 116.834196,10 117.977801,10 L123.808076,10 C124.422137,10 124.987337,10.1863417 125.384826,10.5138098 C125.762506,10.8330569 125.956628,11.2331434 125.940782,11.6743348 L125.964552,21.0722579 L135.502961,11.3852311 C136.262283,10.5987596 137.611896,10 138.722488,10 L145.943313,10 C146.569259,10 147.100124,10.2137449 147.394609,10.5603952')
      path(d='M81.685221,12.7638108 C83.0944902,14.3478292 83.0301889,16.6224578 81.4762419,19.6726525 C78.2317076,26.118347 72.0534285,29 61.4276457,29 L50.0463231,29 C49.3738391,29 48.8138823,28.7848695 48.4990741,28.4258618 C48.2016808,28.0901486 48.1547944,27.6475552 48.3785092,27.2159238 L53.9593225,16.0894274 L62.0277907,16.0894274 L57.9460005,24.1575076 L63.1852134,24.1575076 C69.9060344,24.1575076 71.8591851,22.7831386 73.5913002,19.3369393 C74.5544794,17.4405019 74.7058553,16.2908553 74.1003518,15.6070965 C73.4318867,14.850714 71.6636021,14.4862253 68.5516891,14.4862253 L66.476634,14.4862253 C66.476634,14.4862253 55.9606992,14.4889658 55.6150799,14.4862253 C54.9412563,14.4766335 54.0182654,14.4889658 53.4623274,14.3916775 C52.9586342,14.2834271 52.7617116,14.0682966 52.8568239,13.7545074 C53.0832179,12.8597288 53.9767375,11.3483341 55.0631608,10.5604356 C55.4837982,10.243906 56.1402068,10.0232944 57.5226839,10.0232944 C58.0652257,10 58.5997299,10 59.1422718,10 L70.5436885,10 C76.3897445,10 80.0508973,10.9098514 81.685221,12.7638108')
  ul.nav
    each val in [{name: "Sale", link:"#home"},{name:"Clothes", link:"#clothes"},{name:"Accessories", link:"#accessories"},{name:"Shoes", link:"#shoes"}]
      li
        a(href=val.link, title='') #{val.name}
main
  svg.triangle(viewBox='0 0 751 630')
    path(d='M8.65930217,599.774835 L316.9784,12.5279339 C323.570257,1.34227863 340.049897,-2.35298248 366.417323,1.44215055 C368.414855,1.6418944 378.602269,8.13356932 396.979566,20.9171753 L719.381266,284.279433 C757.334378,312.443315 761.129689,342.704508 730.767199,375.06301 C730.478878,375.370286 704.399774,396.635346 694.51199,400.530351 C497.058468,478.311419 297.504999,553.215361 95.8515835,625.242175 C83.2671306,627.838845 72.0809501,629.13718 62.2930423,629.13718 C52.5051344,629.13718 36.0254936,629.13718 12.8541198,629.13718 C5.66300384,628.937436 1.46818618,626.640382 0.26966685,622.246017 C-0.928852482,617.851653 1.86769262,610.361258 8.65930217,599.774835 Z')
  article
    .slider
      #home.slide.slide-1
        .parallax
          img(alt='', src='https://www.demix-sport.com/sportmaster.ru/sm-dev/img/item_photo2.png')
        h3.sub You are what you do
        h1.title Sport where you are
        a.btn(href='#') Let's start →
      #clothes.slide.slide-2
        h3.sub For yoga, fitness and running
        h1.title Men's and Women's clothing
      #accessories.slide.slide-3
        ul.fcolumn
          li
            h4 Whole site on pure css:
          li parallax scrolling effect; 
          li simple animation of links and buttons with css-property "cubic-bezier"; 
          li smooth scrolling when click on the navigation; 
          li animation of the hamburger on click; 
          li open/close the click menu; 
          li colors of the headings;
          li and etc.
        h3.sub For yoga, fitness and running
        h1.title Men's and women's shoes
      #shoes.slide.slide-4
        .parallax
          img(alt='', src='https://www.demix-sport.com/sportmaster.ru/sm-dev/img/item_photo.png')
        h4.sub New dimension of flexibility
        h2.title
          | Fle
          span X
          | Zome
          span 360
        a.btn(href='#') Let's start →
  aside
    ul.nums
      li scroll
      li down
footer
  ul.social
    li
      a(href='https://twitter.com/andrejsharapov', target='_blank', title='Twitter')
        i.fab.fa-twitter
        |  Twitter
    li
      a(href='https://www.behance.net/andrejsharapov', target='_blank', title='Behance')
        i.fab.fa-behance
        |  Behance
    li
      a(href='https://dribbble.com/andrejsharapov', target='_blank', title='GitHub')
        i.fab.fa-github
        |  GitHub
    li
      a(href='https://dribbble.com/andrejsharapov', target='_blank', title='Dribbble')
        i.fab.fa-dribbble
        |  Dribbble

              
            
!

CSS

              
                $colone: #3c4053;
$coltwo: #f6f6f6;
$colthr: #bad532;
$cubic1: cubic-bezier(0.45, 0.1, 0, 0.93);
$cubic2: cubic-bezier(0.25, 0.1, 0, 2.05);

@mixin fsize($sizeValue: 1.6) {
  font-size: $sizeValue + rem;
  font-weight: 300;
}

%font {
  font-family: "Lilita One", cursive;
  @include fsize(1);
  font-weight: 400;
  font-style: italic;
}

%mbm {
  background-image: linear-gradient(-90deg, $colthr 50%, $coltwo 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

*,
::before,
::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(75vh, auto) auto;
  line-height: 1.15;
  @extend %font;
  font-size: 62.5%;
  background-image: linear-gradient(
    90deg,
    lighten($colone, 15%) 50%,
    $coltwo 50%
  );
}

a {
  text-decoration: none;
  color: currentColor;

  &.btn {
    padding: 0.75em 1.5em;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 200;
    color: $coltwo;
    border-radius: 2em;
    background-color: $colthr;
    box-shadow: 5px 5px 15px rgba($colone, 0.3);
    transition: all 0.25s $cubic2;

    &:hover {
      letter-spacing: 4px;
    }
  }
}

ul {
  list-style-type: none;
  display: flex;
  
  // for demo
  &.fcolumn {
    flex-flow: column wrap;
    align-items: flex-start;
    line-height: 1.5;
    
    position: absolute;
    top: -20%;
    right: 10px;
    padding: 1em;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid lighten($colone, 55%);
    border-radius: 0.35em;
    background-color: $coltwo;
    box-shadow: 6px -6px $colthr;
    
    li {
      position: relative;
      padding-left: 1.25em;
      
      &::before {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        content:'';
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background-color: $colthr;
      }
    }
    
    h3 {
      margin: 0;
    }
  }
}

.hidden {
  overflow: hidden;
}

header {
  position: relative;
  padding: 0 1em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  @include fsize(1);

  .navigation {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 5em 2em 1em;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 50vw;
    height: 100vh;
    background-color: rgba($colthr, 0.6);
    background-image: linear-gradient(90deg, $colone, rgba($colthr, 0.6));
    color: white;
    transform: translateX(-50vw);
    transition: transform 0.5s $cubic1;

    ul {
      flex-direction: column;
      margin: 0;
      padding: 0;

      li {
        position: relative;
        margin: 0.25em 0;
        text-transform: uppercase;
        transition: transform 0.25s $cubic2;
        @include fsize(2);

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          transform: translateX(-30px);
          content: "›";
          opacity: 0;
        }

        &.line {
          width: 5vw;
          height: 3px;
          background-color: $coltwo;

          &::before {
            display: none;
          }
        }

        &:hover {
          transform: translateX(5px);

          &::before {
            transform: translateX(-20px);
            opacity: 1;
          }
        }
      }
    }
  }

  #navopen {
    display: none;

    &:checked + label ~ .navigation {
      transform: none;
    }
  }

  label {
    width: 80px;
  }

  .ham {
    position: relative;
    z-index: 5;
    width: 80px;
    cursor: pointer;

    path {
      fill: none;
      stroke: white;
      stroke-width: 5;
      transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;

      &.top {
        stroke-dasharray: 40 172;
      }

      &.middle {
        stroke-dasharray: 40 111;
      }

      &.bottom {
        stroke-dasharray: 40 172;
      }
    }

    &.active {
      path {
        &.top {
          stroke-dashoffset: -132px;
        }

        &.middle {
          stroke-dashoffset: -71px;
        }

        &.bottom {
          stroke-dashoffset: -132px;
        }
      }
    }
  }

  .logo {
    text-align: center;

    svg {
      width: 190px;

      path {
        fill: $colthr;
      }
    }
  }

  .nav {
    justify-content: flex-end;
    z-index: 3;

    li {
      position: relative;
      margin: auto 1em;

      &::after {
        position: absolute;
        content: "";
        left: 5px;
        bottom: -5px;
        z-index: -1;
        width: 110%;
        height: 70%;
        background-color: rgba($colthr, 0.7);
        transition: all 0.25s $cubic2;
      }

      a {
        color: $colone;
      }

      &:hover {
        &::after {
          left: -10%;
          bottom: -10%;
          width: 120%;
          height: 120%;
        }
      }
    }
  }
}

main {
  position: relative;
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr minmax(120px, auto);
  grid-template-rows: 1fr;
  @include fsize(1);

  .triangle {
    position: absolute;
    top: 50%;
    left: 27%;
    transform: translate(-50%, -50%);
    width: 50vw;
    fill: $colthr;
  }

  article {
    position: relative;
    overflow: hidden;
    padding-left: 136px;

    .sub {
      @include fsize(2);
      color: $colone;
    }

    .sub,
    .title {
      margin: 0;
      text-transform: uppercase;
    }

    .title {
      @include fsize(5);
      @extend %mbm;

      span {
        color: $colthr;
      }
    }

    .btn {
      position: relative;
      z-index: 2;
      color: $colone;
    }

    .slider {
      position: relative;
      height: 75vh;
      overflow: hidden;
      scroll-behavior: smooth;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      scroll-snap-type: mandatory;
      scroll-snap-type: y mandatory;
      scroll-snap-points-y: repeat(75vh);

      perspective: 1px;

      .slide {
        position: relative;
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        min-height: 100vh;
        transform-style: preserve-3d;

        .parallax {
          position: absolute;
          z-index: -2;
          top: 0;
          bottom: 0;

          img {
            max-width: 950px;
          }
        }
        &-1 {
          .sub {
            color: $coltwo;
            text-shadow: 2px -1px 6px $colone;
          }
          .parallax {
            transform: translateZ(-1px) scale(1);
          }
        }
        &-4 {
          .parallax {
            transform: translateZ(-1px) scale(-1, 1) rotate(35deg);
          }
        }
      }
    }
  }

  aside {
    position: relative;
    margin-left: -18px;
    background-color: $coltwo;
    display: flex;
    align-items: flex-end;

    .nums {
      margin: 0;
      padding: 0;
      display: flex;
      writing-mode: vertical-lr;

      li {
        position: relative;
        margin: 1em;
        padding: 1em;

        a {
          font-weight: normal;
        }

        &:last-child {
          &::before {
            position: absolute;
            content: "";
            right: 1.55em;
            bottom: calc(100% - 0.5em);
            width: 1px;
            height: 3em;
            background-color: rgba($colone, 0.4);
          }
        }
      }
    }
  }
}

footer {
  position: relative;
  z-index: 2;
  padding: 0 2em;
  @include fsize(1);

  .social {
    margin: 0;
    padding: 0;

    li {
      margin: 0.5em;
    }
  }

  a {
    color: $coltwo;

    i {
      opacity: 0;
      transition: opacity 0.2s $cubic1;
    }

    &:hover {
      i {
        opacity: 1;
        color: $colthr;
      }
    }
  }
}

              
            
!

JS

              
                // Recommended for Firefox browser!
              
            
!
999px

Console