cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              form
  input(type='radio' name='tab')#menu
  .container
    input(type='radio' name='tab' checked)#home
    section.home
      h1 Home
      label(for='home')
    input(type='radio' name='tab')#about
    section.about
      h1 About
      label(for='about')
    input(type='radio' name='tab')#work
    section.work
      h1 Work
      label(for='work')
    input(type='radio' name='tab')#contact
    section.contact
      h1 Contact
      label(for='contact')
  .menu
    div
      label(for='menu')
      label(for='home')
            
          
!
            
              pa = #f9f9f9
home = #2196F3
about = #FFC107
work = #4CAF50
contact = #F44336

body
  margin 0
  padding 0
  font-weight 300
  font-family 'Raleway', sans-serif
  background #fff
  background radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 80%, rgba(0,0,0,0.15) 100%)
  overflow hidden
  transform-style preserve-3d

input[type='radio'], .hide
  display none

input[type='radio']:checked + section
  top 0

.container
  width 100%
  height 100vh
  transition all 500ms
  transform-style preserve-3d
  section
    position absolute
    top 100vh
    width 100%
    height 100vh
    transition top 500ms
    transform-style preserve-3d
    &.home
      background home
    &.about
      background about
    &.work
      background work
    &.contact
      background contact
    h1
      margin 0
      font-size 64px
      transform translate(0, 40vh)
      text-align center
      color rgba(255,255,255,0.85)
      transition transform 500ms
      transform-style preserve-3d
    label
      display block
      position absolute
      top 0
      width 100%
      height 100vh

.menu
  display block
  position fixed
  top 20px
  left 25px
  z-index 1000
  transform (0deg)
  transition all 200ms
  width 35px
  height 4px
  background rgba(0,0,0,0.25)
  &::before, &::after
    content ''
    display block
    position absolute
    width 35px
    height 4px
    background rgba(0,0,0,0.25)
    transition all 200ms
  &::before
    top 10px
  &::after
    top 20px
  &:hover
    background white
    &::before, &::after
      background white
  div, div label:nth-child(1)
    display block
    width 35px
    height 35px
    position absolute
    top -6px
  div label:nth-child(2)
    display none

#menu:checked + .container
  transform scale(0.65) translateY(-18%)
  transition all 500ms
  transform-style preserve-3d
  section
    cursor pointer
    overflow hidden
    opacity 1
    box-shadow 0 0 40px rgba(0,0,0,0.25)
    transform-style preserve-3d
    h1
      transform scale(0.5)
      transform-style preserve-3d

#menu:checked + .container + .menu
  top 30px
  left 20px
  transform rotate(225deg)
  transition all 200ms
  transform-origin center center
  background #646464
  &::before, &::after
    background #646464
    transition all 200ms
  &::before
    opacity 0
    transition opacity 0s
  &::after
    margin-top -20px
    transform rotate(90deg)
  div label:nth-child(2)
    display block
    width 35px
    height 35px
    position absolute
    top -6px
  div label:nth-child(1)
    display none

.container
  section.home
    z-index 99
  section.about
    z-index 98
  section.work
    z-index 97
  section.contact
    z-index 96

#menu:checked + .container
  section.home
    top 192px
    &:hover
      top 188px
  section.about
    top 132px
    &:hover
      top 128px
  section.work
    top 72px
    &:hover
      top 68px
  section.contact
    top 12px
    &:hover
      top 8px
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console