<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="slider" id="slider"> <div class="container col-xs-12"> <div class="content"> <div class="search-box"> <div class="row margin_row"> <div class="col-xs-12"> <input type="text" class="search-destiny form-control" placeholder="Destino/Nombre del hotel" /> </div> </div> <div class="row margin_row"> <div class="col-xs-12"> <div class="date_init col-xs-6"> <label for="">Fecha entrada</label> <br /> <input type="text" class="form-control date_init date" id="date_init" /> </div> <div class="date_end col-xs-6"> <label for="">Fecha salida</label> <br /> <input type="text" class="form-control date" id="date_end" /> </div> </div> </div> <div class="row margin_row"> <div class="col-xs-12"> <div class="col-xs-4"> <label for="">Habitaciones</label> <br /> <select name='options' class="form-control width_select habitaciones"> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> </select> </div> <div class="col-xs-4"> <label for="">Adultos</label> <br /> <select name='options' class="form-control width_select"> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> </select> </div> <div class="col-xs-4"> <label for="">Niños</label> <br /> <select name='options' class="form-control width_select"> <option value='0'>0</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> </div> </div> </div> <div class="row button-search"> <button class="btn btn-primary btn-lg btn_search">Buscar</button> </div> </div> </div> </div> <figure> <img src="http://thenewcode.com/assets/images/austin-fireworks.jpg" alt=""> <img src="http://thenewcode.com/assets/images/taj-mahal.jpg" alt=""> <img src="http://thenewcode.com/assets/images/ibiza.jpg" alt=""> <img src="http://thenewcode.com/assets/images/ankor-wat.jpg" alt=""> </figure> </div>

@keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } .container{ position: absolute; width: 50%; z-index: 1; text-align: center; top:0; bottom:0; left:0; right:0; margin: auto; } div#slider { overflow: hidden; height: 670px; } div#slider figure img { width: 20%; float: left; } #slider figure { position: relative; width: 500%; margin: 0 auto; left: 0; text-align: left; font-size: 0; animation: 15s slidy infinite; } .search-box{ text-align: center; } .search-destiny{ width: 100%; } .button-search{ margin-top:20px; margin-bottom:10px; } .margin_row{ margin-top:10px; margin-bottom:10px; } .btn_search{ width: 200px; margin-bottom: 10px; border-radius: 0; } .content{ border-radius: 5px; background-color: rgba(200,200,200, 0.8) } @media (max-width: 600px){ .btn_search{ width:90%; margin-bottom: 0px; border-bottom-left-radius: 5px !important; border-bottom-right-radius: 5px !important; } } @media (max-width: 414px){ .btn_search{ margin-bottom: 0px; border-bottom-left-radius: 5px !important; border-bottom-right-radius: 5px !important; } figure{ display: none; } .container, .slider, content{ width:100%; } }

//cargar librería datepicker $(document).ready(function() { $('.date').datepicker({ format: 'mm-dd-yyyy', language: 'es' }); });