7+ CSS Facebook Login Page Examples

This post contains a total of 7+ Hand-Picked CSS Facebook Login Page Examples with Source Code. All these Facebook Login Pages are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Facebook Login Page Examples

1. By Jenis Rai

Made by Jenis Rai. Simple CSS Facebook Login Clone. Source

css facebook login page by jenis rai
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*{
  padding:0;
  margin:0;
  box-sizing:border-box;
  font-family:Helvetica, Arial, sans-serif;
}
main{
  background-color:#f0f2f5;
  height:536px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.container{
  width:70%;
  display:flex;
  align-items:center;
}
.left{
  width:55%;
  padding-right:6em;
}
.left h1{
  color:#1877f2;
  font-size:60px;
}
.left p{
  font-size: 28px;
    font-weight: normal;
    line-height: 32px;
}
.right{
  width:45%;
}
.right .form{
  background-color:white;
 padding:10px 20px;
  border-radius:6px;
  text-align:center;
}
.form .input input{
  width:100%;
    padding:16px;
  margin:7px 0;
  border-radius:5px;
  outline:none;
  border: .5px solid #eee
}
.form .login input{
  font-size:1.2em;
  font-weight:600;
   padding:13px 13px;
  color:#fff;
  background-color:#1877f2;
}
.form .create input{
   width:60%;
    padding:13px 13px;
  font-weight:800;
  text-transform:capitalize;
  font-size:.95em;
  color:#fff;
  background-color: #42b72a;
}
.input a{
  text-decoration:none;
  font-size:.9em;
  font-weight:100;  
}
.input.forget{
  margin: 6px 0 17px 0;
}
.input.hr{
  height:1px;
  border-top:.5px solid #ccc;
  margin-bottom:17px;
}
.form-footer{
  width:90%;
  text-align:center;
  margin:30px 0;
}
.form-footer a{
  text-decoration:none;
  font-weight:600;
  font-size:.9em;
    color:#000;
}
.form-footer p{
  font-size:.9em;
}
@media (max-width: 767.98px) { 
  .container{
    flex-direction:column;
  }
  .container .left{
    width:100%;
  }
  .container .right{
    width:100%;
  }
}
</style>
</head>
<body>
  <html>
  <main>
    <div class="container">
      <div class="left">
        <h1>facebook</h1>
        <p>Facebook helps you connect and share with the people in your life.</p>
      </div>
      <div class="right">
        <form class=form action="#" method="POST">
          <div class="input">
            <input type="text" name=email placeholder="Email address or phone number">
          </div>
          <div class="input">
            <input type="password" name="password" placeholder="Password">
          </div>
          <div class="input login">
            <input type="button" value="Log In">
          </div>
          <div class="input forget">
            <a href="#">Forgotten account?</a>
          </div>
          <div class="input hr"></div>
          <div class="input create">
            <input type="button" value="Create a new account">
          </div>
        </form>
        <div class="form-footer"><a href="#">Create a Page </a>for celebrity, brand or business.</div>
      </div>
    </div>
  </main>
</body>
</html>

2. By Abby Larson

Made by Abby Larson. Facebook Signup page made using CSS. Source

css facebook login page by abby larson
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css'>
<style>
.navbar-inverse{
  background-color:#3a5795;
    background-image:none;
}
.navbar-inverse .navbar-brand{
  color:white;
}
</style>
</head>
<body>
  <nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Facebook</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success">Sign in</button>
      </form>
    </div>
    <!--/.navbar-collapse -->
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>Connect with friends and the world around you on Facebook.</p>
    </div>
    <div class="col-md-6">
      <h1>Sign Up.</h1>
      <p>It's free and always will be</p>
      <form>
        <div class="row">
          <div class="form-group col-md-6">
            <label class="sr-only" for="exampleInputEmail1">First Name</label>
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="First Name">
          </div>
          <div class="form-group col-md-6">
            <label class="sr-only" for="exampleInputEmail1">Last Name</label>
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Last Name">
          </div>
        </div>
        <div class="form-group">
          <label class="sr-only" for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label class="sr-only" for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Re-enter email">
        </div>
        <div class="form-group">
          <label class="sr-only" for="exampleInputEmail1">New Password</label>
          <input type="password" class="form-control" id="exampleInputEmail1" placeholder="New Password">
        </div>
        <div class="form-inline">
          <div class="form-group">
            <label for="birthMonth" class="sr-only">Birth Month</label>
            <select id="birthMonth">
              <option>Month</option>
              <option>Jan</option>
            </select>

          </div>
          <div class="form-group">
            <label for="birthDay" class="sr-only">Birth Day</label>
            <select id="birthDay">
              <option>Day</option>
              <option>01</option>
            </select>
          </div>
          <div class="form-group">
            <label for="year" class="sr-only">Year</label>
            <select id="Year">
              <option>Year</option>
              <option>2015</option>
            </select>
          </div>
        </div>
        <br />
        <div class="form-group">
          <button type="button"class="btn btn-success">Sign Up</button>
        </div>
      </form>
    </div>
  </div>
</div>
  <script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>

3. By HARUN PEHLฤฐVAN

Made by HARUN PEHLฤฐVAN. Facebook Signup page with Signin Header. Source

css facebook login page by harun pehlivan
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
}

