HTML
<!DOCTYPE html>
<html>
<head>
<title>Credit Card</title>
<!-- Styles -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<meta name="robots" content="noindex,follow" />
</head>
<body>
<form class="credit-card">
<div class="form-header">
<h4 class="title">Credit card detail</h4>
</div>
<div class="form-body">
<!-- Card Number -->
<input type="text" class="card-number" placeholder="Card Number">
<!-- Date Field -->
<div class="date-field">
<div class="month">
<select name="Month">
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
</div>
<div class="year">
<select name="Year">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
</div>
<!-- Card Verification Field -->
<div class="card-verification">
<div class="cvv-input">
<input type="text" placeholder="CVV">
</div>
<div class="cvv-details">
<p>3 or 4 digits usually found <br> on the signature strip</p>
</div>
</div>
<!-- Buttons -->
<button type="submit" class="proceed-btn"><a href="#">Proceed</a></button>
<button type="submit" class="paypal-btn"><a href="#">Pay With</a></button>
</div>
</form>
</body>
</html>
CSS
/* Global */
* {
box-sizing : border-box;
}
caret.png
body,
html {
height : 100%;
min-height : 100%;
}
body {
margin : 0;
background-color : #e7e7e7;
font-family : 'Roboto',
sans-serif;
}
/* Credit Card */
.credit-card {
width : 360px;
height : 400px;
margin : 60px auto 0;
border : 1px solid #ddd;
border-radius : 6px;
background-color : #fff;
box-shadow : 1px 2px 3px 0px rgba(0,0,0,0.10);
}
.form-header {
height : 60px;
padding : 20px 30px 0;
border-bottom : 1px solid #E1E8EE;
}
.form-body {
height : 340px;
padding : 30px 30px 20px;
}
/* Title */
.title {
margin : 0;
color : #5e6977;
font-size : 18px;
}
/* Common */
.card-number,
.cvv-input input,
.month select,
.paypal-btn,
.proceed-btn,
.year select {
height : 42px;
}
.card-number,
.month select,
.year select {
font-size : 14px;
font-weight : 100;
line-height : 14px;
}
.card-number,
.cvv-details,
.cvv-input input,
.month select,
.year select {
color : #86939e;
opacity : .7;
}
/* Card Number */
.card-number {
width : 100%;
margin-bottom : 20px;
padding-left : 20px;
border : 2px solid #e1e8ee;
border-radius : 6px;
}
/* Date Field */
.month select,
.year select {
-moz-appearance : none;
-webkit-appearance : none;
width : 145px;
margin-bottom : 20px;
padding-left : 20px;
border : 2px solid #e1e8ee;
border-radius : 6px;
background : url('http://designmodo.com/demo/creditcardform/caret.png') no-repeat;
background-position : 85% 50%;
}
.month select {
float : left;
}
.year select {
float : right;
}
/* Card Verification Field */
.cvv-input input {
width : 145px;
float : left;
padding-left : 20px;
border : 2px solid #e1e8ee;
border-radius : 6px;
background : #fff;
}
.cvv-details {
float : right;
margin-bottom : 20px;
font-size : 12px;
font-weight : 300;
line-height : 16px;
}
.cvv-details p {
margin-top : 6px;
}
/* Buttons Section */
.paypal-btn,
.proceed-btn {
cursor: pointer;
width : 100%;
border-color : transparent;
border-radius : 6px;
font-size : 16px;
}
.proceed-btn {
margin-bottom : 10px;
background : #7dc855;
}
.paypal-btn a,
.proceed-btn a {
text-decoration : none;
cursor : pointer;
}
.proceed-btn a {
color : #fff;
}
.paypal-btn a {
color : rgba(242, 242, 242, 0.7);
}
.paypal-btn {
padding-right : 95px;
background : url('http://designmodo.com/demo/creditcardform/paypal-logo.svg') no-repeat 65% 56% #009cde;
}
2 Responses