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

              
                #modal
 %a#link{ :href => "#modal" } Open Modal
 .overlay
 .modal
  .bar
  %h1 Flat Modal
  %hr
  %p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt laboris nisi
  %a{ :href => "mattroelle.com" } mattroelle.com
  %a#exit{ :href => "#" }
   %span.icon-enter
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700)
$font: 'Lato', sans-serif  

/* Icomoon

@font-face 
  font-family: 'icomoon'
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggi/LYAAAC8AAAAYGNtYXAaVcxXAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zq3fchcAAAFwAAAAhGhlYWQBmVcvAAAB9AAAADZoaGVhA+IB5gAAAiwAAAAkaG10eAMAACAAAAJQAAAAFGxvY2EAKABWAAACZAAAAAxtYXhwAAgAGAAAAnAAAAAgbmFtZVcZpu4AAAKQAAABRXBvc3QAAwAAAAAD2AAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAAHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYA//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAg/+ACAAHgAAYAFQAANyM1MzUXBwERBzUjNTMVMxE3IRUjNcCgoGBgAUDAwCCggP7gIOBAQGBgAUD+YGBggGABIECAoAAAAQAAAAEAAN31qI5fDzz1AAsCAAAAAADQPQs5AAAAANA9CzkAAP/gAgAB4AAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAEAAAACAAAgAAAAAAAKABQAHgBCAAEAAAAFABYAAgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAREAAsAAAAAA/gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgCCL8tmNtYXAAAAFoAAAATAAAAEwaVcxXZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAAIQAAACErd9yF2hlYWQAAAJAAAAANgAAADYBmVcvaGhlYQAAAngAAAAkAAAAJAPiAeZobXR4AAACnAAAABQAAAAUAwAAIGxvY2EAAAKwAAAADAAAAAwAKABWbWF4cAAAArwAAAAgAAAAIAAIABhuYW1lAAAC3AAAAUUAAAFFVxmm7nBvc3QAAAQkAAAAIAAAACAAAwAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gAB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAP/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAIP/gAgAB4AAGABUAADcjNTM1FwcBEQc1IzUzFTMRNyEVIzXAoKBgYAFAwMAgoID+4CDgQEBgYAFA/mBgYIBgASBAgKAAAAEAAAABAADd9aiOXw889QALAgAAAAAA0D0LOQAAAADQPQs5AAD/4AIAAeAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAgAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAgAAIAAAAAAACgAUAB4AQgABAAAABQAWAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff')
  font-weight: normal
  font-style: normal

[class^="icon-"], [class*=" icon-"]
  font-family: 'icomoon'
  speak: none
  font-style: normal
  font-weight: normal
  font-variant: normal
  text-transform: none
  line-height: 1
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

.icon-enter:before
  content: "\e600"

$color: #07a2fe

body, html
  margin: 0px
  padding: 0px

.overlay
  position: fixed
  width: 100%
  height: 100%
  background-color: rgba(0, 0, 0, 0.5)
  top: 0px
  left: 0px
  z-index: 0
  opacity: 0
  transition: opacity 0.3s ease-out
  #modal:target &
    opacity: 1
    z-index: 50

body, html
  background: linear-gradient(135deg, $color, lighten($color, 10%))
  height: 100%
  width: 100%
  overflow: hidden
    
.modal
  width: 320px
  background: white
  box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.3)
  margin: 50px auto
  padding: 0px
  position: absolute
  top: 100px
  left: calc(50% - 160px)
  z-index: 0
  transition: all 0.3s ease-out
  transform: translateY(-100px) scale(0.75)
  opacity: 0
  #modal:target &
    transform: translateY(0px)
    opacity: 1
    z-index: 100
  p, h1, a
    font-family: $font
    padding: 6px
    color: #494949
    font-size: 13px
    box-sizing: border-box
  h1
    font-size: 19px
  hr
    width: 95%
    margin: 0px auto
  .bar
    width: 100%
    height: 4px
    margin-bottom: 20px
    background: linear-gradient(90deg, $color, lighten($color, 30%))
      
#exit
  display: block
  width: 100%
  padding-top: 15px
  padding-bottom: 15px
  background: $color
  outline: 0
  border: none
  font-family: $font
  color: white
  cursor: pointer
  margin-top: 20px
  transition: background-color 0.15s ease-in-out
  text-align: center
  text-decoration: none !important
  &:hover
    background-color: darken($color, 10%)
  span
    font-size: 2em
    
#link
  font-family: $font
  color: white
  font-size: 20px
  text-decoration: none
  display: block
  width: 130px
  margin: 0 auto
  background: darken($color, 5%)
  text-align: center
  line-height: 2.5em
  transition: background 0.3s ease-out
  cursor: pointer
  position: relative
  z-index: 25
  margin-top: 50px
  &:hover
    background: darken($color, 9%)
    
              
            
!

JS

              
                
              
            
!
999px

Console