:root {
    --bgColor: #e9ebee;
    --navBg: #3b5998;
    --colorWhite: #fff;
    --colorBlack: #000;
}

body {
    font-family: sans-serif;
    font-weight: 400;
    background: var(--bgColor);
}

nav#nav {
    width: 100%;
    height: 70px;
    background: var(--navBg);
    line-height: 70px;
    padding: 0 180px;
    display: flex;

}

.left-ul li {
    list-style: none;
}

.left-ul li a {
    color: var(--colorWhite);
    font-size: 30px;
    text-decoration: none;
    font-weight: bold;
}

.right-ul {
    display: flex;
}

.right-ul li {
    list-style: none;
}

.empty {
    margin: 0 auto;
}

.nav-control {
    height: 33px;
    padding: 0 10px;
    border-radius: 3px;
    border:0px;
    margin-right: 10px;
}

.nav-btn {
    display: inline-block;
    height: 33px;
    padding: 0 10px;
    border-radius: 3px;
    background: var(--colorWhite);
    color: var(--colorBlack);
    border: 0px;
}

.container {
    display: flex;
    padding: 48px 180px;
}

.left-section, .right-section {
    width: 50%;
}

.right-section {
    padding-left: 20px;
}

.left-heading {
    font-size: 20px;
    font-weight: normal;
    line-height: 35px;
}

.image {
    margin-top: 15px;
    overflow: hidden;
}

.image img {
    width: 100%;
    height: 100%;
}

.form-heading {
    font-size: 30px;
    color: #333;
}

.text {
    margin: 10px 0;
    font-weight: normal;
    font-size: 17px;
}

#formSection {
    width: 100%;

}

.form-group {
    margin-bottom: 15px;
}

.control {
    padding: 8px 10px;
    font-size: 18px;
    border-radius: 4px;
    border:1px solid #bdc7d8 ;
    width: 100%;
}

.half {
    width: 48%;
}

.half:nth-child(2){
    margin-left: 2%;
}

.birth {
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 7px;
}

select {
    padding: 5px 10px;
}

#male {
    margin-left: 6px;
}

.someText {
    font-size: 13px;
    width: 80%;
    color: #777;
}

.btn {
    font-size: 19px;
    font-weight: bold;
    min-width: 194px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    margin: 10px 0px;
    padding: 10px 20px;
    background: linear-gradient(#67ae55,#578843);
    border: 0;
    color: var(--colorWhite);
}

@media(max-width: 765px){
    nav#nav {
        flex-direction: column;
        height: auto;
        padding: 0 50px;
    }

    .container {
        flex-direction: column;
        padding: 30px 50px;
    }

    .left-section, .right-section {
        width: 100%;
    }
}
</style>
</head>
<body>
    <nav id="nav">
     <ul class="left-ul">
         <li><a href="">Facebook</a></li>
     </ul>
     <div class="empty"></div>
     <ul class="right-ul">
         <li>
             <input type="email" class="nav-control" placeholder="Enter email...">
         </li>
         <li>
            <input type="password" class="nav-control" placeholder="Enter password...">
        </li>
        <li>
            <input type="submit" class="nav-btn" value="Login">
        </li>
     </ul>
    </nav>
    <!-- Close nav -->

    <div class="container">
        <div class="left-section">
         <div class="left-heading">
             <h3>Facebook helps you connect and share with the people in your life.</h3>
             <div class="image">
                 <img src="bg.png" alt="">
             </div>
         </div>
        </div>
        <div class="right-section">
          <h1 class="form-heading">
            Create an account
          </h1>
          <p class="text">It's free and always will be.</p>
          <form action="" id="formSection">
              <div class="form-group">
                  <input type="text" class="control half" placeholder="First Name">
                  <input type="text" class="control half" placeholder="Last Name">
              </div>
              <div class="form-group">
                  <input type="text" class="control" placeholder="Mobile number or Email">
              </div>
              <div class="form-group">
                  <input type="password" class="control" placeholder="New Password">
              </div>
              <div class="form-group">
                  <p class="birth">Birthday</p>
                  <select  id="">
                      <option value="">1</option>
                      <option value="">2</option>
                      <option value="">3</option>
                      <option value="">4</option>
                  </select>
                  <select  id="">
                    <option value="">Jan</option>
                    <option value="">Be</option>
                    <option value="">Mar</option>
                    <option value="">Apr</option>
                </select>
                <select  id="">
                    <option value="">2015</option>
                    <option value="">2016</option>
                    <option value="">2017</option>
                    <option value="">2018</option>
                </select>
              </div>
              <div class="form-group">
                  <input type="radio" name="" id=""> <b>Female</b>
                  <input type="radio" name="" id="male"> <b>Male</b>
              </div>
              <div class="form-group">
                  <p class="someText">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 class="form-group">
                  <button class="btn">Sign Up</button>
              </div>
              
          </form>
        </div>
    </div>
</body>
</html>

4. By khirdinah

Made by khirdinah. CSS Facebook login page with Hover Effect. Source

css facebook login page by khirdinah
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<style>
* {
    font-family: sans-serif;
    text-transform: capitalize;
}

