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);
This Pen doesn't use any external CSS resources.