DEV Community

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

Posted on

6 1 1 1 1

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

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❤️

Sentry image

Make it make sense

Only the context you need to fix your broken code with Sentry.

Start debugging →

Top comments (0)

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay