<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <div class="container wrapper"> <div class="row cart-head"> <div class="container"> <div class="row"> <p></p> </div> <div class="row"> <div style="display: table; margin: auto;"> <span class="step step_complete"> <a href="#" class="check-bc">Cart</a> <span class="step_line step_complete"> </span> <span class="step_line backline"> </span> </span> <span class="step step_complete"> <a href="#" class="check-bc">Checkout</a> <span class="step_line "> </span> <span class="step_line step_complete"> </span> </span> <span class="step_thankyou check-bc step_complete">Thank you</span> </div> </div> <div class="row"> <p></p> </div> </div> </div> <div class="row cart-body"> <form class="form-horizontal" method="post" action=""> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-md-push-6 col-sm-push-6"> <!--REVIEW ORDER--> <div class="panel panel-info"> <div class="panel-heading"> Review Order <div class="pull-right"><small><a class="afix-1" href="#">Edit Cart</a></small></div> </div> <div class="panel-body"> <div class="form-group"> <div class="col-sm-3 col-xs-3"> <img class="img-responsive" src="//c1.staticflickr.com/1/466/19681864394_c332ae87df_t.jpg" /> </div> <div class="col-sm-6 col-xs-6"> <div class="col-xs-12">Product name</div> <div class="col-xs-12"><small>Quantity:<span>1</span></small></div> </div> <div class="col-sm-3 col-xs-3 text-right"> <h6><span>$</span>25.00</h6> </div> </div> <div class="form-group"><hr /></div> <div class="form-group"> <div class="col-sm-3 col-xs-3"> <img class="img-responsive" src="//c1.staticflickr.com/1/466/19681864394_c332ae87df_t.jpg" /> </div> <div class="col-sm-6 col-xs-6"> <div class="col-xs-12">Product name</div> <div class="col-xs-12"><small>Quantity:<span>1</span></small></div> </div> <div class="col-sm-3 col-xs-3 text-right"> <h6><span>$</span>25.00</h6> </div> </div> <div class="form-group"><hr /></div> <div class="form-group"> <div class="col-sm-3 col-xs-3"> <img class="img-responsive" src="//c1.staticflickr.com/1/466/19681864394_c332ae87df_t.jpg" /> </div> <div class="col-sm-6 col-xs-6"> <div class="col-xs-12">Product name</div> <div class="col-xs-12"><small>Quantity:<span>2</span></small></div> </div> <div class="col-sm-3 col-xs-3 text-right"> <h6><span>$</span>50.00</h6> </div> </div> <div class="form-group"><hr /></div> <div class="form-group"> <div class="col-xs-12"> <strong>Subtotal</strong> <div class="pull-right"><span>$</span><span>200.00</span></div> </div> <div class="col-xs-12"> <small>Shipping</small> <div class="pull-right"><span>-</span></div> </div> </div> <div class="form-group"><hr /></div> <div class="form-group"> <div class="col-xs-12"> <strong>Order Total</strong> <div class="pull-right"><span>$</span><span>150.00</span></div> </div> </div> </div> </div> <!--REVIEW ORDER END--> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-md-pull-6 col-sm-pull-6"> <!--SHIPPING METHOD--> <div class="panel panel-info"> <div class="panel-heading">Address</div> <div class="panel-body"> <div class="form-group"> <div class="col-md-12"> <h4>Shipping Address</h4> </div> </div> <div class="form-group"> <div class="col-md-12"><strong>Country:</strong></div> <div class="col-md-12"> <input type="text" class="form-control" name="country" value="" /> </div> </div> <div class="form-group"> <div class="col-md-6 col-xs-12"> <strong>First Name:</strong> <input type="text" name="first_name" class="form-control" value="" /> </div> <div class="span1"></div> <div class="col-md-6 col-xs-12"> <strong>Last Name:</strong> <input type="text" name="last_name" class="form-control" value="" /> </div> </div> <div class="form-group"> <div class="col-md-12"><strong>Address:</strong></div> <div class="col-md-12"> <input type="text" name="address" class="form-control" value="" /> </div> </div> <div class="form-group"> <div class="col-md-12"><strong>City:</strong></div> <div class="col-md-12"> <input type="text" name="city" class="form-control" value="" /> </div> </div> <div class="form-group"> <div class="col-md-12"><strong>State:</strong></div> <div class="col-md-12"> <input type="text" name="state" class="form-control" value="" /> </div> </div> <div class="form-group"> <div class="col-md-12"><strong>Zip / Postal Code:</strong></div> <div class="col-md-12"> <input type="text" name="zip_code" class="form-control" value="" /> </div> </div> <div class="form-group"> <div class="col-md-12"><strong>Phone Number:</strong></div> <div class="col-md-12"><input type="text" name="phone_number" class="form-control" value="" /></div> </div> <div class="form-group"> <div class="col-md-12"><strong>Email Address:</strong></div> <div class="col-md-12"><input type="text" name="email_address" class="form-control" value="" /></div> </div> </div> </div> <!--SHIPPING METHOD END--> <!--CREDIT CART PAYMENT--> <div class="panel panel-info"> <div class="panel-heading"><span><i class="glyphicon glyphicon-lock"></i></span> Secure Payment</div> <div class="panel-body"> <div class="form-group"> <div class="col-md-12"><strong>Card Type:</strong></div> <div class="col-md-12"> <select id="CreditCardType" name="CreditCardType" class="form-control"> <option value="5">Visa</option> <option value="6">MasterCard</option> <option value="7">American Express</option> <option value="8">Discover</option> </select> </div> </div> <div class="form-group"> <div class="col-md-12"><strong>Credit Card Number:</strong></div> <div class="col-md-12"><input type="text" class="form-control" name="car_number" value="" /></div> </div> <div class="form-group"> <div class="col-md-12"><strong>Card CVV:</strong></div> <div class="col-md-12"><input type="text" class="form-control" name="car_code" value="" /></div> </div> <div class="form-group"> <div class="col-md-12"> <strong>Expiration Date</strong> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <select class="form-control" name=""> <option value="">Month</option> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option> <option value="05">05</option> <option value="06">06</option> <option value="07">07</option> <option value="08">08</option> <option value="09">09</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <select class="form-control" name=""> <option value="">Year</option> <option value="2015">2015</option> <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> <option value="2025">2025</option> </select> </div> </div> <div class="form-group"> <div class="col-md-12"> <span>Pay secure using your credit card.</span> </div> <div class="col-md-12"> <ul class="cards"> <li class="visa hand">Visa</li> <li class="mastercard hand">MasterCard</li> <li class="amex hand">Amex</li> </ul> <div class="clearfix"></div> </div> </div> <div class="form-group"> <div class="col-md-6 col-sm-6 col-xs-12"> <button type="submit" class="btn btn-primary btn-submit-fix">Place Order</button> </div> </div> </div> </div> <!--CREDIT CART PAYMENT END--> </div> </form> </div> <div class="row cart-footer"> </div> </div>

html,body,.wrapper{ background: #f7f7f7; } .steps { margin-top: -41px; display: inline-block; float: right; font-size: 16px } .step { float: left; background: white; padding: 7px 13px; border-radius: 1px; text-align: center; width: 100px; position: relative } .step_line { margin: 0; width: 0; height: 0; border-left: 16px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; z-index: 1008; position: absolute; left: 99px; top: 1px } .step_line.backline { border-left: 20px solid #f7f7f7; border-top: 20px solid transparent; border-bottom: 20px solid transparent; z-index: 1006; position: absolute; left: 99px; top: -3px } .step_complete { background: #357ebd } .step_complete a.check-bc, .step_complete a.check-bc:hover,.afix-1,.afix-1:hover{ color: #eee; } .step_line.step_complete { background: 0; border-left: 16px solid #357ebd } .step_thankyou { float: left; background: white; padding: 7px 13px; border-radius: 1px; text-align: center; width: 100px; } .step.check_step { margin-left: 5px; } .ch_pp { text-decoration: underline; } .ch_pp.sip { margin-left: 10px; } .check-bc, .check-bc:hover { color: #222; } .SuccessField { border-color: #458845 !important; -webkit-box-shadow: 0 0 7px #9acc9a !important; -moz-box-shadow: 0 0 7px #9acc9a !important; box-shadow: 0 0 7px #9acc9a !important; background: #f9f9f9 url(../images/valid.png) no-repeat 98% center !important } .btn-xs{ line-height: 28px; } /*login form*/ .login-container{ margin-top:30px ; } .login-container input[type=submit] { width: 100%; display: block; margin-bottom: 10px; position: relative; } .login-container input[type=text], input[type=password] { height: 44px; font-size: 16px; width: 100%; margin-bottom: 10px; -webkit-appearance: none; background: #fff; border: 1px solid #d9d9d9; border-top: 1px solid #c0c0c0; /* border-radius: 2px; */ padding: 0 8px; box-sizing: border-box; -moz-box-sizing: border-box; } .login-container input[type=text]:hover, input[type=password]:hover { border: 1px solid #b9b9b9; border-top: 1px solid #a0a0a0; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); } .login-container-submit { /* border: 1px solid #3079ed; */ border: 0px; color: #fff; text-shadow: 0 1px rgba(0,0,0,0.1); background-color: #357ebd;/*#4d90fe;*/ padding: 17px 0px; font-family: roboto; font-size: 14px; /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */ } .login-container-submit:hover { /* border: 1px solid #2f5bb7; */ border: 0px; text-shadow: 0 1px rgba(0,0,0,0.3); background-color: #357ae8; /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */ } .login-help{ font-size: 12px; } .asterix{ background:#f9f9f9 url(../images/red_asterisk.png) no-repeat 98% center !important; } /* images*/ ol, ul { list-style: none; } .hand { cursor: pointer; cursor: pointer; } .cards{ padding-left:0; } .cards li { -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; background-image: url('//c2.staticflickr.com/4/3713/20116660060_f1e51a5248_m.jpg'); background-position: 0 0; float: left; height: 32px; margin-right: 8px; text-indent: -9999px; width: 51px; } .cards .mastercard { background-position: -51px 0; } .cards li { -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; background-image: url('//c2.staticflickr.com/4/3713/20116660060_f1e51a5248_m.jpg'); background-position: 0 0; float: left; height: 32px; margin-right: 8px; text-indent: -9999px; width: 51px; } .cards .amex { background-position: -102px 0; } .cards li { -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; background-image: url('//c2.staticflickr.com/4/3713/20116660060_f1e51a5248_m.jpg'); background-position: 0 0; float: left; height: 32px; margin-right: 8px; text-indent: -9999px; width: 51px; } .cards li:last-child { margin-right: 0; } /* images end */ /* * BOOTSTRAP */ .container{ border: none; } .panel-footer{ background:#fff; } .btn{ border-radius: 1px; } .btn-sm, .btn-group-sm > .btn{ border-radius: 1px; } .input-sm, .form-horizontal .form-group-sm .form-control{ border-radius: 1px; } .panel-info { border-color: #999; } .panel-heading { border-top-left-radius: 1px; border-top-right-radius: 1px; } .panel { border-radius: 1px; } .panel-info > .panel-heading { color: #eee; border-color: #999; } .panel-info > .panel-heading { background-image: linear-gradient(to bottom, #555 0px, #888 100%); } hr { border-color: #999 -moz-use-text-color -moz-use-text-color; } .panel-footer { border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; border-top: 1px solid #999; } .btn-link { color: #888; } hr{ margin-bottom: 10px; margin-top: 10px; } /** MEDIA QUERIES **/ @media only screen and (max-width: 989px){ .span1{ margin-bottom: 15px; clear:both; } } @media only screen and (max-width: 764px){ .inverse-1{ float:right; } } @media only screen and (max-width: 586px){ .cart-titles{ display:none; } .panel { margin-bottom: 1px; } } .form-control { border-radius: 1px; } @media only screen and (max-width: 486px){ .col-xss-12{ width:100%; } .cart-img-show{ display: none; } .btn-submit-fix{ width:100%; } } /* @media only screen and (max-width: 777px){ .container{ overflow-x: hidden; } }*/