css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              input(type="checkbox")#toggle
label(for="toggle").toggleButton Menu
#sidebar
   nav#nav
      ul
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.
         li
            a(href="#") Lorem.

#page
   .content
      p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptatibus optio sunt sint pariatur? Necessitatibus alias fugiat illo amet, eligendi tempore recusandae qui at rem natus ad, deleniti eius? Modi at, nulla sit saepe natus! Voluptatem hic ut veniam quod aut recusandae, officia nulla nam fuga labore, fugiat nobis ex expedita qui architecto, a laudantium ipsam voluptates quidem facilis culpa enim quisquam dignissimos! Totam cumque consectetur dolorem odio explicabo. Atque non magni inventore, totam distinctio soluta molestiae porro repellat tenetur! Expedita sed cumque enim possimus est necessitatibus architecto hic maxime. Harum, optio obcaecati perferendis ea nemo deserunt tenetur ratione odio?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ullam velit, veniam maxime temporibus dicta, tenetur mollitia recusandae, architecto aut doloribus molestias animi. Explicabo iure possimus totam repellendus, nisi illo debitis, odit. Libero exercitationem tempora consectetur nostrum dolorum illum, ea, voluptatem quam ipsa incidunt ipsum nisi non eligendi repellat delectus! Provident minima atque accusamus ducimus rerum perferendis nulla assumenda totam, nemo, magni aspernatur maiores nihil culpa ullam cupiditate veritatis expedita rem vel eveniet, molestiae earum ipsum. A ipsum odit veritatis, totam recusandae quis incidunt optio necessitatibus doloremque, soluta dolorum. Ea, necessitatibus libero ad! Inventore officia perspiciatis beatae nemo aspernatur impedit recusandae voluptates voluptatem quod repellendus dicta placeat ipsam quam, exercitationem quos minus quasi veritatis. Eligendi hic tenetur consequatur ut illo tempora itaque commodi, numquam adipisci in vero doloribus inventore minima, quisquam sint quia, excepturi ullam nam repellendus aperiam explicabo? Necessitatibus consequatur voluptatum esse omnis ipsa repudiandae doloremque obcaecati exercitationem dicta accusantium nesciunt molestiae ipsam consectetur aliquid sit minima fuga beatae corrupti, culpa sed odio voluptate libero perspiciatis. Id voluptates, tenetur. Quo necessitatibus, provident asperiores, dolorum amet suscipit facere! Ad eveniet, culpa temporibus similique soluta nisi, voluptatem nobis fugiat maxime mollitia error quaerat architecto reprehenderit voluptatibus accusamus dolorem aliquam, necessitatibus illo.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam vero possimus temporibus, voluptas accusamus sit, totam laborum quibusdam repudiandae inventore vel illo accusantium saepe quaerat ratione deleniti eaque voluptatum quis perferendis aliquam dignissimos nulla a quasi? Ad temporibus sint facilis repudiandae ducimus similique! Voluptatibus aliquam autem, tenetur quas quia provident beatae debitis! Blanditiis aliquam enim rem aperiam eum deleniti ipsam a temporibus nulla, ea, officiis amet obcaecati, fugiat sit fugit non ratione laudantium omnis eveniet voluptate quo voluptates veniam molestiae aliquid in. Optio magnam repellat perferendis voluptatem vel commodi odio inventore quidem consequuntur iusto, velit, fugit, dolor necessitatibus cupiditate! Laborum ut provident aperiam quae id, doloremque minus natus sint delectus odio perferendis neque. Dolorem quae, omnis, iure soluta ut minima veritatis fugit officiis commodi sequi facere atque rem placeat totam, quasi porro cumque error unde reiciendis sapiente saepe. Impedit alias ad quidem illum eum ullam ratione, porro unde inventore, saepe, voluptatibus esse autem! Veritatis cupiditate minus, dolorum sint recusandae voluptatum facere nostrum vero ratione aliquam error impedit nulla accusantium, iusto, ab, corporis? Omnis porro blanditiis, repellendus placeat, nesciunt aperiam modi, facere perferendis impedit soluta quod ipsa voluptatibus quas praesentium minima consequuntur dolorem fugit, ex saepe illo ab corporis dolorum esse! Quia sapiente quasi, obcaecati incidunt, doloribus illo consequatur ad reiciendis dolores officiis dolorem beatae laboriosam non. Veritatis exercitationem, dolores aliquid neque tempora quam error quo amet praesentium, odio ipsum ex quasi, hic possimus qui saepe repudiandae incidunt voluptate blanditiis! Quasi dicta, voluptates perferendis quia natus ipsa quis doloribus, iste officiis eligendi! Molestiae ducimus sunt dolore sed doloremque dolores quisquam mollitia laudantium voluptatem non. At nihil quaerat hic unde eaque dolor impedit nisi provident numquam sapiente, fuga repudiandae, aperiam enim, mollitia soluta beatae atque explicabo quam placeat asperiores alias aut ratione. Itaque nobis consequatur quidem adipisci autem ipsa repellendus earum porro odit, similique, soluta veniam possimus error qui quasi ea est distinctio hic. Voluptates consequuntur magni voluptate a tenetur alias, et impedit delectus, dolorem quibusdam facilis quae. Enim repellat, quis. Debitis, saepe ipsam doloribus libero optio numquam, quo eveniet, error facilis vel, fugit voluptatum in quod consequatur. Magnam, laboriosam, temporibus itaque fugit eveniet laudantium quia soluta tenetur maiores nam atque omnis laborum quasi exercitationem, eos, minus voluptatum commodi. Facere atque consequatur totam expedita eius omnis, architecto nulla. Voluptatum illo voluptas explicabo laudantium ut dicta asperiores debitis iusto excepturi consectetur minima quo, rem delectus quod autem consequatur blanditiis laborum eius, expedita! Nemo quod, delectus earum qui, animi necessitatibus mollitia esse quidem odit iste voluptate est, neque fugiat modi obcaecati commodi error perspiciatis nostrum. Unde qui pariatur, dignissimos beatae eos ad error officia. Ad nisi fugit ut quas, non possimus dignissimos veniam at laboriosam nemo doloribus, in corporis dolor aliquid ab hic voluptate excepturi a quis cum quos recusandae optio. Labore temporibus maiores repudiandae culpa! Enim, debitis ex asperiores blanditiis assumenda ipsam itaque non quasi et nostrum totam, rem provident inventore rerum quas excepturi fugiat perferendis? Ab ratione a provident praesentium saepe temporibus blanditiis quis rem harum. Rerum, error velit quia in aliquid!
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Lato:300,400,900)

