<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"> <div class="jumbotron"> <div class="row"> <div class="span4"> <div class="span2"> <a href="pagina2.html" class="btn btn-info btn-lg"> <span class="glyphicon glyphicon-circle-arrow-right"> </span> Siguiente</a> </div> <h1><p>Formulario</p></h1> 1.- ¿Quién descubrio América? <form role="form"> <div class="radio"> <label> <input type="radio" name="preg1" id="opciones_1" value="opcion_1" checked> Cristóbal Colón </label> <div class="radio"> <label> <input type="radio" name="preg1" id="opciones_2" value="opcion_2"> Francisco Villa </label> <div class="radio"> <label> <input type="radio" name="preg1" id="opciones_3" value="opcion_3"> Peña Nieto </label> </div> <br> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:5%"> </div>

body { background: url('http://farm3.staticflickr.com/2832/12303719364_c25cecdc28_b.jpg') fixed; background-size: cover; padding: 0; margin: 0; } .wrap { width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 99; } p.form-title { font-family: 'Open Sans' , sans-serif; font-size: 20px; font-weight: 600; text-align: center; color: #FFFFFF; margin-top: 5%; text-transform: uppercase; letter-spacing: 4px; } form { width: 250px; margin: 0 auto; } form.login input[type="text"], form.login input[type="password"] { width: 100%; margin: 0; padding: 5px 10px; background: 0; border: 0; border-bottom: 1px solid #FFFFFF; outline: 0; font-style: italic; font-size: 12px; font-weight: 400; letter-spacing: 1px; margin-bottom: 5px; color: #FFFFFF; outline: 0; } form.login input[type="submit"] { width: 100%; font-size: 14px; text-transform: uppercase; font-weight: 500; margin-top: 16px; outline: 0; cursor: pointer; letter-spacing: 1px; } form.login input[type="submit"]:hover { transition: background-color 0.5s ease; } form.login .remember-forgot { float: left; width: 100%; margin: 10px 0 0 0; } form.login .forgot-pass-content { min-height: 20px; margin-top: 10px; margin-bottom: 10px; } form.login label, form.login a { font-size: 12px; font-weight: 400; color: #FFFFFF; } form.login a { transition: color 0.5s ease; } form.login a:hover { color: #2ecc71; } .pr-wrap { width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 999; display: none; } .show-pass-reset { display: block !important; } .pass-reset { margin: 0 auto; width: 250px; position: relative; margin-top: 22%; z-index: 999; background: #FFFFFF; padding: 20px 15px; } .pass-reset label { font-size: 12px; font-weight: 400; margin-bottom: 15px; } .pass-reset input[type="email"] { width: 100%; margin: 5px 0 0 0; padding: 5px 10px; background: 0; border: 0; border-bottom: 1px solid #000000; outline: 0; font-style: italic; font-size: 12px; font-weight: 400; letter-spacing: 1px; margin-bottom: 5px; color: #000000; outline: 0; } .pass-reset input[type="submit"] { width: 100%; border: 0; font-size: 14px; text-transform: uppercase; font-weight: 500; margin-top: 10px; outline: 0; cursor: pointer; letter-spacing: 1px; } .pass-reset input[type="submit"]:hover { transition: background-color 0.5s ease; } .posted-by { position: absolute; bottom: 26px; margin: 0 auto; color: #FFF; background-color: rgba(0, 0, 0, 0.66); padding: 10px; left: 45%; }