"Checkout 2"
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 class="active"><a href="shop-checkout1.html"><i class="fa fa-file-text-o"></i><br>Adres</a></li> <li class="disabled"><a href="shop-checkout1.html"><i class="fa fa-truck"></i><br>Nakliye</a></li> <li class="disabled"><a href="shop-checkout1.html"><i class="fa fa-money"></i><br>Odeme</a></li> <li class="disabled"><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:10px; font-size:16px;"> <h2> Kayitli Adreslerim </h2> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <p class="align-center"><a href="#" class="btn btn-success" role="button">Adresi sec</a></p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <p class="align-center"><a href="#" class="btn btn-success" role="button">Adresi sec</a></p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <div class="caption"> <h4>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <p class="align-center"><a href="#" class="btn btn-success" role="button">Adresi Sec</a></p> </div> </div> </div> </div> <div class="row" style="margin:10px; font-size:16px;"> <form class="form-horizontal"> <fieldset> <!-- Address form --> <h2>Address</h2> <!-- full-name input--> <div class="control-group"> <label class="control-label">Full Name</label> <div class="controls"> <input id="full-name" name="full-name" type="text" placeholder="full name" class="input-xlarge"> <p class="help-block"></p> </div> </div> <!-- address-line1 input--> <div class="control-group"> <label class="control-label">Address Line 1</label> <div class="controls"> <input id="address-line1" name="address-line1" type="text" placeholder="address line 1" class="input-xlarge"> <p class="help-block">Street address, P.O. box, company name, c/o</p> </div> </div> <!-- address-line2 input--> <div class="control-group"> <label class="control-label">Address Line 2</label> <div class="controls"> <input id="address-line2" name="address-line2" type="text" placeholder="address line 2" class="input-xlarge"> <p class="help-block">Apartment, suite , unit, building, floor, etc.</p> </div> </div> <!-- city input--> <div class="control-group"> <label class="control-label">City / Town</label> <div class="controls"> <input id="city" name="city" type="text" placeholder="city" class="input-xlarge"> <p class="help-block"></p> </div> </div> <!-- region input--> <div class="control-group"> <label class="control-label">State / Province / Region</label> <div class="controls"> <input id="region" name="region" type="text" placeholder="state / province / region" class="input-xlarge"> <p class="help-block"></p> </div> </div> <!-- postal-code input--> <div class="control-group"> <label class="control-label">Zip / Postal Code</label> <div class="controls"> <input id="postal-code" name="postal-code" type="text" placeholder="zip or postal code" class="input-xlarge"> <p class="help-block"></p> </div> </div> </fieldset> </form> </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>Back</a> </div> <div class="pull-right"> <button type="submit" class="btn btn-template-main">Next<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; } .align-center{ text-align:center; }

Related: See More


Questions / Comments: