<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <section> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <hgroup> <h1 class="free">Descubrilo</h1> </hgroup> <div class="well"> <form action="#"> <div class="input-group"> <input class="btn btn-lg" name="years" id="years" type="email" placeholder="1980" required> <button class="btn btn-info btn-lg" type="submit">ENVIAR</button> </div> </form> </div> </div> </div> </div> </section>

section { padding: 10px 0; text-align: center; } select.frecuency { border: none; font-style: italic; background-color: transparent; cursor: pointer; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform .35s ease-in; transition: -webkit-transform .35s ease-in; border-bottom: none; } select.frecuency:focus { outline: none; border-bottom: 5px solid #39b3d7; -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: -webkit-transform .35s ease-in; transition: -webkit-transform .35s ease-in; } .free { text-transform: uppercase; } .input-group { margin: 2px auto; width: 100%; } input.btn.btn-lg, input.btn.btn-lg:focus { outline: none; width: 60%; height: 50px; border-top-right-radius: 0; border-bottom-right-radius: 0; } button.btn { width: 40%; height: 55px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .promise { color: #999; }