h1 Total
  span 34
  i.fa.fa-lock
#container
  form
    p
      label Name On Card
      input(type="text" placeholder="Super Awesome Customer")
    p
      label Card Number
      input(type="text" placeholder="1234 5678 9012 3456")
    p
      label Billing Zip Code
      input(type="text" placeholder="12345")

     input(type="submit" value="Submit Payment")
  
View Compiled
primary-color = #5ED9EB

body
  background #fff
  font-family 'Roboto'

#container
  margin 2em auto 1em
  position relative
  box-sizing border-box
  
p
  margin 0 0 3em
  
.fa-lock
  position absolute
  color primary-color
  right 2.3em
  top 1.2em
  line-height 3em
  border-radius 100%
  
h1
  color primary-color
  margin 0
  background rgba(primary-color, 0.3)
  font-weight 700
  line-height 1
  padding 2em 1em
  font-size 1em
  letter-spacing 0.5em
  font-family 'Montserrat'
  text-transform uppercase
  box-sizing border-box
  text-align center
  span
    color primary-color
    margin 0 0 0
    display block
    font-size 6em
    letter-spacing -0.06em
    text-transform uppercase
    font-family 'Roboto Mono'
    &:before
      content '$'
      font-size 0.5em
      position relative
      top -0.6em
      left -0.2em
    &:after
      content '00'
      font-size 0.3em
      position relative
      letter-spacing 0.03em
      top -1.7em
      right -0.1em

form
  padding-top 1em
  margin 0
  width 18em
  margin auto
  text-align center

label
  color rgba(#000, 0.6)
  margin-bottom 0
  padding 0.1em 0.5em
  width 100%
  font-size 0.8em
  background rgba(#ff0, 0.3)

input
  display block
  border none
  border-bottom 2px dotted rgba(#000, 0.2)
  padding 1.2em 0.2em 0.4em
  text-align center
  font-size 1.2em
  width 100%
  color rgba(#000, 0.6)
  letter-spacing 0.01em
  box-sizing border-box
  background transparent
  font-family 'Roboto Mono'
  &:focus
    outline none
    border-bottom 2px solid primary-color
    background transparent
    
input[type="submit"]
  width 100%
  background rgba(primary-color,0.3)
  text-transform uppercase
  letter-spacing 0.06em
  border none
  padding 1.5em 0.8em
  color rgba(primary-color, 1)
  margin-top 4em
  margin-bottom 0
  font-size 1em
  border-radius 3px
  font-weight bold
  font-family 'Roboto'
  &:hover
    background primary-color
    border-color primary-color
    color #fff

::-webkit-input-placeholder {
   color: rgba(#000, 0.16);
}

:-moz-placeholder { /* Firefox 18- */
   color: rgba(#000, 0.2);
   font-style italic
}

::-moz-placeholder {  /* Firefox 19+ */
   color: rgba(#000, 0.2);
   font-style italic
}

:-ms-input-placeholder {  
   color: rgba(#000, 0.2);
   font-style italic
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css
  2. https://fonts.googleapis.com/css?family=Roboto:400,700
  3. https://fonts.googleapis.com/css?family=Montserrat
  4. https://fonts.googleapis.com/css?family=Roboto+Mono

External JavaScript

This Pen doesn't use any external JavaScript resources.