5 Plantillas que te ayudará con el diseño de tu LOGIN #2, las 2 últimas plantillas tiene la opción para que puedas ocultar o ver la contraseña.
Recuerda que estos proyectos es solo el diseño HTML y CSS.
Debes de crear en una carpeta las hojas index.html y vaidroll.css, en algunos proyectos es necesario una imagen de fondo o un logo.
Opción 6:
Tamaño 1
Tamaño 2
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin6</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="cajafuera" align="center"> <div class="formulariocaja"> <form method="post" action="" name="vaidrollteam"> <img src="user1.png"> <img src="user2.png"> <input type="text" name="txtusuario" placeholder="👤 Usuario" class="cajaentradatexto"> <input type="password" name="txtpassword" placeholder="🔒 Password" class="cajaentradatexto"> <input type="submit" value="Iniciar sesión" class="botonenviar"> <input type="reset" value="Cancelar" class="botonenviar"> <div class="ref1"><a href="#">Registrar</a> / <a href="#">Recuperar contraseña</a></div> </form> </div> </div> </body> <footer>© 2021 Formulario Login. Todos los derechos reservados | Diseño de VaidrollTeam </footer> </html>
vaidroll.css
*
{
font-family: Arial;
color:black;
}
body
{
margin: 0;
padding: 0;
}
.cajafuera
{
width: 100%;
height: 100%;
display: grid;
background-image: radial-gradient(circle at 1.94% 27.59%, #002c57 0, #002b59 10%, #002959 20%, #002759 30%, #002558 40%, #092256 50%, #1e1f53 60%, #2b1b4f 70%, #34174b 80%, #3c1346 90%, #430e40 100%);
}
.formulariocaja
{
background:transparent;
width: 450px;
height: 500PX;
position: relative;
margin: auto;
padding: 1em;
border-radius: 3em;
color:black;
}
.cajaentradatexto
{
width: 80%;
padding: 10px;
font-size:1em;
color:black;
background: white;
margin-bottom: 1.5em;
border-radius:2em;
border:0.1em solid white;
}
input::placeholder
{
color: #1E265D;
font-weight: bold;
}
.ref1
{
margin-top:1em;
color:orange;
}
a
{
text-decoration: none;
cursor:pointer;
color:orange;
}
.botonenviar
{
width: 38%;
padding: 0.8em;
cursor: pointer;
display: inline;
border: 0;
border-radius:2em;
border:1px solid black;
font-size:1em;
color:white;
background: #2E2F39;
text-align:center;
margin:1em 0.5em;
font-weight: bold;
}
img
{
border-radius: 50%;
padding:1em;
width:10em;
height:10em;
margin-bottom:2em;
}
footer
{
clear: both;
position: relative;
margin-top: -10%;
color:white;
text-align:center;
font-size:1em;
}
Opción 7:
Tamaño 1
Tamaño 2
Tamaño 3
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin6</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="cajafuera"> <div class="cajafuera1" align="center"> </div> <div class="cajafuera2" align="center"> <div class="formulariocaja"> <form method="post" action="" name="vaidrollteam"> <img src="user1.png"> <img src="user2.png"> <input type="text" name="txtusuario" placeholder="👤 Ingresar usuario" class="cajaentradatexto"> <input type="password" name="txtpassword" placeholder="🔒 Ingresar password" class="cajaentradatexto"> <input type="submit" value="Iniciar sesión" class="botonenviar"> <div class="ref1"><a href="#">Registrar</a> / <a href="#">Recuperar contraseña</a></div> </form> </div> </div> </div> </body> <footer>© 2021 Formulario Login. Todos los derechos reservados | Diseño de VaidrollTeam </footer> </html>
vaidroll.css
*
{
font-family: Arial;
color:black;
}
body
{
margin: 0;
padding: 0;
}
.cajafuera
{
display: grid;
grid-template-columns: 70% 30%;
background-color: white;
height: 100%;
}
.cajafuera1
{
background-image: url('fondo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
.cajafuera2
{
background: white;
margin:auto;
}
.formulariocaja
{
width: 450px;
height: 500PX;
padding: 1em;
border-radius: 3em;
color:black;
}
.cajaentradatexto
{
width: 80%;
padding: 1em;
font-size:1em;
color:black;
background: white;
margin-bottom: 1.5em;
border-radius:1em;
border:0.1em solid #211A7A;
}
input::placeholder
{
color: #A2A2A2;
}
.ref1
{
margin-top:1em;
color:orange;
}
a
{
text-decoration: none;
cursor:pointer;
color:#2241A9;
}
.botonenviar
{
width: 80%;
padding: 0.8em;
cursor: pointer;
display: inline;
border: 0;
border-radius:1em;
border:0.1em solid black;
font-size:1em;
color:white;
background: #95198A;
text-align:center;
margin:1em 0.5em;
font-weight: bold;
}
img
{
border-radius: 50%;
padding:1em;
width:10em;
height:10em;
margin-bottom:2em;
}
footer
{
clear: both;
position: relative;
margin-top: -2%;
color:black;
text-align:center;
font-size:1em;
font-weight: bold;
}
@media screen and (max-width: 1280px)
{
.cajafuera
{
display: grid;
grid-template-columns: 60% 40%;
background-color: white;
height: 100%;
text-align:center
}
.cajafuera1
{
background-image: url('fondo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left;
}
footer
{
clear: both;
position: relative;
margin-top: -2%;
color:black;
text-align:center;
font-size:1em;
font-weight: bold;
}
@media screen and (max-width: 768px)
{
.cajafuera
{
display: grid;
grid-template-columns: 0 100%;
background-color: white;
height: 80%;
text-align:center
}
footer
{
clear: both;
position: relative;
margin-top: -2%;
color:black;
text-align:center;
font-size:1em;
}
}
@media screen and (max-width: 320px)
{
footer
{
clear: both;
position: relative;
margin-top: -2%;
margin-left: 50%;
color:black;
text-align:center;
font-size:1em;
}
}
Opción 8:
Tamaño 1
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin6</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="cajafuera" align="center"> <div class="formulariocaja"> <form method="post" action="" name="vaidrollteam"> <div class="formtitulo">Iniciar sesión</div> <div class="caja-entrada"> <input type="text" name="txtusuario" placeholder="🔑 Ingresar usuario" class="cajaentradatexto"> <input type="password" name="txtpassword" placeholder="🔒 Ingresar password" class="cajaentradatexto"> <input type="submit" value="Ingresar" class="botonenviar"> </div> <div>¿Necesitas una cuenta? <a href="#">Registrar</a></div> </form> </div> </div> </body> <footer> <img src="logo.png" /> </footer> </html>
vaidroll.css
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
body
{
background: rgb(2,0,36);
background: linear-gradient(120deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 16%, rgba(3,143,210,1) 61%, rgba(17,36,40,1) 100%);
}
.cajafuera
{
width: 100%;
height: 100%;
display: grid;
}
.formulariocaja
{
background-color: rgba(0, 0, 0, .5);
position: relative;
width:40%;
margin: auto;
padding: 1em;
border-radius: 2em;
color:white;
border:0.1em solid black;
}
input
{
text-align: left;
box-sizing: border-box;
}
::placeholder {
color: white;
opacity: 1;
}
.caja-entrada
{
display: grid;
grid-template-columns: 50% 50%;
}
.cajaentradatexto{
padding: 0.6em;
font-size:1em;
border-radius:0.1em;
background:transparent;
color:white;
font-weight: bold;
}
.formtitulo
{
font-size:2em;
font-weight: bold;
padding-bottom:0.8em;
}
a
{
text-decoration: none;
cursor:pointer;
color:orange;
}
.botonenviar
{
grid-column-start: 1;
grid-column-end: 3;
padding: 0.9em;
cursor: pointer;
display: block;
margin-top: 3%;
border: 0;
outline: none;
border-radius:1em;
border:0.1em solid black;
font-size:1em;
color:white;
background-color: #871926;
text-align:center;
margin:5%;
}
img
{
width:5em;
height:5em;
}
footer
{
clear: both;
position: relative;
margin-top: -15%;
text-align:center;
}
Opción 9:
Tamaño 1
Tamaño 2
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin6</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="cajafuera" align="center"> <div class="formulariocaja"> <form method="post" action="" name="vaidrollteam"> <div class="formtitulo">Login</div> <div align="left" class="textoscajas">🔑 Ingresar usuario</div> <input type="text" name="txtusuario" class="cajaentradatexto"> <div align="left" class="textoscajas"> 🔒 Ingresar password </div> <input type="password" name="txtpassword" id="txtpassword" class="cajaentradatexto"> <div class="afcheckbox1" align="left"> <div style="float:left;"> <input type="checkbox" onclick="verpassword()" > </div> <div style="float:left;"> Mostrar contraseña </div> </div> <input type="submit" value="Iniciar sesión" class="botonenviar"> <div style="margin-top:5%;">¿Necesitas una cuenta? <a href="#">Registrar</a></div> </form> </div> <div class="autor"> © 2021 Formulario Login. Todos los derechos reservados | Diseño de VaidrollTeam <div> </div> </body> <script> function verpassword(){ var tipo = document.getElementById("txtpassword"); if(tipo.type == "password") { tipo.type = "text"; } else { tipo.type = "password"; } } </script> </html>
vaidroll.css
*
{
box-sizing: border-box;
font-family: sans-serif;
color:black;
}
body
{
margin: 0;
padding: 0;
background: #f2f2f2;
}
.cajafuera
{
width: 100%;
height: 100%;
display: grid;
background: #f2f2f2;
}
.formulariocaja
{
background-color: #f3f3f3;
width: 400px;
height: auto;
position: relative;
margin: auto;
padding: 1em;
border-radius: 5px;
color:white;
/* border:0.1em solid black; */
}
input
{
display: block;
text-align: left;
box-sizing: border-box;
}
.cajaentradatexto{
width: 80%;
padding: 10px;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
font-weight: bold;
}
.formtitulo
{
font-size:2em;
font-weight: bold;
padding-bottom:0.8em;
color:black;
}
a
{
text-decoration: none;
cursor:pointer;
color:#1A3A83;
font-weight: bold;
}
.afcheckbox1
{
margin-top:5%;
margin-left:10%;
}
.botonenviar
{
width: 80%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin-top: 10px;
border: 0;
outline: none;
border-radius: 10px;
border:1px solid black;
font-size:16px;
color:white;
background-color: #6D26D3;
text-align:center;
margin-top:15%;
font-weight: bold;
}
img
{
width: 150px;
}
.textoscajas
{
margin-left:8%;
font-weight: bold;
margin-top:2%;
margin-bottom:2%;
color:black
}
.autor
{
margin-top:5%;
color:black;
}
Opción 10:
Tamaño 1
Tamaño 2
Código
index.html
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>VaidrollTeamLogin6</title> <link rel="stylesheet" href="vaidroll.css"> </head> <body> <div class="cajafuera" align="center"> <div class="formulariocaja"> <form method="post" action="" name="vaidrollteam"> <div class="formtitulo">Login</div> <div align="left" class="textoscajas">🔑 Ingresar usuario</div> <input type="text" name="txtusuario" class="cajaentradatexto"> <div align="left" class="textoscajas"> 🔒 Ingresar password </div> <input type="password" name="txtpassword" id="txtpassword" class="cajaentradatexto"> <div class="afcheckbox1" align="left"> <div style="float:left;"> <input type="checkbox" onclick="verpassword()" > </div> <div style="float:left; color:white;"> Mostrar contraseña </div> </div> <input type="submit" value="Iniciar sesión" class="botonenviar"> <div style="margin-top:5%; color:white;">¿Necesitas una cuenta? <a href="#">Registrar</a></div> </form> </div> <div class="autor"> © 2021 Formulario Login. Todos los derechos reservados | Diseño de VaidrollTeam <div> </div> </body> <script> function verpassword(){ var tipo = document.getElementById("txtpassword"); if(tipo.type == "password") { tipo.type = "text"; } else { tipo.type = "password"; } } </script> </html>
vaidroll.css
*
{
box-sizing: border-box;
font-family: sans-serif;
color:black;
}
body
{
margin: 0;
padding: 0;
background-image: radial-gradient(circle at 50% -20.71%, #a7deff 0, #6c90d8 50%, #38496b 100%);
}
.cajafuera
{
width: 100%;
height: 100%;
display: grid;
}
.formulariocaja
{
background-color: rgba(0, 0, 0, .5);
width: 400px;
height: auto;
position: relative;
margin: auto;
padding: 1em;
border-radius: 5px;
color:white;
/* border:0.1em solid black; */
}
input
{
display: block;
text-align: left;
box-sizing: border-box;
}
.cajaentradatexto{
width: 80%;
padding: 10px;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
font-weight: bold;
}
.formtitulo
{
font-size:2em;
font-weight: bold;
padding-bottom:0.8em;
color:white;
}
a
{
text-decoration: none;
cursor:pointer;
color:orange;
font-weight: bold;
}
.afcheckbox1
{
margin-top:5%;
margin-left:10%;
}
.botonenviar
{
width: 80%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin-top: 10px;
border: 0;
outline: none;
border-radius: 10px;
border:1px solid black;
font-size:16px;
color:white;
background-color: #4B0D0D;
text-align:center;
margin-top:15%;
font-weight: bold;
}
img
{
width: 150px;
}
.textoscajas
{
margin-left:8%;
font-weight: bold;
margin-top:2%;
margin-bottom:2%;
color:white
}
.autor
{
margin-top:5%;
color:black;
}
Listo.
