Credit Card UI, HTML and CSS3 only

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; }
JAVASCRIPT
Expand for more options Login