DEV Community

vishwa v
vishwa v

Posted on

Facebook login

Introduction
Login pages are one of the most common features in modern websites and apps. They provide users with a secure way to access their accounts. In this blog, we’ll walk through how to build a Facebook-inspired login page using HTML and CSS. This project is perfect for beginners who want to practice layout design, Flexbox, and Grid

Implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
            font-family: 'Times New Roman', Times, serif;
        }
        main{
            border:1px solid;
            height:90vh;
            display:grid;
            grid-template-columns: 2fr 1fr;
        }
        footer{
            border:1px solid;
            height:10vh;
        }
        .left{
            border:1px solid;
            display:grid;
            grid-template-columns: 1fr 1fr;
        }
        .right{
            border:1px solid;
            display: flex;
            flex-direction: column;
            width:50vh;
            margin: auto;


        }
        .logo{
            /* border:1px solid; */
            display:flex;
            flex-direction:column;
            justify-content: space-between;

        }
        .img{
            /* border: 1px solid; */
        }
        .logo-img{
            height: 125px;
            width:125px;
            padding:30px;   
        }
        h1{
            /* border:1px solid; */
            width: 90%;
            font-size: 54px;
            padding: 25px;
        }
        .img-img{
            height:500px;
            width: 500px;

        }
        span{
            color:rgb(24,  119,  242);
        }
        /* .login{
            border:1px solid;
            display: flex;
            flex-direction: column;
        } */

        input,button{
            font: size 16px;
            padding:10px;

        }
        /* p{
            margin-left: 80px;
        } */
    </style>

</head>
<body>
    <main>
        <div class="left">
            <div class="logo">
                <img class="logo-img" src="https://thf.bing.com/th/id/OIP._6VkGA8hbkjwvRaUbavwVAHaHa?w=190&h=190&c=7&r=0&o=7&cb=thfc1falcon2&dpr=1.3&pid=1.7&rm=3" alt="fb">
                <h1>Explore the things <span>you love</span>.</h1>
            </div>
            <div class="img">
                <img class="img-img" src="https://static.xx.fbcdn.net/rsrc.php/yb/r/HpEiFYDux5j.webp" alt="ff">
            </div>
        </div>
        <div class="right">
            <p>Log in to Facebook</p>
            <input type="text" placeholder="Email address or mobile number">
            <input type="password" placeholder="Password">
            <button type="submit">Log in</button>
            <button type="">Forgotten password?</button>
            <button>Create new account</button>


        </div>

    </main>
    <footer>

    </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Steps
Step 1: Setting Up the Structure

Left side: Logo and promotional image.
Right side: Login form with input fields and buttons

<main>
  <div class="left">
    <!-- Logo and tagline -->
    <div class="logo">
      <img class="logo-img" src="logo.png" alt="fb">
      <h1>Explore the things <span>you love</span>.</h1>
    </div>
    <!-- Illustration -->
    <div class="img">
      <img class="img-img" src="illustration.png" alt="ff">
    </div>
  </div>

  <div class="right">
    <p>Log in to Facebook</p>
    <input type="text" placeholder="Email address or mobile number">
    <input type="password" placeholder="Password">
    <button type="submit">Log in</button>
    <button>Forgotten password?</button>
    <button>Create new account</button>
  </div>
</main>
Enter fullscreen mode Exit fullscreen mode

Step 2: Styling with CSS

main is split into two columns: left (2/3 width) and right (1/3 width).

The right section uses Flexbox to stack inputs and buttons neatly.

The logo section aligns the image and heading vertically

main {
  border: 1px solid;
  height: 90vh;
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.right {
  border: 1px solid;
  display: flex;
  flex-direction: column;
  width: 50vh;
  margin: auto;
}

.logo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Adding Visuals
The logo image is styled with fixed height and width.

The heading uses a large font size and highlights the word you love with a blue color (rgb(24, 119, 242)), similar to Facebook’s brand color.

Buttons and inputs are padded for better usability.

Step 4: Final Touches
A footer is added for balance.

You can enhance the design by adding hover effects to buttons or making the layout responsive for mobile screens.

Top comments (0)