How to Create Facebook Landing Page Using HTML and CSS Only.
Tags: html, css, javascript
Published: 2021-07-09 07:52:26

![Facebook Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8kfunbc4wwa01xyuklx.png)

Hello Everyone, In this Post We Will be Seeing How to Create Facebook Landing Page Using HTML and CSS only.

Here is The Live Link of Landing Page https://ajaysharma12799.github.io/Facebook-Landing-Page/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/



Steps to Create :-
1. Choose Any Text Editor (VSCode Recommended).
2. Setup Directory Structure.
![Directory Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g771fuu24u62me5m26av.png)
3. Use Below HTML and CSS Code To Build Your Page.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook - Login or Signup</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <div class="text__wrapper">
            <div class="heading">
                <img src="./img/facebook.svg" alt="Facebook">
            </div>
            <p class="description">Facebook helps you connect and share with the people in your life.</p>
        </div>
        <div class="form__wrapper">
            <form class="form">
                <div>
                    <input type="text" name="Email_Mobile" id="Email_Mobile" placeholder="Email Address or Phone Number">
                </div>
                <div>
                    <input type="password" name="Password" id="Password" placeholder="Password">
                </div>
                <div>
                    <button type="submit" class="loginButton btn">Login</button>
                </div>
            </form>
            <a href="#" class="forgotPassword">Forgotten Password?</a>
            <button type="submit" class="registerButton btn">Create New Account</button>
        </div>
    </div>
</body>
</html>
```
```
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
:root {
    --primaryColor: rgb(25,119,242);
    --buttonColor: rgb(66,183,41);
    --bodyColor: rgb(239,242,245);
    --textColor: rgb(27,30,33);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--bodyColor);
    font-family: 'Roboto', sans-serif;

}
a {
    text-decoration: none; 
    color: var(--buttonColor);   
}
button {
    border: none;
}
a:hover {
    text-decoration: underline;
}
input {
    padding: 7px;
    margin: 2% 0;
    border: 1px solid lightgray;
    border-radius: 5px;
    width: 200px;
}
input::placeholder {
    color: gray;
    font-weight: lighter;
    font-size: 10px;
}
.btn {
    width: 100%;
    border-radius: 3px;
    color: #fff;
    padding: 6px;
}
#container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
}
.text__wrapper {
    width: 37vw;
    margin-right: 3%;
    margin-top: 5%;
}
.heading {
    position: relative;
    top: -50%;
    left: -7%;
}
.heading > img {
    width: 350px;
}
.description {
    color: var(--textColor);
    font-weight: 900;
    font-size: 30px;
    float: left;
}
.form__wrapper {
    width: 300px;
    height: 250px;
    margin-top: 5%;
    background-color: #fff;
    padding: 5% 2% 5% 2%;
    border-radius: 5px;
    line-height: 150%;
    display: grid;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form {
    margin-top: -18%;
    margin-bottom: 7%;
}
.loginButton {
    background-color: var(--primaryColor); 
    color: #fff; 
    margin-top: 2%;
} 
.forgotPassword {
    color: var(--primaryColor);
    font-size: 10px;
    text-align: center;
}
.registerButton {
    background-color: var(--buttonColor); 
    color: #fff; 
    font-size: 10px;
    width: 60%;
    padding: 8px;
    font-weight: bold;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 3%;
}
/* Responsive Design */

/* Small Mobile Device */
@media (max-width: 320px) {
    #container {
        display: grid;
        margin-top: 10vh;
        justify-content: center;
    }
    .text__wrapper {
        width: 100%;
        margin-right: 3%;
        margin-top: -5%;
        text-align: center;
        margin: 0 auto;
    }
    .heading > img {
        width: 300px;
        position: relative;
        left: 8%;
    }
    .description {
        margin-bottom: 10%;
    }
    .form__wrapper {
        margin: 0 auto;
        height: 200px;
        background-color: #fff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .form {
        margin-top: -5%;
    }
    .loginButton {
        background-color: var(--primaryColor); 
        color: #fff; 
        margin-top: 2%;
    } 
    .forgotPassword {
        color: var(--primaryColor);
        font-size: 10px;
        text-align: center;
    }
    .registerButton {
        background-color: var(--buttonColor); 
        color: #fff; 
        font-size: 10px;
        width: 60%;
        padding: 8px;
        font-weight: bold;
        margin: 0 auto;
    }
}

/* Average Mobile Devices */
@media (min-width: 320px) and (max-width: 480px) {
    #container {
        display: grid;
        margin-top: 10vh;
        justify-content: center;
    }
    .text__wrapper {
        width: 100%;
        margin-right: 3%;
        margin-top: -5%;
        text-align: center;
    }
    .heading > img {
        width: 350px;
        position: relative;
        left: 8%;
    }
    .description {
        margin-bottom: 5%;
    }
    .form__wrapper {
        width: 220px;
        height: 200px;
        margin-left: 3%;
        background-color: #fff;
        padding: 5% 2% 5% 2%;
        border-radius: 5px;
        margin: 0 auto;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .form {
        margin-top: -8%;
    }
    .loginButton {
        background-color: var(--primaryColor); 
        color: #fff; 
        margin-top: 2%;
    } 
    .forgotPassword {
        color: var(--primaryColor);
        font-size: 10px;
        text-align: center;
    }
    .registerButton {
        background-color: var(--buttonColor); 
        color: #fff; 
        font-size: 10px;
        width: 60%;
        padding: 8px;
        font-weight: bold;
        margin: 0 auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }
}

/* Tablet and IPads */
@media (min-width: 481px) and (max-width: 768px) {
    #container {
        display: grid;
        margin-top: 10vh;
        justify-content: center;
    }
    .text__wrapper {
        width: 100%;
        margin-right: 3%;
        margin-top: -5%;
        text-align: center;
    }
    .heading > img {
        width: 350px;
        position: relative;
        left: 8%;
    }
    .description {
        margin-bottom: 5%;
    }
    .form__wrapper {
        width: 220px;
        height: 220px;
        margin-left: 3%;
        background-color: #fff;
        padding: 5% 2% 5% 2%;
        border-radius: 5px;
        margin: 0 auto;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .form {
        margin-top: -8%;
    }
    .loginButton {
        background-color: var(--primaryColor); 
        color: #fff; 
        margin-top: 2%;
    } 
    .forgotPassword {
        color: var(--primaryColor);
        font-size: 10px;
        text-align: center;
    }
    .registerButton {
        background-color: var(--buttonColor); 
        color: #fff; 
        font-size: 10px;
        width: 60%;
        padding: 8px;
        font-weight: bold;
        margin: 0 auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }
}
```