<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.0/css/bootstrap.min.css">
<!-- Css animations -->
<!-- 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" />
</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 class="active"><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">
<div class="col-sm-6">
<div class="box payment-method">
<h4>Paypal</h4>
<p>Mit PayPal einfach und sicher bezahlen, Zahlungen empfangen & Geld senden. Profitieren auch Sie vom Käuferschutz & Verkäuferschutz.<br><br><br></p>
<div class="box-footer text-center">
<input type="radio" name="payment" value="payment1">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="box payment-method">
<h4>SEPA-Lastschrift</h4>
<p>Mit der SEPA-Lastschrift können Sie offene Rechnungen in Deutschland oder anderen SEPA-Staaten bargeldlos bezahlen. Durch ein Lastschriftmandat erlauben Sie dem Zahlungsempfänger, den fälligen Betrag von Ihrem Konto abzubuchen.</p>
<div class="box-footer text-center">
<input type="radio" name="payment" value="payment2">
</div>
</div>
</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>
<!-- /#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;
}
