<!-- this is the markup, keep your hands off! -->

<form>
  <label for="email">Subscribe to our mailing list</label>
  <input type="email" value="" name="email" placeholder="email address" required>
  <input type="submit" value="Subscribe" name="subscribe">
</form>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700")

// Color palette
$color-1: hsl(120, 40, 60)
$color-2: hsl(140, 40, 50)
$grey: hsl(0, 0, 60)
$white: hsl(0, 0, 100)

// Color settings
$body-bg: $color-1
$form-bg: $white
$label-txt: $color-2
$input-txt: $grey
$btn-bg: $color-2
$btn-txt: $white

// Base styles
html
  box-sizing: border-box

*,
*:before,
*:after
  box-sizing: inherit
  outline: none

html,
body
  min-height: 100vh

body
  display: flex
  align-items: center
  justify-content: center
  margin: 0
  padding: 0 80px
  background-color: $body-bg
  font-family: "Montserrat", sans-serif

form
  position: relative
  width: 440px
  padding: 40px
  background-color: $form-bg
  border-radius: 10px
  box-shadow: 0 40px 40px -20px rgba(black, 0.25)
  text-align: center

  &:before,
  &:after
    position: absolute
    top: 0
    z-index: -1

  &:before
    content: url("data:image/png;base64,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")
    left: 0
    transform-origin: top left
    animation: creature-left 12s infinite
    animation-delay: 3s

    @keyframes creature-left
      8%,
      12%
        transform: rotate(30deg)
      20%
        transform: rotate(0)

  &:after
    content: url("data:image/png;base64,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")
    right: 0
    transform-origin: top right
    animation: creature-right 12s infinite
    animation-delay: 9s

    @keyframes creature-right
      8%,
      12%
        transform: rotate(-60deg)
      20%
        transform: rotate(0)

label
  display: block
  margin-bottom: 20px
  color: $label-txt
  font-size: 40px
  font-weight: 700
  line-height: 1.2

input
  display: block
  width: 90%
  margin: 0 auto
  border: 0
  padding: 0
  font-family: inherit

input[type="email"]
  margin-bottom: 20px
  border-bottom: 2px solid
  padding: 10px 0
  background-color: transparent
  color: $input-txt
  font-size: 16px
  letter-spacing: 1px
  text-align: center
  transition: 0.4s

  &:focus
    width: 100%

input[type="submit"]
  padding: 15px
  background-color: $btn-bg
  color: $btn-txt
  border-radius: 5px
  box-shadow: 0 5px 0 darken($btn-bg, 10%)
  font-size: 20px
  font-weight: 700
  letter-spacing: 2px
  text-transform: uppercase
  cursor: pointer
  transition: 0.25s

  &:hover,
  &:focus
    box-shadow: 0 (5px + 2) 0 darken($btn-bg, 10%)
    transform: translateY(-2px)

  &:active
    box-shadow: 0 (5px - 2) 0 darken($btn-bg, 10%)
    transform: translateY(2px)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.