body {
    background-color: #f0f2f5;
}

.login-fb {
    width: 80%;
    margin-left: 10%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

.login-fb .info {
    margin-top: 65px;
    margin-left: 34px;
}

.login-fb .info .image {
    width: 244px;
    margin-bottom: -14px;
    margin-left: -27px;
}

.login-fb .info .image img {
    width: 88%;
}

.login-fb .info h2 {
    color: black;
    font-weight: 100;
    margin: 8px 0 -12px;
    font-size: 28px;
}

.login-fb .info p {
    font-size: 15px;
    margin-top: 21px;
}

.login-fb .contes {
    display: flex;
    margin-top: 30px;
}

.login-fb .info .contes .image-profile {
    width: 161px;
    height: 194px;
    position: relative;
    border: 1px solid #9e9e9e3b;
    border-radius: 10px;
}

.login-fb .info .contes .image-profile:hover,
.login-fb .info .contes .image-creer:hover {
    box-shadow: 0px 0px 8px #ccc;
    transform: scale(1.04);
    cursor: pointer;
}

.login-fb .info .contes .image-profile::after {
    content: "khirdin";
    position: absolute;
    background-color: white;
    bottom: 0px;
    left: 0;
    width: 85%;
    padding: 12px;
    text-align: center;
    border-radius: 0 0 10px 10px;
}

.login-fb .info .contes .image-profile img {
    border-radius: 10px 10px 0 0;
    width: 100%;
}

.login-fb .info .contes .image-profile .close {
    position: absolute;
    top: 7px;
    left: 7px;
    color: white;
    background: grey;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-fb .info .contes .image-profile:hover .close {
    color: grey;
    background-color: white;
    transform: scale(1.2);
}

.login-fb .info .contes .image-creer {
    width: 161px;
    height: 248px;
    background: #f5f6f7;
    border: 1px solid #9e9e9e3b;
    margin-left: 50px;
    border-radius: 10px;
    position: relative;
}

.login-fb .info .contes .image-creer::after {
    content: "ajouter un compte";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    background-color: white;
    padding: 12px 30px;
    box-sizing: border-box;
    border-radius: 0 0 10px 10px;
    height: 60px;
    display: flex;
    align-items: center;
    color: #1976f2;
    text-align: center;
    font-size: 19px;
}

.login-fb .info .contes .image-creer .plus {
    position: absolute;
    top: 28%;
    left: 36%;
    background-color: #1976f2;
    font-size: xx-large;
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/******************* form ****************/

form {
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center;*/
    width: 377px;
    height: fit-content;
    position: relative;
    top: 114px;
    right: -122px;
    border-radius: 14px;
    padding: 10px;
}

form input {
    width: 86%;
    padding: 16px;
    border-radius: 6px;
    outline: none;
    border: 1px solid #ccc;
    margin-top: 13px;
}

form input::placeholder {
    font-size: 17px;
    color: rgb(167, 167, 167);
    font-weight: 300;
}

form input:focus:not(form input[type="submit"]) {
    border: 1px solid #1473ef;
    box-shadow: 0px 0px 2px #1473ef;
}

.valid input[type="email"],
.valid input[type="email"]:focus {
    border: 1px solid #17ce17;
}

form input[type="email"]+.text {
    display: none;
    font-size: 17px;
    width: 93%;
    height: 27px;
    margin-bottom: 0;
}

.error input[type="email"]+.text {
    color: red;
    display: block;
}

.valid input[type="email"]+.text {
    color: #17ce17;
    display: block;
}

form input[type="password"] {}

form input[type="submit"] {
    background: #1473ef;
    width: 95%;
    color: white;
    font-size: 23px;
    font-weight: bold;
    height: 51px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

form input[type="submit"]:hover {
    background-color: #116ee8;
    cursor: pointer;
}

form a {
    margin-top: 20px;
    text-decoration: none;
    color: #1b4cfd;
}

form a:hover {
    text-decoration: underline;
}

form .new {
    margin-top: 18px;
    padding-top: 7px;
    border-top: 1px solid #ccc;
    width: 100%;
}

form .new p {
    background: #42b72a;
    color: white;
    padding: 17px 20px;
    border-radius: 7px;
    width: fit-content;
    margin: 14px auto;
}

form .new p:hover {
    background-color: #35a51e;
    cursor: pointer;
}
</style>
</head>
<body>
  <div class="login-fb">
        <div class="info">
            <div class="image">
                <img src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg" alt="">
            </div>
            <h2>connexions recentes</h2>
            <p>click sur votre image ou sur ajouter un compte</p>
            <div class="contes">
                <div class="image-profile">
                    <img src="https://scontent.ffez1-1.fna.fbcdn.net/v/t1.30497-1/c47.0.160.160a/p160x160/84241059_189132118950875_4138507100605120512_n.jpg?_nc_cat=1&ccb=1-5&_nc_sid=dbb9e7&_nc_ohc=9gXgNTXdZZsAX99JhHB&_nc_ht=scontent.ffez1-1.fna&oh=b54ba84b5911a285ab78013caaf326bd&oe=61553FA4"
                        alt="">
                    <i class="close fas fa-times"></i> </div>
                <div class="image-creer">
                    <i class=" plus fas fa-plus"></i>
                </div>
            </div>
        </div>

        <form action="#">
            <input class="email" type="email" placeholder="Email or phone number" required>
            <p class="text"></p>
            <input class="password" type="password" placeholder="Password" required>
            <input class="subm" type="submit" value="Log in">
            <a href="" class="forgot">forgotten password?</a>
            <div class="new">
                <p>create new account</p>
            </div>
        </form>
    </div>
</body>
</html>

5. By Thulasi

Made by Thulasi. Facebook Sign Up Replica. Source

css facebook login page by thulasi
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
	margin: 0;
	padding: 0;
	font-family: "Helvetica", sans-serif;  
}

a {
	text-decoration: none;
	color: #9CABC5;
}

a:hover {
	text-decoration: underline;
}

.header {
	background-color: #3B5998;
  color: #FFF;
	width: 100%;
	height: 90px;
  margin: 0;
	font-size: 12px;  
  display: flex;
}

.header button {
	background-color: #3C66C4;
	border: none; 
  color: #FFF;
  font-weight: bold;
  cursor: pointer;
}

.header button:hover {
  background-color: #3B5998;
}

#logo {
  font-size: 40px;
  font-weight: bold;
  margin-left: 180px;
  width: 450px;
  text-shadow: 0.5px 0.5px rgba(255,255,255, 0.9);  
  text-transform: lowercase;
  line-height: 10vh;
}

.login {
  margin-left: 110px;
  margin-top: 20px;
}

.header input {
	height: 20px;
}

td {
  padding-left: 10px;
}

hr {
	border: 0;
	height: 1px;
  background: rgba(0, 0, 0, 0.1);	
}

.main {
	background-color: #edf0f5;
	color: #333;
	width: 100%;
	height: 590px;
	font-size: 12px;
	font-family: 'Open Sans', sans-serif;
	display: flex;  
}

.main .inputName {
  width: 200px;
  height: 30px;
  border: 1px solid #bdc7d8;
  border-radius: 4px;
  font-size: 15px;
  margin-bottom: 10px;
  padding-left: 5px;
}

.main a {
  color: #3658A5;
}

.main-left {
  width: 45%;
  margin-top: 40px;
  margin-left: 150px;
}

.left-h1 {
  width: 70%;
  line-height: 150%; 
  font-size: 28px;
  padding-left: 20px;
  padding-bottom: 30px;
}

.left-details {
  display: flex;
  margin: 20px;    
}

.left-img {
  font-size: 30px;
  color: #ADBAD4;  
}

.left-info {  
  padding-top: 18px;
  padding-left: 20px;
  font-size: 15px;  
}

.left-info span {
  margin-left: 5px;
  font-size: 14px;
  opacity: 0.9
}

.main-right h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 40px;
  font-weight: 900;
}

.main-right .free {
  margin-top: -20px;
}

.form input[type="text"] {  
  height: 39px;
  font-size: 18px;
  padding-left: 10px;
}

.form-long input[type="text"] {
  width: 410px;
}

.smallFont {
  font-size: 18px;
}

.terms {
  font-size: 11px;
  width: 330px;
}

input[type="radio"] {
  margin-top: 17px;
}

.select-birthday select {
  font-size: 14px;
  margin-top: 8px;
  height: 30px;
  width: 55px;
}

.main button {
  background-color:#69A74E;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 30px;
  border: none; 
  border-radius: 4px;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  color: #FFF;
  cursor: pointer;
  text-shadow: 1px 1px rgba(0,0,0,0.4);
}

.main .lastPara {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.8;
}

.footer {
  font-size: 12px;
  padding-left: 140px;
  padding-right: 170px;
}

.footer a {
  color: #3658A5;
}

.footer ul li {
  font-size: 12px;
  display: inline;
  padding-right: 10px;
}

.footer hr {
  margin-left: 40px;
}

.footer table {
  padding-left: 30px;
}

.footer td {
  padding-right: 10px;
}

.footer p {
  font-size: 10px;
  margin-top: 20px;
  padding-left: 40px;
  opacity: 0.7;
}
</style>
</head>
<body>
  <div class="header">
     <h1  id="logo" class="title">facebook</h1>
     <div class="login">
         <table>
           <tr>
             <td><label>Email or Phone</label>            </td>
             <td><label>Password</label></td>
           </tr>
           <tr>
             <td><input type="text" name="email"></td>
             <td><input type="password" name="password"></td>
             <td><button>Log In</button>  </td>
           </tr>
           <tr>
             <td></td>
             <td><a href="#">Forgot account?</a></td>
             <td></td>
           </tr>
         </table>    
     </div>
  </div>
  <div class="main">
	  <div class="main-left">
        <h1 class="left-h1"><strong>Text</strong></h1>
        <div class="left-details">
          <div class="left-img"><i class="fa fa-newspaper-o fa-2x" aria-hidden="true"></i></div>
          <div class="left-info"><strong>See photos and updates</strong><span>  from friends in News Feed.</span></div>
        </div>
        <div class="left-details">
          <div class="left-img"><i class="fa fa-newspaper-o fa-2x" aria-hidden="true"></i></i></div>
          <div class="left-info"><strong>Share what's new</strong><span>  in your life on your Timeline.</span></div>
        </div>
        <div class="left-details">
          <div class="left-img"><i class="fa fa-newspaper-o fa-2x" aria-hidden="true"></i></i></div>
          <div class="left-info"><strong>Find more </strong><span>  of what you're looking for with Facebook Search.                     </span>
          </div>
        </div>
	   </div>
	   <div class="main-right">
         <h1>Sign Up</h1>
         <p class="smallFont free">Itโ€™s free and always will be.</p>                      
         <form>
           <div class="form">
             <input class="inputName" type="text" name="firstname" placeholder="First name">		
             <input class="inputName" type="text" name="lastname" placeholder="Last name">
           </div>
           <div class="form form-long">
             <input class="inputName" type="text" name="email" placeholder="Mobile number or email"></td>
           </div>
           <div class="form form-long">           
              <input class="inputName" type="text" name="password" placeholder="New password">
           </div>
         </form>
         
         <div class="smallFont">
		         <label>Birthday</label>
             <div class="select-birthday">
             <select>
              <option>Oct</option>
             </select>
             <select>
              <option>15</option>
             </select>
             <select>
              <option>1999</option>
             </select>
		         <a href="#" class="terms">Why do I need to provide my birthday?</a>
             </div>
              <div>
		            <input type="radio" name="female"> Female
		            <input type="radio" name="male"> Male
              </div>
		          <p class="terms">
                Text
		          </p>
		          <button>Create Account</button>
		          <hr>
              <p class="lastPara"><a href="">Create a Page</a> for a celebrity, band or business.</p>
          </div>
	     </div>
</div>
<div class="footer">
      <ul>
        <li><a href="#">English (US)</a></li>
        <li><a href="#">Espaรฑol</a></li>
        <li><a href="#">Franรงais (France)</a></li>
        <li><a href="#">ไธญๆ–‡(็ฎ€ไฝ“)</a></li>
        <li><a href="#">ุงู„ุนุฑุจูŠุฉ</a></li>
        <li><a href="#">Portuguรชs(Brasil)</a></li>
        <li><a href="#">Italiano</a></li>
        <li><a href="#">English (US)</a></li>
        <li><a href="#">Espaรฑol</a></li>
        <li><a href="#">Franรงais (France)</a></li>
        <li><i class="fa fa-plus-square-o fa-lg" aria-hidden="true"></i></li>
      </ul>
      <hr>
      <div>
      <table>
        <tr>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>
          <td><a href="#">Messenger</a></td>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>
          <td><a href="#">Messenger</a></td>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>
          <td><a href="#">Messenger</a></td>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>        
        </tr>
         <tr>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>
          <td><a href="#">Messenger</a></td>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>
          <td><a href="#">Messenger</a></td>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>
          <td><a href="#">Messenger</a></td>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>   
           <tr>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>
          <td><a href="#">Messenger</a></td>
          <td><a href="#">Sign Up</a></td>
          <td><a href="#">Log In</a></td>
          <td><a href="#">Messenger</a></td>     
        </tr>
        </tr>
      </table>
      </div>
      <div>
        <p>Facebook ยฉ 2017</p>
      </div>  
</div>
</body>
</html>

6. By yemmyharry

Made by yemmyharry. Another Facebook signup page clone with login header. Source

css facebook login page by yemmyharry
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
#head{
  height:82px;
  background-color: #142170;
  border:1px solid;

}
*{padding: 0px;
margin: 0px;}
.logo{
  color: white;
  position: absolute;
  top:25px;
  left:50px;
  width: 100px;
}
.form1{
  position:absolute;
  top:10px;
  height: 60px;
  width: 180px;
  left:700px;
  color: white;

}
.form2{
  position:absolute;
  top:10px;
  left:900px;
  color: white;
}
.submit{
  position:absolute;
  top:29px;
  left:1090px;
  background-color: blue;
  cursor: pointer;
  color: white;
  width: 50px;
  z-index: 20;
}
#first{
  position: relative;
  top: 40px;
  left:100px;
  height: 75px;
  width: 550px;
  font-family: verdana;
  font-size: 18px;
  font-weight: bold;
}
body{
  background-color: rgba(0,0,0,0.1);
  width: 100%;
}
#second{
  position: relative;
  top: -50px;
  left:700px;
  height: 60px;
  width: 500px;
  font-size: 18px;
  font-family: verdana;
}
#form3{
  border-radius: 5px;
  width: 200px;
  height: 20px;
  font-size: 15px;
  padding: 10px;
  background: white;
  margin:5px;
}
#date{
  border-radius: 5px;
  width: 100px;
  height: 15px;
  font-size: 15px;
  padding: 10px;
  background: white;


}
#next{
  position: absolute;
  top: 98px;
  left:240px;
  height: 60px;
  width: 500px;
}
#words1{
  position: absolute;
  top: 320px;
  left:130px;
  height: 60px;
  width: 500px;
  font-size: 11px;
  color: blue;

}
.words2{
  font-size: 10px;

}


