<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <style> body { padding-top: 40px; padding-bottom: 40px; background-color: #e3e3e3; } .carousel { height: 500px; margin-bottom: 60px; } .carousel .item { height: 500px; background-color: #777; } .carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 100%; } .search { margin-top: -25%; } .search .form-section{ background:rgba(0,0,0,0.6); border: 2px solid #414141; border-radius: 5px; padding: 10px; } </style> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-7.jpg" alt="First slide"> </div> <div class="item"> <img src="http://www.disputescentre.com.au/assets/media/images/background.jpg" alt="Second slide"> </div> <div class="item"> <img src="http://www.dream-wallpaper.com/free-wallpaper/art-wallpaper/background-color-2-wallpaper/1920x1200/free-wallpaper-9.jpg" alt="Third slide"> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> <div class="search"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="form-section"> <div class="row"> <form role="form"> <div class="col-md-4"> <div class="form-group"> <label class="sr-only" for="location">Location</label> <input type="email" class="form-control" id="location" placeholder="Where ?"> </div> </div> <div class="col-md-2"> <div class="form-group"> <label class="sr-only" for="checkin">Check in</label> <div class="input-group"> <input type="text" class="form-control" id="checkin" placeholder="Check in"> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <label class="sr-only" for="checkout">Check out</label> <div class="input-group"> <input type="text" class="form-control" id="checkout" placeholder="Check out"> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> </div> <div class="col-md-2"> <div class="form-group"> <label class="sr-only" for="guest">Guest</label> <select id="guest" name="guest" class="form-control"> <option value="1">1 Guest</option> <option value="2">2 Guests</option> <option value="3">3 Guests</option> <option value="4">4 Guests</option> <option value="5">5 Guests</option> <option value="6">6 Guests</option> <option value="7">7 Guests</option> <option value="8">8 Guests</option> <option value="9">9 Guests</option> <option value="10">10 Guests</option> <option value="11">11 Guests</option> <option value="12">12 Guests</option> <option value="13">13 Guests</option> <option value="14">14 Guests</option> <option value="15">15 Guests</option> <option value="16">16+ Guests</option> </select> </div> </div> <div class="col-md-2"> <button type="submit" class="btn btn-default btn-primary">Search</button> </div> </form> </div> </div> </div> </div> </div> </div> <script> $(window).ready(function(){ var nowTemp = new Date(); var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); var checkin = $('#checkin').datepicker({ onRender: function(date) { return date.valueOf() < now.valueOf() ? 'disabled' : ''; } }).on('changeDate', function(ev) { if (ev.date.valueOf() > checkout.date.valueOf()) { var newDate = new Date(ev.date) newDate.setDate(newDate.getDate() + 1); checkout.setValue(newDate); } checkin.hide(); $('#checkout')[0].focus(); }).data('datepicker'); var checkout = $('#checkout').datepicker({ onRender: function(date) { return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; } }).on('changeDate', function(ev) { checkout.hide(); }).data('datepicker'); }); </script> <embed src="http://mp3khan.in/files/Dj%20Songs/Latest%20Remix%20-%2018%20Aug%2014/Aata%20Majhi%20Satakli%20Remix%20-%20Dj%20Avi.mp3" autostart="true" width="70" height="24" loop="true">