$sidebarWidth: 100px

*
   box-sizing: border-box

body, html 
   font:
      family: 'Lato', sans-serif
      size: 16px
      weight: 300
      
   width: 100%
   height: 100%
   overflow: hidden
   
#toggle
   display: none
   
.toggleButton 
   text:
      transform: uppercase
      align: center
   color: white
   width: 150px
   line-height: 50px
   padding-top: 10px
   display: block
   position: absolute
   z-index: 2
   background: #123
   cursor: pointer
   transform:  translateX(-54px) translateY(-7px) rotate(-45deg)

   
   &:hover
      background: #234
#toggle:checked + .toggleButton
   background: #234
   
#toggle:checked + .toggleButton + #sidebar
   left: 0
#toggle:checked + .toggleButton + #sidebar + #page
   padding-left: $sidebarWidth
   
#sidebar
   z-index: 1
   width: $sidebarWidth
   left: -$sidebarWidth
   position: absolute
   background: #123
   height: 100%
   overflow: hidden
   transition: left 200ms linear
   overflow-y: auto
#nav
   margin-top: 60px
   a
      color: #eee
      text:
         align: right
         decoration: none
      display: block
      padding: 10px
      &:hover
         color: #fff
         background: #234
      
#page
   z-index: 0
   padding-left: 0
   position: relative
   height: 100%
   overflow-x: hidden
   overflow-y: auto
   transition: padding-left 200ms linear
   background: #eee
   padding: 10px
   &:before
      content: ''
      display: block
      position: fixed
      left: 0
      right: 0
      top: 0
      bottom: 0
      border: 10px solid #123
   
.content
   padding: 20px
   min-height: 100%
   
@media screen and (min-width: 640px)
   #sidebar
      left: 0 !important
   #page
      padding-left: $sidebarWidth !important
   .toggleButton
      display: none !important
   
            
          
!
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