<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;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Arvo:400,700
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.