"w1z4ard 01"
Bootstrap 2.3.2 Snippet by okebro

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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"> <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> <title>w1z4ard 01 - Bootsnipp.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> .wizard { margin: 20px auto; background: #fff; } .wizard .nav-tabs { position: relative; margin: 20px auto; margin-bottom: 0; border-bottom-color: #e0e0e0; } .wizard > div.wizard-inner { position: relative; } .connecting-line { height: 2px; background: #e0e0e0; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus { color: #555555; cursor: default; border: 0; border-bottom-color: transparent; } span.round-tab { width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tab i{ color:#555555; } .wizard li.active span.round-tab { background: #fff; border: 2px solid #db4437; } .wizard li.active span.round-tab i{ color: #db4437; } span.round-tab:hover { color: #333; border: 2px solid #333; } .wizard .nav-tabs > li { width: 16%; } .wizard li:after { content: " "; position: absolute; left: 46%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #db4437; transition: 0.1s ease-in-out; } .wizard li.active:after { content: " "; position: absolute; left: 46%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #db4437; } .wizard .nav-tabs > li a { width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .wizard .nav-tabs > li a:hover { background: transparent; } .wizard .tab-pane { position: relative; padding-top: 50px; } .wizard h3 { margin-top: 0; } div.img { border: 1px solid #2a2a2a; } div.img img { width: 100%; height: auto; } * { box-sizing: border-box; } .responsive { padding: 0 6px; float: left; width: 24.99999%; } hz { font-family: 'Roboto',arial,sans-serif; font-size: 22px; line-height: 30px; margin: 0 0 25px; color: #161923; font-weight: 400; } hr.style1 { border-top: 3px solid #00b0ff; margin-right: 90%; } p0 { color: #848484; font-family: 'Roboto',arial,sans-serif; font-size: 14px; font-weight:200; line-height: 18px; margin-bottom: 0; } @media only screen and (max-width: 700px){ .responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px){ .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } @media( max-width : 585px ) { .wizard { width: 90%; height: auto !important; } span.round-tab { font-size: 16px; width: 40px; height: 40px; line-height: 40px; } .wizard .nav-tabs > li a { width: 40px; height: 40px; line-height: 40px; } .wizard li.active:after { content: " "; position: absolute; left: 35%; } } </style> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <div class="container"> <div class="row"> <section> <div class="wizard"> <div class="wizard-inner"> <div class="connecting-line"></div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1"> <span class="round-tab"> <i class="glyphicon glyphicon-pencil"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> <span class="round-tab"> <i class="glyphicon glyphicon-envelope"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> <span class="round-tab"> <i class="glyphicon glyphicon-usd"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step4" data-toggle="tab" aria-controls="step4" role="tab" title="Step 4"> <span class="round-tab"> <i class="glyphicon glyphicon-paperclip"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#step5" data-toggle="tab" aria-controls="step5" role="tab" title="Step 5"> <span class="round-tab"> <i class="glyphicon glyphicon-usd"></i> </span> </a> </li> <li role="presentation" class="disabled"> <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> <span class="round-tab"> <i class="glyphicon glyphicon-ok"></i> </span> </a> </li> </ul> </div> <form role="form"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel" id="step1"> <hz>ISI FORM PEMESANAN</hz><br> <hr class="style1"> <p0>Pada tahapan ini, anda diharuskan mengisi form di bawah sebagai dasar kami dalam mendesain. Setelah terisi dengan benar, klik tombol submit yg berada di bawah form kemudian klik save and continue.</p0> <iframe onLoad="window.scrollTo(0,0);"src="https://docs.google.com/forms/d/e/1FAIpQLSe_UQ4NK67z_KTLuDU0w8fKLVeS3VSLP7h3ckGORXhJfcmgzg/viewform?embedded=true" width="100%" height="3500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-primary next-step">Continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step2"> <hz>TERIMA KONFIRMASI EMAIL DARI KAMI</hz><br> <hr class="style1"> <p0>Kami mengkonfirmasi penerimaan form pemesanan anda melalui email kami, yakni: garistuang@gmail.com</p0> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary next-step">Continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step3"> <hz>PEMBAYARAN UANG MUKA 30%</hz><br> <hr class="style1"> <p0>Pembayaran uang muka 30% dari nilai paketan order pilihan anda dapat ditransfer melalui salah satu nomor rekening di bawah. Konfirmasi penerimaan pembayaran uang muka akan kami kirimkan melalui email & mobile phone</p0> <div class="img"> <img src="http://rumart.weebly.com/files/theme/_2900418.png" alt="Nomor Rekening" width="828" height="168"> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step">Continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step4"> <hz>TERIMA DESIGN 50%</hz><br> <hr class="style1"> <p0>Anda menerima 50% dari pekerjaan sesuai dengan paketan pilihan anda dengan estimasi proses design sekitar seminggu.</p0> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step">Continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step5"> <hz>TRANSFER PELUNASAN</hz><br> <hr class="style1"> <p0>Pelunasan dapat ditransfer melalui salah satu nomor rekening di bawah. Konfirmasi pelunasan akan kami kirimkan melalui email.</p0> <div class="img"> <img src="http://rumart.weebly.com/files/theme/_2900418.png" alt="Nomor Rekening" width="828" height="168"> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step">Continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="complete"> <hz>COMPLETE</hz><br> <hr class="style1"> <p0>Setelah pelunasan terkonfirmasi kami akan kirimkan sisa pekerjaan sesuai dengan paketan pilihan anda dengan estimasi proses design seminggu setelah proses pengiriman design 50%. </p0> </div> <div class="clearfix"></div> </div> </form> </div> </section> </div> </div> <script type="text/javascript"> $(document).ready(function () { //Initialize tooltips $('.nav-tabs > li a[title]').tooltip(); //Wizard $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var $target = $(e.target); if ($target.parent().hasClass('disabled')) { return false; } }); $(".next-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); $active.next().removeClass('disabled'); nextTab($active); }); $(".prev-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); prevTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } function prevTab(elem) { $(elem).prev().find('a[data-toggle="tab"]').click(); } </script> </body> </html>

Related: See More

Paper Kit

Questions / Comments: