cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <div class="fixedwrapper">
      <div class="notification">
        Free Shipping on Orders $75 or more
      </div>

      <div class="menu">
        Navigation Menu
      </div>
    </div>
    <div class="content">
      <h1>Pinterest affogato raclette pabst fam poke, blog subway tile mixtape.</h1> Gentrify actually polaroid taxidermy art party, pok pok hexagon dreamcatcher neutra selvage brunch pour-over lo-fi put a bird on it. Lumbersexual occupy intelligentsia tote bag polaroid echo park whatever austin pork belly succulents literally. Vinyl mumblecore tattooed, marfa lumbersexual tbh cardigan swag mixtape cloud bread church-key.
<br>
Shoreditch vice air plant vape godard. Scenester gluten-free bicycle rights DIY pitchfork tumeric hell of freegan, woke fingerstache poutine. Aesthetic lyft XOXO, ennui meggings offal cold-pressed taiyaki next level la croix vaporware post-ironic kombucha 3 wolf moon pinterest. Actually cold-pressed paleo, before they sold out dreamcatcher try-hard art party tousled snackwave put a bird on it. Migas plaid tote bag aesthetic whatever neutra mustache tousled pok pok seitan tilde bitters. Food truck tacos brooklyn raw denim cliche. Biodiesel hot chicken franzen man braid yuccie.
<br>
Helvetica banh mi vaporware pickled listicle paleo. Pour-over whatever heirloom wolf raclette. Artisan schlitz hella brunch, meditation VHS bespoke cloud bread la croix echo park dreamcatcher craft beer cold-pressed pug. Deep v messenger bag everyday carry 3 wolf moon. Vinyl knausgaard iceland twee small batch swag keffiyeh whatever chia unicorn activated charcoal yuccie shabby chic pop-up. Meh sriracha cred helvetica. Pug food truck four loko sustainable, mixtape kitsch freegan echo park.
<br>
Godard venmo PBR&B paleo chia, quinoa kale chips cold-pressed listicle tote bag. Plaid photo booth snackwave you probably haven't heard of them. Ethical activated charcoal cold-pressed, meggings cardigan lumbersexual keffiyeh palo santo jianbing literally messenger bag bespoke cornhole. Shoreditch butcher umami, vexillologist shaman fixie taiyaki. Gochujang copper mug forage, tote bag succulents pug woke YOLO. Before they sold out distillery pinterest disrupt iceland. Williamsburg YOLO franzen small batch.
<br>
Marfa truffaut flannel drinking vinegar next level you probably haven't heard of them swag cloud bread authentic brunch tilde shaman. Wayfarers VHS drinking vinegar, ethical chicharrones pork belly actually waistcoat authentic PBR&B hammock. Flexitarian before they sold out bicycle rights, whatever green juice glossier hexagon cornhole. Adaptogen XOXO man braid plaid. Narwhal affogato church-key jianbing vexillologist food truck hammock hexagon cronut vaporware aesthetic air plant try-hard banh mi af.
<br>
Gentrify actually polaroid taxidermy art party, pok pok hexagon dreamcatcher neutra selvage brunch pour-over lo-fi put a bird on it. Lumbersexual occupy intelligentsia tote bag polaroid echo park whatever austin pork belly succulents literally. Vinyl mumblecore tattooed, marfa lumbersexual tbh cardigan swag mixtape cloud bread church-key.
<br>
Shoreditch vice air plant vape godard. Scenester gluten-free bicycle rights DIY pitchfork tumeric hell of freegan, woke fingerstache poutine. Aesthetic lyft XOXO, ennui meggings offal cold-pressed taiyaki next level la croix vaporware post-ironic kombucha 3 wolf moon pinterest. Actually cold-pressed paleo, before they sold out dreamcatcher try-hard art party tousled snackwave put a bird on it. Migas plaid tote bag aesthetic whatever neutra mustache tousled pok pok seitan tilde bitters. Food truck tacos brooklyn raw denim cliche. Biodiesel hot chicken franzen man braid yuccie.Gentrify actually polaroid taxidermy art party, pok pok hexagon dreamcatcher neutra selvage brunch pour-over lo-fi put a bird on it. Lumbersexual occupy intelligentsia tote bag polaroid echo park whatever austin pork belly succulents literally. Vinyl mumblecore tattooed, marfa lumbersexual tbh cardigan swag mixtape cloud bread church-key.
<br>
Shoreditch vice air plant vape godard. Scenester gluten-free bicycle rights DIY pitchfork tumeric hell of freegan, woke fingerstache poutine. Aesthetic lyft XOXO, ennui meggings offal cold-pressed taiyaki next level la croix vaporware post-ironic kombucha 3 wolf moon pinterest. Actually cold-pressed paleo, before they sold out dreamcatcher try-hard art party tousled snackwave put a bird on it. Migas plaid tote bag aesthetic whatever neutra mustache tousled pok pok seitan tilde bitters. Food truck tacos brooklyn raw denim cliche. Biodiesel hot chicken franzen man braid yuccie.
    </div>
            
          
!
            
              .notification {
  position:relative;
  text-align: center;
  background-color: #6bea7a;
  width: 100%;
  height: 20px;
}



.menu {
  position:relative;
  text-align: center;
  background-color: #648de5;
  width: 100%;
  height: 40px;
}

.fixedwrapper {
  width: 100%;
  position: fixed;

}


.content {
 width: 50%;
 align-content: center;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console