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

              
                <html>
    <head>
        <meta charset="utf-8">
        <title>Welcome to the School for the gifted</title>
        <link rel='stylesheet' href='css/style.css'>
	<meta name="robots" content="noindex,nofollow" />
 <style>
        </style>
    </head>
    <body>
        <header class="ns--hf hf--clearfix"> <hr>
          </header>
      <header>
            <center> <h2>School for the Gifted</h2></center>
        </header>
        <div> 
<p class="tab">Authored by The Troublemaker, Alumn ('08)</p>
<p class="tab">January 2015</p>

<p>
Suspendisse potenti. Aliquam ultricies nisl leo, vel scelerisque erat accumsan id. Nam mattis libero id nunc blandit maximus. Nulla hendrerit velit nec lorem interdum gravida. Nam tempor efficitur urna quis viverra. Vestibulum sit amet pretium massa. Nulla risus ligula, malesuada at lobortis rutrum, fermentum vitae lacus. Integer a massa metus. Aenean rutrum erat non ex condimentum tempus. Cras quis felis at magna tincidunt lacinia. Donec pulvinar porta massa in tincidunt. Quisque blandit velit nisl. Ut ex orci, bibendum ac feugiat sed, congue a sapien.

<p>Etiam ac iaculis augue. Duis malesuada est sed ipsum faucibus tincidunt. Duis commodo pretium purus, et pulvinar augue mattis a. Nulla elementum dictum consectetur. Ut vitae ante a leo rutrum molestie nec at libero. Aenean elementum, ex in bibendum venenatis, metus sapien commodo justo, ut volutpat augue tellus sed ante. Nunc a dapibus diam, ac dapibus urna. Quisque bibendum elit ligula, id venenatis sapien egestas at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque non pellentesque tortor, ac finibus metus. Donec dictum mattis neque ac euismod. Nulla consectetur justo sit amet ex rutrum fermentum. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec at quam at nunc mollis blandit.

<p>Morbi lacinia consequat mauris non interdum. Integer fringilla metus lectus, ac laoreet augue lacinia nec. Aliquam augue elit, consectetur at euismod vitae, feugiat quis leo. Donec quis velit vel tellus lacinia aliquet. Nulla elementum leo non nunc tempor, nec aliquet massa feugiat. Nulla suscipit, leo ut semper tempus, nisi felis ornare est, at accumsan risus orci et ligula. Duis auctor dictum risus et efficitur. In hac habitasse platea dictumst. Ut auctor dapibus urna, eu luctus ante porta et. Maecenas quis leo consequat, dignissim magna id, tincidunt arcu. Aenean viverra erat nec est ultrices, vitae mollis ligula consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque sit amet convallis odio.

<p>Maecenas tincidunt ac mauris eu ornare. Aliquam ac eleifend nisi. Maecenas vulputate ullamcorper augue vitae pretium. Suspendisse nisi tortor, blandit facilisis purus sed, rhoncus sollicitudin tellus. Sed faucibus vehicula erat non iaculis. Cras quis risus bibendum, malesuada nisl nec, consequat nisi. Ut imperdiet finibus tellus. Aliquam tincidunt enim imperdiet nibh dignissim lobortis. Nam faucibus, leo ac consectetur viverra, erat turpis rhoncus ante, eu lacinia dolor lectus in felis.

<p>Proin at erat elit. Nulla eu sem eget libero gravida commodo commodo quis dolor. Pellentesque felis dolor, dictum nec quam a, laoreet gravida metus. Mauris id fermentum enim. Sed viverra molestie lectus. Morbi id leo consectetur, scelerisque ex sed, aliquam elit. Mauris ut commodo justo. Donec velit turpis, pellentesque id urna sed, consequat congue magna.
<hr style="width:50%" />
<p>Aenean sapien est, varius vel ante sit amet, aliquet feugiat lacus. Fusce non auctor justo. Fusce euismod nisi sit amet enim auctor dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pretium odio eget ullamcorper pretium. Mauris ullamcorper, turpis id efficitur pellentesque, est quam vestibulum est, eget rhoncus orci lectus vel felis. Aliquam erat volutpat. Mauris vestibulum eros sem, eu egestas erat malesuada ac. Nunc facilisis felis sit amet urna congue, eget egestas dui ornare. Nulla convallis tellus eget orci placerat, ornare maximus nibh posuere. Nunc ex tortor, rutrum a mattis nec, molestie dignissim sem. Sed neque tortor, vulputate id ex vitae, scelerisque commodo metus. Curabitur pellentesque nunc in felis blandit, sed tempus quam convallis. Quisque odio quam, vestibulum vel mattis id, ultrices in lacus. Sed at leo elit. In sit amet neque rutrum, pharetra libero eget, condimentum mauris.
</p>
       </div>
   </body>
</html>
              
            
!

CSS

              
                /* * {margin: 0} */

body,html{margin:0;padding:0}
header.ns--hf{border-top:3px red solid;width:100%;margin:0;padding:4px 0 0 0;background:red}
header.ns--hf hr{width:100%;margin:0;height:2px;background:red;border:0}

body {
    max-width: 75%;
    margin: 5em auto; 
    font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
/* 	background: #E0F8E0; */
    border: 1px solid #000;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,.3);
    overflow-x: hidden;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    border-bottom-right-radius:2px;
    border-bottom-left-radius:2px;
    background: white;
    background-size: cover; 
}  

header {
    position: relative;
    overflow: hidden;
    color: white;
    text-shadow: 0 1px 1px #226640;
    background: #2e8b57;
    background: linear-gradient(#37a668, #2e8b57);
    border-bottom: 1px solid #226640;
}

header:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(255,255,255,.3);
}

header h1 {
    margin: 0;
    padding: .25em .5em;
    position: center;
}

/* header h1 span {
    font-size: xx-small;
}
*/
body > div {
    padding: 1em;
    background: #CFC;
}

.tab { 
	margin-left: 15px; 
}

p { 
	text-shadow: 0px 2px 3px #C6C6C6;
}
              
            
!

JS

              
                
              
            
!
999px

Console