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="main">
    <div id="p1">
      <h1>Paragraph 1</h1> Cake chupa chups powder marzipan cupcake apple pie danish I love. Pastry soufflé gummi bears. Pudding gummi bears tiramisu oat cake candy canes liquorice ice cream. Macaroon macaroon marshmallow I love fruitcake. Cake caramels sweet roll fruitcake
      powder. Dragée jujubes brownie. Oat cake lollipop I love gummies fruitcake jelly-o. Tootsie roll danish tootsie roll dessert. Muffin pie liquorice tootsie roll topping liquorice I love toffee cake. Muffin pie sugar plum sugar plum oat cake halvah.
      Sesame snaps icing marzipan fruitcake halvah. Liquorice macaroon cake. Macaroon pie croissant marshmallow muffin muffin candy canes candy.
    </div>
    <div id="p2">
      <h1>Paragraph 2</h1> Muffin gingerbread muffin. Cake apple pie sesame snaps dessert chocolate bar tart. Biscuit cake I love icing tootsie roll gummies ice cream dessert wafer. Candy canes pastry I love bonbon bear claw jelly. Candy canes dragée carrot cake topping.
      Biscuit pudding cupcake. Tart tiramisu muffin cotton candy muffin gummi bears soufflé. Jujubes macaroon I love. Ice cream tootsie roll icing chocolate bar dessert I love I love. Gummies halvah carrot cake marzipan jelly-o I love lemon drops chupa
      chups candy canes. I love brownie jelly sugar plum chupa chups cake candy. Gingerbread lollipop gingerbread carrot cake.
    </div>
    <div id="p3">
      <h1>Paragraph 3</h1> Cookie cake I love cotton candy I love dessert powder fruitcake sweet roll. Marzipan soufflé bonbon ice cream. Jelly beans cake gummies. Icing jelly-o candy canes sweet I love icing tart sweet roll carrot cake. I love biscuit cotton candy biscuit
      marzipan sesame snaps icing. Lemon drops sesame snaps carrot cake chocolate gummies I love chupa chups. Tootsie roll liquorice sesame snaps chocolate cake oat cake. Sugar plum fruitcake brownie oat cake topping gummi bears jelly-o jelly beans I
      love. Biscuit powder croissant danish bear claw. Donut chupa chups toffee dragée. Pastry fruitcake macaroon lollipop bonbon cheesecake cake chocolate bar cake. Cookie donut biscuit sweet fruitcake.
    </div>
    <div id="p4">
      <h1>Paragraph 4</h1> Halvah chocolate cake chocolate macaroon donut dragée sugar plum. Chocolate bar apple pie dessert I love bear claw I love. I love soufflé sweet gummies pudding oat cake lollipop jujubes cheesecake. Soufflé jelly sweet roll I love. I love I love
      candy cake jujubes biscuit ice cream. Gummi bears I love ice cream I love sweet bear claw tootsie roll. Gingerbread carrot cake macaroon fruitcake dragée lemon drops. Lemon drops chocolate cake halvah sweet roll donut lollipop marshmallow. Croissant
      biscuit tootsie roll pie halvah topping. Tootsie roll chupa chups cupcake soufflé toffee. Dessert oat cake jelly beans candy cookie tiramisu macaroon I love toffee. Cotton candy I love donut sweet. Macaroon marshmallow pie croissant jelly beans
      sweet.
    </div>
    <div id="p5">
      <h1>Paragraph 5</h1> Cotton candy I love jelly-o toffee I love sweet roll bonbon powder powder. Lollipop marshmallow chupa chups candy jelly bear claw jujubes soufflé I love. Gummi bears oat cake chupa chups chocolate cake oat cake I love icing. I love chocolate sesame
      snaps. Liquorice macaroon bonbon I love tiramisu croissant I love. Croissant dessert wafer. Cake halvah I love gummies. Jelly-o chocolate bar I love candy canes pastry jelly beans muffin cake. Cake liquorice tiramisu candy canes. Icing dessert pie
      bear claw marshmallow donut ice cream. Cheesecake jelly-o jelly beans halvah apple pie cotton candy chupa chups wafer bear claw. Sugar plum sweet roll macaroon. I love cookie sweet roll icing topping donut liquorice. I love jelly icing tootsie roll
      halvah marzipan chocolate pastry.
    </div>
    <div id="p6">
      <h1>Paragraph 6</h1> Sugar plum pie cookie. Tiramisu danish chocolate bar brownie. I love cupcake tart apple pie I love fruitcake lollipop chocolate bar halvah. I love halvah carrot cake. Gummi bears tart croissant chupa chups ice cream I love fruitcake liquorice.
      Jelly beans biscuit donut I love chocolate bar sugar plum tiramisu. Cupcake sweet roll gingerbread wafer. Dragée jelly beans bear claw. Sugar plum jujubes cake tiramisu sesame snaps cupcake I love dragée. Donut macaroon dessert carrot cake bear
      claw. Topping cookie I love bonbon chocolate cake soufflé I love marshmallow sesame snaps. Marshmallow chocolate bar ice cream sweet tiramisu I love. Dragée sweet jelly fruitcake jelly-o oat cake sesame snaps halvah chocolate cake.
    </div>
    <div id="p7">
      <h1>Paragraph 7</h1> Bear claw chocolate bar sweet roll sweet halvah gummies I love bonbon candy canes. Chocolate dragée lollipop caramels muffin donut pudding. I love tootsie roll sweet roll. Jujubes candy biscuit I love muffin biscuit oat cake I love pie. Biscuit
      wafer marshmallow jelly-o I love. Cupcake macaroon candy canes jelly topping pudding. Tootsie roll gummies sesame snaps. Fruitcake powder cake ice cream carrot cake sesame snaps caramels sweet. Gummies jelly beans gingerbread I love gummies. Jelly
      candy dessert halvah icing fruitcake soufflé. Apple pie dragée candy canes fruitcake. Cake cheesecake sugar plum sesame snaps jelly sesame snaps. Candy canes marzipan muffin donut.
    </div>
    <div id="p8">
      <h1>Paragraph 8</h1> Bonbon wafer chocolate. Cookie icing jujubes icing oat cake marshmallow. Apple pie danish cake I love cookie I love jelly-o. Chocolate cake I love I love cake oat cake. Bear claw dessert apple pie gummies marshmallow sweet roll tootsie roll. I
      love cheesecake halvah oat cake. Sesame snaps I love gingerbread jujubes lollipop soufflé lollipop macaroon. Chocolate jelly-o pastry gummi bears lemon drops. Sugar plum jelly icing biscuit chocolate I love jelly-o. Topping sweet lemon drops I love
      chocolate soufflé I love fruitcake gummies. Powder I love gingerbread cookie. Apple pie candy canes sweet roll cupcake. Carrot cake marshmallow jelly chocolate cake wafer gummies cookie jujubes apple pie.
    </div>
    <div id="p9">
      <h1>Paragraph 9</h1> Wafer cotton candy oat cake. Powder I love cupcake danish sweet. I love candy canes pudding bonbon biscuit. Cake muffin jujubes bear claw. Lemon drops oat cake ice cream soufflé cheesecake toffee. Fruitcake jelly beans cheesecake. Wafer chocolate
      cake I love. Dessert tootsie roll lollipop candy canes halvah cupcake candy sugar plum sesame snaps. Cotton candy tart marshmallow chocolate. Macaroon bear claw I love. Chocolate bar fruitcake jelly-o cake cheesecake. Lemon drops sweet icing cotton
      candy chocolate brownie cheesecake soufflé donut. Chupa chups tart liquorice topping oat cake caramels I love cookie.
    </div>
    <div id="p10">
      <h1>Paragraph 10</h1> Marzipan dessert sweet roll dessert fruitcake chocolate bar lollipop I love. Caramels tootsie roll jelly tiramisu jelly. Marshmallow danish croissant. Cheesecake carrot cake powder carrot cake macaroon ice cream sweet roll dessert. Ice cream caramels
      jelly beans apple pie macaroon I love. Cake caramels I love dragée I love. Jelly powder I love I love jujubes I love soufflé tootsie roll. Halvah gingerbread candy chocolate bar cake I love biscuit marshmallow. I love biscuit tart pastry gummies
      pie toffee. Sugar plum pastry cheesecake chocolate bar I love I love toffee ice cream I love. Marzipan lollipop soufflé caramels oat cake croissant carrot cake. Dragée muffin soufflé cheesecake liquorice I love.
    </div>
  </section>
</section>
              
            
!

CSS

              
                html,
body {
  height: 100%;
  margin: 0px;
  font-family: helvetica;
}

#wrapper {
  width: 100%;
  height: 100%;
  display: flex;
}

#left-sidebar {
  width: 25%;
  height: 100%;
  background: #173643;
  color:white;
}
#left-sidebar h1{
  color:white;
  padding: 10px;
  border: 0px;
  font-weight: bold;
    
}
ul{
  margin-top: 25px;
  padding: 10px;
}

ul li{
  height: 25px;
  line-height: 25px;
}
ul li:hover{
    background: #9B9B9B;
}

#main div {
  width: 90%;
  margin: 50px 20px;
}

h1 {
  padding-top: 10px;
  margin: 5px 0px;
  color: #0A3641;
  border-bottom: solid 2px #0A3641;
}
              
            
!

JS

              
                
              
            
!
999px

Console