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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main-doc"> 
  <nav id="nav-bar"> 
    <nav id="navbar">
    <header id="header">Lorem Ipsum
    </header>
     <div>
     <a class="nav-link" href="#What_is_Lorem_Ipsum?"> What is Lorem Ipsum?</a>
       </div>
    
    <div>
      <a class="nav-link" href="#Where_does_it_come_from?"> Where does it come from?</a>
    </div>
    
    <div>
      <a class="nav-link" href="#Why_do_we_use_it?">Why do we use it?</a>
    </div>
    
    <div>
      <a class="nav-link" href="#Where_can_I_get_some?">Where can I get some?</a>
    </div>
    
    <div>
      <a class="nav-link" href="#Meat_makes_an_Excellent_Substitute">Meat makes an Excellent Substitute</a>
    </div>
    
    <div>
      <a class="nav-link" href="#How_crazy_can_you_get?">How crazy can you get?</a>
    </div>
    
    <div>
      <a class="nav-link" href="#For_Those_Who_Love_Cheese">For Those Who Love Cheese</a>
    </div>
    
    <div>
      <a class="nav-link" href="#For_the_Occasional_Odd_Hipster">For the Occasional Odd Hipster</a>
    </div>
    
    <div>
      <a class="nav-link" href="#Who_Wants_Dessert?">Who Wants Dessert?</a>
    </div>
    
    <div>
      <a class="nav-link" href="#Lorem_Ipsum_Code">Lorem Ipsum Code</a></div>
    </nav>
  </nav>

  
  <div id="technical-doc-writing">
    <section class="main-section" id="What_is_Lorem_Ipsum?">
      <header>What is Lorem Ipsum? </header>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </section>
    
     <section class="main-section" id="Where_does_it_come_from?">
       <header>Where does it come from?</header>
       <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>

<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
    </section>
    
     <section class="main-section" id="Why_do_we_use_it?">
       <header> Why do we use it?</header> 
       <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    </section>
    
     <section class="main-section" id="Where_can_I_get_some?">
       <header>Where can I get some? </header>
         <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words ect. </p>
       
       <ul>
         <li>Lorem Ipsum</li>
         <li>Lorem Ipsum</li>
         <li>Lorem Ipsum</li>
         <li>Lorem Ipsum</li>
         <li>Lorem Ipsum</li>
         </ul>
         
    </section>
    
     <section class="main-section" id="Meat_makes_an_Excellent_Substitute">
       <header>Meat makes an Excellent Substitute </header>
       <p>Bacon ipsum dolor amet eiusmod short loin occaecat veniam, prosciutto ullamco consequat sirloin id quis officia ut fatback. Esse pork loin minim ad cillum fatback tenderloin pork veniam officia alcatra picanha. Nisi doner leberkas cupidatat esse pork chop landjaeger buffalo bresaola adipisicing excepteur. Ut meatloaf culpa ipsum qui, tail bresaola ribeye exercitation shankle velit aute reprehenderit sed. Dolore frankfurter nulla shank venison cillum.</p>

<p>Rump esse bacon leberkas, sausage sed dolore est. Pork chicken adipisicing tenderloin, cow chuck jerky minim frankfurter. Sunt irure meatloaf occaecat, pig consectetur landjaeger jerky do nulla. Spare ribs burgdoggen frankfurter short loin turkey elit, duis bresaola jerky eu adipisicing non cillum corned beef. Consequat magna pastrami shoulder reprehenderit cupim kevin ullamco pork sausage in minim id ad. Elit non doner, esse qui fatback pastrami capicola boudin pork loin lorem</p>

<p>Consequat qui andouille short loin. Magna rump cupidatat, beef ea qui venison reprehenderit ball tip. Eiusmod frankfurter ham tongue turducken mollit in sirloin aute biltong ad occaecat pork loin t-bone rump. Beef ribs ullamco kevin, incididunt aliqua deserunt pork belly filet mignon non mollit commodo pariatur. Drumstick tongue tempor do ham sunt nisi ex capicola jerky ut. Doner kielbasa chicken adipisicing nostrud ribeye in officia exercitation leberkas. Jowl qui minim boudin sausage t-bone, kevin in.</p>

<p>Nulla ea tenderloin mollit anim chuck veniam short loin pig dolore adipisicing. Ball tip landjaeger consequat alcatra sirloin reprehenderit short loin eu cillum ribeye porchetta cupim. Bacon turducken ex chicken voluptate, corned beef doner officia et hamburger. Minim dolore ut leberkas biltong beef, esse dolore laborum excepteur. Filet mignon short loin culpa et chislic, ea exercitation ut porchetta beef flank shank proident.</p>

<p>Pork chop mollit labore incididunt exercitation nostrud pig kielbasa eu cow eiusmod consequat. Jowl pork belly nisi, beef ribs incididunt voluptate biltong excepteur ullamco ribeye irure flank bresaola sausage quis. Sausage officia quis, cillum ullamco brisket flank sirloin pancetta mollit kevin voluptate. Elit burgdoggen picanha, commodo fugiat corned beef capicola do short ribs ground round est kielbasa biltong excepteur.</p>
    </section>
    
     <section class="main-section" id="How_crazy_can_you_get?">
       <header>How crazy can you get? </header>
       <p>With morals looking for adventure full-contact but I only smoke when drinking. Keep up with me is probably a conspiracy MFA with lots of self-respect I do well dating, females at least once a day is probably a conspiracy I don't really keep a budget extreme. Crying in my bathtub that just proves my point you could say I'm old-fashioned heyyy unworthy of serious consideration ages 18 - 22.</p>

<p>Skydiving I am a gentleman first and foremost it depends on the night I'm an enormous man-child. If you have a BMI under 25 I starred in my own reality show someone to provide for you beekeeping I'm too lazy to keep typing, when I picked this username I didn't realize I couldn't change it clubbing if that paragraph above turned you off is probably a conspiracy trapped in a sexless marriage. It's huge you should message me proper grammar I'm a big fan of dive bars it's very hard to meet quality women.</p>

<p>Keep up with me I'm just in town for the night friendzone if you like my profile. Keep up with me you need a real man blackjack is pretty awesome I am a gentleman first and foremost, playing devil's advocate I'm just in town for the night clubbing if you have a BMI under 25 younger women. When I get drunk ultramarathons that means I am wonderful is probably a conspiracy I despise if you like my profile.</p>

<p>I may be somewhat jaded a fairly successful career in sports beekeeping see, I told you. Documentary filmmaker my hobbies include I am extremely experienced and talented see, I told you wildly attractive doesn't hurt, if you have a BMI under 25 there's no such thing as a typical Friday night my wife The Game I'm fit/healthy and highly intelligent. Work hard play hard when I picked this username I didn't realize I couldn't change it I will love you forever I did a lot of modeling work in the mid-80s blackjack motorcycle collection.
 </p>
    </section>
    
    <section class="main-section" id="For_Those_Who_Love_Cheese"> 
      <header>For Those Who Love Cheese</header>
      <p>
      I love cheese, especially babybel pepper jack. Camembert de normandie red leicester blue castello who moved my cheese macaroni cheese boursin airedale cheese and wine. Cottage cheese cut the cheese mozzarella mozzarella blue castello mozzarella fromage cheese strings. Ricotta.</p>

<p>Manchego stinking bishop mozzarella. Queso parmesan brie mozzarella roquefort cheesy feet manchego manchego. Boursin chalk and cheese fromage frais cut the cheese fondue pecorino the big cheese fromage. Cheesecake cheese triangles halloumi hard cheese cheese slices everyone loves manchego.</p>

<p>Caerphilly cheese and biscuits port-salut. Say cheese squirty cheese roquefort cottage cheese rubber cheese cheese slices swiss bavarian bergkase. Red leicester the big cheese stilton cheesy grin bavarian bergkase dolcelatte cream cheese cheese and wine. Emmental paneer fromage frais cheesecake red leicester cut the cheese. </p>
    </section>
    
    <section class="main-section" id="For_the_Occasional_Odd_Hipster">
      <header>For the Occasional Odd Hipster</header>
    
    <p>I'm baby flexitarian af banh mi vegan, cardigan next level umami intelligentsia blue bottle typewriter fashion axe hella narwhal. Intelligentsia umami vaporware biodiesel. Paleo marfa banh mi raclette vape XOXO, edison bulb tbh messenger bag. Air plant bicycle rights twee hoodie. Church-key synth neutra lyft four dollar toast. Fanny pack actually williamsburg, brunch ugh 3 wolf moon locavore. Truffaut live-edge pour-over hell of fanny pack.</p>

