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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                section id="left-menu"
  section class="search"
    input type="search" placeholder="Search..."
  nav id="nice-scroll"
    ul 
      li
        a href="#"
          h1 10 Things That Are Awesome
          p This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          time 20 AUG 2014
    ul 
      li
        a href="#"
          h1 10 Things That Are Awesome
          p This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          time 20 AUG 2014
    ul 
      li
        a href="#"
          h1 10 Things That Are Awesome
          p This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          time 20 AUG 2014
    ul 
      li
        a href="#"
          h1 10 Things That Are Awesome
          p This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          time 20 AUG 2014
    ul 
      li
        a href="#"
          h1 10 Things That Are Awesome
          p This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          time 20 AUG 2014
    ul 
      li
        a href="#"
          h1 10 Things That Are Awesome
          p This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          time 20 AUG 2014
    ul 
      li
        a href="#"
          h1 10 Things That Are Awesome
          p This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          time 20 AUG 2014
    ul 
      li
        a href="#"
          h1 10 Things That Are Awesome
          p This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          time 20 AUG 2014
    ul 
      li
        a href="#"
          h1 10 Things That Are Awesome
          p This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          time 20 AUG 2014
  section class="social"
    i class="fa fa-twitter-square"
    i class="fa fa-pinterest-square"
    i class="fa fa-facebook-square"
    i class="fa fa-pied-piper"
main
  article
    h1 Why You Are Awesome
    time 12 JUL 2014
    p You are awesome, because you are you. Just the fact that you want to know why your awesome makes you awesome. If you have any confusion why that makes you awesome here is ten great reasons.
    p I bet you didn't know wearing plaid made you awesome. Hipsters wear it, so why shouldn't you! If it's good enough for them it's good enough for you. Don't question me!
    p That's right, you've ditched Facebook for tinder not knowing what it was, but now you'll continue using it forever just because. Facebook went out with skinny jeans and low-fat lattes. Level up to Snapchat, Instagram, Twitter, or something that hasn't even been VC'd yet. 
    p Yeah, salads are for mortals. You're a God. God's need fat, liquid fat. They aren't meek. You know what you want and that's high cholesterol! So go ahead and order a bucket of Crisco with that next chicken leg. 
    

    
  
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Karma:600)
@import url(https://fonts.googleapis.com/css?family=Hind:300)
@import url(https://fonts.googleapis.com/css?family=Rozha+One)

*
  padding: 0
  margin: 0

body
  padding-left: 300px
  font-family: 'Hind', sans-serif
  color: rgba(0,0,0,.8)
  
h1
  font-family: 'Karma', serif
  color: rgba(0,0,0,1)
    
h2 
  font-weight: 500
      
a 
  text-decoration: none
  color: rgba(0,0,0,.8)

// LEFT MENU STYLES
  
#left-menu
  position: fixed
  top: 0
  bottom: 0
  left: 0
  height: 100%
  width: 300px
  background-color: rgba(0,0,0,.1)
  overflow: hidden
  border-right: 2px solid rgba(0,0,0,.1)
  
.search
  position: relative
  height: 100px
  line-height: 100px
  text-align: center
  border-bottom: 2px solid rgba(0,0,0,.1)

[type="search"]
  border-radius: 10px
  border: 1px solid rgba(0,0,0,.1)
  line-height: 30px
  padding: 5px 1em
  
[type="search"]:focus
  outline: none
  
nav
  position: relative
  padding: 10px 1em

.social
  position: absolute
  left: 0
  bottom: 0
  height: 100px
  width: 100%
  line-height: 100px
  text-align: center
  background-color: #ebebeb
  border-top: 2px solid rgba(0,0,0,.1)
  z-index: 99
    
i
  margin: 0 .5em
  font-size: 1.5em
  
ul li 
  list-style-type: none

// NAV STYLES

nav
  font-size: 0.875em
  line-height: 1.428571429em
  background-color: rgba(255,255,255,1)

nav ul li
  padding-bottom: .5em
  border-bottom: 1px solid rgba(0,0,0,.1)
  margin-bottom: .5em
    
nav h1
  line-height: 1.8em
  font-size: 1.24em
  
nav p
  margin-bottom: .5em
  
time
  font-size: 0.75em
  color: rgba(0,0,0,.6)
  
// MAIN CONTENT

main
  max-width: 760px
  margin: 0 auto
  padding: 2em

article h1
  text-align: center
  font-size: 3.263157895em
  line-height: 1.306451613em
  margin-top: 0.87096774em
  margin-bottom: 0.43548387em

article p 
  margin-top: 1.42105263em
  margin-bottom: 1.42105263em
  font-size: 1.1875em
  line-height: 1.421052632em

article time
  display: block
  font-size: 1.1875em
  text-align: center



              
            
!

JS

              
                $(document).ready(
    function() {  
      
      var winHeight = $(window).height();
      var height = winHeight - 200;
      $("nav").css("height", height);
      
      $("#nice-scroll").niceScroll({cursorfixedheight: 100});  
});

$(window).resize( 
    function() {
      var winHeight = $(window).height();
      var height = winHeight - 200;
      
      $("nav").css("height", height);
});


              
            
!
999px

Console