cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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 500ms
  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 500ms
  &::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 500ms
  transform-origin center center
  background #646464
  &::before, &::after
    background #646464
    transition all 500ms
  &::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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console