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.

            
              button.btn Click Me

.modal
  .modal__box
    p I am a modal! 
    p Click anywhere to close me!
            
          
!
            
              $primary_color = #da513d

html, body
  width 100%
  height 100%

body
  display flex
  font-size: 1.5
  align-items center
  justify-content center
  background $primary_color
  font-family Lato, sans-serif
  
.btn
  display block
  padding 1em 2em
  background transparent
  color #fff
  border 1px solid #fff
  outline 0
  text-transform uppercase
  cursor pointer
  transition .3s ease
  -webkit-appearance none
  
  &:hover
    background white
    color $primary_color
  
.modal
  opacity 0
  visibility hidden
  display flex
  align-items center
  justify-content center
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background rgba(0,0,0,0.7)
  transition .3s ease-in-out
  
  &__box
    padding 1em
    background white
    box-shadow 0 0 10px 0 rgba(0,0,0,0.2)
    text-align center
    transition all .3s cubic-bezier(.20,.90,.30,1.5)
    transform rotate(5deg) translate(-1em,1em)
    border-top 5px solid $primary_color
    border-bottom 5px solid #ddd
  
/* modal magic */
.btn:focus + .modal
  opacity 1
  visibility visible
  
  .modal__box
    transform rotate(0deg) translate(0,0)
            
          
!
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