<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="credit-card-wrapper">
<div class="credit-card front">
<div class="card-title">CREDIT CARD</div>
<div class="card-number">
<div class="card-number-label">CARD NUMBER</div>
<div class="card-numbers">
<input type="text" class="tbx-number-0" maxlength='4' />
<input type="text" class="tbx-number-1" maxlength='4' />
<input type="text" class="tbx-number-2" maxlength='4' />
<input type="text" class="tbx-number-3" maxlength='4' />
</div>
</div>
<div class="card-expiration">
<div class="card-expiration-label">
<div>VALID</div>
<div>THRU</div>
</div>
<div class="card-expiration-month">
<div class="card-expiration-month-label">MONTH</div>
<select class='drp-expiration-month'>
<option value="01">01</option>
<option value="02">03</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="card-expiration-slash">/</div>
<div class="card-expiration-year">
<div class="card-expiration-year-label">YEAR</div>
<select class='drp-expiration-year'>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</div>
</div>
</div>
<div class="credit-card back unfocused">
<div class="magnetic-strip"></div>
<div class="credit-card-ccv">
<div class="credit-card-ccv-label">CCV CODE</div>
<div class="credit-card-ccv-strip">
<div class="credit-card-ccv-box"></div>
<input type="text" class="tbx-ccv" maxlength='4'/>
<div class="credit-card-ccv-prefix">XXXX</div>
</div>
</div>
</div>
</div>
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
}
input, select {
appearance: none;
border-radius: 0;
border: 0;
border-radius: 0;
outline: none;
}
@mixin animate($what, $duration, $type) {
transition: $what $duration $type;
transition: $what $duration $type;
transition: $what $duration $type;
transition: $what $duration $type;
transition: $what $duration $type;
}
@mixin drop-shadow($h, $v, $blur, $spread, $color) {
box-shadow: $h $v $blur $spread $color;
box-shadow: $h $v $blur $spread $color;
box-shadow: $h $v $blur $spread $color;
}
@mixin skew($x, $y) {
transform: skew($x, $y);
transform: skew($x, $y);
transform: skew($x, $y);
transform: skew($x, $y);
}
$margin: 24px;
.credit-card-wrapper {
$card-height: 240px;
$golden-ratio: 1.618;
$focused-color: #3d89b8;
$unfocused-color: #337099;
.credit-card {
@include drop-shadow(0px, 0px, 10px, 2px, #000);
background: $focused-color;
border-radius: 8px;
color: white;
font-size: 14px;
position: absolute;
height: $card-height;
width: $card-height * $golden-ratio;
@include animate(all, 1s, ease);
&.unfocused {
background: $unfocused-color;
}
}
.front {
top: 100px;
left: 100px;
z-index: 2;
.card-title {
font-size: 18px;
font-weight: bolder;
margin: $margin 0 0 $margin;
}
.card-number {
padding: $margin / 2 $margin 0;
.card-number-label {
margin: $margin / 8 0 $margin / 4;
}
input {
background: darken(#3d89b8, 10%);
border-radius: 4px;
border: 1px solid #ccc;
color: white;
font-size: 30px;
margin: 0 $margin / 8 0 0;
padding: $margin / 8;
width: 70px;
}
}
.card-expiration {
padding: $margin / 2 $margin $margin;
&> div {
float: left;
padding: $margin / 8;
}
.card-expiration-label {
padding-top: $margin * 1.35;
}
.card-expiration-month, .card-expiration-year {
&:after {
position: absolute;
bottom: 42px;
font-family: 'FontAwesome';
content: '\f063';
pointer-events: none;
}
}
.card-expiration-month:after {
left: 118px;
}
.card-expiration-year:after {
left: 218px;
}
.card-expiration-month-label {
margin-bottom: $margin / 4;
}
.card-expiration-year-label {
margin-bottom: $margin / 4;
}
.card-expiration-slash {
font-size: 32px;
padding: $margin * 1.28 $margin / 4;
}
select {
background: darken(#3d89b8, 10%);
border-radius: 4px;
border: 1px solid gray;
color: white;
font-size: 30px;
padding: $margin / 8 $margin / 2 $margin / 8 $margin / 3;
width: 70px;
}
}
}
.back {
top: 70px;
left: 300px;
z-index: 1;
.magnetic-strip {
background: #111;
margin-top: $margin;
height: 60px;
width: 100%;
}
.credit-card-ccv {
text-align: right;
.credit-card-ccv-label {
padding: $margin / 2 $margin $margin / 4;
}
.credit-card-ccv-strip {
margin: 0 $margin;
height: 60px;
background: rgba(255, 255, 255, 0.4);
}
.credit-card-ccv-prefix {
color: black;
float: right;
font-size: 24px;
letter-spacing: 2.5px;
padding: $margin / 1.6 $margin / 2;
@include skew(10deg, 0);
}
.credit-card-ccv-box {
background: white;
position: absolute;
top: 125px;
right: $margin + 5px;
content: '';
border-radius: 4px;
border: 1px solid gray;
height: 46px;
width: 80px;
}
input {
float: right;
background: transparent;
border-radius: 4px;
color: black;
font-size: 26px;
margin: $margin / 4 0 0 0;
padding: $margin / 3;
width: 70px;
@include skew(10deg, 0);
}
}
}
}
View Compiled
var CreditCard = (function() {
var init = function() {
$('.credit-card.front input, .credit-card.front select').on('focus', front_focus);
$('.credit-card.back input').on('focus', back_focus);
};
var front_focus = function() {
$('.credit-card.back').addClass('unfocused');
$(this).closest('.credit-card').removeClass('unfocused');
};
var back_focus = function() {
$('.credit-card.front').addClass('unfocused');
$(this).closest('.credit-card').removeClass('unfocused');
};
return {
init: init
}
}());
$(CreditCard.init);
This Pen doesn't use any external CSS resources.