<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>Adresse</a></li>
<li><a href="shop-checkout1.html"><i class="fa fa-truck"></i><br>Adresse</a></li>
<li class="active"><a href="#"><i class="fa fa-money"></i><br>Bezahlmethode</a></li>
<li class="disabled"><a href="shop-checkout4.html"><i class="fa fa-eye"></i><br>Bestellübersicht</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;
}
