Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <!--Navigation Bar-->
<nav id="navbar">
  <header>Elementum Ipsum</header>
  <a class="nav-link" href="#Lorem_ipsum">Lorem ipsum</a>
  <a class="nav-link" href="#Dolor_sit">Dolor sit</a>
  <a class="nav-link" href="#Amet_consectetur">Amet consectetur</a>
  <a class="nav-link" href="#Adipiscing_elit">Adipiscing elit</a>
  <a class="nav-link" href="#Maecenas_hendrerit">Maecenas hendrerit</a>
  <a class="nav-link" href="#Vestibulum_ante">Vestibulum ante</a>
  <a class="nav-link" href="#Rutrum_vitae">Rutrum vitae</a>
  <a class="nav-link" href="#Sodales_posuere_metus">Sodales posuere metus</a>
  <a class="nav-link" href="#Consectetur">Consectetur</a>
  <a class="nav-link" href="#Velit_felis">Velit felis</a>
</nav>

<!--Main Section-->
<main id="main-doc">
  <section class="main-section" id="Lorem_ipsum">
    <header>Lorem ipsum</header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend tristique orci, in ullamcorper dolor semper eu. Fusce et quam sit amet dui rutrum pretium. Vestibulum ante risus, rutrum vitae nibh eget, sodales posuere metus.</p>
    <p>Aliquam vitae volutpat ex, ut hendrerit erat. Nunc purus nisi, aliquet et consequat quis, efficitur id dui. Maecenas porta lacus metus, eget gravida leo congue vel. Etiam at ultricies turpis. Fusce eleifend, magna vitae condimentum consequat, eros dolor varius nunc, ac tempor dui erat nec urna. Sed commodo sodales rutrum.</p>
    <code>commodo lorem_ipsum() { var sit = 0; } //Magna vitae condimentum</code>
    <p>Morbi at vehicula lorem. Donec tincidunt, diam at rhoncus sodales, arcu tellus viverra justo, a posuere metus lorem ut turpis. Nullam laoreet quis nibh non commodo. Donec eget efficitur dolor, a ullamcorper dolor. In hac habitasse platea dictumst. Sed rhoncus efficitur semper. Sed tempor porta interdum. Vestibulum venenatis, tortor id pharetra condimentum, velit felis pretium elit, at consectetur est purus at massa:</p>
    <ul>
      <li>In augue libero, auctor feugiat lacus in.</li>
      <li>Lobortis gravida arcu.</li>
    </ul>
  </section>
  
  <section class="main-section" id="Dolor_sit">
    <header>Dolor sit</header>
    <p>Sed nec nisi sed velit vestibulum fringilla nec nec metus. Aenean maximus faucibus ipsum, eu tempor augue malesuada sed. Morbi ac sem ullamcorper sapien laoreet maximus. Aenean sed purus at velit tempus mollis. Vivamus ut metus a ligula aliquet aliquam.</p>
    <p>Aenean faucibus, ante non lacinia tempor, libero velit varius urna, nec aliquet tellus turpis ac mauris. Suspendisse blandit erat justo, non tincidunt ante ornare et. Integer feugiat, leo sed hendrerit ullamcorper, felis diam aliquet lacus, quis fringilla ipsum velit sit amet velit. Vestibulum ac ipsum euismod, feugiat urna at, venenatis enim. Nulla tristique interdum sagittis.</p>
    <p>Donec a enim tincidunt, accumsan elit eu, luctus purus. Mauris pharetra condimentum bibendum. Vestibulum eu tellus elementum, gravida lorem ac, commodo lorem. Donec mollis quam vitae odio lacinia mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi.</p>
  </section>
  
  <section class="main-section" id="Amet_consectetur">
    <header>Amet consectetur</header>
    <p>Nullam cursus quam mi, in venenatis nisl scelerisque in. Vestibulum ac purus eros. Integer congue sem mi, ac lobortis augue fringilla non:</p>
    <ol>
      <li>Nam quis varius mi, ac aliquet augue.</li>
      <li>Donec at sem convallis, posuere ipsum ornare, rutrum ante.</li>
      <li>Proin at hendrerit tortor, id tristique sem.</li>
    </ol>
    <p>Quisque ultricies quis orci at cursus. Nunc vitae hendrerit arcu. Donec vitae dolor vel ligula pellentesque faucibus id sed mi. Suspendisse egestas consequat orci non maximus. Sed erat urna, gravida et nulla sit amet, imperdiet commodo urna.</p>
    <code>orci_non_maximus(erat); //Gravida: 0.24</code>
    <p>Ut nec lectus eu metus egestas scelerisque.</p>
    <code>
      nulla_cursus(__URNA__); //Congue sem mi<br>
      commodo ipsum_ornare() { faucibus = 1; } //Suspendisse amet = 0
    </code>
  </section>
  
  <section class="main-section" id="Adipiscing_elit">
    <header>Adipiscing elit</header>
    <p>Sed erat urna, gravida et nulla sit amet, imperdiet commodo urna. Ut nec lectus eu metus egestas scelerisque. Nulla semper nec quam vel dictum. Fusce suscipit volutpat est vel commodo. Suspendisse potenti. Morbi in viverra enim. In ligula urna, volutpat sollicitudin luctus vitae, convallis eget mi. Proin enim ex, blandit ut ipsum at, luctus dapibus purus.</p>
    <code>
      enim_sit = 2;<br>
      ipsum_at = 4;<br>
      imperdiet(enim_sit,ipsum_at); //dapibus purus 8
    </code>
    <p>Nam semper tellus ac dui tincidunt mattis. Cras feugiat venenatis libero, id tempor nibh porttitor vel. Cras semper nibh vitae augue facilisis, quis tincidunt quam egestas. Vestibulum porttitor libero urna, a laoreet velit fermentum congue.</p>
    <p>Nunc interdum finibus augue, at dignissim augue luctus id. Nulla at suscipit nisi, vitae rutrum est. In mattis nibh in dui fermentum, in fringilla est mollis. Etiam suscipit id lorem quis efficitur. Suspendisse aliquet facilisis nisl, et laoreet erat ornare vitae. Pellentesque justo sem, facilisis vitae mauris et, vestibulum tempor turpis. Curabitur ac facilisis dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla scelerisque laoreet metus sed ornare.</p>
  </section>
  
  <section class="main-section" id="Maecenas_hendrerit">
    <header>Maecenas hendrerit</header>
    <p>Pellentesque suscipit leo est, sit amet egestas mi fringilla sit amet. Donec congue, lectus quis tempor placerat, lectus ipsum cursus elit, at euismod lorem purus vitae turpis. Nulla vel convallis arcu. Aenean aliquam, felis ac tempus lobortis, lectus felis vulputate nibh, at ullamcorper magna tortor eu mi. Vivamus sodales est in dui tincidunt, vitae ultrices ex gravida. Cras quis semper tellus.</p>
    <ol>
      <li>Fusce imperdiet eu erat sit amet placerat.</li>
      <li>Nunc id ornare lorem.</li>
      <li>Nullam ac suscipit lorem, vitae pulvinar augue.</li>
      <li>Curabitur dignissim odio non tortor elementum consequat.</li>
      <li>Vestibulum eu nunc hendrerit diam ornare faucibus.</li>
    </ol>
    <p>Cras vel velit enim. Phasellus enim ante, consequat a feugiat quis, tempor sed diam. Nullam non porttitor sapien. Cras mi leo, rutrum vel augue in, pellentesque finibus ligula. Sed quis urna nulla. Nam maximus scelerisque quam, sed molestie erat. Sed vehicula arcu in ipsum vulputate, varius elementum ex varius. Proin et sapien semper, iaculis justo eu, mollis mauris. Sed et justo risus. Morbi felis erat, maximus quis semper nec, efficitur quis mi.</p>
  </section>
  
  <section class="main-section" id="Vestibulum_ante">
    <header>Vestibulum ante</header>
    <p>Duis dapibus consequat pellentesque. In dictum commodo dolor, at lobortis nisi interdum vitae.</p>
    <code>var sapien = mollis(justo*3); //Morbi porttitor quis</code>
    <p>Maecenas consequat scelerisque pretium. Nulla luctus tincidunt felis, id fermentum turpis bibendum eu. Maecenas turpis purus, dictum ut augue vel, ultrices efficitur justo. Donec sed elit facilisis massa feugiat lacinia eget iaculis velit.</p>
    <ul>
      <li>Quisque augue ipsum, mattis molestie mattis id, imperdiet quis quam.</li>
      <li>Mauris et fringilla turpis.</li>
    </ul>
  </section>
  
  <section class="main-section" id="Rutrum_vitae">
    <header>Rutrum vitae</header>
    <p>Praesent dictum est elementum turpis sagittis, ut ornare enim consectetur. Nam porttitor ut magna ut feugiat. Ut magna nulla, vulputate ut dolor at, elementum ornare tortor. Nulla facilisi. Integer dictum porta dolor eu imperdiet.</p>
    <p>Nullam quis diam tincidunt, efficitur sapien a, fringilla libero. Nulla non vestibulum purus, ut vehicula diam. Nam ullamcorper vel elit at elementum. Sed urna nibh, dignissim ut feugiat eget, suscipit eu justo. Phasellus nibh dolor, lacinia non lectus ut, tempus vulputate mauris. Etiam mattis placerat est non tempus.</p>
    <p>Fusce euismod ipsum non condimentum pellentesque. Nam pulvinar, nunc ut sollicitudin vestibulum, elit lacus facilisis lectus, a ornare justo velit sed neque. Donec augue orci, venenatis vitae efficitur sit amet, semper vitae quam. Donec sapien mauris, viverra ac luctus non, aliquet et quam. Duis vitae augue augue. Nunc ultricies tellus tortor, nec viverra elit maximus in. Etiam rutrum pretium quam quis malesuada. Nulla at nibh mi.</p>
    <p>Nulla bibendum hendrerit libero ut suscipit. Nulla facilisi. Vestibulum dictum enim vel orci interdum pulvinar. Curabitur eu sem nisl. Sed porttitor suscipit suscipit.</p>
  </section>
  
  <section class="main-section" id="Sodales_posuere_metus">
    <header>Sodales posuere metus</header>
    <p>Donec varius erat eleifend ante sagittis, mattis mollis turpis auctor. Sed enim dolor, bibendum eget dapibus eget, convallis a sapien. Phasellus molestie ornare dapibus. In eros elit, ultrices et velit eget, egestas ullamcorper lectus. Suspendisse viverra justo ut dignissim scelerisque. Etiam eu ante ut risus posuere auctor vel vel tortor.</p>
    <ul>
      <li>Pellentesque volutpat, leo scelerisque pharetra finibus, felis arcu malesuada augue, ultricies egestas mauris augue ac leo.</li>
      <li>Proin a bibendum dui. Pellentesque ut efficitur purus. Sed volutpat varius ante, fermentum fringilla nisl suscipit ut.</li>
    </ul>
    <p>Praesent ornare vitae ex et imperdiet. Donec id elementum ipsum. Phasellus lacus arcu, consectetur vel magna vitae, lobortis tempor diam. Vestibulum lacinia consequat leo, nec tincidunt metus ultricies id. Ut a faucibus risus. Maecenas placerat erat elit. Etiam at turpis in eros consectetur faucibus. Sed lacinia purus ac erat vulputate, vel tincidunt felis aliquet.</p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam a dui nulla. Praesent aliquet quam et nisi vulputate, id sodales arcu pulvinar. Duis dignissim tristique iaculis. Praesent quis cursus ante. Donec eu sem eget lorem pharetra tincidunt. Curabitur elementum interdum felis, vitae consequat purus commodo quis.</p>
  </section>
  
  <section class="main-section" id="Consectetur">
    <header>Consectetur</header>
    <p>Morbi aliquet ligula purus, et tristique velit tristique ac. Fusce eu felis nec dui accumsan porttitor eu eu orci. Morbi erat dui, pretium eu orci nec, ultricies aliquam nunc. Fusce et tellus id nibh blandit eleifend. Vestibulum vel auctor felis, vitae fermentum ante. Sed cursus, diam sed sollicitudin eleifend, dui elit fringilla ante, at convallis urna elit sit amet magna.</p>
    <code>
      commodo tellus_id(purus) {<br>
      var elit_ac = 24;<br>
      elit_ac = vitae(elit_ac);<br>
      auctor elit_ac;<br>
      }
    </code>
  </section>
  
  <section class="main-section" id="Velit_felis">
    <header>Velit felis</header>
    <p>Nullam in nibh sed libero fringilla tincidunt. Nullam porttitor tincidunt mauris ut luctus. Pellentesque finibus, sapien quis lacinia venenatis, neque purus pretium eros, eu efficitur nisi est in augue. Mauris non dui id mi faucibus tincidunt quis eu ligula. In dictum justo nec orci semper tristique. Quisque et lacus ac leo cursus sagittis eu nec odio.</p>
    <p>Vestibulum in lacinia diam, ac mollis nunc. Ut facilisis, ligula non blandit egestas, tortor velit facilisis tellus, sit amet commodo tortor lectus in augue. Sed tincidunt at sem id euismod. Maecenas vel arcu efficitur, pellentesque diam id, pellentesque nisi. Donec lectus nibh, imperdiet pharetra est quis, finibus imperdiet eros. Curabitur vel elit non ipsum accumsan vestibulum vel non quam.</p>
    <p>Proin congue velit non elit interdum posuere. Maecenas dapibus auctor metus, et ullamcorper ligula fermentum ut. Maecenas ultricies, diam vel efficitur blandit, velit ligula ullamcorper dolor, non blandit diam lorem sit amet diam. Etiam velit ligula, feugiat eget ipsum eu, vulputate egestas risus.</p>
  </section>
</main>
              
            
!

CSS

              
                html,
body {
  /*design*/
  scroll-behavior: smooth;
  
  /*text*/
  font-family: 'Ubuntu', sans-serif;
  font-size: 18px;
}

code {
  /*display*/
  display: block;
  padding: 20px;
  border-radius: 15px;
  background-color: #E0E8FC;
  
  /*text*/
  font-family: 'Cutive Mono', monospace;
}

li {
  /*text*/
  font-size: 18px;
}

#navbar {
  /*location*/
  position: fixed;
  top: 0;
  left: 0;
  
  /*display*/
  display: block;
  width: 300px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#navbar header {
  /*position*/
  position: relative;
  
  /*display*/
  width: 100%;
  height: 50px;
  border-bottom: 1px solid;
  border-color: gray;
  
  /*text*/
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  line-height: 50px;
}

.nav-link {
  /*position*/
  position: relative;
  
  /*display*/
  display: block;
  width: 100%;
  height: 50px;
  
  /*text*/
  text-decoration: none;
  color: #264A9C;
  line-height: 50px;
  padding-left: 20px;
}

.nav-link:hover {
  animation-name: background-color;
  animation-duration: 250ms;
  animation-fill-mode: forwards;
}

#main-doc {
  /*position*/
  position: absolute;
  top: 0;
  left: 300px;
  
  /*display*/
  padding: 30px;
  background-color: #B6C7F0;
}

.main-section {
  /*position*/
  position: relative;
  
  /*display*/
  margin-bottom: 50px;
  
  /*text*/
  line-height: 30px;
}

.main-section header {
  /*position*/
  position: relative;
  
  /*text*/
  font-size: 24px;
}

@keyframes background-color {
  100% {
    background-color: #B6C7F0;
    color: black;
  }
}

@media (max-width: 720px) {
  body {
    /*text*/
    font-size: 14px;
  }
  
  li {
    /*text*/
    font-size: 12px;
  }
  
  #navbar {
    /*position*/
    position: relative;
    left: 0;
    
    /*display*/
    width: 100%;
    height: 200px;
  }
  
  #main-doc {
    /*position*/
    position: relative;
    left: 0;
  }
  
  #main-doc header {
    /*text*/
    font-size: 18px;
  }
  
  .main-section {
    /*display*/
    margin-bottom: 25px;
    
    /*text*/
    line-height: 25px;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console