How to Create Responsive Facebook Login page by using html and css

Creating a responsive Facebook login page involves HTML, CSS, and potentially JavaScript. Below is a step-by-step guide to creating a simple responsive Facebook login page:

Step 1: Set Up Your Environment Make sure you have a code editor like Visual Studio Code or Sublime Text installed. You'll also need a web browser for testing your page.

Step 2: Create the HTML Structure


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Create Responsive Facebook Login page by using html and css | Assignment Hippo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-box flex">
        <div class="box flex">
        <div class="left-cont">
            <h2>facebook</h2>
            <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="login-link">
                <button type="submit" class="login">Login</button>
                <a href="#" class="forgotten">Forgotten password?</a>
            </div>
            <hr>
            <div class="button">
                <a href="#">Create new account</a>
            </div>
            </form> 
        </div>
    </div>
  </body>
</html>

This HTML structure sets up the basic layout for your Facebook login page.

Step 3: Create the CSS Styling (style.css)


       @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;
       }
       
       .flex {
         display: flex;
         align-items: center;
       }
       
       .main-box {
         padding: 0 15px;
         min-height: 100vh;
         justify-content: center;
         background: #f0f2f5;
       }
       
       .box {
         justify-content: space-between;
         max-width: 1000px;
         width: 100%;
       }
       
       .box .left-cont {
         margin-bottom: 90px;
       }
       
       .box h2 {
         color: #1877f2;
         font-size: 3.8rem;
         margin-bottom: 10px;
       }
       
       .box 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;
       }
       
       .login-link {
         display: flex;
         flex-direction: column;
         text-align: center;
         gap: 15px;
       }
       
       .login-link .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;
       }
       
       .login-link .login:hover {
         background: #0d65d9;
       }
       
       form a {
         text-decoration: none;
       }
       
       .login-link .forgotten {
         color: #1765cd;
         font-size: 0.875rem;
       }
       
       .login-link .forgotten:hover {
         text-decoration: underline;
       }
       
       hr {
         border: none;
         height: 1px;
         background-color: #ccc;
         margin-bottom: 20px;
         margin-top: 20px;
       }
       
       .button {
         margin-top: 25px;
         text-align: center;
         margin-bottom: 20px;
       }
       
       .button a {
         padding: 15px 20px;
         background: #42b72a;
         border-radius: 6px;
         color: #fff;
         font-size: 1.063rem;
         font-weight: 600;
         transition: 0.2s ease;
       }
       
       .button a:hover {
         background: #3ba626;
       }

This CSS adds styles to your HTML structure, making it visually appealing and responsive.

Step 4: Add Responsiveness

To make your Facebook login page responsive, you can add media queries to your CSS. For example, you can adjust the layout for smaller screens like smartphones:


      @media (max-width: 900px) {
        .box {
          flex-direction: column;
          text-align: center;
        }
      
        .box .left-cont {
          margin-bottom: 30px;
        }
      }
      
      @media (max-width: 460px) {
        .box h2 {
          font-size: 3.5rem;
        }
      
        .box p {
          font-size: 1.3rem;
        }
      
        form {
          padding: 15px;
        }
      }

This media query adjusts the container width and padding for screens with a maximum width of 900px and 460px.

Step 5: Testing Open the HTML file in your web browser and ensure that your Facebook login page looks and works as expected. Test it on various screen sizes to confirm responsiveness.

This is a basic example of a responsive Facebook login page. Depending on your requirements, you can further enhance it with JavaScript for validation and interactivity or integrate it with a backend for user authentication.

View Demo

Submit Your Question Now