Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                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
!

CSS 

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

JS 

              
                ! 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

Console