JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
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.
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.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
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);
Also see: Tab Triggers