Free Download Login and Sign Up Template HTML/CSS

login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type = "text/css" href="style.css">
</head>
<body>
	<div id = "container">
	<div id = "login" >
			<a href="login.html" class="button-login">Login</a>
		</div>
			<div id = "signup">
				<a href="signup.html" class="button-signup">Sign Up</a>
			</div>
			<h1>Login</h1>
				<div id = "form-box">
					<form action="#">
					 	<label for="email">Email or Phone</label><br>
					 	<input type="text" class = "fields" name="email" placeholder = "...." required=""><br><br>
					 	<label for="pass">Password</label><br>
					 	<input type="password" class = "fields" name="pass" placeholder = "...." required="">
					 	<a class="forgot-password" href="#">Forgot Password?</a><br><br><br>
					 	<input type="submit" class = "button" value="Login">
					</form>
				</div>

	</div>
    
</body>
</html>
signup.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type = "text/css" href="style.css">
</head>
<body>

	<div id = "container">
		<div id = "login2" >
			<a href="login.html" class="button-login2">Login</a>
		</div>
			<div id = "signup2">
				<a href="signup.html" class="button-signup2">Sign Up</a>
			</div>
			<h1>Sign Up</h1>
				<div id = "form-box">
					<form action="#">
					 	<label for="firstname">First Name</label><br>
					 	<input type="text" class = "fields2" name="firstname" placeholder = "...." required="">
					 	<label class = "label" for="lastname">Last Name:</label><br>
					 	<input type="text" class = "fields2" name="lastname" placeholder = "...." required="">
					 	<label class = "label" for="email">Email or Phone</label><br>
					 	<input type="text" class = "fields2" name="email" placeholder = "...." required="">
					 	<label class = "label" for="pass">Password</label><br>
					 	<input type="password" class = "fields2" name="pass" placeholder = "...." required="">
					 	<p>By clicking submit, you agree to our <a href = "#">Terms of Service</a> and <a href = "#">Privacy Policy</a></p>
					 	<input type="submit" class = "button2" value="Sign Up">
					</form>
				</div>

	</div>
    
</body>
</html>
style.css
body{
	background-color: gold;
	background-image: linear-gradient( 110.6deg,  rgba(179,157,219,1) 7%, rgba(150,159,222,1) 47.7%, rgba(24,255,255,1) 100.6% );
	text-align: center;
}


#container{
	position: absolute;
    background-color: #fcfcf7;
    text-align: center;
    width: 500px;
    height: 550px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 10px;
}

#login{
	float: left;
	width: 38%;
	background-color: #00a6a0;
	padding: 20px;
	margin: 20px 0px 20px 20px;

}

#signup{
	float: right;
	width: 38%;
	background-color: #3b3b38;
	padding: 20px;
	list-style: none;
	margin: 20px 20px 20px 0px;
}

.button-login,
.button-signup{
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-size: 17px;
}
	
.button-signup:hover{
	color: #02e3db;
}

.button-login:hover{
	color: #3b3b38;
}



#form-box{
	height: 250px;
}

#form-box label{
	float: left;
	margin-left: 17px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight: bold;
}

.fields{
	width: 89%;
	padding: 10px;
	border: 1px solid #3b3b38;
}

.forgot-password{
	float: left;
	margin-left: 17px;
	text-decoration: none;
	color:#008587;
	margin-top: 5px;
	font-weight: bold;

}

.button{
	width: 300px;
	margin-top: 20px;
	padding: 10px;
	border: 1px solid #3b3b38;
	cursor: pointer;
	font-weight: bold;
	background-image: linear-gradient( 110.6deg,  rgba(179,157,219,1) 7%, rgba(150,159,222,1) 47.7%, rgba(24,255,255,1) 100.6% );

}

.button:hover{
	color: white;
}


/*sign up style*/

#login2{
	float: left;
	width: 38%;
	background-color: #3b3b38;
	padding: 20px;
	margin: 20px 0px 20px 20px;

}

#signup2{
	float: right;
	width: 38%;
	background-color: #00a6a0;
	padding: 20px;
	list-style: none;
	margin: 20px 20px 20px 0px;
}

.button-login2,
.button-signup2{
	color: white;
	text-decoration: none;
	font-weight: bold;
	font-size: 17px;
}

.button-signup2:hover{
	color: #3b3b38;
}

.button-login2:hover{
	color: #02e3db;
}

.fields2{
	width: 89%;
	padding: 10px;
	border: 1px solid #3b3b38;
}

.button2{
	width: 300px;
	padding: 10px;
	border: 1px solid #3b3b38;
	cursor: pointer;
	font-weight: bold;
	background-image: linear-gradient( 110.6deg,  rgba(179,157,219,1) 7%, rgba(150,159,222,1) 47.7%, rgba(24,255,255,1) 100.6% );
}

.button2:hover{
	color: white;
}


.label{
	margin-top: 10px;
}
Download Source Code:

Leave a Comment

Your email address will not be published. Required fields are marked *