(Source Code)Facebook Login Page With HTML & CSS

Hey! Frontend web developers in this blog post we are going make a Facebook Login Page With HTML & CSS. Building web elements of such popular websites is the best way to master web development skills.

In this tutorial, we will understand HTML Structure & CSS Styling along with the required key concepts to make our login page look and feel like Facebook.

Also Read: Instagram Login Page With HTML & CSS

At the end of this post, I will provide the source code of the Facebook Login Page (HTML & CSS) so that you can run this project on your local machine.

Key Concepts In Facebook Login Page:

• CSS Universal Selector & Box Sizing
• CSS Flexbox & Media Queries
• CSS Box Shadow & Border Radius
• CSS Positioning & Input Styling
• CSS Button Styling & Hover Effects

Understanding HTML Structure For Facebook Login Page

1. Content Container

• The outermost div has a class content. This div holds everything inside it.

   <div class="content">

2. Flex Container

• Inside content, there is another div with class flex-div. This div uses Flexbox to lay out its children.

   <div class="flex-div">

3. Name Content

• Within flex-div, there is a div with class name-content. This section contains the Facebook logo and a tagline.

   <div class="name-content">
     <h1 class="logo">Facebook</h1>
     <p>Connect with friends and the world around you on Facebook.</p>
   </div>

4. Form

• Next to name-content, there is a form element. This form has input fields for email/phone and password, a login button, a link for forgotten passwords, a horizontal line, and a button to create a new account.

   <form>
     <input type="text" placeholder="Email or Phone Number" required />
     <input type="password" placeholder="Password" required>
     <button class="login">Log In</button>
     <a href="#">Forgot Password ?</a>
     <hr>
     <button class="create-account">Create New Account</button>
   </form>

CSS Styling For Facebook Login Page

1. Global Styles

• The * selector resets margin, padding, and sets box-sizing for all elements.

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

2. Body Styles

• The body element uses the “Poppins” font and sets the background color.

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

3. Content Positioning

• The .content class centers its content using absolute positioning and transform.

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

4. Flex Container Styles

• The .flex-div class uses flexbox to center its items horizontally and vertically.

   .flex-div {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
   }

5. Name Content Styles

• The .name-content class adds margin to the right. The .logo class styles the logo text. The p tag styles the tagline text.

   .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;
   }

6. Form Styles

• The form class makes the form a column, adds background, padding, width, height, border radius, and shadow.

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

7. Input Styles

• The input fields are styled with padding, margin, and font size. Focused input fields get a blue border.

   form input {
     outline: none;
     padding: 0.8rem 1rem;
     margin-bottom: 0.8rem;
     font-size: 1.1rem;
   }
   form input:focus {
     border: 1.8px solid #1877f2;
   }

8. Button Styles

• The .login button has a blue background, padding, border radius, font size, and white text. It changes color on hover.

   form .login {
     outline: none;
     border: none;
     background: #1877f2;
     padding: 0.8rem 1rem;
     border-radius: 0.4rem;
     font-size: 1.1rem;
     color: #fff;
   }
   form .login:hover {
     background: #0f71f1;
     cursor: pointer;
   }

9. Link Styles

• The a tag is styled to remove underlines and center-align text. It has blue text color.

   form a {
     text-decoration: none;
     text-align: center;
     font-size: 1rem;
     padding-top: 0.8rem;
     color: #1877f2;
   }

10. Horizontal Line Styles: The hr tag is styled to have a light grey background and margin.

form hr { background: #f7f7f7; margin: 1rem; }

10. Create Account Button Styles: The .create-account button has a green background, padding, border radius, font size, white text, and centered margin. It changes color on hover.

form .create-account { outline: none; border: none; background: #06b909; padding: 0.8rem 1rem; border-radius: 0.4rem; font-size: 1.1rem; color: #fff; width: 75%; margin: 0 auto; } form .create-account:hover { background: #03ad06; cursor: pointer; }

10. Media Queries: These media queries adjust the font size and layout for different screen sizes to ensure responsiveness.

@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, form a, form .create-account { font-size: 1.5rem; } .flex-div { display: flex; flex-direction: column; } } @media (min-width: 501px) and (max-width: 768px) { /* Similar styles as above for different screen size */ } @media (min-width: 769px) and (max-width: 1200px) { /* Similar styles as above for different screen size */ } @media (orientation: landscape) and (max-height: 500px) { .header { height: 90vmax; } }

Source Code Of Facebook Login Page

HTML Of Facebook Login Page:

Also Read: Netflix Login Page With HTML & CSS

 <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>
            <input type="text" placeholder="Email or Phone Number" required />
            <input type="password" placeholder="Password" required>
            <button class="login">Log In</button>
            <a href="#">Forgot Password ?</a>
            <hr>
            <button class="create-account">Create New Account</button>
          </form>
      </div>
    </div>

CSS Of Facebook Login Page:

Also Read: Google Login Page With HTML & CSS

<style>
* {
  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: 0.5rem;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}

form input {
  outline: none;
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
}

form input:focus {
  border: 1.8px solid #1877f2;
}

form .login {
  outline: none;
  border: none;
  background: #1877f2;
  padding: 0.8rem 1rem;
  border-radius: 0.4rem;
  font-size: 1.1rem;
  color: #fff;
}

form .login:hover {
  background: #0f71f1;
  cursor: pointer;
}

form a {
  text-decoration: none;
  text-align: center;
  font-size: 1rem;
  padding-top: 0.8rem;
  color: #1877f2;
}

form hr {
  background: #f7f7f7;
  margin: 1rem;
}

form .create-account {
  outline: none;
  border: none;
  background: #06b909;
  padding: 0.8rem 1rem;
  border-radius: 0.4rem;
  font-size: 1.1rem;
  color: #fff;
  width: 75%;
  margin: 0 auto;
}

form .create-account:hover {
  background: #03ad06;
  cursor: pointer;
}

/* //.........Media Query.........// */

@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: 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;
    }
  }  
}

    </style>

About Author