.world{
  height: 250px;
  width: 550px;
}
.button{
  background-color: green;
  color: white;
  font-size: 20px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  width:200px;
  height: 40px;
}
.container{
  height:50px;
  width: 100%;
clear: both;
  background-color: white;
  top: 450px;
  position: relative;
}
</style>
</head>
<body>
<header id="head">
  <div>
<img src="http://blog.logomyway.com/wp-content/uploads/2018/06/facebook-logo.jpg" alt="facebook logo"  class="logo">
  </div>
  <div class="form1">
    Email or Phone <br>
<input type="text" placeholder="Email"> <br>
<input type="checkbox"> Keep me signed in.
  </div>
  <div class="form2">
    Password<br>
    <input type="password" placeholder="password"><br>
    Forgotten your password?
  </div>

<input type="submit" value="Log In" class="submit">
</header>
<div id="first"> Facebook helps you connect and share with the<br> people in your life.<br><br>
  <img src="https://i.imgur.com/m7Z1tSU.jpg" alt="world picture" class="world">

</div>
<div id="second"> <h2>Create an account</h2><br> It's free and always will be.<br><br>

  <input type="text" placeholder="First name" id="form3">
<div id="next">  <input type="text" placeholder="Surname" id="form3"> </div> <br>
 <input type="text" placeholder="Mobile number or email address" id="form3"><br>
  <input type="password" placeholder="New password" id="form3"> <br><br>
    <h6>Birthday </h6><br>
    <input type="date" id="date"><div id="words1"> Why do I need to provide<br> my date of birth?</div><br><br>
    <input type="radio" name="sex" value="female"> Female
    <input type="radio" name="sex" value="male"> Male<br><br>
    <div class="words2">By clicking Sign Up, you agree to our <a href="#"> Terms</a>, <a href="#">Data Policy</a> <br>and <a href="#">Cookie Policy</a>. You may receive sms notification from <br>us and can opt out at anytime.</div><br>
