<div class="wrapper">
    <div class="container">
        <article class="part card-details">
            <h1>
                Credit Card Details
            </h1>
            <form action="" if="cc-form" autocomplete="off">
                <div class="group card-number">
                    <label for="first">Card Number</label>
                    <input type="text" id="first" class="cc-num" type="text" maxlength="4" placeholder="&#9679;&#9679;&#9679;&#9679;">
                    <input type="text" id="second" class="cc-num" type="text" maxlength="4" placeholder="&#9679;&#9679;&#9679;&#9679;">
                    <input type="text" id="third" class="cc-num" type="text" maxlength="4" placeholder="&#9679;&#9679;&#9679;&#9679;">
                    <input type="text" id="fourth" class="cc-num" type="text" maxlength="4" placeholder="&#9679;&#9679;&#9679;&#9679;">
                </div>
                <div class="group card-name">
                    <label for="name">Name On Card</label>
                    <input type="text" id="name" class="" type="text" maxlength="20" placeholder="Name Surname">
                </div>
                <div class="group card-expiry">
                    <div class="input-item expiry">
                        <label for="expiry">Expiry Date</label>
                        <input type="text" class="month" id="expiry" placeholder="02">
                        <input type="text" class="year" id="" placeholder="2017">
                    </div>
                    <div class="input-item csv">
                        <label for="csv">CSV No.</label><a href="#what">?</a>
                        <input type="text" class="csv">
                    </div>
                </div>
                <div class="grup submit-group">
                    <span class="arrow"></span>
                    <input type="submit" class="submit" value="Continue to payment">
                </div>
            </form>
        </article>
        <div class="part bg"></div>
    </div>
</div>
/*----------  libraries ---------- */

@import "compass";
@import "compass/reset";

/*----------  style ----------*/

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Work+Sans);
$white: #fff;
$black: #000;
$grey: #d9d9d9;
$dark: #263238;
$bg: #b3e5fc;
$blue: #00b0ff;

@mixin placeholder {
	&::-webkit-input-placeholder {@content;}
	&:-moz-placeholder {@content;}
	&::-moz-placeholder {@content;}
	&:-ms-input-placeholder {@content;}
}

* {@include box-sizing(border-box); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;}

body {
	background-color: $bg;
}

.wrapper {
	width: 611px;
	height: 400px;
	margin: 80px auto 0;
	.container {
		float: right;
		width: 600px;
		height: 400px;
		background-color: $white;
		@include border-radius(10px);
		.part {
			float: left;
			height: 100%;
			&.card-details {
				padding: 48px 40px 0;
				width: 60%;
				h1 {
					background-color: $blue;
					color: white;
					font-family: 'Montserrat', sans-serif;
					font-size: 12px;
					text-transform: uppercase;
					padding: 14px 0 10px 49px;
					letter-spacing: 1px;
					margin-left: -52px;
					width: 330px;
				}
			}
			&.bg {
				width: 40%;
				background-image: url("https://s13.postimg.org/d8emjhccn/image.jpg");
        		background-size: 121%;
        		background-repeat: no-repeat;
				overflow: hidden;
				@include border-right-radius(10px);
			}
		}
		form {
			font-family: 'Work Sans', sans-serif;
			.group {
				display: block;
				width: 100%;
				float: left;
				position: relative;
				margin-bottom: 25px;
				label {
					font-size: 12px;
					float: left;
					width: 100%;
					display: block;
					margin-bottom: 5px;
				}
				input {
					float: left;
                    width: 100%;
                    height: 30px;
					font-size: 18px;
					font-family: 'Work Sans', sans-serif;
					border: 0;
					color: $dark;
                    border-bottom: 1px solid $grey;
					@include placeholder {
						font-family: 'Work Sans', sans-serif;
						font-size: 14px;
						line-height: 20px;
						vertical-align: middle;
						color: $grey;
						text-align: left;
					}
					&:focus {
						outline: none;
                        border-bottom-color: $blue;
						@include placeholder {
							color: transparent;
						}
					}
				}
			}
			.card-number {
                border-bottom: 1px solid $grey;
				&:first-of-type {
					margin-top: 32px;
				}
				input {
					width: 43px;
                    border-bottom: 0;
				}
                &.focused {
                    border-bottom-color: $blue;
                }
			}
			.card-expiry {
				border-bottom: 0;
				.input-item {
					float: left;
					&.expiry {
						width: 200px;
						input:last-of-type {
							margin-left: 30px;
						}
					}
					&.csv {
						width: 80px;
						position: relative;
						a {
							display: block;
							position: absolute;
							top: 0;
							right: 0;
							font-size: 12px;
							text-decoration: none;
							color: $blue;
                            &:hover {
                                color: $dark;
                            }
						}
					}
					label {
						width: 100%;
					}
					input {
						border-bottom: 1px solid $grey;
						padding-bottom: 8px;
						&.month {
							width: 60px;
						}
						&.year {
							width: 79px;
						}
						&.csv {
							width: 79px;
						}
						&:focus {
							border-bottom: 1px solid $blue;
						}
					}
				}
			}
			.submit-group {
				width: 100%;
				float: left;
				position: relative;
			}
			.submit {
				text-transform: uppercase;
				position: relative;
				border: none;
				background-color: transparent;
				font-size: 12px;
				line-height: 21px;
    			letter-spacing: 1.4px;
				text-align: left;
				color: $dark;
				margin-left: 24px;
                cursor: pointer;
                &:hover {
                    text-decoration: underline;
                }
				&:focus {
					outline: none;
				}
			}
			.arrow {
				position: absolute;
				top: -2px;
				left: -1px;
				&:before {
					content: '';
					width: 15px;
					height: 15px;
					background-image: url('https://s21.postimg.org/lgxvam5df/arrow.png');
					position: absolute;
					top: 4px;
					left: 0;
                    @include transition(all 0.3s);
				}
                &.rotate {
                    &:before {
                        @include transform(rotate(360deg));
                    }
                }
			}
		}
	}
}
.credits {
    display: block;
    font-family: 'Work Sans', sans-serif;
    position: absolute;
    right: 0;
    bottom: 0;
    color: $dark;
    font-size: 12px;
    margin: 0 10px 10px 0;
    a {
        @include opacity(0.8);
        color: inherit;
        font-weight: 700;
        text-decoration: none;
    }
}
View Compiled
$(".cc-num").keyup(function() {
    if (this.value.length == this.maxLength) {
        var $next = $(this).next('.cc-num');
        if ($next.length)
            $(this).next('.cc-num').focus();
        else
            $(this).blur();
    }
});
$('.cc-num').on("focusin", function() {
    $('.cc-num').attr('type', 'password')
    $(this).attr('type', 'text');
    $('.card-number').addClass('focused');
});
$('.cc-num').on("focusout", function() {
    $('.card-number').removeClass('focused');
});
$('.dropdown').click(function() {
    $(this).next('ul').stop().slideToggle();
    $(this).toggleClass('selected');
});
$('.card-number').on('keydown', '.cc-num', function(e) {
    -1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault()
});
$('.submit').hover(function(){
    $('.arrow').addClass('rotate');
}, function(){
    $('.arrow').removeClass('rotate');
});
$('.part.bg').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 30);
    var amountMovedY = (e.pageY * -1 / 9);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js