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.

            
                <section>
    <div class="bum-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet nisi vitae urna tristique rutrum id sit amet ante. Vestibulum at dui felis. Sed nec quam ante. Maecenas fringilla erat efficitur, pellentesque augue vel, lobortis lectus. Aliquam fringilla eleifend nibh, in tristique massa consectetur a. Praesent nulla urna, lacinia quis ex non, ornare dignissim orci. Suspendisse et orci et justo ullamcorper viverra eleifend tincidunt neque.</p>

      <p>Mauris eleifend lacinia ex, id ultricies arcu interdum a. Vestibulum nisl lorem, rhoncus in interdum et, tristique ac enim. Fusce pretium risus eleifend, faucibus erat efficitur, ultricies ipsum. Aenean eu est nibh. Vestibulum a dictum sapien, vitae convallis arcu. Sed non eros urna. Nunc a nunc vitae mi suscipit porttitor vulputate ut arcu.</p>

      <p>Sed vel mi nunc. Sed a lectus non lectus ornare accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat sapien ut auctor porta. Sed nec nibh porta, egestas tortor vitae, ultricies augue. Donec sit amet magna at mauris eleifend ultricies. Ut metus arcu, consectetur at ipsum mollis, mattis dapibus tellus. Ut sit amet elit elementum, malesuada tortor sed, mattis nisi. In quis augue malesuada, luctus odio eget, pharetra lorem. Proin vel libero nec orci cursus egestas vitae id nibh. Maecenas vulputate mauris cursus purus scelerisque eleifend. Cras bibendum nec leo sit amet commodo. Vivamus sodales id ipsum vel ullamcorper. Sed laoreet pretium nulla. Donec ornare lorem sollicitudin nulla venenatis, ut rhoncus tellus gravida.</p>

      <p>Fusce hendrerit pretium lorem, non consectetur justo iaculis sollicitudin. Donec purus sem, pharetra quis purus non, ullamcorper scelerisque justo. Praesent fermentum urna nisi, quis scelerisque mi varius sed. Morbi ut eros pulvinar, tincidunt nibh at, eleifend elit. Integer nec varius nibh. Vestibulum id est arcu. Nulla congue pellentesque metus, ac tincidunt ex semper in. Ut elit arcu, cursus quis cursus non, hendrerit ultricies urna.</p>

      <p>Mauris eu tincidunt erat. Aliquam posuere congue sollicitudin. In ac aliquet sapien. Cras commodo erat sed lectus tincidunt sodales. Vivamus in ligula in leo maximus varius et sed ipsum. Quisque cursus, ex sed viverra porttitor, dui lorem auctor tellus, id rutrum nibh velit commodo sapien. Curabitur dapibus, dolor eget sagittis rhoncus, urna orci rutrum nisi, id fermentum risus turpis id turpis. Aliquam erat volutpat. Proin ipsum mauris, sagittis id lacus vel, sodales semper purus. Aenean dolor elit, gravida eu eros id, euismod tempor ante.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet nisi vitae urna tristique rutrum id sit amet ante. Vestibulum at dui felis. Sed nec quam ante. Maecenas fringilla erat efficitur, pellentesque augue vel, lobortis lectus. Aliquam fringilla eleifend nibh, in tristique massa consectetur a. Praesent nulla urna, lacinia quis ex non, ornare dignissim orci. Suspendisse et orci et justo ullamcorper viverra eleifend tincidunt neque.</p>

      <p>Mauris eleifend lacinia ex, id ultricies arcu interdum a. Vestibulum nisl lorem, rhoncus in interdum et, tristique ac enim. Fusce pretium risus eleifend, faucibus erat efficitur, ultricies ipsum. Aenean eu est nibh. Vestibulum a dictum sapien, vitae convallis arcu. Sed non eros urna. Nunc a nunc vitae mi suscipit porttitor vulputate ut arcu.</p>

      <p>Sed vel mi nunc. Sed a lectus non lectus ornare accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat sapien ut auctor porta. Sed nec nibh porta, egestas tortor vitae, ultricies augue. Donec sit amet magna at mauris eleifend ultricies. Ut metus arcu, consectetur at ipsum mollis, mattis dapibus tellus. Ut sit amet elit elementum, malesuada tortor sed, mattis nisi. In quis augue malesuada, luctus odio eget, pharetra lorem. Proin vel libero nec orci cursus egestas vitae id nibh. Maecenas vulputate mauris cursus purus scelerisque eleifend. Cras bibendum nec leo sit amet commodo. Vivamus sodales id ipsum vel ullamcorper. Sed laoreet pretium nulla. Donec ornare lorem sollicitudin nulla venenatis, ut rhoncus tellus gravida.</p>

      <p>Fusce hendrerit pretium lorem, non consectetur justo iaculis sollicitudin. Donec purus sem, pharetra quis purus non, ullamcorper scelerisque justo. Praesent fermentum urna nisi, quis scelerisque mi varius sed. Morbi ut eros pulvinar, tincidunt nibh at, eleifend elit. Integer nec varius nibh. Vestibulum id est arcu. Nulla congue pellentesque metus, ac tincidunt ex semper in. Ut elit arcu, cursus quis cursus non, hendrerit ultricies urna.</p>

      <p>Mauris eu tincidunt erat. Aliquam posuere congue sollicitudin. In ac aliquet sapien. Cras commodo erat sed lectus tincidunt sodales. Vivamus in ligula in leo maximus varius et sed ipsum. Quisque cursus, ex sed viverra porttitor, dui lorem auctor tellus, id rutrum nibh velit commodo sapien. Curabitur dapibus, dolor eget sagittis rhoncus, urna orci rutrum nisi, id fermentum risus turpis id turpis. Aliquam erat volutpat. Proin ipsum mauris, sagittis id lacus vel, sodales semper purus. Aenean dolor elit, gravida eu eros id, euismod tempor ante.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet nisi vitae urna tristique rutrum id sit amet ante. Vestibulum at dui felis. Sed nec quam ante. Maecenas fringilla erat efficitur, pellentesque augue vel, lobortis lectus. Aliquam fringilla eleifend nibh, in tristique massa consectetur a. Praesent nulla urna, lacinia quis ex non, ornare dignissim orci. Suspendisse et orci et justo ullamcorper viverra eleifend tincidunt neque.</p>

      <p>Mauris eleifend lacinia ex, id ultricies arcu interdum a. Vestibulum nisl lorem, rhoncus in interdum et, tristique ac enim. Fusce pretium risus eleifend, faucibus erat efficitur, ultricies ipsum. Aenean eu est nibh. Vestibulum a dictum sapien, vitae convallis arcu. Sed non eros urna. Nunc a nunc vitae mi suscipit porttitor vulputate ut arcu.</p>

      <p>Sed vel mi nunc. Sed a lectus non lectus ornare accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat sapien ut auctor porta. Sed nec nibh porta, egestas tortor vitae, ultricies augue. Donec sit amet magna at mauris eleifend ultricies. Ut metus arcu, consectetur at ipsum mollis, mattis dapibus tellus. Ut sit amet elit elementum, malesuada tortor sed, mattis nisi. In quis augue malesuada, luctus odio eget, pharetra lorem. Proin vel libero nec orci cursus egestas vitae id nibh. Maecenas vulputate mauris cursus purus scelerisque eleifend. Cras bibendum nec leo sit amet commodo. Vivamus sodales id ipsum vel ullamcorper. Sed laoreet pretium nulla. Donec ornare lorem sollicitudin nulla venenatis, ut rhoncus tellus gravida.</p>

      <p>Fusce hendrerit pretium lorem, non consectetur justo iaculis sollicitudin. Donec purus sem, pharetra quis purus non, ullamcorper scelerisque justo. Praesent fermentum urna nisi, quis scelerisque mi varius sed. Morbi ut eros pulvinar, tincidunt nibh at, eleifend elit. Integer nec varius nibh. Vestibulum id est arcu. Nulla congue pellentesque metus, ac tincidunt ex semper in. Ut elit arcu, cursus quis cursus non, hendrerit ultricies urna.</p>

      <p>Mauris eu tincidunt erat. Aliquam posuere congue sollicitudin. In ac aliquet sapien. Cras commodo erat sed lectus tincidunt sodales. Vivamus in ligula in leo maximus varius et sed ipsum. Quisque cursus, ex sed viverra porttitor, dui lorem auctor tellus, id rutrum nibh velit commodo sapien. Curabitur dapibus, dolor eget sagittis rhoncus, urna orci rutrum nisi, id fermentum risus turpis id turpis. Aliquam erat volutpat. Proin ipsum mauris, sagittis id lacus vel, sodales semper purus. Aenean dolor elit, gravida eu eros id, euismod tempor ante.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet nisi vitae urna tristique rutrum id sit amet ante. Vestibulum at dui felis. Sed nec quam ante. Maecenas fringilla erat efficitur, pellentesque augue vel, lobortis lectus. Aliquam fringilla eleifend nibh, in tristique massa consectetur a. Praesent nulla urna, lacinia quis ex non, ornare dignissim orci. Suspendisse et orci et justo ullamcorper viverra eleifend tincidunt neque.</p>

      <p>Mauris eleifend lacinia ex, id ultricies arcu interdum a. Vestibulum nisl lorem, rhoncus in interdum et, tristique ac enim. Fusce pretium risus eleifend, faucibus erat efficitur, ultricies ipsum. Aenean eu est nibh. Vestibulum a dictum sapien, vitae convallis arcu. Sed non eros urna. Nunc a nunc vitae mi suscipit porttitor vulputate ut arcu.</p>

      <p>Sed vel mi nunc. Sed a lectus non lectus ornare accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec feugiat sapien ut auctor porta. Sed nec nibh porta, egestas tortor vitae, ultricies augue. Donec sit amet magna at mauris eleifend ultricies. Ut metus arcu, consectetur at ipsum mollis, mattis dapibus tellus. Ut sit amet elit elementum, malesuada tortor sed, mattis nisi. In quis augue malesuada, luctus odio eget, pharetra lorem. Proin vel libero nec orci cursus egestas vitae id nibh. Maecenas vulputate mauris cursus purus scelerisque eleifend. Cras bibendum nec leo sit amet commodo. Vivamus sodales id ipsum vel ullamcorper. Sed laoreet pretium nulla. Donec ornare lorem sollicitudin nulla venenatis, ut rhoncus tellus gravida.</p>

      <p>Fusce hendrerit pretium lorem, non consectetur justo iaculis sollicitudin. Donec purus sem, pharetra quis purus non, ullamcorper scelerisque justo. Praesent fermentum urna nisi, quis scelerisque mi varius sed. Morbi ut eros pulvinar, tincidunt nibh at, eleifend elit. Integer nec varius nibh. Vestibulum id est arcu. Nulla congue pellentesque metus, ac tincidunt ex semper in. Ut elit arcu, cursus quis cursus non, hendrerit ultricies urna.</p>

      <p>Mauris eu tincidunt erat. Aliquam posuere congue sollicitudin. In ac aliquet sapien. Cras commodo erat sed lectus tincidunt sodales. Vivamus in ligula in leo maximus varius et sed ipsum. Quisque cursus, ex sed viverra porttitor, dui lorem auctor tellus, id rutrum nibh velit commodo sapien. Curabitur dapibus, dolor eget sagittis rhoncus, urna orci rutrum nisi, id fermentum risus turpis id turpis. Aliquam erat volutpat. Proin ipsum mauris, sagittis id lacus vel, sodales semper purus. Aenean dolor elit, gravida eu eros id, euismod tempor ante.</p>

    </div><!--bum text-->


  </section>

</div><!-- content -->


  <div class="help slide-bottom">
    <div class="help-message">
      <a class="help-engage">Need help getting started?</a>
      <a class="help-dismiss">Don't show me this again</a>
    </div><!--help-message-->
  </div><!--help slide-bottom-->


  <div class="help popup-center">
    <div class="help-message">
      <p class="help-dismiss"><a href="">Don't show me this again</a></p>
      <h2>Let's get started!</h2>
      <p>This is one of over 2,200 courses on OCW. Find materials for this course in the pages linked along the left. </p>

      <p><strong>MIT OpenCourseWare</strong> is a free &amp; open publication of material from thousands of MIT courses, covering the entire MIT curriculum.</p>

      <p><strong>No enrollment or registration.</strong> Freely browse and use OCW materials at your own pace. There's no signup, and no start or end dates.</p>

      <p><strong>Knowledge is your reward.</strong> Use OCW to guide your own life-long learning, or to teach others. We don't offer credit or certification for using OCW.</p>

      <p><strong>Made for sharing</strong>. Download files for later. Send to friends and colleagues. Modify, remix, and reuse (just remember to cite OCW as the source.)</p>

      <p class="help-engage">Learn more at <a href="">Get Started with MIT OpenCourseWare</a></p>
    </div><!-- help-message -->
  </div> <!--help popup-center-->
            
          
