div#area
 div.master-card
  div.card
   div.title CREDIT CARD
   div.input-number
    span.title-number CARD NUMBER
    div.inputs-number
     input(type="text", maxlength="4", name="number-card", placeholder="0000",required)
     input(type="text", maxlength="4", name="number-card", placeholder="0000",required)
     input(type="text", maxlength="4", name="number-card", placeholder="0000",required)
     input(type="text", maxlength="4", name="number-card", placeholder="0000",required)
    div.selects-date.selecters
     div.day-select
      span DAY
      select#dates
       - for (var x = 01; x < 31; x++)
            option(value="")= x
     div.year-select
      span YEAR
      select#dates
       - for (var x = 17; x < 27; x++)
           option(value="")= x
   div.mark-gold
    div.round
     div.circles
       div.circle-1 
       div.circle-2 
   div.name
    span JEAN O IMPSUM
  div.card-back
   div.tire
   div.secret-area
    input(type="text", maxlength="3", name="number-card", placeholder="000",required)
   div.chip-card
 div.button-sent
  button#back VOLTAR
  button#continue CONTINUAR
View Compiled
@import url("https://fonts.googleapis.com/css?family=Ubuntu")

input, select
  color: transparentize(white, 0.5)

  option
    color: lighten(black, 50%)

\::-webkit-input-placeholder
  color: transparentize(white, 0.5)

\::-moz-placeholder
  color: transparentize(white, 0.5)

\:-ms-input-placeholder
  color: transparentize(white, 0.5)

\:-moz-placeholder
  color: transparentize(white, 0.5)

#area
  & *
    font-family: 'Ubuntu', sans-serif

  background: #ffc466
  height: 100vh
  width: 100vw
  display: flex
  align-items: center
  justify-content: center
  overflow: hidden
  perspective: 500px
  flex-direction: column

  .master-card
    padding: 10px
    border-radius: 10px
    height: 150px
    max-height: 150px
    width: 250px
    position: relative
    transform-style: preserve-3d

    /*animation: rotate 5s infinite;
    animation-direction: normal
    transition: .5s
    transform: rotateY(0deg)

    .card
      padding: 10px
      border-radius: 10px
      position: absolute
      backface-visibility: hidden
      top: 0
      left: 0
      bottom: 0
      right: 0
      background: #449db7
      height: 150px
      max-height: 150px
      overflow: hidden
      width: 250px
      z-index: 2
      transform: rotateY(0deg)

      .title
        border-bottom: 1px solid transparentize(white, 0.9)
        padding-bottom: 5px
        font-weight: bold
        color: transparentize(white, 0.5)

      .input-number
        .title-number
          font-size: 12px
          color: transparentize(white, 0.8)

        .inputs-number
          display: flex

          input
            background: transparentize(white, 0.8)
            color: transparentize(white, 0.5)
            border: none
            height: 15px
            width: 45px
            border-radius: 2px
            padding: 5px 4px
            text-align: center
            margin: 5px

      .selects-date
        height: 40px
        margin-top: 5px
        display: flex
        align-items: center
        justify-content: initial

        span
          color: transparentize(white, 0.8)

        .day-select, .year-select
          span
            display: block
            font-size: 12px
            color: transparentize(white, 0.8)

        select
          background: transparentize(white, 0.8)
          color: transparentize(white, 0.5)
          border: none
          width: 50px
          height: 25px
          border-radius: 2px
          text-align: center
          margin: 5px

      .mark-gold
        position: absolute
        bottom: 10px
        right: 10px
        border: solid 1px transparentize(white, 0.8)
        padding: 5px
        border-radius: 10px
        width: 40px
        height: 50px

        .round
          .circles
            .circle
              &-1
                width: 40px
                height: 25px
                border-radius: 6px
                background: #ccc
                position: relative

                &:after
                  content: ''
                  width: 35px
                  top: 2px
                  left: 2px
                  border-radius: 3px
                  height: 5px
                  background: transparentize(white, 0.8)
                  position: absolute

                &:before
                  content: ''
                  width: 35px
                  height: 5px
                  background: transparentize(white, 0.8)
                  border-radius: 3px
                  position: absolute
                  bottom: 2px
                  left: 2px

              &-2
                margin-top: 2px
                width: 40px
                height: 25px
                position: relative

                &:after
                  content: ''
                  width: 25px
                  height: 25px
                  border-radius: 15px
                  background: #f57576
                  position: absolute
                  left: 0

                &:before
                  content: ''
                  width: 25px
                  height: 25px
                  border-radius: 15px
                  background: #ff9d66
                  position: absolute
                  right: 0

      .name
        color: transparentize(white, 0.5)
        font-size: 14px
        padding: 10px 0

    .card-back
      padding: 10px
      border-radius: 10px
      position: absolute
      backface-visibility: hidden
      top: 0
      left: 0
      bottom: 0
      right: 0
      background: #449db7
      height: 150px
      max-height: 150px
      width: 250px
      transform: rotateY(180deg)

      .tire
        position: absolute
        width: 100%
        background: #5e5e5e
        height: 35px
        top: 15px
        left: 0

      .secret-area
        position: absolute
        background: transparentize(white, 0.8)
        height: 30px
        top: 60px
        left: 20px
        right: 20px
        border-radius: 3px

        input
          background: transparent
          border: none
          height: 30px
          text-align: right
          padding: 0px 7px 0px 0px
          width: 220px

        span
          float: right
          margin: 5px
          color: transparentize(black, 0.5)

      .chip-card
        width: 45px
        height: 35px
        background: #a6bbc2
        position: absolute
        bottom: 20px
        left: 20px
        border-top-right-radius: 10px !important
        border-radius: 5px

        &:after
          content: ''
          width: 35px
          top: 5px
          left: 5px
          border-radius: 3px
          height: 10px
          background: transparentize(white, 0.8)
          position: absolute

        &:before
          content: ''
          width: 35px
          height: 10px
          background: transparentize(white, 0.8)
          border-radius: 3px
          position: absolute
          bottom: 5px
          left: 5px

  .button-sent
    margin-top: 15px

    button
      border-radius: 3px
      border: none
      font-size: 13px
      padding: 5px 10px
      background: #f57576
      color: white
      font-weight: bold
      box-shadow: 0px 1px 1px 1px transparentize(black, 0.8)
      position: relative
      transition: .5s

      &:hover
        top: -1px
        cursor: pointer
        box-shadow: 0px 2px 1px 1px transparentize(black, 0.8)

@keyframes rotate
  from
    transform: rotateY(0deg)

  to
    transform: rotateY(360deg)
View Compiled
! function(a) {
    a(function() {
        a(".button-sent #back").hide(), a(".button-sent #continue").click(function(b) {
            a("#area .master-card").css("transform", "rotateY(180deg)"), a(".button-sent #back").show()
        }), a(".button-sent #back").click(function(b) {
            a("#area .master-card").css("transform", "rotateY(0deg)"), a(this).hide()
        })
    })
}(jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js