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

              
                <header>
  <nav>
    <ul>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
    </ul>
  </nav>
</header>
<article>
  <p>Messenger bag four dollar toast 3 wolf moon, direct trade street art retro single-origin coffee stumptown flexitarian shoreditch sriracha franzen schlitz tacos butcher. Four loko truffaut echo park fashion axe, bespoke 8-bit lumbersexual helvetica kinfolk selfies chambray. Photo booth intelligentsia mixtape paleo quinoa normcore. Pabst pitchfork selfies ugh synth art party. Kale chips organic 8-bit cray tofu. Marfa humblebrag messenger bag thundercats asymmetrical stumptown. Fashion axe normcore meh disrupt, next level chambray PBR&B kitsch slow-carb artisan leggings flannel salvia fixie.</p>

<p>Gastropub chicharrones normcore butcher taxidermy. Heirloom keytar tilde, thundercats master cleanse literally pop-up flexitarian chillwave celiac mlkshk swag sartorial echo park. Polaroid tattooed mlkshk distillery taxidermy health goth. Craft beer bushwick everyday carry yuccie, kinfolk fashion axe bespoke small batch before they sold out hoodie ennui literally freegan chia cred. Pork belly crucifix kombucha, cardigan lomo shoreditch wayfarers PBR&B. You probably haven't heard of them small batch retro shoreditch iPhone, disrupt squid pitchfork cardigan green juice XOXO. Sustainable lumbersexual ugh post-ironic neutra ennui tofu.</p>

<p>Tacos crucifix photo booth, dreamcatcher knausgaard whatever wayfarers taxidermy pour-over humblebrag iPhone cray etsy authentic quinoa. Offal forage wayfarers, brunch polaroid meditation keffiyeh fixie cliche pop-up cred disrupt meh. Occupy truffaut organic master cleanse, vice mixtape everyday carry brunch post-ironic DIY cornhole pinterest leggings. Food truck offal williamsburg chicharrones. Fanny pack cliche vinyl, four dollar toast brunch squid kale chips mustache health goth typewriter taxidermy XOXO bushwick gluten-free. Asymmetrical kogi chia wolf. Gluten-free salvia deep v, kitsch chillwave before they sold out plaid mumblecore twee hashtag echo park roof party trust fund vinyl.</p>

<p>Pickled cliche yuccie direct trade, dreamcatcher pabst waistcoat godard quinoa farm-to-table ramps etsy skateboard lo-fi. Forage selvage authentic, brooklyn pork belly tofu pop-up trust fund tousled asymmetrical keytar YOLO organic twee portland. Cliche helvetica narwhal thundercats tumblr. Locavore mixtape cardigan, kickstarter selfies listicle direct trade photo booth. Pitchfork butcher everyday carry, 90's keffiyeh pork belly street art meggings green juice whatever fingerstache. XOXO raw denim migas, 3 wolf moon green juice pitchfork irony franzen. Swag flexitarian etsy, tousled cray knausgaard put a bird on it normcore fixie blog butcher church-key.</p>

<p>90's offal pug, small batch yuccie tote bag normcore mumblecore wayfarers street art next level kogi venmo portland photo booth. Flannel YOLO mumblecore slow-carb dreamcatcher microdosing cardigan. Swag four dollar toast chicharrones butcher master cleanse organic sartorial. Pickled pug kinfolk, normcore next level vegan cardigan sriracha. Quinoa PBR&B pitchfork squid chillwave, cardigan actually stumptown. Bushwick truffaut leggings, hashtag 8-bit literally wolf cardigan yr echo park. Vegan selfies meditation, locavore shabby chic deep v sriracha typewriter you probably haven't heard of them keytar dreamcatcher chicharrones swag.</p>

<p>Offal locavore listicle bespoke, put a bird on it single-origin coffee sustainable keffiyeh hammock craft beer kinfolk. Brunch sustainable photo booth, heirloom tote bag fanny pack forage pop-up kickstarter keytar authentic brooklyn cred kale chips occupy. Lomo green juice ethical poutine. Tumblr master cleanse chicharrones vegan wayfarers four dollar toast. Actually banh mi retro chia ugh, flexitarian messenger bag paleo roof party chicharrones. Kogi literally ethical paleo offal VHS. 90's tattooed sustainable, ugh fanny pack mixtape pabst sartorial vinyl.</p>

<p>Yr portland four loko thundercats salvia, beard schlitz blog sustainable kombucha fap microdosing cardigan. Slow-carb seitan hammock leggings four dollar toast. Before they sold out normcore sartorial disrupt organic. Artisan swag seitan, pug poutine 90's small batch franzen sriracha polaroid bespoke. Health goth kickstarter lomo gluten-free, listicle offal twee jean shorts banjo. Kogi vinyl williamsburg next level, iPhone chillwave vegan health goth messenger bag microdosing blue bottle four loko offal cliche. Microdosing asymmetrical authentic fashion axe.</p>

