<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 ----------> <div class="container" style="margin-top:40px"> <div class="row"> <div class="col-sm-6 col-md-4 col-md-offset-4"> <div class="panel panel-default" > <div class="panel-heading"> <strong>Login</strong> </div> <div class="panel-body"> <form role="form" action="#" method="POST"> <fieldset> <div class="row"> <div class="center-block"> <img class="profile-img" src="http://www.neoteo.com/wp-content/uploads/2013/07/C805.JPG" alt=""> </div> </div> <div class="row"> <div class="col-sm-12 col-md-10 col-md-offset-1 "> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> <input color="#983526" class="form-control" placeholder="Nombre de Usuario" name="loginname" type="text" autofocus> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> <input class="form-control" placeholder="Password" name="password" type="password" value=""> </div> </div> <div class="form-group"> <select name="level" class="form-control" required> <option value="">Usuario</option> <option value="1">Administrator</option> <option value="2">Moderador</option> </select> </div> <div id="contact_form" class="row"> <div class="col-12 col-sm-12 col-lg-12"> <font style="background:#ffe8a4" color="red"><p>Contraseña y/o nombre de usuario erróneo</p></font> <div class="center-block"> <img id="captcha" src="http://cloud.exponentgroup.ph/library/vender/securimage/securimage_show.php" alt="CAPTCHA Image" /> </div> <div class="form-group" style="margin-top: 10px;"> <input type="text" class="form-control" name="captcha_code" id="captcha_code" placeholder="Ingresar texto de imagen" /> <span class="help-block" style="display: none;">Please enter the code displayed within the image.</span> </div> <span class="help-block" style="display: none;">Please enter a the security code.</span> </form> </div><!--/span--> </div><!--/row--> <div class="form-group"> <button type="submit" href="#" class="btn btn-lg btn-danger btn-block"><i class="glyphicon glyphicon-log-in"></i>  Ingresar</button> </div> </div> </div> </fieldset> </form> </div> <div class="panel-footer "> Olvidaste tu contraseña? <a href="#" onClick=""> Ingresa aquí </a> </div> </div> </div> </div> </div>

.panel-heading { padding: 5px 15px; } .panel-footer { padding: 1px 15px; color: #A0A0A0; } .profile-img { width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; opacity: 0.4; } .panel-default>.panel-heading { color: #333; background-color: #706D91; border-color: #706D51; } .panel { margin-bottom: 20px; background-color: #706D71; box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; border: 1px solid transparent; border-radius: 4px; } .input-group-addon { padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; background-color: #61996B; border: 1px solid #61996B; border-radius: 4px; } .panel-footer { padding: 1px 15px; color: #100B0B; } .panel-footer { padding: 10px 15px; background-color: #61996B; border-top: 1px solid #61996B; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } body { background-color: #464938; }