Bootstrap snippet: Login

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<html> <head> <title>LogIn</title> <link rel='stylesheet' href='styles/estilos.css'> <link rel="icon" type="image/x-icon" href="img/bdroid.png"> </head> <body> <form class='contacto' action="ingresar.php"method="get"> <p><h1>Ingresa Correctamente Tus Datos!</h1></p> <div><label>Email</label><input type='email' value='' name="email" placeholder='Tú Email@' required></div> <div><label>Password</label><input type='password' value='' name="clave" placeholder='Tú Password' required></div> <div><input type='submit' value='Entrar'> <!-- <hr><p><a href="register.php" target="_blank"><img src="img/registrarme.PNG"><br><br>Registrarme</a> <hr><p><a href="inicio.php" target="_blank"><img src="img/cancelar.PNG"><br><br>Cancelar</a> --> <hr> <br> <p><h1>Deseo Registrarme!</h1></p> <input type='button' value='Registrarme' onClick='location.href= "<?php echo "register.php"?>" ' /> <br> <hr> <br> <p><h1>Cancelar Solicitud!</h1></p> <input type='button' value='Cancelar' onClick='location.href= "<?php echo "inicio.php"?>" ' /> <hr> </div> </form> </body> </html>
*{ font-family: sans-serif; font-size: 12px; color: #000000; } body{ width: 400px; margin: auto; background-color: #0066CC; } .contacto{ border: 1px solid #0066CC; border-radius: 6px; padding: 45px 45px 20px; margin-top: 50px; background-color: white; box-shadow: 0px 5px 10px #CCCCCC, 0 0 0 10px #EEF5F7 inset; } .contacto label{ display: block; font-weight: bold; } .contacto div{ margin-bottom: 15px; } /* start Input text */ .contacto input[type='text'], .contacto textarea{ padding: 7px 6px; width: 294px; border: 1px solid #0066CC; resize: none; box-shadow:0 0 0 3px #EEF5F7; margin: 5px 0; } .contacto input[type='text']:focus, .contacto textarea:focus{ outline: none; box-shadow:0 0 0 3px #000000; } /* end Text*/ /* start password */ .contacto input[type='password'], .contacto password{ padding: 7px 6px; width: 294px; border: 1px solid #0066CC; resize: none; box-shadow:0 0 0 3px #EEF5F7; margin: 5px 0; } .contacto input[type='password']:focus, .contacto password:focus{ outline: none; box-shadow:0 0 0 3px #000000; } /* end password */ /* start email*/ .contacto input[type='email'], .contacto email{ padding: 7px 6px; width: 294px; border: 1px solid #0066CC; resize: none; box-shadow:0 0 0 3px #EEF5F7; margin: 5px 0; } .contacto input[type='email']:focus, .contacto email:focus{ outline: none; box-shadow:0 0 0 3px #000000; } /* button */ .contacto input[type='button']{ border: 1px solid #0066CC; box-shadow:0 0 0 3px #EEF5F7; padding: 8px 16px; border-radius: 5px; font-weight: bold; text-shadow: 1px 1px 0px white; width: 150px; background: #0066CC; background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%); background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%); } .contacto input[type='button']:hover{ background: #edfcff; background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%); background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%); } .contacto input[type='button']:active{ background: #cfe6ef; background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%); background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%); } .contacto input[type='submit']{ border: 1px solid #0066CC; box-shadow:0 0 0 3px #EEF5F7; padding: 8px 16px; border-radius: 5px; font-weight: bold; text-shadow: 1px 1px 0px white; width: 150px; background: #0066CC; background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%); background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%); } .contacto input[type='submit']:hover{ background: #edfcff; background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%); background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%); } .contacto input[type='submit']:active{ background: #cfe6ef; background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%); background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%); }
SystemJG

Login

SystemJG
  Jan 27th, 19:16
80 Views