Login sencillo con estilos bootstrap responsive

Carácteristicas del formulario de acceso (Login)

  • Usa estilos bootstrap
  • Login con presencia limpia, clara y sencilla
  • Es totalmente responsive
  • El código es el justo y necesario, todo está simplificado
  • Su nombre es “ImLogin
  • Demo y descarga de ficheros

    Podéis ver la demo desde el siguiente enlace: Pulsar aquí

    Podéis descargar el login desde el siguiente enlace: Login gratis descargar

    Explicación del código

    Vamos a separar el código en dos partes, por una parte el código HTML y por otra para nuestros estilos.

    Archivo HTML del Formulario de acceso:

    Utilizamos el atributo de HTML “required” para definir los campos Usuario y contraseña como obligatorios.

    <!DOCTYPE html>
    <html >
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>Intra Life</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
     integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css">
      </head>
      <body>
         <div class="container">
            <div class="row text-center login-page">
    	   <div class="col-md-12 login-form">
    	      <form action="claseDestino.php" method="post"> 			
    	         <div class="row">
    		    <div class="col-md-12 login-form-header">
    		       <p class="login-form-font-header">Intra<span>Life</span><p>
    		    </div>
    		</div>
    		<div class="row">
    		   <div class="col-md-12 login-from-row">
    		      <input name="usuario" type="text" placeholder="Usuario" required/>
    		   </div>
    		</div>
    		<div class="row">
    		   <div class="col-md-12 login-from-row">
    		      <input name="password" type="password" placeholder="Contraseña" required/>
    		   </div>
    		</div>
    		<div class="row">
    		   <div class="col-md-12 login-from-row">
    		      <button class="btn btn-info">Entrar</button>
    		   </div>
    		</div>
    	    </form>
    	</div>
         </div>
      </div>
    </body>
    </html>
    Hoja de estilos del Formulario de acceso:

    A parte de los estilos de Bootstrap hemos de añadir algunos estilos personalizados.

    .containerOwnApp {
       box-shadow: 0 0 27px 0 rgba(84, 84, 84, 0.62);
       padding-top: 15px;
    }
     
    .login-page {
      padding: 18% 0 0;
      margin: 0 auto 100px;
      max-width: 360px;
      position: relative;
    }
     
    .login-form {
       box-shadow: 0 0 27px 0 rgba(84, 84, 84, 0.62);
    }
     
    .login-form-header {
       padding-top: 16px;
    }
     
    .login-from-row {
       padding-top: 16px;
       padding-bottom: 16px;
    }
     
    .login-form-font-header {
       font-size:30px; 
       font-weight: bold;
    }
     
    .login-form-font-header span {
       color: #007C9B;
    }

    Iván Martínez

    Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

    Deja un comentario

    Tu dirección de correo electrónico no será publicada.