Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"5645465465"
Bootstrap 3.3.0 Snippet by
okebro
3.3.0
Preview
HTML
View Full Screen
Fork
Fork this
1.5K
 
0 Fav
Post to Facebook
Tweet this
<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="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> .com { color: #93a1a1; } .lit { color: #195f91; } .pun, .opn, .clo { color: #93a1a1; } .fun { color: #dc322f; } .str, .atv { color: #D14; } .kwd, .prettyprint .tag { color: #1e347b; } .typ, .atn, .dec, .var { color: teal; } .pln { color: #48484c; } .prettyprint { padding: 8px; background-color: #f7f7f9; border: 1px solid #e1e1e8; } .prettyprint.linenums { -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin: 0 0 0 33px; /* IE indents via margin-left */ } ol.linenums li { padding-left: 12px; color: #bebec5; line-height: 20px; text-shadow: 0 1px 0 #fff; } hz { 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%; } </style> <link href="http://rumart.weebly.com/files/theme/bootstrap9.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> </head> <body> <div class="container"> <section id="wizard"> <div id="rootwizard"> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <ul> <li><a href="#tab1" data-toggle="tab">1</a></li> <li><a href="#tab2" data-toggle="tab">2</a></li> <li><a href="#tab3" data-toggle="tab">3</a></li> <li><a href="#tab4" data-toggle="tab">4</a></li> <li><a href="#tab5" data-toggle="tab">5</a></li> <li><a href="#tab6" data-toggle="tab">6</a></li> </ul> </div> </div> </div> <div id="bar" class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div> </div> <div class="tab-content"> <div class="tab-pane" id="tab1"> <hz>ISI FORM PEMESANAN</hz><br> <hr class="style1"> Pada tahapan ini, anda diwajibkan mengisi form di bawah sebagai dasar kami dalam mendesain. Setelah terisi dengan benar, klik tombol <b>SUBMIT</b> yg berada di bawah form kemudian klik <b>NEXT</b>. <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> </div> <div class="tab-pane" id="tab2"> <hz>TERIMA KONFIRMASI EMAIL DARI KAMI</hz><br> <hr class="style1"> Kami mengkonfirmasi penerimaan form pemesanan anda melalui email kami, yakni: garistuang@gmail.com </div> <div class="tab-pane" id="tab3"> <hz>PEMBAYARAN UANG MUKA 30%</hz><br> <hr class="style1"> 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. <div class="img"> <img src="http://rumart.weebly.com/files/theme/_2900418.png" alt="Nomor Rekening" width="828" height="168"> </div> </div> <div class="tab-pane" id="tab4"> <hz>TERIMA DESIGN 50%</hz><br> <hr class="style1"> Anda menerima 50% dari pekerjaan sesuai dengan paketan pilihan anda dengan estimasi proses design sekitar seminggu. </div> <div class="tab-pane" id="tab5"> <hz>TRANSFER PELUNASAN</hz><br> <hr class="style1"> Pelunasan dapat ditransfer melalui salah satu nomor rekening di bawah. Konfirmasi pelunasan akan kami kirimkan melalui email. <div class="img"> <img src="http://rumart.weebly.com/files/theme/_2900418.png" alt="Nomor Rekening" width="828" height="168"> </div> </div> <div class="tab-pane" id="tab6"> <hz>COMPLETE</hz><br> <hr class="style1"> Setelah pelunasan terkonfirmasi kami akan kirimkan sisa pekerjaan sesuai dengan paketan pilihan anda dengan estimasi proses design seminggu setelah proses pengiriman design 50%. </div> <ul class="pager wizard"> <li class="previous first" style="display:none;"><a href="#">First</a></li> <li class="previous"><a href="#">Previous</a></li> <li class="next last" style="display:none;"><a href="#">Last</a></li> <li class="next"><a href="#">Next</a></li> </ul> </div> </div> </section> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="http://rumart.weebly.com/files/theme/jquery.bootstrap.wizard.js"></script> <script src="http://rumart.weebly.com/files/theme/prettify.js"></script> <script> $(document).ready(function() { $('#rootwizard').bootstrapWizard({onTabClick: function(tab, navigation, index) { alert('on tab click disabled'); return false; window.prettyPrint && prettyPrint() }, onTabShow: function(tab, navigation, index) { var $total = navigation.find('li').length; var $current = index+1; var $percent = ($current/$total) * 100; $('#rootwizard .progress-bar').css({width:$percent+'%'}); }}); }); </script> </body> </html>
Related:
See More
Free Template
Paper Dashboard
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76