!
            
              /* Basic markup - unnecessary when integrated */
  body {
    background-color: rgb(225, 225, 225);
    font-size: 63%; /* kludge to make it look more like our site */
  }
  section {
    background-color: rgb(255, 255, 255);
    width: 90%;
    max-width: 50em;
    padding: 1em;
    margin: 2rem;
    margin-bottom: 3em;
  }
  section p {
    margin: 2em 1em;
  }

  h2 {
    clear:both;
    }

  br {
    margin-bottom: 2em;
  }

  .help { /* This exists here only because our site style will do the same thing */
      font-family: sans-serif;
  }
  
  @font-face {
  	font-family: TitilliumText22LLight;
      src: url(../webfonts/TitilliumText22L002-webfont.eot);
      src: url(../webfonts/TitilliumText22L002-webfont.eot?#iefix) format("embedded-opentype"),
           url(../webfonts/TitilliumText22L002-webfont.woff) format("woff"),
           url(../webfonts/TitilliumText22L002-webfont.ttf) format("truetype"),
           url(../webfonts/TitilliumText22L002-webfont.svg#TitilliumText22LLight) format("svg");
      font-weight: normal;
      font-style: normal;
  }


  @font-face {
  	font-family: TitilliumText22LRegular;		/* Titillium Regular */
      src: url(../webfonts/TitilliumText22L003-webfont.eot);
      src: url(../webfonts/TitilliumText22L003-webfont.eot?#iefix) format("embedded-opentype"),
           url(../webfonts/TitilliumText22L003-webfont.woff) format("woff"),
           url(../webfonts/TitilliumText22L003-webfont.ttf) format("truetype"),
           url(../webfonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular) format("svg");
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
  	font-family: TitilliumText22LBold;		/* Titillium Bold */
      src: url(../webfonts/TitilliumText22L005-webfont.eot);
      src: url(../webfonts/TitilliumText22L005-webfont.eot?#iefix) format("embedded-opentype"),
           url(../webfonts/TitilliumText22L005-webfont.woff) format("woff"),
           url(../webfonts/TitilliumText22L005-webfont.ttf) format("truetype"),
           url(../webfonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold) format("svg");
      font-weight: normal;
      font-style: normal;
  }

/*help-popup.css*/
/*
Help Popup CSS by Erik Mallinson, 2015-09
Last revised 2015-10-09
*/


.help {
  color: rgba(0,0,0,.8);
  width: 100%;
  left: 0;
  right: 0;
  border-style: solid;
  border-color: rgba(0,0,0,.2);
  border-width: 0;
  background-color: rgba(255,255,182,1);
}

.help-message {
  font-size: 1.4em;
  margin: 0 10px;
}

.help-engage {
  font-family: TitilliumText22LBold, Verdana;
}

.help-dismiss {
  float: right;
  display: inline;
  clear: right;
  font-size: .6em;
}

.hide {
  display: none;
}

.show {
  display: inline;
}

/* SLIDE-BOTTOM */

.slide-bottom {
  bottom: 0;
  position: fixed;
  z-index: 100;
  display: none;
  border-top-width: .1em;
  border-top: .1em solid rgba(0, 0, 0, .2);
  box-shadow: 0px -1px .5em rgba(0,0,0,.1);
}

/* SLIDE-BOTTOM SPECIFIC */


.help.slide-bottom .help-message{
  line-height: 3;
}

.help.slide-bottom .help-engage {
  font-weight: bold;
}

/* POPUP-CENTER */

.popup-center {
  z-index: 1000; /* Someone made the megamenu a ridiculous z-index. At least it was ridiculous ... until now. */
  position: fixed;
  margin: 0 auto;
  top: 16%;
  width: 90%;
  max-width: 55em;
  display: none;
  border-width: .1em;
  border-radius: .1em;
  box-shadow: 0em .3em .5em rgba(0,0,0,.3);
}

.help.popup-center .help-engage {
  text-align: right;
}

/* POPUP-CENTER SPECIFIC */

.popup-center .help-message {
    margin: 1em 1em;
    padding: 2em 1.9em;
    padding-bottom: 2.5em;
}

.popup-center h2{
  font-family: TitilliumText22LBold, Verdana;
  margin-bottom: .4em;
}

.popup-center p {
  line-height: 1.15;
}


            
          
!
            
              $(window).load(function () {
    $(".help.slide-bottom").slideToggle(1000);
});

 $(function() {
    $( ".help.slide-bottom .help-engage" ).click(function(){
      $( ".help.slide-bottom" ).slideToggle( 200 );
      $( ".help.popup-center" ).fadeIn( 700 );
    });
  });

            
          
!
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