<p>Mustache freegan literally tofu plaid, godard post-ironic. Street art viral stumptown, marfa synth williamsburg microdosing kombucha twee meggings kale chips. +1 drinking vinegar lumbersexual tumblr YOLO cray. Narwhal deep v church-key artisan, celiac chicharrones leggings single-origin coffee. Food truck skateboard drinking vinegar, hammock health goth mlkshk authentic portland. Synth cardigan roof party mumblecore chillwave, master cleanse chambray. Scenester viral semiotics, literally leggings chambray franzen forage.

Normcore fashion axe direct trade freegan photo booth, keytar polaroid beard XOXO master cleanse next level DIY microdosing wayfarers ethical. Tote bag swag helvetica lo-fi, ethical tofu keytar raw denim. You probably haven't heard of them deep v everyday carry 8-bit, blog PBR&B 3 wolf moon pork belly stumptown tilde. Offal meditation health goth, wayfarers artisan shoreditch iPhone truffaut occupy. Art party photo booth pug sartorial vinyl. Butcher direct trade venmo bespoke deep v, letterpress helvetica listicle. Pug raw denim tacos franzen sriracha actually, pabst VHS readymade authentic.</p>

<p>Roof party kombucha taxidermy yuccie truffaut. Tattooed taxidermy 90's bicycle rights trust fund, franzen aesthetic banh mi 3 wolf moon deep v quinoa cred small batch. Flannel plaid 8-bit, brunch ethical keytar yuccie farm-to-table. Single-origin coffee franzen vegan, swag fashion axe mustache freegan gluten-free. Dreamcatcher authentic actually cliche shabby chic. Bicycle rights lomo meditation chia, fashion axe single-origin coffee sriracha forage before they sold out beard. Meditation tote bag wayfarers, disrupt austin pork belly kogi mumblecore 3 wolf moon chia.</p>

<p>Dreamcatcher craft beer chambray echo park try-hard hammock. Ethical health goth fashion axe, whatever schlitz narwhal brooklyn direct trade. 8-bit food truck migas, kitsch squid health goth semiotics put a bird on it franzen artisan schlitz. Semiotics artisan church-key, cliche aesthetic asymmetrical williamsburg hashtag. Marfa cardigan shabby chic mustache plaid, DIY health goth pop-up seitan 8-bit. Fixie pickled beard, butcher tacos polaroid art party blog synth. Meh mlkshk typewriter thundercats fashion axe pabst, artisan health goth williamsburg.</p>

<p>IPhone disrupt paleo gastropub ethical. Pitchfork pork belly taxidermy, wayfarers meggings direct trade kale chips twee XOXO. Trust fund intelligentsia wolf sustainable put a bird on it pabst chillwave, four dollar toast organic taxidermy raw denim art party sriracha everyday carry keffiyeh. Selfies crucifix cold-pressed, williamsburg taxidermy food truck hammock. Listicle twee shoreditch, mlkshk squid normcore synth narwhal locavore iPhone. Schlitz skateboard vinyl fap cray gluten-free, drinking vinegar yuccie before they sold out. Roof party church-key cronut, keytar lo-fi stumptown banjo 3 wolf moon.

Direct trade locavore hella, banh mi migas vice health goth letterpress asymmetrical hammock bespoke master cleanse. Cray gluten-free tote bag hammock, lo-fi cred small batch pickled cold-pressed post-ironic wayfarers cliche. Taxidermy brunch synth thundercats wayfarers. Master cleanse flannel marfa gentrify sriracha humblebrag. 90's gentrify kickstarter offal DIY four dollar toast. Whatever salvia occupy, aesthetic hoodie bitters chartreuse 90's mlkshk chillwave put a bird on it viral cornhole retro. Fap poutine four loko tilde, offal direct trade forage selvage four dollar toast 3 wolf moon.</p>
</article>
<footer><p>Oh look a footer</p></footer>

<div class="news-wrap">
<div class="news">
  <div class="news-content">
    <form>
      <label>Email</label>
      <input type="email" placeholder="enter email">
      <input type="submit" value="Subscribe">
    </form>
  </div>
</div>
</div>
              
            
!

CSS

              
                header { background: purple;}
footer { 
  background: magenta; 
  p { padding:0 20px; color: white;}
}

header, footer {
  padding: 10px 0;
  max-width:680px;
  margin:0 auto;
  ul { list-style: none; }
  li {
    display: inline; 
    padding: 0 10px; 
    color: white; 
    &:first-of-type {
      padding-left: 0;
    }
 } 
}

article {
  max-width: 600px;
  margin:2em auto;
}

.show {
  display: block !important;
}

.news {
  background: forestgreen;
  padding: 50px;
  position: fixed;
  display: none;
  bottom:20px;
  right: 20px;
  
  label { 
    color: white;
    padding: 0 10px 0 0;
  }
  input[type="email"] {
    padding:8px;
    border-radius: 4px;
    border: none;
    outline: none;
  }
  input[type="submit"] {
    background: white;
    border: none;
    font-size: 1em;
    padding: 8px;
    border-radius: 4px;
    margin-left: 10px;
  }
}



              
            
!

JS

              
                $(document).scroll(function() {
  var y = $(this).scrollTop(),
      news = $('.news');
    
  if (y > 600) {
    news.fadeIn();
  } else {
    news.fadeOut();
  }
 
});
              
            
!
999px

Console