How to Build Facebook Login Page Using HTML and CSS

How to Build Facebook Login Page Using HTML and CSS

·

3 min read

Hello Guys everyone here, I show how you can build a Facebook login page using HTML and CSS.

facebook_login page.png

Quick Start

Create a folder and add two files called index.html and style.css

After creating files start to code!

Start to add this code in your index.html

<div class="content">
        <div class="flex-div">
            <div class="name-content">
                <h1 class="logo">Facebook</h1>
                <p>Connect with friends and the world around you on Facebook.</p>
            </div>
            <form action="">
                <input type="text" placeholder="Email or Phone Number" required/>
                <input type="password" placeholder="Password" required/>
                <button class="login">Login</button>
                <a href="#">Forgot Password ?</a>
                <hr>
                <button class="create-account">Create New Account</button>
            </form>
        </div>
    </div>

After coding your index file then your page looks like this,

without_css-facebook.png

After completing the index file. Now let us style out for page in the style.css.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: "poppins", sans-serif;
  background: #f2f4f7;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.flex-div {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.name-content{
  margin-right: 7rem;
}
.name-content .logo {
  font-size: 3.5rem;
  color: #1877f2;
}

.name-content p{
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 5rem;
}

form{
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 2rem;
  width: 530px;
  height: 380px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0 0 0/ 10%), 0 8px 16px rgb(0 0 0/10%)
}
form input {
  padding: 15px;
  margin: 5px;
  margin-bottom: 2px;
  border: 2px solid gray;

}
form input:focus{
  border: 2px solid #000;
}

button {
  height: 45px;
  padding: 10px;
}
.login{
  margin-top: 10px;
  background: #1877f2;
  border-radius: 10px;
  outline: none;
  border: none;
}
form a {
  text-decoration: none;
  padding-top: 15px ;
  text-align: center;
  color: #1877f2;
}
form hr{
  margin: 1rem;
  background: #f7f7f7;
}
form .create-account {
  margin: 0 auto; 
  background-color: #06b909;
  border: none;
  outline: none;
  border-radius: 10px;
  width: 75%;
}



@media (max-width: 500px) {
    html {
      font-size: 60%;
    }

    .name-content {
      margin: 0;
      text-align: center;
    }

    form {
      width: 300px;
      height: fit-content;
    }

    form input {
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }

    form .login {
      font-size: 1.5rem;
    }

    form a {
      font-size: 1.5rem;
    }

    form .create-account {
      font-size: 1.5rem;
    }

    .flex-div {
      display: flex;
      flex-direction: column;
    }
  }

  @media (min-width: 501px) and (max-width: 768px) {
    html {
      font-size: 60%;
    }

    .name-content {
      margin: 0;
      text-align: center;
    }

    form {
      width: 300px;
      height: fit-content;
    }

    form input {
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }

    form .login {
      font-size: 1.5rem;
    }

    form a {
      font-size: 1.5rem;
    }

    form .create-account {
      font-size: 1.5rem;
    }

    .flex-div {
      display: flex;
      flex-direction: column;
    }
  }

  @media (min-width: 501px) and (max-width: 768px) {
    html {
      font-size: 60%;
    }

    .name-content {
      margin: 0;
      text-align: center;
    }

    form {
      width: 300px;
      height: fit-content;
    }

    form input {
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }

    form .login {
      font-size: 1.5rem;
    }

    form a {
      font-size: 1.5rem;
    }

    form .create-account {
      font-size: 1.5rem;
    }

    .flex-div {
      display: flex;
      flex-direction: column;
    }
  }

  @media (min-width: 769px) and (max-width: 1200px) {
    html {
      font-size: 60%;
    }

    .name-content {
      margin: 0;
      text-align: center;
    }

    form {
      width: 300px;
      height: fit-content;
    }

    form input {
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }

    form .login {
      font-size: 1.5rem;
    }

    form a {
      font-size: 1.5rem;
    }

    form .create-account {
      font-size: 1.5rem;
    }

    .flex-div {
      display: flex;
      flex-direction: column;
    }

    @media (orientation: landscape) and (max-height: 500px) {
      .header {
        height: 90vmax;
      }
    }  
  }

After your styling then your page looks very impressive and attractive as same as the Facebook login page.

facebook_login page.png

Now, guys, you have done with your Facebook login page. I hope this may help you. If you need any other let me know in the comment section. Thank you.