<!-- view in Full page for better experience -->
<head>
<meta charset="utf-8">
<meta name="keywords" content="Check Out Page zaki" >
<meta name="description" content="Checkout Page - By Zaki" >
<title>CheckOut</title>
<script src="https://use.fontawesome.com/fbf13eceb7.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" >
</head>
<body>
<div class="container">
<div class="colored"></div>
<div class="info">
<i class="fa fa-long-arrow-left" aria-hidden="true"></i>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
<div class="imag">
<a href="#"><img src="https://www.frasescelebre.com/images/speaker.png" /></a>
</div>
<div class="price">
<span>$245.00</span>
<span>Nice speaker : Quality</span>
</div>
</div>
<div class="form">
<h3>Payment informations</h3>
<form action="" method="post">
<label>PAYMENT METHOD</label>
<span class="select"><select>
<option value="VISA">VISA</option>
<OPTION value="MASTERCARD">MASTER CARD</OPTION>
<OPTION value="AMERICAN EXPRESS">AMERICA EXPRESS</OPTION>
</select></span>
<label>CARDHOLDER'S NAME</label>
<input type="text" name="name">
<label>CARD NUMBER</label>
<input type="text" name="CCN">
<span class="expiry">
<label>EXPIRATION DATE</label>
<span class="select"><select class="small">
<option value="MARCH">MARCH</option>
<OPTION value="MASTERCARD">APRIL</OPTION>
<OPTION value="AMERICAN EXPRESS">MAY</OPTION>
</select></span>
<span class="select"><select class="small">
<option value="2016">2016</option>
<OPTION value="2017">2017</OPTION>
<OPTION value="2018">2018</OPTION>
</select></span>
</span>
<span class="sec">
<LABEL>SECURITY CODE</LABEL>
<input type="text" name="sec" maxlength="4" />
</span>
<p>Your credit card information are Encrypted </p>
<button>PURCHASE SAFELY</button>
</form>
</div>
</div>
</body>
/*
Author : Kouloughli Hemza;
Date : 11/2016;
Name :Clean Modern Checkout Form;
*/
*,*:after,*:before{
box-sizing: border-box;
}
body {
background-color: #F3F6FF;
}
/* Container start */
.container {
margin:2% auto;
width: 80%;
min-width: 80%;
min-height: 610px;
background-color: #F7F7F7;
border-radius: 10px;
box-shadow: 0px 0px 19px 6px #ddd;
overflow: hidden;
}
/* Container Ends */
/* info Start Here */
.info {
background: transparent;
z-index: 999;
position: absolute;
top: 38px;
left: 205px;
float: left;
}
.info i {
color:rgba(255,255,255,0.7);
margin-right: 10px;
font-weight: 900;
font-size:30px;
transition:all .4s ease;
cursor: pointer;
margin-top: 15px;
}
.info i:hover{
color:rgba(255,255,255,1);
}
.info .imag img {
width: 340px;
transform: rotate(12deg);
margin-left: 10%;
padding-bottom: 80px;
}
.info .imag{position: relative;}
.info .imag a:after {
content: '';
display: block;
position: absolute;
left: 16%;
top: 310px;
width: 54%;
max-width: 250px;
height: 10px;
background: transparent;
border-radius: 100px/50px;
box-shadow: 0 50px 40px rgba(0,0,0,.7);
}
.price span {
font-family: roboto;
font-size: 30px;
display: block;
padding: 0px 15px;
color: #000;
font-weight: 900;
color:#fff;
text-shadow: 0 2px 7px rgba(0, 0, 0, .4);
}
.price span:last-of-type {
font-size:20px;
font-weight: 600;
}
/* Info Ends here */
/* Opacity */
.colored {
background-color: #82C5D8;
width: 600px;
height: 610px;
transform: skew(31deg);
position: relative;
top: 0;
left: -200px;
float: left;
}
/* opacity ends */
/* -----------------------------------------------------------------*/
/* form Start here */
.form h3 {
font-size: 20px;
font-family: roboto;
/* font-weight: 700; */
letter-spacing: 1.3px;
word-spacing: 3px;
margin-top: 40px;
}
label {
display: block;
color: #989898;
font-weight: 700;
font-family: roboto;
font-size: 14px;
letter-spacing: 1px;
word-spacing: 3px;
margin-top: 30px;
}
select {
border: 0;
background-color: #f7f7f7;
border-bottom: 2px solid #ddd;
outline: none;
padding: 15px 30px;
width: 230px;
font-size: 14px;
padding-bottom: 7px;
font-weight: 600;
appearance: none;
margin-top: 5px;
}
.select {
position: relative;
}
.select:after {
content: '\f078';
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'FontAwesome';
z-index: 10;
color:#ddd;
}
input {
border: 0;
background-color: #f7f7f7;
border-bottom: 2px solid #ddd;
outline: none;
padding: 5px 30px;
width: 230px;
font-size: 14px;
padding-bottom: 7px;
font-weight: 600;
transition: all .5s ease-in;
}
input:focus {
border-bottom:2px solid #82C5D8;
}
.small {
width:150px;
padding: 15px 10px;
}
.expiry {
float:left;
width:30%;
}
.sec input{
width: 50px;
padding: 11px 6px;
margin-top: 13px;
}
button {
background-color: #26B961;
outline: none;
border: 0;
color: #fff;
font-size: 16px;
font-family: roboto;
font-weight: 600;
letter-spacing: 1px;
word-spacing: 3px;
padding: 10px;
width: 34%;
display: block;
margin: auto;
border-radius: 15px;
cursor: pointer;
}
.form p {
color:#989898;
font-family: roboto;
font-size:14px;
font-weight:normal;
text-align: center;
margin-top: 80px;
margin-bottom: 4px;
}
/* Form Ends Here */
/* Media Query For Mobile */
@media only screen and (max-width: 960px) {
.colored , .expiry {
float:none;
}
.form {
text-align: center;
}
.info {
left:33%;
}
.info .imag img {
margin-left:-15%;
}
.price span {
padding:0px;
}
.form p {
margin-top: 30px;
}
button {
margin-bottom: 30px;
width:60%;
}
}
/* Ends Of media Query */
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.