DEV Community

Cover image for Creating Facebook's Login Page Clone With Pure Html & Css(Mobile Version)
Somnath Pan
Somnath Pan

Posted on

Creating Facebook's Login Page Clone With Pure Html & Css(Mobile Version)

#tutorial #beginners #css #html

Hello everyoneđź‘‹,
Today, through this article we'll Create Facebook Login Page's Clone With pure HTML and CSS

Here Is What We're Going to Make:
Image description

Prerequisites:-

To create this all you need to know is:-

•Basics Of Html
•Some CSS

Get Started With HTML :-

First Let's Start With Some HTML

<!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 Clone</title>
</head>
<body bgcolor:#d3d3d3>
    <div class="top">
        <img src="fb.png" alt="fb">
    </div>
    <div class="form">
        <form>
        <input placeholder="Mobile number or email address">
        <input placeholder="Enter your password">
        <button class="submit" type="submit">Log In</button>
        </form>
        <a href="#">Forgotten your password</a>
    </div>

    <div class="or">
       <p>or</p> 
    </div>
    <div class="cna">
        <button>Create new account</button>
    </div>
    <div class="footer">
        <a href="#">about</a> 
        <a href="#">help</a>
        <a href="#">more</a>
        <br/>
        <a href="#">meta©</a>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

*Add Some CSS *

 <style>
        .top{
            text-align:center;
        }
        img{
           height:99px;
           width:170px; 
        }
        .form{
            text-align:center;
        }
        input{
           height:35px; 
           width:280px;
           margin:5px;
           border:none;
           background-color:#F1EEF1;
           border-radius:5px;
        }
        input:focus{
            border:2px solid #2737E4;
            outline:none;
        }
        .submit{
           height:30px; 
           width:280px;
           margin:6px;
           border:none;
           border-radius:5px;
           background-color:#1100ff;
           color:white;
           font-weight:bold;
        }
        .form a{
            text-decoration:none;
            font-weight:bold;
            color:#6aa2ff;
        }
        .or{
            text-align:center;
        }
        .cna{
            text-align:center;
        }
          .cna button{
              height:30px; 
           width:280px;
           margin:6px;
           border:none;
           border-radius:5px;
           background-color:#4ed836;
           color:white;
           font-weight:bold;
          }
          .footer{
              text-align:center;
              margin-top:100px;
          }
            .footer>a{
                color:grey;
                text-decoration:none;
            }
    </style>
Enter fullscreen mode Exit fullscreen mode

Now let's style our page with some basic CSS

Our Final Code Is gonna look like this

<!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 Clone</title>
     <style>
        .top{
            text-align:center;
        }
        img{
           height:99px;
           width:170px; 
        }
        .form{
            text-align:center;
        }
        input{
           height:35px; 
           width:280px;
           margin:5px;
           border:none;
           background-color:#F1EEF1;
           border-radius:5px;
        }
        input:focus{
            border:2px solid #2737E4;
            outline:none;
        }
        .submit{
           height:30px; 
           width:280px;
           margin:6px;
           border:none;
           border-radius:5px;
           background-color:#1100ff;
           color:white;
           font-weight:bold;
        }
        .form a{
            text-decoration:none;
            font-weight:bold;
            color:#6aa2ff;
        }
        .or{
            text-align:center;
        }
        .cna{
            text-align:center;
        }
          .cna button{
              height:30px; 
           width:280px;
           margin:6px;
           border:none;
           border-radius:5px;
           background-color:#4ed836;
           color:white;
           font-weight:bold;
          }
          .footer{
              text-align:center;
              margin-top:100px;
          }
            .footer>a{
                color:grey;
                text-decoration:none;
            }
    </style>
</head>
<body bgcolor:#d3d3d3>
    <div class="top">
        <img src="fb.png" alt="fb">
    </div>
    <div class="form">
        <form>
        <input placeholder="Mobile number or email address">
        <input placeholder="Enter your password">
        <button class="submit" type="submit">Log In</button>
        </form>
        <a href="#">Forgotten your password</a>
    </div>

    <div class="or">
       <p>or</p> 
    </div>
    <div class="cna">
        <button>Create new account</button>
    </div>
    <div class="footer">
        <a href="#">about</a> 
        <a href="#">help</a>
        <a href="#">more</a>
        <br/>
        <a href="#">meta©</a>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

We Hope You Loved It...

Follow For More❤️

Top comments (0)

Read next

vitalipri profile image

5 Hidden CSS Properties You Didn't Know Existed

From 0 to 1 -

colinsoleim profile image

Supercharging Rails: Enabling Ruby's YJIT Compiler in Production

Colin Soleim -

urzahmed profile image

Quantum AI —Introduction - A better future?

Urooj Ahmad -

dionarodrigues profile image

Docker compose, orchestrating and automating services

Diona Rodrigues -