"Checkout - payment"
Bootstrap 3.3.0 Snippet by gango

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="all,follow"> <meta name="googlebot" content="index,follow,snippet,archive"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,800' rel='stylesheet' type='text/css'> <!-- Bootstrap and Font Awesome css --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Css animations --> <link href="css/animate.css" rel="stylesheet"> <!-- Theme stylesheet, if possible do not edit this stylesheet --> <link href="css/style.default.css" rel="stylesheet" id="theme-stylesheet"> <!-- Custom stylesheet - for your changes --> <link href="css/custom.css" rel="stylesheet"> <!-- Responsivity for older IE --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Favicon and apple touch icons--> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /> <link rel="apple-touch-icon" href="img/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="76x76" href="img/apple-touch-icon-76x76.png" /> <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png" /> <link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png" /> <link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144.png" /> <link rel="apple-touch-icon" sizes="152x152" href="img/apple-touch-icon-152x152.png" /> <style> input{ border-radius:3px; border:1px solid #ccc; width:80%; line-height:200%; }; </style> </head> <body> <div id="all"> <div id="content"> <div class="container"> <div class="row"> <div class="col-md-12 clearfix" id="checkout"> <div class="box"> <form method="post" action="shop-checkout4.html"> <ul class="nav nav-pills nav-justified"> <li><a href="shop-checkout1.html"><i class="fa fa-map-marker"></i><br>Sepet</a></li> <li><a href="shop-checkout1.html"><i class="fa fa-file-text-o"></i><br>Adres</a></li> <li><a href="shop-checkout1.html"><i class="fa fa-truck"></i><br>Nakliye</a></li> <li><a href="shop-checkout1.html"><i class="fa fa-money"></i><br>Odeme</a></li> <li class="active"><a href="#"><i class="fa fa-check-square-o"></i><br>Onay</a></li> <li class="disabled"><a href="shop-checkout4.html"><i class="fa fa-eye"></i><br>Tamamla</a></li> </ul> </form> <div class="content"> <div class="row" style="margin-top:10px;"> <div class="col-sm-12 col-md-12"> <table class="table table-hover"> <thead> <tr> <th>Product</th> <th>Quantity</th> <th class="text-center">Price</th> <th class="text-center">Total</th> <th>Remove</th> </tr> </thead> <tbody> <tr> <td class="col-sm-6 col-md-4"> <div class="media"> <a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a> <div class="media-body"> <h4 class="media-heading"><a href="#">Product name</a></h4> <h5 class="media-heading"> by <a href="#">Brand name</a></h5> <span>Status: </span><span class="text-success"><strong>In Stock</strong></span> </div> </div></td> <td class="col-sm-2 col-md-2" style="text-align: center"> 3 </td> <td class="col-sm-1 col-md-2 text-center"><strong>$4.87</strong></td> <td class="col-sm-1 col-md-2 text-center"><strong>$14.61</strong></td> <td class="col-sm-1 col-md-2"> <div class="material-switch"> <input id="someSwitchOptionDanger" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionDanger" class="label-danger"></label> </div> </td> </tr> </tbody> </table> </div> </div> <div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom:10px;"> <button type="button" class="btn btn-primary pull-right"> Update </button> </div> <div class="row" style="margin:0px;"> <div class="col-md-7 col-sm-6 col-xs-12" style="padding:15px;"> </div> <div class="col-md-5 col-sm-6 col-xs-12 pull-right" style="padding-right:0px; padding-left:0px;"> <!--REVIEW ORDER--> <div class="panel panel-default"> <div class="panel-heading text-center"> <h4>Review Order</h4> </div> <div class="panel-body"> <div class="col-md-12"> <strong>Subtotal (# item)</strong> <div class="pull-right"><span>$</span><span>200.00</span></div> </div> <div class="col-md-12"> <strong>Tax</strong> <div class="pull-right"><span>$</span><span>200.00</span></div> </div> <div class="col-md-12"> <small>Shipping</small> <div class="pull-right"><span>-</span></div> <hr> </div> <div class="col-md-12" style="font-size:24px;"> <strong>Order Total</strong> <div class="pull-right"><span>$</span><span>150.00</span></div> <hr> </div> <button type="button" class="btn btn-success btn-lg btn-block">Checkout</button> </div> </div> <!--REVIEW ORDER END--> </div> </div> </div> <!-- /.row --> <div class="box-footer"> <div class="pull-left"> <a href="shop-basket.html" class="btn btn-default"><i class="fa fa-chevron-left"></i>Zurück</a> </div> <div class="pull-right"> <button type="submit" class="btn btn-template-main">Weiter<i class="fa fa-chevron-right"></i> </button> </div> </div> </div> <!-- /.content --> </div> </div> </div> </div> </div> <!-- /#all --> <!-- #### JAVASCRIPT FILES ### --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>') </script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="js/jquery.cookie.js"></script> <script src="js/waypoints.min.js"></script> <script src="js/jquery.counterup.min.js"></script> <script src="js/jquery.parallax-1.1.3.js"></script> <script src="js/front.js"></script> </body> </html>
.clearfix:before, .clearfix:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after { content: " "; display: table; } .clearfix:after, .navbar:after, .navbar-header:after { clear: both; } .center-block { display: block; margin-left: auto; margin-right: auto; } a, button { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } a i.fa, button i.fa { margin: 0 5px; } .clickable { cursor: pointer !important; } @media (min-width: 1300px) { body.boxed { background: url(http://subtlepatterns.com/patterns/subtle_zebra_3d.png); } body.boxed #all { position: relative; background: #fff; width: 1200px; margin: 0 auto; overflow: hidden; -webkit-box-shadow: 0 0 5px #cccccc; box-shadow: 0 0 5px #cccccc; } } .btn { font-weight: 700; font-family: "Roboto", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 12px; font-size: 13px; line-height: 1.42857143; border-radius: 0; } .input-group .btn { font-size: 14px; } .btn-lg { padding: 10px 16px; font-size: 14px; line-height: 1.33; border-radius: 0; } .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 0; } .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 0; } .btn-template-main { color: #38a7bb; background-color: #ffffff; border-color: #38a7bb; } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active, .open > .dropdown-toggle.btn-template-main { color: #38a7bb; background-color: #e6e6e6; border-color: #2a7d8c; } .btn-template-main:active, .btn-template-main.active, .open > .dropdown-toggle.btn-template-main { background-image: none; } .btn-template-main.disabled, .btn-template-main[disabled], fieldset[disabled] .btn-template-main, .btn-template-main.disabled:hover, .btn-template-main[disabled]:hover, fieldset[disabled] .btn-template-main:hover, .btn-template-main.disabled:focus, .btn-template-main[disabled]:focus, fieldset[disabled] .btn-template-main:focus, .btn-template-main.disabled:active, .btn-template-main[disabled]:active, fieldset[disabled] .btn-template-main:active, .btn-template-main.disabled.active, .btn-template-main[disabled].active, fieldset[disabled] .btn-template-main.active { background-color: #ffffff; border-color: #38a7bb; } .btn-template-main .badge { color: #ffffff; background-color: #38a7bb; } .btn-template-main:hover, .btn-template-main:focus, .btn-template-main:active, .btn-template-main.active { background: #38a7bb; color: #ffffff; border-color: #38a7bb; } .btn-template-transparent-primary { color: #ffffff; background-color: transparent; border-color: #ffffff; } .btn-template-transparent-primary:hover, .btn-template-transparent-primary:focus, .btn-template-transparent-primary:active, .btn-template-transparent-primary.active, .open > .dropdown-toggle.btn-template-transparent-primary { color: #ffffff; background-color: rgba(0, 0, 0, 0); border-color: #e0e0e0; } .btn-template-transparent-primary:active, .btn-template-transparent-primary.active, .open > .dropdown-toggle.btn-template-transparent-primary { background-image: none; } .btn-template-transparent-primary.disabled, .btn-template-transparent-primary[disabled], fieldset[disabled] .btn-template-transparent-primary, .btn-template-transparent-primary.disabled:hover, .btn-template-transparent-primary[disabled]:hover, fieldset[disabled] .btn-template-transparent-primary:hover, .btn-template-transparent-primary.disabled:focus, .btn-template-transparent-primary[disabled]:focus, fieldset[disabled] .btn-template-transparent-primary:focus, .btn-template-transparent-primary.disabled:active, .btn-template-transparent-primary[disabled]:active, fieldset[disabled] .btn-template-transparent-primary:active, .btn-template-transparent-primary.disabled.active, .btn-template-transparent-primary[disabled].active, fieldset[disabled] .btn-template-transparent-primary.active { background-color: transparent; border-color: #ffffff; } .btn-template-transparent-primary .badge { color: transparent; background-color: #ffffff; } .btn-template-transparent-primary:hover, .btn-template-transparent-primary:focus, .btn-template-transparent-primary:active, .btn-template-transparent-primary.active { background: #fff; color: #38a7bb; border-color: #fff; } .btn-template-transparent-black { color: #ffffff; background-color: transparent; border-color: #ffffff; } .btn-template-transparent-black:hover, .btn-template-transparent-black:focus, .btn-template-transparent-black:active, .btn-template-transparent-black.active, .open > .dropdown-toggle.btn-template-transparent-black { color: #ffffff; background-color: rgba(0, 0, 0, 0); border-color: #e0e0e0; } .btn-template-transparent-black:active, .btn-template-transparent-black.active, .open > .dropdown-toggle.btn-template-transparent-black { background-image: none; } .btn-template-transparent-black.disabled, .btn-template-transparent-black[disabled], fieldset[disabled] .btn-template-transparent-black, .btn-template-transparent-black.disabled:hover, .btn-template-transparent-black[disabled]:hover, fieldset[disabled] .btn-template-transparent-black:hover, .btn-template-transparent-black.disabled:focus, .btn-template-transparent-black[disabled]:focus, fieldset[disabled] .btn-template-transparent-black:focus, .btn-template-transparent-black.disabled:active, .btn-template-transparent-black[disabled]:active, fieldset[disabled] .btn-template-transparent-black:active, .btn-template-transparent-black.disabled.active, .btn-template-transparent-black[disabled].active, fieldset[disabled] .btn-template-transparent-black.active { background-color: transparent; border-color: #ffffff; } .btn-template-transparent-black .badge { color: transparent; background-color: #ffffff; } .btn-template-transparent-black:hover, .btn-template-transparent-black:focus, .btn-template-transparent-black:active, .btn-template-transparent-black.active { background: #fff; color: #000; border-color: #fff; } .btn-template-primary { color: #ffffff; background-color: #38a7bb; border-color: #38a7bb; } .btn-template-primary:hover, .btn-template-primary:focus, .btn-template-primary:active, .btn-template-primary.active, .open > .dropdown-toggle.btn-template-primary { color: #ffffff; background-color: #2c8494; border-color: #2a7d8c; } .btn-template-primary:active, .btn-template-primary.active, .open > .dropdown-toggle.btn-template-primary { background-image: none; } .btn-template-primary.disabled, .btn-template-primary[disabled], fieldset[disabled] .btn-template-primary, .btn-template-primary.disabled:hover, .btn-template-primary[disabled]:hover, fieldset[disabled] .btn-template-primary:hover, .btn-template-primary.disabled:focus, .btn-template-primary[disabled]:focus, fieldset[disabled] .btn-template-primary:focus, .btn-template-primary.disabled:active, .btn-template-primary[disabled]:active, fieldset[disabled] .btn-template-primary:active, .btn-template-primary.disabled.active, .btn-template-primary[disabled].active, fieldset[disabled] .btn-template-primary.active { background-color: #38a7bb; border-color: #38a7bb; } .btn-template-primary .badge { color: #38a7bb; background-color: #ffffff; } /* universal box */ .box { background: #fff; margin: 0 0 30px; border: solid 1px #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px 0; border-left: none; border-right: none; } .box .box-header { background: #f7f7f7; margin: -20px 0 20px; padding: 20px; border-bottom: solid 1px #eeeeee; text-transform: uppercase; letter-spacing: 0.08em; } .box .box-header:before, .box .box-header:after { content: " "; display: table; } .box .box-header:after { clear: both; } .box .box-header:before, .box .box-header:after { content: " "; display: table; } .box .box-header:after { clear: both; } .box .box-footer { background: #f7f7f7; margin: 30px 0 -20px; padding: 20px; border-top: solid 1px #eeeeee; } .box .box-footer:before, .box .box-footer:after { content: " "; display: table; } .box .box-footer:after { clear: both; } .box .box-footer:before, .box .box-footer:after { content: " "; display: table; } .box .box-footer:after { clear: both; } @media (max-width: 991px) { .box .box-footer .btn { margin-bottom: 20px; } } .box.no-border { border: none; } #checkout .nav { margin-bottom: 20px; border-bottom: solid 1px #38a7bb; } #checkout .nav li { height: 100%; } #checkout .nav li a { display: block; height: 100%; } #order-summary table { margin-top: 20px; } #order-summary table td { color: #999999; } .nav > li > a { padding: 10px 15px; } .nav > li > a:hover, .nav > li > a:focus { background-color: #eeeeee; } .nav > li.disabled > a { color: #999999; } .nav > li.disabled > a:hover, .nav > li.disabled > a:focus { color: #999999; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #eeeeee; border-color: #38a7bb; } .nav-pills > li { float: left; } .nav-pills > li > a { border-radius: 0; } .nav-pills > li + li { margin-left: 2px; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #ffffff; background-color: #38a7bb; } .nav-justified { width: 100%; border-bottom: solid 1px #38a7bb; } .nav-justified > li { float: none; } .nav-justified > li > a { text-align: center; /*margin-bottom: 5px;*/ } .nav-justified > .dropdown .dropdown-menu { top: auto; left: auto; } .material-switch > input[type="checkbox"] { display: none; } .material-switch > label { cursor: pointer; height: 0px; position: relative; width: 40px; } .material-switch > label::before { background: #3c763d; box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 0px; content: ''; height: 30px; margin-top: -8px; position:absolute; opacity: 0.7; transition: all 0.4s ease-in-out; width: 60px; } .material-switch > label::after { background: rgb(255, 255, 255); border-radius: 2px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 30px; left: 0px; margin-top: -8px; position: absolute; top: 0px; transition: all 0.3s ease-in-out; width: 24px; } .material-switch > input[type="checkbox"]:checked + label::before { background: inherit; opacity: 0.5; } .material-switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 36px; } .media>.pull-left { margin-right: 10px; }

Related: See More


Questions / Comments: