<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="how-to-create-sign-up-html-css.css">
</head>
<body>
<section>
<div class="container">
<div class="user">
<div class="loginPicture"><img src="how-to-create-sign-up-html-css.jpg" width="450px" height="500px" alt=""></div>
<div class="loginForm">
<form action="#">
<h2>Sign In</h2>
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="Submit" name="" value="Login">
<p class="logIn">Don't have an account ? <a href="#" onclick="toggleForm();"> Sign Up</a></p>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
|
| |
Paso 2 |
|
| |
Hojas de estilo en cascada (CSS) |
| |
|
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
section
{
position: relative;
min-height: 100vh;
background: #E0DEDB;
justify-content: center;
align-items: center;
padding: 20px;
}
section .container
{
position: relative;
width: 800px;
height: 500px;
background: #fff;
box-shadow: 0 15px 50px rgb(0 0 0 / 10%);
overflow: hidden;
left: 200px;
top: 80px;
}
section .container .user
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
}
section .container .user .loginPicture
{
position: relative;
width: 50%;
height: 100%;
background: #fff;
transition: 0.5s ;
}
section .container .user .loginPicture img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section .container .user .loginForm
{
position: relative;
width: 50%;
height: 100%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
transform: 0.5s;
}
section .container .user .loginForm form h2
{
font-size: 18px;
font-weight: 600;
letter-spacing: 2px;
text-align: center;
width: 100%;
margin-bottom: 10px;
color: #555;
}
section .container .user .loginForm form input
{
position: relative;
width: 100%;
padding: 10px;
background: #D7D9DA;
color: #000;
border: none;
outline: none;
box-shadow: none;
margin: 8px 0;
font-size: 14px;
letter-spacing: 1px;
font-weight: 300;
}
section .container .user .loginForm form input[type="submit"]
{
max-width: 100px;
background: #63A284;
color: #fff;
cursor: pointer;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
transition: 0.5s;
}
section .container .user .loginForm form .logIn
{
position: relative;
margin-top: 20px;
font-size: 12px;
letter-spacing: 1px;
font-weight: 300;
}
section .container .user .loginForm form .logIn a
{
font-weight: 600;
text-decoration: none;
color: #63A284;
cursor: pointer;
}
section .container .loginbox
{
pointer-events: none;
}
input
{
color: #fff;
}
|
| Ahora veamos el resultado |
|
Descargar el ejemplo |
|
| ¡Feliz codificación!😇 |
ES 
English - EN 
Français - FR 
