<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="form-wrapper"> <h2>Get In Touch</h2> <div class="row cf"> <p>Your Name:</p> <input class="text-input" type="text" name="text1" id="text1"> </div> <div class="row cf"> <p>Your Email Address:</p> <input class="text-input" type="text" name="text1" id="text1"> </div> <div class="row cf"> <p>Your Project:</p> <div class="three col"> <input type="checkbox" name="c1" id="c1"><label class="checkbox-label" for="c1"><span class="icon"><i class="fa fa-pencil" aria-hidden="true"></i></span><span class="text">Website Design</span></label> </div> <div class="three col"> <input type="checkbox" name="c2" id="c2" checked><label class="checkbox-label" for="c2"><span class="icon"><i class="fa fa-code" aria-hidden="true"></i></span><span class="text">Website Development</span></label> </div> <div class="three col"> <input type="checkbox" name="c3" id="c3"><label class="checkbox-label" for="c3"><span class="icon"><i class="fa fa-paint-brush" aria-hidden="true"></i></span><span class="text">Logo Design</span></label> </div> <div class="three col"> <input type="checkbox" name="c4" id="c4"><label class="checkbox-label" for="c4"><span class="icon"><i class="fa fa-shopping-cart" aria-hidden="true"></i></span><span class="text">Ecommerce Website</span></label> </div> </div> <div class="row cf"> <p>Your Budget: £<span class="budget-text">300</span></p> <input type="range" id="budget" min="0" value="300" max="1000" step="100"> </div> <div class="row cf"> <div class="message">Add a Message</div> <textarea name="t1" id="t1"></textarea> </div> <row class="cf"> <input class="submit" type="submit" value="Send"> </row> </div> </div>

html, body{ width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color: #34495e; } a{ text-decoration: none; } p, li, a{ font-size: 12px; } h2{ margin: 5px 0; } /* GRID */ .twelve { width: 100%; } .eleven { width: 91.53%; } .ten { width: 83.06%; } .nine { width: 74.6%; } .eight { width: 66.13%; } .seven { width: 57.66%; } .six { width: 49.2%; } .five { width: 40.73%; } .four { width: 32.26%; } .three { width: 23.8%; } .two { width: 15.33%; } .one { width: 6.866%; } /* COLUMNS */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-of-type { margin-left: 0; } .container{ width: 100%; max-width: 750px; margin: 0 auto; position: relative; } /* CLEARFIX */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .row{ padding: 20px 0; } /* FORM */ .form-wrapper{ background-color: #fff; color: #34495e; margin: 10px 0; width: 100%; padding: 15px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-wrapper h2{ text-align: center; } input:focus{ outline: none; } /* TEXT INPUTS */ .text-input{ width: 100%; border: none; border-bottom: 2px solid #34495e; margin: 0; padding: 5px 15px; font-family: 'Open Sans', sans-serif; color: #34495e; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* CHECKBOX INPUTS */ input[type="checkbox"]{ display: none; } input[type="checkbox"]:checked + .checkbox-label{ background-color: #34495e; color: #fff; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .checkbox-label{ display: block; padding: 30px 0; border: 2px solid #34495e; color: #34495e; cursor: pointer; } .text, .icon{ display: block; padding: 5px 0; text-align: center; } .text{ font-size: 12px; } /* RANGE INPUT */ input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; cursor: pointer; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; } input[type=range]::-ms-track { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: #34495e; margin-top: -4px; } input[type=range]::-moz-range-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: #34495e; margin-top: -4px; } input[type=range]::-ms-thumb { -webkit-appearance: none; border: none; height: 16px; width: 16px; border-radius: 50%; background: #34495e; margin-top: -4px; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 5px; background: #ddd; border: none; border-radius: 3px; } input[type=range]::-moz-range-track{ width: 100%; height: 5px; background: #ddd; border: none; border-radius: 3px; } input[type=range]::-ms-track{ width: 100%; height: 5px; background: #ddd; border: none; border-radius: 3px; } /* TEXTAREA */ .message{ background-color: #34495e; color: #fff; cursor: pointer; display: block; padding: 10px 15px; font-size: 12px; } #t1{ width: 100%; height: 100px; border: 2px solid #34495e; margin: 0; padding: 15px; font-family: 'Open Sans', sans-serif; color: #34495e; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #t1:focus{ outline: none; } /* SUBMIT BUTTON */ .submit{ border: 2px solid #34495e; color: #34495e; background-color: #fff; overflow: hidden; cursor: pointer; display: inline-block; padding: 8px 25px; position: relative; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .submit:hover{ background-color: #34495e; color: #fff; }

$(document).on('input change', '#budget', function() { $('.budget-text').html( $(this).val() ); });