<p>Copper mug jean shorts lo-fi affogato normcore master cleanse cliche. Fashion axe XOXO DIY, biodiesel farm-to-table plaid green juice listicle. Taiyaki health goth small batch you probably haven't heard of them beard vape, 90's kale chips thundercats subway tile mixtape copper mug hoodie. +1 jean shorts normcore hella truffaut echo park hashtag thundercats fingerstache venmo quinoa snackwave master cleanse next level retro. Put a bird on it twee vegan mlkshk, wayfarers poke tofu. Sustainable pinterest godard gentrify kombucha venmo portland 8-bit cloud bread whatever farm-to-table irony pork belly health goth. Intelligentsia lo-fi green juice, gastropub migas hashtag sriracha godard plaid woke tumblr art party mlkshk meditation.</p>
    </section>
    
    <section class="main-section" id="Who_Wants_Dessert?">
    <header>Who Wants Dessert?</header>
      
  <p>Fruitcake sweet roll sugar plum. Chocolate bar cheesecake candy canes danish. Oat cake ice cream dragée jelly.</p>

<p>I love soufflé soufflé jelly. Soufflé biscuit I love. Brownie apple pie topping tart jelly I love I love.</p>

      <p>Candy canes dragée chocolate donut toffee. Wafer I love jelly beans. Jelly pudding tart.</p>

<p>Tootsie roll topping macaroon pudding topping. Tart candy gummi bears bear claw muffin gingerbread. Fruitcake caramels soufflé wafer sugar plum liquorice macaroon oat cake jujubes. Gummi bears cheesecake sweet roll.</p>
    </section>


  <section class="main-section" id="Lorem_Ipsum_Code">  
    <header>Lorem Ipsum Code</header>
    <pre>
    <code> sandbox="allow-scripts allow-same-origin" id="64f354e2a9c80b?" frameborder="0" allowtransperency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height: 0px; width: 0px; display: none;" scrolling="no" src="//acdn.adnxs.com/ib/static/usersync/v3/async_usersync.html">
      </code>  
      <code> sandbox="allow-scripts allow-same-origin" id="64f354e2a9c80b?" frameborder="0" allowtransperency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height: 0px; width: 0px; display: none;" scrolling="no" src="//acdn.adnxs.com/ib/static/usersync/v3/async_usersync.html">
      </code>  
      <code> sandbox="allow-scripts allow-same-origin" id="64f354e2a9c80b?" frameborder="0" allowtransperency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height: 0px; width: 0px; display: none;" scrolling="no" src="//acdn.adnxs.com/ib/static/usersync/v3/async_usersync.html">
      </code>
        <code> sandbox="allow-scripts allow-same-origin" id="64f354e2a9c80b?" frameborder="0" allowtransperency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height: 0px; width: 0px; display: none;" scrolling="no" src="//acdn.adnxs.com/ib/static/usersync/v3/async_usersync.html">
      </code>
        <code> sandbox="allow-scripts allow-same-origin" id="64f354e2a9c80b?" frameborder="0" allowtransperency="true" marginheight="0" marginwidth="0" width="0" hspace="0" vspace="0" height="0" style="height: 0px; width: 0px; display: none;" scrolling="no" src="//acdn.adnxs.com/ib/static/usersync/v3/async_usersync.html">
      </code>
      </pre>
    </section>
    </nav>
    
    </div> 
</main>
              
            
!

CSS

              
                #main-doc {
  height: 100%;
  width: 100%;
}

#nav-bar {
  position: fixed;
  width: 300px;
  height: 100%;
  background-color: pink;
}

#technical-doc-writing {
  width:75%;
  background-color: lightblue;
  margin-left: 320px;
}

header {
  font-weight: bold;
  font-size: 26px;
}

#navbar {
  text-align: center; 
}

p {
  font-size: 20px; 
}

pre {
 width: 100%;
}

.nav-link {
  margin-bottom: 20px; 
  font-size: 19px;
}

a {
  text-decoration: none;
}

@media only screen and (max-width: 600px) {
}

  #Lorem Ipsum Code {
    display: none;
  }

body {
  overflow-x: hidden;
}
  

  
 
  
  

              
            
!

JS

              
                
              
            
!
999px

Console