css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="popup animated tada">
  <header>
    
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" version="1.1" width="50px" height="50px">
<g id="surface1">
<path style=" fill:#CDA1A7;" d="M 51 25 L 59 25 C 60.105469 25 61 25.894531 61 27 L 61 53 C 61 56.3125 58.3125 59 55 59 C 51.6875 59 49 56.3125 49 53 L 49 27 C 49 25.894531 49.894531 25 51 25 Z "/>
<path style=" fill:#FAEFDE;" d="M 52 59 L 11 59 C 7.6875 59 5 56.3125 5 53 L 5 8 C 5 6.34375 6.34375 5 8 5 L 46 5 C 47.65625 5 49 6.34375 49 8 L 49 56 Z "/>
<path style=" fill:#FFF7F0;" d="M 7 5 L 47 5 C 48.105469 5 49 5.894531 49 7 C 49 8.105469 48.105469 9 47 9 L 7 9 C 5.894531 9 5 8.105469 5 7 C 5 5.894531 5.894531 5 7 5 Z "/>
<path style=" fill:#EFD8BE;" d="M 49 49 L 5 49 L 5 53 C 5 56.3125 7.6875 59 11 59 L 52 59 L 49 56 Z "/>
<path style=" fill:#EB9697;" d="M 33 14 L 39 14 C 39.550781 14 40 13.550781 40 13 C 40 12.449219 39.550781 12 39 12 L 33 12 C 32.449219 12 32 12.449219 32 13 C 32 13.550781 32.449219 14 33 14 Z "/>
<path style=" fill:#EB9697;" d="M 13 14 L 29 14 C 29.550781 14 30 13.550781 30 13 C 30 12.449219 29.550781 12 29 12 L 13 12 C 12.449219 12 12 12.449219 12 13 C 12 13.550781 12.449219 14 13 14 Z "/>
<path style=" fill:#EB9697;" d="M 23 16 L 13 16 C 12.449219 16 12 16.449219 12 17 C 12 17.550781 12.449219 18 13 18 L 23 18 C 23.550781 18 24 17.550781 24 17 C 24 16.449219 23.550781 16 23 16 Z "/>
<path style=" fill:#8D6C9F;" d="M 23 24 L 13 24 C 12.449219 24 12 24.449219 12 25 C 12 25.550781 12.449219 26 13 26 L 23 26 C 23.550781 26 24 25.550781 24 25 C 24 24.449219 23.550781 24 23 24 Z "/>
<path style=" fill:#8D6C9F;" d="M 23 28 L 13 28 C 12.449219 28 12 28.449219 12 29 C 12 29.550781 12.449219 30 13 30 L 23 30 C 23.550781 30 24 29.550781 24 29 C 24 28.449219 23.550781 28 23 28 Z "/>
<path style=" fill:#8D6C9F;" d="M 23 32 L 13 32 C 12.449219 32 12 32.449219 12 33 C 12 33.550781 12.449219 34 13 34 L 23 34 C 23.550781 34 24 33.550781 24 33 C 24 32.449219 23.550781 32 23 32 Z "/>
<path style=" fill:#8D6C9F;" d="M 23 36 L 13 36 C 12.449219 36 12 36.449219 12 37 C 12 37.550781 12.449219 38 13 38 L 23 38 C 23.550781 38 24 37.550781 24 37 C 24 36.449219 23.550781 36 23 36 Z "/>
<path style=" fill:#8D6C9F;" d="M 23 40 L 13 40 C 12.449219 40 12 40.449219 12 41 C 12 41.550781 12.449219 42 13 42 L 23 42 C 23.550781 42 24 41.550781 24 41 C 24 40.449219 23.550781 40 23 40 Z "/>
<path style=" fill:#8D6C9F;" d="M 39 24 L 29 24 C 28.449219 24 28 24.449219 28 25 C 28 25.550781 28.449219 26 29 26 L 39 26 C 39.550781 26 40 25.550781 40 25 C 40 24.449219 39.550781 24 39 24 Z "/>
<path style=" fill:#8D6C9F;" d="M 39 28 L 29 28 C 28.449219 28 28 28.449219 28 29 C 28 29.550781 28.449219 30 29 30 L 39 30 C 39.550781 30 40 29.550781 40 29 C 40 28.449219 39.550781 28 39 28 Z "/>
<path style=" fill:#8D6C9F;" d="M 39 32 L 29 32 C 28.449219 32 28 32.449219 28 33 C 28 33.550781 28.449219 34 29 34 L 39 34 C 39.550781 34 40 33.550781 40 33 C 40 32.449219 39.550781 32 39 32 Z "/>
<path style=" fill:#8D6C9F;" d="M 40 37 C 40 36.449219 39.550781 36 39 36 L 29 36 C 28.449219 36 28 36.449219 28 37 C 28 37.550781 28.449219 38 29 38 L 39 38 C 39.550781 38 40 37.550781 40 37 Z "/>
<path style=" fill:#EB9697;" d="M 40 17 C 40 16.449219 39.550781 16 39 16 L 27 16 C 26.449219 16 26 16.449219 26 17 C 26 17.550781 26.449219 18 27 18 L 39 18 C 39.550781 18 40 17.550781 40 17 Z "/>
<path style=" fill:#8D6C9F;" d="M 45 48 L 41 48 C 40.449219 48 40 48.449219 40 49 C 40 49.550781 40.449219 50 41 50 L 45 50 C 45.550781 50 46 49.550781 46 49 C 46 48.449219 45.550781 48 45 48 Z "/>
<path style=" fill:#8D6C9F;" d="M 58 24 L 50 24 L 50 7 C 50 5.34375 48.65625 4 47 4 L 7 4 C 5.34375 4 4 5.34375 4 7 L 4 53 C 4 56.867188 7.132813 60 11 60 L 55 60 C 58.867188 60 62 56.867188 62 53 L 62 28 C 62 25.789063 60.210938 24 58 24 Z M 11 58 C 8.238281 58 6 55.761719 6 53 L 6 50 L 37 50 C 37.550781 50 38 49.550781 38 49 C 38 48.449219 37.550781 48 37 48 L 6 48 L 6 7 C 6 6.449219 6.449219 6 7 6 L 47 6 C 47.550781 6 48 6.449219 48 7 L 48 53 C 47.972656 54.867188 48.691406 56.667969 50 58 Z M 60 53 C 60 55.761719 57.761719 58 55 58 C 53.660156 58.046875 52.363281 57.53125 51.414063 56.585938 C 50.46875 55.636719 49.953125 54.339844 50 53 L 50 26 L 54.558594 26 C 54.199219 26.605469 54.007813 27.296875 54 28 L 54 45 C 54 45.550781 54.449219 46 55 46 C 55.550781 46 56 45.550781 56 45 L 56 28 C 56 26.894531 56.894531 26 58 26 C 59.105469 26 60 26.894531 60 28 Z "/>
<path style=" fill:#8D6C9F;" d="M 10 52 C 9.449219 52 9 52.449219 9 53 L 9 55 C 9 55.550781 9.449219 56 10 56 C 10.550781 56 11 55.550781 11 55 L 11 53 C 11 52.449219 10.550781 52 10 52 Z "/>
<path style=" fill:#8D6C9F;" d="M 15 52 C 14.449219 52 14 52.449219 14 53 L 14 55 C 14 55.550781 14.449219 56 15 56 C 15.550781 56 16 55.550781 16 55 L 16 53 C 16 52.449219 15.550781 52 15 52 Z "/>
<path style=" fill:#8D6C9F;" d="M 20 52 C 19.449219 52 19 52.449219 19 53 L 19 55 C 19 55.550781 19.449219 56 20 56 C 20.550781 56 21 55.550781 21 55 L 21 53 C 21 52.449219 20.550781 52 20 52 Z "/>
<path style=" fill:#8D6C9F;" d="M 25 52 C 24.449219 52 24 52.449219 24 53 L 24 55 C 24 55.550781 24.449219 56 25 56 C 25.550781 56 26 55.550781 26 55 L 26 53 C 26 52.449219 25.550781 52 25 52 Z "/>
<path style=" fill:#8D6C9F;" d="M 30 52 C 29.449219 52 29 52.449219 29 53 L 29 55 C 29 55.550781 29.449219 56 30 56 C 30.550781 56 31 55.550781 31 55 L 31 53 C 31 52.449219 30.550781 52 30 52 Z "/>
<path style=" fill:#8D6C9F;" d="M 35 52 C 34.449219 52 34 52.449219 34 53 L 34 55 C 34 55.550781 34.449219 56 35 56 C 35.550781 56 36 55.550781 36 55 L 36 53 C 36 52.449219 35.550781 52 35 52 Z "/>
<path style=" fill:#8D6C9F;" d="M 40 52 C 39.449219 52 39 52.449219 39 53 L 39 55 C 39 55.550781 39.449219 56 40 56 C 40.550781 56 41 55.550781 41 55 L 41 53 C 41 52.449219 40.550781 52 40 52 Z "/>
<path style=" fill:#8D6C9F;" d="M 45 52 C 44.449219 52 44 52.449219 44 53 L 44 55 C 44 55.550781 44.449219 56 45 56 C 45.550781 56 46 55.550781 46 55 L 46 53 C 46 52.449219 45.550781 52 45 52 Z "/>
</g>
</svg>

    <button class="cta cta-close"><span>x</span></button>
  </header>
  <main>
    <h2>Newsletter Signup!</h2>
    <p>Would you like to sign up to our newsletter?</p>
    <p>It takes 60 seconds!</p>
  </main>
  <footer>
    <button class="cta cta-primary">Sure, let's do this!</button>
  </footer>
