Complete Facebook Login Page Using Html5 And Css3 (with Source Code)



SOURCE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title></title>
<style>
*{
text-decoration: none;
}
body {
background-color: #eff2f5;
}
.main {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.outer {
width: 80%;
margin: auto;
height: 500px;
}
.outer #container1 {
margin: 100px;
display: inline-block;
height: 80px;
}
.outer #container1 .image img {
height: 80px;
width: 300px;
}
.outer #container1 h4 {
margin-top: -20px;
margin-left: 55px;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif;
font-size: 30px;
font-weight: 420;
}
.outer #container2 {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 1px 1px 10px rgb(206, 206, 206);
height: 350px;
width: 400px;
border: 2px solid rgb(225, 225, 225);
margin-left: 700px;
margin-top: -250px;
}
.form {
margin-top: 25px;
}

.outer #container2 form input {
box-shadow: 0.2px 0.2px 0.2px;
border: 2px solid rgb(223, 223, 223);
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif;
border-radius: 7px;
padding-left: 15px;
font-size: 16.5px;
color: #90949c;
display: block;
margin: auto;
width: 350px;
height: 40px;
margin-top: 12px;
background-color: #ffffff;
}
.button #login{
border-radius:5px;
color: #ffffff;
background-color: #1977F2;
display: block;
margin: 20px auto;
width: 370px;
height: 50px;
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 630;
font-size: 19px;
cursor: pointer;
}
.forgot{
display: block;
margin: auto;
width: 370px;

}
.forgot a span{
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
color: #1877f2;
width: 80px;
font-size: 14px;
font-weight: 600;
margin-left: 120px;
letter-spacing: 0.4px;
text-decoration: none;
}
#newac{
background-color: #3BAC24;
border-radius: 8px;
border: 2px solid white;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
margin: 15px auto;
width: 200px;
height: 50px;
display: block;
text-align: center;
font-size: 17px;
font-weight: 620;
cursor: pointer;
}
#social{
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
text-align: center;
display: block;
margin: 50px auto;
font-weight: 400;
font-size: 14px;
color: black;
}
#social #part:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="main">
<div class="outer">
<div id="container1">
<div class="image">
<a href="">
<img
src="https://static.xx.fbcdn.net/rsrc.php
/y8/r/dF5SId3UHWd.svg"
alt=""
/>
</a>
<h4>
Facebook helps you connect and share <br />
with the people in your
life.
</h4>
</div>
</div>
<div id="container2">
<div class="form">
<form action="">
<input type="text" placeholder="Email address or
phone number" />
<input type="password" placeholder="Password"/>
</form>
</div>
<div class="button">
<button id="login">Log in</button>
</div>
<div class="forgot">
<a href="https://www.facebook.com/login
/identify/?ctx=recover&ars=facebook_login&from_login_screen=0">
<span>Forgotten password?</span></a>
</div>
<br>
<hr width="91%">
<button id="newac">Create new account</button>
<a href="https://www.facebook.com/pages/create/?ref_type=
registration_form">
<h5 id="social"> <b id="part">Create a Page
</b>&nbsp for a celebrity, brand or business.</h5>
</a>
</div>
</div>
</div>
</div>
</body>
</html>