<input type="submit" class="button" value="Sign Up">

</div>

<footer class="container">

  <p>ยฉ 2019 English(UK)  Hausa  French  Deutsch  Espanol  Portugues <hr>Arigbanla Yemi, Inc. ยท <a href="#">Privacy</a> ยท <a href="#">Terms</a></p>
</footer>
</body>
</html>

7. By Carlos Rojas

Made by Carlos Rojas. Basic Facebook login page clone. Source

carlos rojas
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
*{
    margin:0px;
    box-sizing:border-box;
    transition: 0.2s all ease-in-out;
    -webkit-transition: 0.2s all ease-in-out;
    -o-transition: 0.2s all ease-in-out;
    -moz-transition: 0.2s all ease-in-out;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{font-family: Arial, Verdana, Sans-serif;font-size:14px;padding-top:50px;}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width:1200px;
}
.row{
    margin:0px -15px;
}
.row:after, .row:before {
    display: table;
    content: " ";
}
.row:after {
    clear: both;
}
a{
    text-decoration:none;
    color:#4267B2;
}
.pull-right{
    float:right;
}
.pull-left{
    float:left;
}
.img-responsive{
    max-width:100%;
    height:auto;
}
p{margin-bottom:5px;}
h1,.h1{
    font-size:35px;
    line-height:40px;
}
h2,.h2{
    font-size:30px;
    line-height:350px;
}
h3,.h3{
    font-size:25px;
    line-height:30px;
}
h4,.h4{
    font-size:20px;
    line-height:25px;
}
h5,.h5{
    font-size:15px;
    line-height:20px;
}
h6,.h6{
    font-size:10px;
    line-height:15px;
}
/*Columns*/
*[class*=col-]{float:left;padding:0px 15px;width:100%;min-height:1px;}
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
}

