Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




Hiding your face is not a solution!

Publish perfectly-optimized content in 1-click



 
 
 

Cómo crear un formulario de registro con HTML y CSS

 
Como puede ver, el marcado es bastante simple, imagen, algunos textos, cuadros de entrada y botón

 

Paso 1

 

HTML

 
Descargué la imagen de forma gratuita, desde el sitio web Darkmoon_Art de Pixabay
 
Cómo crear un formulario de registro con HTML y CSS
 

<!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!😇

También te puede interesar


Cómo podemos hacer animaciones solo con CSS

Cómo crear un menú horizontal en CSS

Cómo crear un menú con css y javascript

Cómo se redondea el radio del borde en CSS?

Cómo hacer un sitio web responsivo

Cómo crear efecto GLITCH con CSS

Como cambiar el estilo de las barras de desplazamiento

Cómo crear un efecto de enfoque al pasar el mouse usando CSS

Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

Publish perfectly-optimized content in 1-click