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

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

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="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>

<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-close" ).click(function(e) {
🕑 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 ..................