/* Header */
.header {
    width: 100%;
    background: #4267B2;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index:999;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.45);
}
.header .logo h1{
    line-height:48px;
}
.header .logo a{
    color:#fff;
}
.header *[class*=col-]{
    padding:5px 10px;
    color:#fff;
}
/*.header .inline-form{
    padding:5px 10px;
}*/
/* Main */
.main{
    min-height:100%;
    padding: 30px 0px;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/197417/wall.jpg) fixed center;
}
/* Backgrounds */
.gradient{
    background: linear-gradient(white, #D3D8E8);
}

/*Buttons*/
.btn {
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    outline: none;
    padding: 5px 10px;
    font-size: 14px;
    /* line-height: 28px; */
    border-radius: 2px;
    font-weight: bold;
    text-align: center;
}
.btn:active{
    box-shadow:none;
}
.btn-primary {
    background: #4267B2;
}
.btn-primary:hover {
    background: #4267B2;
}
.btn-success {
    background: #4267B2;
}
.btn-success:hover{
    background: #4267B2;
}
/*Text*/
.text-primary{
    color: #0e385f;
}
.text-center{
    text-align:center;
}
.text-mute{color:#777;}
/* Form */
form{
    padding:10px 0px;
}
input,select,textarea,button{
    padding:5px 10px;
    border:1px solid rgba(0,0,0,0.2);
    border-radius:2px;
    outline: none;
}
input:focus,select:focus,textarea:focus,button:focus{
    border:1px solid rgba(0,0,0,0.5);
    outline:none;
}
.input-lg{
    font-size:20px;
    padding:10px 20px;
}
.inline-form input{
    display:inline-block;
}
.form-group{
    display:inline-block;
    width:100%;
    margin-bottom:10px;
}
/*Footer*/
.footer {
    padding: 20px 15px;
    box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.5);
    background: rgba(251, 249, 249, 0.45);
}
/* Responsive */
@media (max-width:768px){
    body{padding-top:0px}
    .header{position:relative;}
    .header .logo{text-align:center}
}

.signup-form{
    background: rgba(255,255,255,1);
    padding: 10px 20px;
    border-radius: 2px;
    box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.4);
}
</style>
</head>
<body>
        <div class="header">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="logo">
                                <h1>Fakebook</h1>
                            </div>
                        </div>
                        <div class="col-sm-8 pull-right">
                            <div class="inline-form pull-right">
                                <form action="javascript:void(0)" method="POST" onsubmit="window.location.href='login.html';return false;">
                                    <input type="text" name="user_email" placeholder="Email Address"/>
                                    <input type="password" name="user_email" placeholder="Password"/>
                                    <input type="submit" value="Login" class="btn btn-primary"/>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="pull-left text-center col-sm-7">
                                <div style="display:none">
                                    <h3 class="text-primary">Facebook helps you connect and share with the people in your life.</h3>
                                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/197417/globe.png" class="img-responsive"/>                            
                                </div>
                            </div>
                            <div class="pull-right col-sm-5">
                                <div class="signup-form">
                                    <h1>Create a new account</h1>
                                    <p class="h3">It's free and always help you waste your time ;-) .</p>
                                    <form action="javascript:void(0);">
                                        <div class="form-group">
                                            <input type="text" placeholder="First Name" name="fname" class="input-lg col-sm-6"/>
                                            <input type="text" placeholder="Last Name" name="lname" class="input-lg col-sm-6"/>
                                        </div>
                                        <div class="form-group">
                                            <input type="email" placeholder="Email Address" name="email" class="input-lg col-sm-12"/>
                                        </div>
                                        <div class="form-group">
                                            <input type="password" placeholder="New Password" name="pwd" class="input-lg col-sm-12"/>
                                        </div>
                                        <div class="form-group">
                                            <p style="font-size:20px">Birthday</p>
                                            <select class="col-sm-4 input-lg" name="date">
                                                <option value="0" selected="selected">Day</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
                                            </select>
                                            <select class="col-sm-4 input-lg" name="month"><option value="0" selected="selected">Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sept</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>
                                            <select class="col-sm-4 input-lg" name="year"><option value="0" selected="1">Year</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option><option value="1979">1979</option><option value="1978">1978</option><option value="1977">1977</option><option value="1976">1976</option><option value="1975">1975</option><option value="1974">1974</option><option value="1973">1973</option><option value="1972">1972</option><option value="1971">1971</option><option value="1970">1970</option><option value="1969">1969</option><option value="1968">1968</option><option value="1967">1967</option><option value="1966">1966</option><option value="1965">1965</option><option value="1964">1964</option><option value="1963">1963</option><option value="1962">1962</option><option value="1961">1961</option><option value="1960">1960</option><option value="1959">1959</option><option value="1958">1958</option><option value="1957">1957</option><option value="1956">1956</option><option value="1955">1955</option><option value="1954">1954</option><option value="1953">1953</option><option value="1952">1952</option><option value="1951">1951</option><option value="1950">1950</option><option value="1949">1949</option><option value="1948">1948</option><option value="1947">1947</option><option value="1946">1946</option><option value="1945">1945</option><option value="1944">1944</option><option value="1943">1943</option><option value="1942">1942</option><option value="1941">1941</option><option value="1940">1940</option><option value="1939">1939</option><option value="1938">1938</option><option value="1937">1937</option><option value="1936">1936</option><option value="1935">1935</option><option value="1934">1934</option><option value="1933">1933</option><option value="1932">1932</option><option value="1931">1931</option><option value="1930">1930</option><option value="1929">1929</option><option value="1928">1928</option><option value="1927">1927</option><option value="1926">1926</option><option value="1925">1925</option><option value="1924">1924</option><option value="1923">1923</option><option value="1922">1922</option><option value="1921">1921</option><option value="1920">1920</option><option value="1919">1919</option><option value="1918">1918</option><option value="1917">1917</option><option value="1916">1916</option><option value="1915">1915</option><option value="1914">1914</option><option value="1913">1913</option><option value="1912">1912</option><option value="1911">1911</option><option value="1910">1910</option><option value="1909">1909</option><option value="1908">1908</option><option value="1907">1907</option><option value="1906">1906</option><option value="1905">1905</option></select>
                                        </div>
                                        <div class="form-group">
                                                <label for="sex_male" class="input-lg">
                                                    <input type="radio" name="sex" value="male" id="sex_male"> Male
                                                </label>
                                                <label for="sex_female" class="input-lg">
                                                    <input type="radio" name="sex" value="female" id="sex_female"> Female
                                                </label>
                                        </div>
                                        <div class="form-group">
                                            <small class="text-mute">Text</small>
                                        </div>
                                        <div class="form-group">
                                            <input type="submit" value="Create Account" class="btn btn-success input-lg"/>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    &copy; Facebook 2017.
                                </div>
                            </div>
                        </div>
                    </div>
