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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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="popup-subscribe">
 <div class="popup-subscribe-inner">
  <p>You can include here an<br>
    Email subscription form for exemple.</p>
 <a class="popup-subscribe-close" href="#">x</a>
</div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui metus, ultrices vel ipsum eget, lacinia tristique nulla. Nulla eu turpis et orci volutpat rhoncus. Duis pharetra, ipsum id volutpat ornare, felis leo mollis odio, eu facilisis lacus urna eu nisl. Cras faucibus, nisl ut efficitur ultricies, sem orci volutpat ipsum, eget condimentum orci lacus nec est. Vestibulum id vehicula tellus. Etiam aliquet rhoncus dignissim. Phasellus eu blandit nisl.</p>

<p>Aenean pulvinar, massa sed dapibus dapibus, leo lacus condimentum velit, ut venenatis odio mauris vel orci. Vestibulum nisl lacus, tincidunt vitae pellentesque in, aliquam a enim. Aenean pellentesque nisi in condimentum molestie. Nulla blandit ex at neque sodales luctus. Sed tempus arcu vel mollis porttitor. Curabitur eget nunc mollis, auctor mauris at, cursus ipsum. Vestibulum nec consequat dolor. Sed luctus dolor sit amet ultricies dictum. Duis massa ipsum, porttitor vel nunc vel, sagittis hendrerit est. Sed gravida justo a ante porttitor rutrum. Nullam ac lectus eget ipsum dignissim facilisis. Aliquam tempor, ipsum ut congue tempor, ligula eros pretium massa, non aliquet justo lorem at nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eu nulla sodales, venenatis ligula at, scelerisque dolor. Etiam nec leo tempor, dignissim nunc a, efficitur mauris. Proin fringilla diam metus, non feugiat lorem suscipit id.</p>

<p>Vivamus mollis sem sem, vel luctus nisi posuere vel. Quisque ac nunc nulla. Mauris vulputate dignissim felis, in dictum sapien sollicitudin ac. Morbi sodales dui ac orci feugiat ornare. Vivamus hendrerit lacus eu tempus egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nibh ex, pretium vel ante et, maximus vestibulum velit. Pellentesque felis risus, commodo vel malesuada sed, mattis at mi. Curabitur iaculis efficitur faucibus.</p>

<p>Quisque viverra vitae risus eget fringilla. Donec vestibulum tempor nibh id convallis. Aliquam erat volutpat. Integer a orci et leo tempor rhoncus vitae quis dui. Nam at neque tellus. Duis accumsan vehicula enim, molestie eleifend orci semper ut. Sed dapibus eget mi quis maximus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras aliquam, magna vitae vestibulum interdum, nisl tortor facilisis nisl, nec finibus eros diam ac dolor. Sed tristique arcu eget ligula porttitor euismod quis eu nisl. Vivamus accumsan et arcu sit amet posuere.</p>

<p>Nunc vitae lorem cursus, lacinia tellus sed, consectetur nisi. Integer viverra interdum mi sed consequat. Fusce at magna magna. Vestibulum accumsan erat tellus, nec eleifend sem auctor faucibus. Integer nec dignissim urna, eu malesuada nisl. Proin euismod ultrices mauris, eget dapibus est auctor at. Proin congue feugiat ligula, eu semper mauris auctor vitae. Quisque varius porttitor ante eleifend interdum.</p>
            
          
!
            
              .popup-subscribe {
 width: 100%;
 height: 100%;
 display: none;
 position: fixed;
 top: 0px;
 left: 0px;
 background: rgba(0,0,0,0.75);
}

.popup-subscribe-inner {
 max-width: 500px;
 width: 90%;
 padding: 0px;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 box-shadow: 0px 2px 6px rgba(0,0,0,1);
 border-radius: 3px;
 background: #fff;
}
 
.popup-subscribe-close {
 width: 30px;
 height: 30px;
 padding-top: 4px;
 display: inline-block;
 position: absolute;
 top: 0px;
 right: 0px;
 transition: ease 0.25s all;
 -webkit-transform: translate(50%, -50%);
 transform: translate(50%, -50%);
 border-radius: 1000px;
 background: rgba(0,0,0,0.8);
 font-family: Arial, Sans-Serif;
 font-size: 20px;
 text-decoration: none;
 line-height: 100%;
 text-align: center;
 color: #fff;
}
 
.popup-subscribe-close:hover {
 -webkit-transform: translate(50%, -50%) rotate(180deg);
 transform: translate(50%, -50%) rotate(180deg);
 background: rgba(0,0,0,1);
 text-decoration: none;
}
            
          
!
            
              jQuery(document).ready(function($) {
$( "body" ).mouseleave(function() {
    $('.popup-subscribe').fadeIn(350);
    e.preventDefault();
});
$( ".popup-subscribe-close" ).click(function(e) {
        $('.popup-subscribe').fadeOut(350);
        e.preventDefault();
        $('.popup-subscribe').addClass('popup-subscribe-opened').removeClass('popup-subscribe');
    });
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console