Facebook Login page



I have created Facebook login page that a beginner can make projects to understand better




 <!DOCTYPE html>
<html>
<head>
	<title>Fcaebook</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
 <form class="first">

	<table>
		<tbody>
			
			<tr>
				<td id="Email">
					<label for="Email">Email or Phone</label>
				</td>
				<td><label for="Password">Password</label></td>
			</tr>
			<tr> <p style="font-size: 30px;">facebook</p>
				<td><input id="Email" type="Email" name="Email or Phone"></td>
			<td class="Password"> <input id="Password" type="text" name="Password"></td><td id="login"><input type="submit" value="Log in"></td> </tr>
			<tr><td>
			</td>
			<td>Forgotten Password?</td> </tr>
		</tbody>
	</table>
 </form>
</div>
<table>
	<tbody>
		<tr></tr>
	</tbody>
</table>

<div class="left"> <span class="li">Facebook helps you connect and share with the people in your life.</span>

<img class="image" src="https://static.xx.fbcdn.net/rsrc.php/v3/yi/r/OBaVg52wtTZ.png">
</div>
<div class="right">
	<span style="font-size: 36px" 
	>Create an account</span><br><br>
	<span style="font-size: 19px;">It's free and always will be. 
	</span>
	<br>
	<br>
<input class="registrationform" type="text" placeholder="First Name" style="width: 180px;">
<input class="registrationform" type="text" placeholder="Last Name" style="width: 180px;">
<input class="registrationform" type="text" placeholder="Mobile number or email address" style="width: 377px;">
<input class="registrationform" type="text" placeholder="New Password" style="width: 377px;"><br><br>

<span style="color:#1d2129; font-size: 19px;  ">Birthday </span><br>

<select>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	
</select>

<select>
	<option>Jan</option>
	<option>feb</option>
	<option>march</option>
</select>
<select>
	<option>1999</option>
	<option>1998</option>
	<option>1997</option>
</select><br><br>

<span style="color: #1d2129; font-size: 19px;">Gender</span>
<form>
	<input class="Gender" id="Femlae" type="radio" value="Gender">
	<label for="Femlae">Femlae</label>
	<input class="Gender" id="Male" type="radio" value="Gender">
	<label for="Male">Male</label >
	<input class="Gender" id="Custom" type="radio" value="Gender">
	<label for="Custom">Custom</label>
</form>
<div>
	<p>By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.</p>
</div>
<div><button style="background-color: green; color: white; font-size: 19px; padding: 10px;" type="button">Sign Up</button></div>
</div>

</body>
</html>                    
                  
                



 body{
	background-color: #dfe3ee;
	margin: 0;
	padding: 0;

}

.first{

	color: white;
	display: flex;
	justify-content: space-around;
	background-color: #3b5998;
	font-style: normal;
}
.Password >input{
	padding-left: 5px;
}

#login > input{background-color: #3b5998;
color: white;}


.right{
	width: 45%;
	position: absolute;
	top: 16%;
	left: 56%;
}

.left{
	width:55%;
	position: absolute;
	left: 0;
}
.li{
	color: rgb(14,56,95);
	font-size: 20px;
	font-weight: 700;
	width:300px;
	word-spacing: -1;
	display: block;
	position: relative;
	left: 200px
}
.image{
	position: relative;
	left: 200px;
}
.registrationform{
	background-color: white;
	border: 1px solid rgb(189,199,216);
	font-weight:400;
	font-size: 18px;
	outline-color: rgb(77,144,254);
	padding-bottom: 8px; 
	padding-top: 8px;
	padding-left: 10px;
	padding-right: 10px;
	margin: 6px;
}