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!

    Un comentario en «Login sencillo con estilos bootstrap responsive»

    Deja una respuesta

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