</body>
</html>

8. By Saurabh Mishra

Made by Saurabh Mishra. Source

css facebook login page by saurabh mishra
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*{
   box-sizing: border-box;
}
body{
    background-color: #f0f2f5;
    
}

.header{
   padding-top:100px;
   height: 95vh;
   display: flex;
   flex-direction: row;
   
}

.main-area{
    
    display: flex;
    margin:0 60px 0 100px;
    padding: 32px 0;

}

.fb{
    width: 50%; 
   padding: 80px 20px 0 100px;
}

.heading{
    color:  #1876f2;
    font-size: 70.4px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    padding-bottom: 10px;
    letter-spacing: -3px;

}

.text-container .text{
    font-family: 'Open Sans', sans-serif;
    font-size:30px;
    letter-spacing: 1px;
}

.imp{
    display: flex;
    flex-direction: column;
    width: 430px;
    margin: 0 58px 0 55px;
   

}

.imp .form-box{
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 16px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
}

.form-box .form{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin:0 auto;
}

input{
    border:1px solid rgb(226, 218, 218);
    border-radius: 6px;
    outline: none;
}

input::placeholder{
    font-size: 17.8px;
}

input[type="email"]{
    width: 100%;
    padding:16px;
    margin-bottom:16px;
}
input:focus{
    border:1px solid #127ea8;
    box-shadow: 0 0 0 2px #e7f3ff;
}

