How to Create Facebook Login Page Using HTML & CSS

Prajwal Jadhav March 10, 2024

How to Create Facebook Login Page Using HTML & CSS


In this blog post ,We are going to create Facebook Sign In/Login Page by using HTML and CSS. Facebook is a one of the widely used and popular social media platform.

This is helpful for new developers to gain a hands on practical experience with these basics fundamental of  HTML and styles . 

While creating login form, we'll look at different HTML elements like forms, input boxes, and links. as well as CSS tricks to style and personalize our login form.

Steps to Create a Facebook Login Page with HTML & CSS

  • Create a new .html file, name as index.html. In this file write your HTML Code for Facebook Login page.

  <!DOCTYPE html>
  <!--Codeuniverse.in-->
  <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="style.css">
    </head>
    <body>
      <div class="fb-container fb-flex">
        <div class="fb-login-page fb-flex">
          <div class="fb-text">
            <h1>facebook</h1>
            <p>Facebook helps you connect and share </p>
            <p>with the people in your life.</p>
          </div>
          <form action="#">
            <input type="email" placeholder="Email address or phone number" required>
            <input type="password" placeholder="Password" required>
            <div class="fb-link">
              <button type="submit" class="fb-login">Login</button>
              <a href="#" class="fb-forgot">Forgotten password?</a>
            </div>
            <hr>
            <div class="fb-button">
              <a href="#">Create new account</a>
            </div>
          </form>
           
        </div>
      </div>
      
    </body>
  </html>

  • Add CSS styles using the <style> tag or by linking an external stylesheet with the <link> tag.

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

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
  }

  .fb-flex {
    display: flex;
    align-items: center;
  }

  .fb-container {
    padding: 0 15px;
    min-height: 100vh;
    justify-content: center;
    background: #f0f2f5;
  }

  .fb-login-page {
    justify-content: space-between;
    max-width: 1000px;
    width: 100%;
  }

  .fb-login-page .fb-text {
    margin-bottom: 90px;
  }

  .fb-login-page h1 {
    color: #1877f2;
    font-size: 4rem;
    margin-bottom: 10px;
  }

  .fb-login-page p {
    font-size: 1.75rem;
    white-space: nowrap;
  }

  form {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
      0 8px 16px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
  }

  form input {
    height: 55px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 1rem;
    padding: 0 14px;
  }

  form input:focus {
    outline: none;
    border-color: #1877f2;
  }

  ::placeholder {
    color: #777;
    font-size: 1.063rem;
  }

  .fb-link {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .fb-link .fb-login {
    border: none;
    outline: none;
    cursor: pointer;
    background: #1877f2;
    padding: 15px 0;
    border-radius: 6px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    transition: 0.2s ease;
  }

  .fb-link .fb-login:hover {
    background: #0d65d9;
  }

  form a {
    text-decoration: none;
  }

  .fb-link .fb-forgot {
    color: #1877f2;
    font-size: 0.875rem;
  }

  .fb-link .fb-forgot:hover {
    text-decoration: underline;
  }

  hr {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .fb-button {
    margin-top: 25px;
    text-align: center;
    margin-bottom: 20px;
  }

  .fb-button a {
    padding: 15px 20px;
    background: #42b72a;
    border-radius: 6px;
    color: #fff;
    font-size: 1.063rem;
    font-weight: 600;
    transition: 0.2s ease;
  }

  .fb-button a:hover {
    background: #3ba626;
  }

  @media (max-width: 900px) {
    .fb-login-page {
      flex-direction: column;
      text-align: center;
    }

    .fb-login-page .fb-text {
      margin-bottom: 30px;
    }
  }

  @media (max-width: 460px) {
    .fb-login-page h1 {
      font-size: 3.5rem;
    }

    .fb-login-page p {
      font-size: 1.3rem;
    }

    form {
      padding: 15px;
    }
  }

  • Result 



Tags: