<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <div class="total-logo"> <div class="total"> <span>Total:</span> <span class="total-n">205,50 €</span> </div> <div class="logo"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163884/logo-vans.png"> </div> </div> <!--End TOTAL-LOGO--> <div class="step"> <div class="retry">Retry</div> <div class="line"></div> <div class="payment">Payment</div> </div> <!--End STEP--> <div class="cont-forms"> <form class="form" autocomplete="off" novalidate> <fieldset class="card-number"> <label for="card-num">Credit card number</label> <div class="flex-wrapper"> <input class="cc-number" type="num" maxlength="4" /> <input class="cc-number" type="num" maxlength="4" /> <input class="cc-number" type="num" maxlength="4" /> <input class="cc-number" type="num" maxlength="4" /> </div> </fieldset> <fieldset class="card-holder"> <label for="card-num">Credit card holder</label> <input type="text" /> </fieldset> <fieldset class="card-expiration"> <div class="expiry-ccv"> <div class="cont expiration-date"> <label for="card-num">Expiration Date</label> <input type="numb" maxlength="2" /> <input class="last" type="num" maxlength="4" /> </div> <div class="cont ccv"> <label for="card-ccv">ccv</label> <input type="num" maxlength="3" /> </div> </div> </fieldset> <fieldset class="conf-button"> <div class="flex-wrapper"> <button class="purchase"><span>Confirm purchase</span></button> <div class="or-element"><span>- or -<span></div> <button class="applepay"><span>Apple Pay</span></button> </div> </fieldset> </form> </div><!--End CONT-FORMS--> <div class="button-cart"> <img class="icon-cart" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163884/icona-shop.svg"> <div class="product-in-cart"><span>3</span></div> </div> </div><!--End CONTAINER--> <div class="cont-product"> <div class="product first"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163884/bag-vans.jpg" /> <div class="cont-options"> <div class="quantity"> <button class="plus">+</button> <span class="num">1</span> <button class="minus">-</button> </div> <button class="remove">remove</button> </div> </div> <div class="product second"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163884/shoes-green.jpg"></img> <div class="cont-options"> <div class="quantity"> <button class="plus">+</button> <span class="num">1</span> <button class="minus">-</button> </div> <button class="remove">remove</button> </div> </div> <div class="product third"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/163884/shoes-pink.jpg"></img> <div class="cont-options"> <div class="quantity"> <button class="plus">+</button> <span class="num">1</span> <button class="minus">-</button> </div> <button class="remove">remove</button> </div> </div> </div> <script> //for credit card number $('.cc-number').on('keyup change', function(){ if ($(this).val().length == 4) { $(this).next().focus(); } else if ($(this).val().length == 0) { $(this).prev().focus(); } }); $(".button-cart").on('click', function(e){ e.stopPropagation(); $(".cont-product").addClass("slide-right"); $(".container").addClass("slide-cont-left"); $(this).addClass("btn-hiding"); setTimeout(function(){ $(".cont-product").addClass("zindex"); }, 300); }); $(".product").on('click', function(e){ e.stopPropagation(); $(".cont-options").removeClass("slideup"); $(".product").removeClass("active"); $(this).addClass("active"); $(this).find(".cont-options").addClass("slideup"); }); $(window).on( "click", function(){ $(".product").removeClass("active"); $(".cont-product").removeClass("zindex"); $(".cont-product").removeClass("slide-right"); $(".container").removeClass("slide-cont-left"); $(".button-cart").removeClass("btn-hiding"); $(".cont-options").removeClass("slideup"); }); </script>

@charset "UTF-8"; @import "https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800"; @import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"; /*