HTML And CSS Facebook Login Page Frontend Project

In this tutorial, we’ll guide you through building a simple and responsive Facebook login page using HTML and CSS from scratch.

👉 DEMO

Prerequisites

Before starting, ensure you have:

Basic knowledge of HTML and CSS
A text editor (e.g., Visual Studio Code or Sublime Text)
A web browser for testing

Step 1: Set Up Basic HTML Structure

First, create a new file (e.g., index.html) and add the following basic structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Facebook Login Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Content will go here -->
  </body>
</html>

Inside the <body> tag, create the login form. It will include input fields for the email/phone and password, as well as the login button.

<div class="container">
  <div class="wrapper">
    <div class="brand">
      <div class="logo">
        <img
          src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg"
          alt="Facebook"
        />
      </div>
      <h2 class="heading">
        Facebook helps you connect and share with the people in your life.
      </h2>
    </div>
    <div class="user-action">
      <div class="form-container">
        <form>
          <div class="form-wrapper">
            <input
              type="email"
              class="inputtext"
              placeholder="Email address or phone number"
              autofocus
            />
            <input type="password" class="inputtext" placeholder="Password" />
            <button type="submit">Log in</button>
            <div class="forgot-password">
              <a href="#">Forgotten password?</a>
            </div>
          </div>
          <div class="create-account">
            <a href="#">Create new account</a>
          </div>
        </form>
      </div>
      <div class="create-page">
        <a href="#">Create a Page</a> for a celebrity, brand, or business.
      </div>
    </div>
  </div>
</div>

Step 3: Add CSS Styles

Create a new file called styles.css and add the following styles to give the page a clean and responsive design.

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  background: #f0f2f5;
  color: #1c1e21;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.container {
  padding-top: 72px;
}

.wrapper {
  display: flex;
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
  padding: 20px;
}

.brand .logo img {
  max-width: 350px;
  margin-left: -36px;
}

.heading {
  font-weight: 400;
  font-size: 28px;
}

.form-container {
  background-color: white;
  border-radius: 8px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
  padding: 20px;
  min-width: 400px;
}

.inputtext {
  background: #fff
    url(https://static.xx.fbcdn.net/rsrc.php/v3/yU/r/O7nelmd9XSI.png) repeat-x;
  border: 1px solid #dddfe2;
  padding: 15px;
  border-radius: 6px;
  font-size: 17px;
  color: #1d2129;
}

.inputtext:focus {
  border-color: #0866ff;
  box-shadow: 0 0 0 2px #e7f3ff;
}

button[type="submit"] {
  background: #0866ff;
  color: white;
  border-radius: 6px;
  border: 0;
  padding: 15px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

button[type="submit"]:hover {
  opacity: 0.9;
}

.forgot-password {
  text-align: center;
  padding-bottom: 15px;
}

.forgot-password a {
  color: #0866ff;
  font-size: 14px;
}

.create-account {
  text-align: center;
  padding-top: 15px;
}

.create-account a {
  background: #42b72a;
  color: white;
  padding: 15px;
  font-weight: 700;
  border-radius: 6px;
}

.create-account a:hover {
  background: #00a400;
}

.create-page {
  text-align: center;
  font-size: 14px;
  padding: 20px;
}

.create-page a {
  color: #1c1e21;
  font-weight: 700;
}

@media (max-width: 900px) {
  .wrapper {
    flex-direction: column;
    max-width: 400px;
  }
  .form-container {
    min-width: unset;
  }
  .brand {
    text-align: center;
  }
  .brand img {
    width: 100%;
    margin: unset;
  }
  .heading {
    font-size: 24px;
  }
}

Step 4: Test in a Browser

Once your HTML and CSS files are ready, save both in the same folder and open index.html in your web browser. You should now see a functional and responsive Facebook-inspired login page.

Conclusion

You’ve successfully created a Facebook login page using HTML and CSS. This tutorial can be further enhanced by adding JavaScript for interactivity or expanding the design. Keep experimenting with styles and features to continue improving your web development skills. Happy coding!