</div>
            
          
!
            
              html,
body {
  background: #20A4F3;
  font-family: 'Arvo', serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  background: #F6F7F8;
  margin: 15rem auto;
  width: 22rem;
  text-align: center;
  border-radius: .3rem;
  overflow: hidden;
  box-shadow: 1rem 1rem 100rem 3rem #F6F7F8;
  
  header,
  main,
  footer {
    box-sizing: border-box;
    padding: 1rem;
  }
  
  header {
    // background: #e9e9e9;
    width: 100%;
    
    svg {
      height: 200px;
      width: 200px;
    }
  }
  
  main {
    padding: 2rem 1rem;
  }
  
  footer {
    padding: 0;
    border-top: 1px solid #e9e9e9;
  }
  
  h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
  }
  
  p {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
    
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  
  .cta {
    border: none;
    outline: none;
    padding: 1rem;
    border-radius: .1rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-family: 'Arvo', serif;
    cursor: pointer;
    
    &-primary {
      background: #011627;
      font-size: .8rem;
      color: white;
      text-transform: uppercase;
      letter-spacing: .2rem;
      margin-left: auto;
      display: block;
      transition: 1s all;
      width: 100%;
      
      &:hover {
        background: #2EC4B6;
      }
    }
    
    &-secondary {
      
    }
    
    &-close {
      padding: .5rem;
      width: 1.5rem;
      height: 1.5rem;
      position: absolute;
      right: .25rem;
      top: .25rem;
      background: transparent;
      border-radius: 100%;
      cursor: pointer;
      background: #00100b;
      border: 2px solid transparent;
      
      &:hover {
        background: transparent;
        border-color: #00100b;
        
        span {
          color: #00100b;
        }
      }
      
      span {
        position: relative;
        top: -.4rem;
        left: -.04rem;
        color: #fff;
      }
    }
  }
}

.infinite:hover {
  -webkit-animation-iteration-count: 0;
  animation-iteration-count: 0;
}
            
          
!
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