In this post, I’m going to show you how to make a simple Facebook Login Form UI using Only HTML and CSS.
 
First of all create a new project folder and add two files, one for the HTML and one for the CSS and then add this code

index.html

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Facebook</title>

    <link rel=”stylesheet” href=”main.css”>

</head>

<body>

    <div class=”form_body”>

        <h1>facebook</h1>

        <input type=”email” placeholder=”Type your email” ><br>

        <input type=”password” placeholder=”Type your Password” ><br>

        <button class=”login”>Login</button><br>

        <a href=”#”>Forget your password ?</a>

        <hr>

        <button class=”signup”>Signup</button>

    </div>

</body>

</html>

main.css

@import url(‘https://fonts.googleapis.com/css2?family=PT+Sans’);

*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: ‘PT Sans’, sans-serif;
}

body{
    background-color: #F0F2F5;
    
    }

.form_body{
    background-color: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(21,21,21,0.3);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    text-align: center;
}

.form_body h1{
    color:#1877F2 ;
    font-weight: bold;
    font-size: 3.2rem;
}

.form_body input{
    margin: 12px 0;
    padding: 12px;
    width: 300px;
    border: 1px solid #dddfe2;
    color: #1d2129;
    vertical-align: middle;
    border-radius: 6px;
    font-size: 17px;
   
}

.form_body button{
    width: 300px;
    padding: 12px;
    border: none;
    border-radius: 6px;
    margin: 20px 0;
    font-weight: 800;
    font-size: 1.1rem;
}

.form_body .login{
    background-color: #166FE5;
    color: #fafafa;
}

.form_body .signup{
    background-color: #42b72a;
    color: #fafafa;
}

.form_body hr{
    margin: 22px 0;
}

.form_body a{
    color: #1877f2;
    text-decoration: none;
},

In this post, I’m going to show you how to make a simple Facebook Login Form UI using Only HTML and CSS.

 

First of all create a new project folder and add two files, one for the HTML and one for the CSS and then add this code

index.html

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Facebook</title>
    <link rel=“stylesheet” href=“main.css”>
</head>
<body>
    <div class=“form_body”>
        <h1>facebook</h1>
        <input type=“email” placeholder=“Type your email” ><br>
        <input type=“password” placeholder=“Type your Password” ><br>
        <button class=“login”>Login</button><br>
        <a href=“#”>Forget your password ?</a>
        <hr>
        <button class=“signup”>Signup</button>
    </div>
</body>
</html>

main.css

@import url(‘https://fonts.googleapis.com/css2?family=PT+Sans’);
*{
    margin0;
    padding0;
    outline0;
    font-family‘PT Sans’sans-serif;
}

body{
    background-color#F0F2F5;
    

    }

.form_body{
    background-color#fff;
    padding12px;
    border-radius8px;
    box-shadow0 3px 6px rgba(21,21,21,0.3);
    positionabsolute;
    left50%;
    top50%;
    transformtranslate(-50%,-50%);
    width400px;
    text-aligncenter;
}
.form_body h1{
    color:#1877F2 ;
    font-weightbold;
    font-size3.2rem;
}
.form_body input{
    margin12px 0;
    padding12px;
    width300px;
    border1px solid #dddfe2;
    color#1d2129;
    vertical-alignmiddle;
    border-radius6px;
    font-size17px;
   
}
.form_body button{
    width300px;
    padding12px;
    bordernone;
    border-radius6px;
    margin20px 0;
    font-weight800;
    font-size1.1rem;
}
.form_body .login{
    background-color#166FE5;
    color#fafafa;
}
.form_body .signup{
    background-color#42b72a;
    color#fafafa;
}
.form_body hr{
    margin22px 0;
}
.form_body a{
    color#1877f2;
    text-decorationnone;
}

,