<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 ----------> <div class="container-fluid"> <div class="phone-body"> <div class="phone-area"> <div class="body"> <div class="tab-content"> <div role="tabpanel"> <ul class="nav nav-sections" role="tablist"> <li class="active"><a href="#recentBusinesses" aria-controls="recent" role="tab" data-toggle="tab">Recent</a></li> <li><a href="#nearbyBusinesses" aria-controls="nearbyBusinesses" role="tab" data-toggle="tab">Nearby</a></li> <li><a href="#businessCategories" aria-controls="businessCategories" role="tab" data-toggle="tab">Categories</a></li> <li><a href="#nearbyBusinesses" aria-controls="nearbyBusinesses" role="tab" data-toggle="tab">Nearby</a></li> </ul> </div> <img src="http://vsmart.bobsseo.netdna-cdn.com/wp-content/uploads/services-payperclick-alt-colors-optimized.png" width="250" height="200"> <div class="step-123"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="process"> <div class="process-row"> <div class="process-step"> <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-user fa-3x"></i></button> <p>Identification</p> </div> <div class="process-step"> <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-comments-o fa-3x"></i></button> <p>Livraison</p> </div> <div class="process-step"> <button type="button" class="btn btn-success btn-circle" disabled="disabled"><i class="fa fa-eur fa-3x"></i></button> <p>Confirmation</p> </div> </div> </div> </link> </div> </div> </div> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700); @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700); body { background: #aaa; } .phone-body { width: calc(100% + 20px); height: calc(100% + 20px); } .phone-area { width: 100%; height: 100%; background: #edf0f1; overflow-y: auto; overflow-x: hidden; } .sim-container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .body { font-family: 'Roboto Condensed', 'sans-serif'; background: #edf0f1; width: 100%; } .nav-sections > li { float: left; border-right: 1px solid #95A5A6; text-align: center; font-weight: bold; width: 25%; } .nav-sections > li:last-of-type { border-right-width: 0; } .nav-sections > li > a { padding: 15px; border-bottom: 1px solid #95A5A6; } .nav-sections > li.active > a { border-bottom-width: 5px; padding-bottom: 11px; transition: all .25s; } .nav-sections a { color: #000; } .entry-list { border-spacing: 0 5px; border-collapse: separate; margin: -5px 10px; } .entry-list tr { background: #fff; } .entry-list tr > td:nth-of-type(1) { width: 20%; } .entry-list tr > td > img { width: 90%; margin: 5%; } .entry-list tr > td:nth-of-type(2) { width: 26.6666666%; } .entry-list tr > td > h6 { margin: 5px 0; } .entry-list tr > td:nth-of-type(3) { width: 20%; text-align: right; } .entry-list tr > td > button { margin-right: 10%; float: right; } .category-list { border-spacing: 0 5px; border-collapse: separate; margin: -5px 10px; } .category-list tr { background: #fff; } .category-list tr > td:nth-of-type(1) { width: 20%; } .category-list tr > td > img { width: 90%; margin: 5%; } .category-list tr > td:nth-of-type(2) { width: 60%; padding-left: 10px; } .category-list tr > td:nth-of-type(3) { width: 20%; } .category-list tr > td:nth-of-type(3) > h4 { float: right; padding: 5px 10px; min-height: 25px; border-radius: 25px; font-size: 18; font-weight: 700; line-height: 1; vertical-align: baseline; margin-right: 10px; background: #555; color: #FFF; } img {margin-left: 35%; margin-top: 30px;} .step-123{margin-top: 8%;} .stepwizard-step p { margin-top: 10px; } .process-row { display: table-row; } .process { display: table; width: 100%; position: relative; } .process-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .process-row:before { top: 25px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; } .process-step { display: table-cell; text-align: center; position: relative; } .process-step p { margin-top:10px; } .btn-circle { width: 50px; height: 50px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 5px; } }

$(function() { $('#resize').click(function() { var width = $('#width').val(); var height = $('#height').val(); var style = 'width: ' + width + 'px; height: ' + height + 'px;'; $('.wrapper').attr('style', style); }); });