<div class="cc">
<h2>Bank of CodePen</h2>
<span class="provider mastercard">MasterCard</span>
<span class="provider amex">American Express</span>
<span class="provider visa">Visa</span>
<!-- card number -->
<div class="number">
<input type="text" maxlength="4" placeholder="5280">
<input type="text" maxlength="4">
<input type="text" maxlength="4">
<input type="text" maxlength="4">
<span class="instructions">5280</span>
</div>
<!-- valid / ccv -->
<div class="date">
<span class="instructions valid">Valid Thru</span>
<input type="text" maxlength="5" placeholder="00/00">
<span class="instructions valid">CCV</span>
<input type="text" maxlength="3" placeholder="123">
</div>
<!-- name on card -->
<div class="name">
<input class="full-name" type="text" maxlength="" inputmode='numeric' placeholder="John Doe">
<span class="instructions">Name on Card</span>
</div>
<!-- shine -->
<div class="shine"></div>
<div class="shine shine-layer-two"></div>
</div>
* {
box-sizing: border-box;
box-sizing: border-box;
}
@import url(https://fonts.googleapis.com/css?family=Anaheim);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
$blue: #174395;
$lightBlue: #ace4fa;
$silver: #ececec;
$space: 20px;
body {
background: url(http://pmullen.com/codepen/h97pmPj.png) repeat;
}
.cc {
background: $blue;
border-radius: 20px;
height: 310px;
margin: 50px;
overflow: hidden;
padding: $space;
position: relative;
width: 490px;
}
.shine {
background: rgba(255,255,255,0.05);
left: 390px; top: 0;
margin: 0 15px 0 0;
padding: 0;
position: absolute;
height: 100%;
width: 100%;
transform: skew(50deg);
transform: skew(50deg);
transform: skew(50deg);
transform: skew(50deg);
transform: skew(50deg);
}
.shine-layer-two {
transform: skew(80deg);
transform: skew(80deg);
transform: skew(80deg);
transform: skew(80deg);
transform: skew(80deg);
}
h2 {
font: 22px Anaheim; color: #fff;
margin: 0 $space/2 $space/2 0; padding:0;
text-align: right;
}
span {
text-transform: uppercase;
}
.number,
.date {
margin-bottom: $space/2;
}
.provider {
display: inline-block;
margin: 0 $space/2 $space/2 0;
width: 71px; height: 44px;
}
.mastercard,
.visa,
.amex {
background: url(http://pmullen.com/codepen/63JxOEI.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.amex { background-position: 71px 0; }
.visa { background-position: 147px 0; }
input{
background: $silver;
border: 0;
border-radius: 4px;
font: 20px Inconsolata, sans-serif; color: #303030;
margin: 0 2px 3px 0;
padding: 8px $space/2;
text-align: center;
width: 24%;
box-shadow: 1px 1px 0px 1px #0e306e;
box-shadow: 1px 1px 0px 1px #0e306e;
box-shadow: 1px 1px 0px 1px #0e306e;
position: relative;
z-index: 10;
&:nth-child(4) {
margin-right: 0;
}
}
.date input {
margin-right: $space;
}
.valid {
position: relative;
margin-right: $space/2;
width: 40px;
}
.full-name {
width: 100%;
text-align: left;
}
.instructions {
letter-spacing: 1px;
font: 12px Anaheim, sans-serif; color: $lightBlue;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.