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. 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

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

              
                <div class="outer-wrapper">

  <!---------------------------WRAPPERS-->
  <div class="scroll-wrap">
    <div class="wrapper">

      <!-----------------------------HEADER-->
      <a href="index.html">
        <header class="header-main">
        	
        </header>
      </a>

      <!----------------------------CONTENT-->
      <main class="content">
        <h1>Content!</h1>
        <p>Lorem ipsum dolor sit amet, ius te vivendum expetendis, enim admodum pri te, noster expetenda accommodare cu mel. Et insolens suscipiantur vim, ei eos percipit gubergren, ut nam sumo fugit delicata. Pro vero dicta causae ad. Unum scaevola cu his, te saepe inimicus ius. Hinc argumentum at quo, te ius modus theophrastus. Te sit autem imperdiet reprimique, probo fugit dolore vel at.</p>

<p>No error putant molestie usu. Qualisque reprimique reprehendunt ex sed, eum eu nominati patrioque voluptatum. Est justo ullum voluptua ei. Ullum regione admodum eam te. Ex vis partiendo assueverit, cu qui iusto ponderum, id ius elitr tation verear. Est no postea minimum, ne vel nibh iisque nonumes.</p>

<p>In esse ponderum his, quem tamquam et sea. Et latine menandri cum, his illud commune suscipit at. Mea at enim dicant adipiscing, in ius modo fugit dolor. Vel nihil constituto mediocritatem an, sit id docendi officiis invidunt. Euismod pertinacia adipiscing at cum, an convenire omittantur per, consulatu sententiae eu eum.</p>

<p>No ius modus accusam intellegam, cibo dicant nemore vis at. Nam lorem clita te. Duo ea delicata hendrerit signiferumque, sed inani dolorum intellegebat ad, vis no agam doming partiendo. Eu per probo adipisci, est ei fastidii mandamus.</p>

<p>Id discere consequat usu, per dicta gloriatur at, vis aliquam ceteros indoctum cu. Ne vel iisque rationibus theophrastus, aliquid conceptam cu nam. Mei ea quas eruditi, cibo fugit definitionem an sit. Ea vis option delectus facilisis, has no democritum omittantur comprehensam. In sea dicam delenit iudicabit. Putant verterem platonem duo ei, nam inciderint quaerendum ut, graece qualisque mei ut. Case ignota sit ei, quaeque neglegentur nec id.</p>

<p>Cu pri veri euismod. At cibo senserit constituto nec, ad saepe omittam sadipscing sed. Quas aliquando mel et, cu sit natum integre, omnis inciderint has an. Nonumy appetere cotidieque ut qui.</p>

<p>Ad his semper tractatos, his saepe tamquam pertinax in. No has quas movet consectetuer, quo impetus hendrerit omittantur ad. Ex pro ancillae fabellas philosophia, sea omnes nostrum dolores id. At eum consul soleat singulis, eu magna harum persequeris sit. At tacimates mnesarchum eum, eum at munere reprehendunt. At usu illum consequat, his dico alienum interpretaris ut, mei id unum maluisset.</p>

<p>An mel purto antiopam evertitur, nonumy suscipit inciderint ut nec, mandamus hendrerit appellantur ei vix. Pro ut dicta atomorum necessitatibus. Vix at dico docendi expetendis, ne laoreet pertinax appellantur cum. Appetere argumentum ne cum, stet melius mentitum nec eu. Eu vel fierent voluptaria, commodo feugait repudiare eu pri. Saperet consulatu vis id. Vix te errem luptatum, probo feugiat gubergren id sed, corpora persequeris cu qui.</p>

<p>Tritani offendit elaboraret duo ne, eum eu aliquam dolorum. Mei labitur delenit in. Putant vidisse salutatus ut his, no eirmod intellegat per, duo ut quis inani accusam. Eam eu persequeris vituperatoribus, per graeci placerat eu. Ne eum mentitum scriptorem, has at natum justo.</p>

<p>Ferri verterem inimicus nam id, diam efficiantur ut has, ubique animal reprimique ea has. At quis summo ponderum vix, sea in tation oportere abhorreant. Vero antiopam argumentum ne vis. Eos liber iuvaret te. Id mel purto quidam laboramus, oporteat accusata efficiantur an eos, ei facilisis sadipscing eum.</p>
      </main>

    </div>
    <!--end of wrapper-->

    <!----------------------------FOOTER-->

    <footer class="main-footer"></footer>
  </div>
  <!--end scroll-wrap-->
</div>
<!--end outer-wrapper-->
              
            
!

CSS

              
                @charset "UTF-8";


/*-----------------------------------------------------------------------------STANDARD STUFF*/
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: sans-serif;
	font-size: 16px;
	background: lightgrey;
}
/*----------------------------WRAPPERS*/
.outer-wrapper {
	width: 100%;
	min-height: 100%;
	
}

.wrapper {
	margin: 0 auto;
	max-width: 1000px;
	min-height: 1000px;
	
}

.scroll-wrap {
	overflow-x: hidden;
	top: 50px; bottom: 0;
	
}

/*-------------------------------HEADER*/

.header-main {
	height: 50px;
	background-color: #727992;
	background-size: auto 100%;
	display: block;
	position:fixed;
	top: 0px; right: 0px; left: 0;
	z-index: 2;
}


/*------------------------------CONTENT*/
.content {
	padding-bottom: 30%;
	line-height: 1.5rem;
	padding-top: 2rem;
  color: #424242;
		}
h1 {
  margin: 2rem 0 1rem 0;
  font-size: 3rem;
}
p {
  margin-bottom: 2rem;
}


/*-------------------------------FOOTER*/	.main-footer {
	background-color: #727992;
	background-size: auto 100%;
	position: fixed;
	bottom: 0px; left: 0; right: 0;
	height: 50px;
			}

              
            
!

JS

              
                
              
            
!
999px

Console