How to create sign up form with HTML and CSS

ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY

Publish perfectly-optimized content in 1-click




How to create sign up form with HTML and CSS

As you can see the markup is quite simple, image ,some texts, input boxes and button


Step 1

HTML

I downloaded the image for free, from the website Darkmoon_Art of Pixabay

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

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


Step 2


Cascading Style Sheets (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;
	}

   *{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: sans-serif;
	}
</br>
	section
	{
		position: relative;
		min-height: 100vh;
		background: #E0DEDB;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}
</br>
	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;
</br>
	}
</br>
</br>
	section .container .user
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
	}
</br>
	section .container .user .loginPicture
	{
		position: relative;
		width: 50%;
		height: 100%;
		background: #fff;
		transition: 0.5s ;
	}
</br>
	section .container .user .loginPicture img 
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</br>
	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;
	}
</br>
	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;
	}
</br>
	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;   
	}
</br>
	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;
</br>
	}
</br>
	section .container .user .loginForm form .logIn
	{
		position: relative;
		margin-top: 20px;
		font-size: 12px;
		letter-spacing: 1px;
		font-weight: 300;
	}
</br>
	section .container .user .loginForm form .logIn a 
	{
		font-weight: 600;
		text-decoration: none;
		color: #63A284;
		cursor: pointer;
</br>
	}
</br>
	section .container .loginbox
	{
		pointer-events: none;
	}
</br>
	input
	{
		color: #fff;
	}