input[type="password"]{
    width: 100%;
    padding:16px;
    margin-bottom: 16px;
}

button.login-btn{
    background-color: #1876f2;
    padding:16px 0;
    border: 0 ;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border-radius: 7px;
    transition: all 200ms;
}

button.login-btn:hover{
    background-color: #166fe5;
    cursor: pointer;
}
.for-pass{
    padding: 20px 80px;
    border-bottom: 1px solid #cfc5c5;
}
.for-pass .link-1{
    color: #0299d4;
    text-decoration: none;
    font-size: 15px;
    margin-left: 21px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    
    transition: all 200ms;
    
}

a.link-1:hover{
     text-decoration: underline;
     cursor: pointer;
}
.btn-new-account{
    color: #fff;
    background-color:#42b72a ;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    border-radius: 5px;
    border :none;
    padding: 16px;
    width: 70%;
    margin:24px auto 20px;
}
.btn-new-account:hover{
    background-color:#36a420 ;
    cursor: pointer;
}
.imp .para {
    margin: 35px auto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    
}

a.link-2{
    text-decoration: none;
    color: black;
    font-weight: bold;
   
}

a.link-2:hover{
    text-decoration: underline;
}

@media (max-width:1045px){

    
    .header{
        padding-top:10px;
        margin-bottom: 0;
        
     }
     .main-area{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin:0;
        padding: 0;
    
    }

    .fb{
        width: 100%; 
        padding: 0;   
        margin: 60px 0; 
    }

    .heading{
        color:  #1876f2;
        font-size: 48px;
        font-weight: 700;
        font-family: 'Open Sans', sans-serif;
        padding-bottom: 20px;
        letter-spacing: -1px;
        text-align: center;
    
    }

    .text-container .text{
        font-family: 'Open Sans', sans-serif;
        font-size:30px;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        
    }

    .imp{
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 15px auto 0;
        
    }
    .imp .form-box{
        background-color: #fff;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
    }

    .form-box .form{
        display: flex;
        flex-direction: column;
        width: 95%;
        margin:0 auto;
    }

    input{
        border:1px solid rgb(226, 218, 218);
        border-radius: 3px;
        outline: none;
    }

    input::placeholder{
        font-size: 20px;
    }

    button.login-btn{
        background-color: #1876f2;
        width: 25%;
        margin-left: 0 ;
        padding:16px 0;
        border: 0 ;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        border-radius: 7px;
        transition: all 200ms;
    }
    .imp .para {
        margin: 50px auto;
        font-family: 'Open Sans', sans-serif;
        font-size: 17px;
    }

    .for-pass {
        text-align: center;
        
    }

    
}
</style>
</head>
<body>
    <header class="header">
        <main class="main-area">
            
            <div class="fb">
                <h1 class="heading">facebook</h1>
                <div class="text-container">
                    <h2 class="text">Facebook helps you connect and share with the people in your life.</h2>
                </div>
            </div>

            <div class="imp">
                <div class="form-box">
                    <form action="/nowhere" class="form">
    
                        <input type="email" name="email" id="email" placeholder="Email address or phone number">
                        <input type="password" name="password" id="password" placeholder="Password">
                        <button class="login-btn">Log In</button>
    
                        <div class="for-pass">
                            <a href="#" class="link-1">Forgotten Password ?</a>
                        </div>
                        <button class="btn-new-account">Create New Account</button>
                    </form>
                </div>
    
                <div class="para"><a href="#" class="link-2">Create a Page</a><span> for a celibrity, band or business</span></div>
            </div>

            
        </main>
    </header>
</body>
</html>