cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              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
            
          
!
            
              @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)

            
          
!
            
              ! 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);
            
          
!
999px
Loading ..................

Console