Facebook Login page using HTML & CSS

Post author:Publisher
Post published:October 26, 2023
Post comments:0 Comments
Reading time:292 mins read

Recreate the familiar Facebook login page from scratch with HTML and CSS. In this project, you’ll delve into web design and front-end development by building a visually appealing and functional Facebook login page.

Whether you’re a beginner looking to learn web development or an aspiring designer seeking to hone your skills, this step-by-step guide will help you understand the fundamentals of HTML and CSS while emulating a popular platform. Join us as we embark on a creative journey to replicate the Facebook login experience, right in your browser!

Index.html


<!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>Sign UP For Facebook | Facebook </title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/e768f44d60.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <section class="fb-header">
        <div class="fb-header-container">
            <div class="logo">
                <h1>Facebook</h1>
            </div>
            <div class="fb-log-in">
                <a href="#">Log in to Exiting Account</a>
            </div>
        </div>
    </section>


    <section class="acc-info">
        <div class="acc-wrapper">
            <div class="acc-header">
                <h1>Create a new account</h1>
                <h3>It's quick and easy.</h3>
            </div>
            <div class="acc-input">
                <form action="">
                    <input type="text" placeholder="First Name">
                    <input type="text" placeholder="Sur Name">
                    <input type="text" placeholder="Mobile number or email address ">
                    <input type="text" placeholder="New Password">

                    <label for="">
                        <h3>Date of birth <i class="fas fa-question-circle"></i></h3>
                        <select name="" id="">
                            <option value="">01</option>
                            <option value="">02</option>
                            <option value="">03</option>
                            <option value="">04</option>
                            <option value="">05</option>
                            <option value="">06</option>
                            <option value="">07</option>
                            <option value="">08</option>
                            <option value="">09</option>
                            <option value="">10</option>
                            <option value="">11</option>
                            <option value="">12</option>
                            <option value="">13</option>
                            <option value="">14</option>
                            <option value="">15</option>
                            <option value="">16</option>
                            <option value="">17</option>
                            <option value="">18</option>
                            <option value="">19</option>
                            <option value="">20</option>
                            <option value="">21</option>
                            <option value="">22</option>
                            <option value="">23</option>
                            <option value="">24</option>
                            <option value="">25</option>
                            <option value="">26</option>
                            <option value="">27</option>
                            <option value="">28</option>
                            <option value="">29</option>
                            <option value="">30</option>
                            <option value="">31</option>
                        </select>

                        <select name="" id="">
                            <option value="">January</option>
                            <option value="">February</option>
                            <option value="">March</option>
                            <option value="">April</option>
                            <option value="">May</option>
                            <option value="">June</option>
                            <option value="">July</option>
                            <option value="">August</option>
                            <option value="">September</option>
                            <option value="">October</option>
                            <option value="">November</option>
                            <option value="">December</option>
                        </select>

                        <select name="" id="">
                            <option value="">2000</option>
                            <option value="">2001</option>
                            <option value="">2002</option>
                            <option value="">2003</option>
                            <option value="">2004</option>
                            <option value="">2005</option>
                            <option value="">2006</option>
                            <option value="">2007</option>
                            <option value="">2008</option>
                            <option value="">2009</option>
                            <option value="">2010</option>
                            <option value="">2011</option>
                            <option value="">2012</option>
                            <option value="">2013</option>
                            <option value="">2014</option>
                            <option value="">2015</option>
                            <option value="">2016</option>
                            <option value="">2017</option>
                            <option value="">2018</option>
                            <option value="">2019</option>
                            <option value="">2020</option>
                            <option value="">2021</option>
                        </select>
                    </label>


                    <label for="">
                        <h3>Gender <i class="fas fa-question-circle"></i></span></h3>
                        <input type="radio" name="gender"> <span>Male</span>
                        <input type="radio" name="gender"> <span>Female</span>
                        <input type="radio" name="gender"> <span>Custom
                    </label>
                </form>
            </div>

            <div class="fb-input-disc">
                By clicking Sign Up, you agree to our <span class="input-highLight">Terms, Data Policyclass</span> and
                <span class="input-highLight">Cookie Policy</span> You may receive SMS notifications from us and can opt
                out at any time.
            </div>

            <div class="fb-input-button">
                <input type="submit" value="Sign Up">
            </div>

        </div>
    </section>

    <section class="fb-footer">
        <div class="footer-wrapper">
            <div class="footer-head">
                <ul>
                    <li><a href="#" class="active">English (UK)</a></li>
                    <li><a href="#">বাংলা</a></li>
                    <li><a href="#">অসমীয়া</a></li>
                    <li><a href="#">हिन्दी</a></li>
                    <li><a href="#">Bhasa Indonesia</a></li>
                    <li><a href="#">नेपाली</a></li>
                    <li><a href="#">中文(简体)</a></li>
                    <li><a href="#">العربية</a></li>
                    <li><a href="#">Bahasa Melayu</a></li>
                    <li><a href="#">Español</a></li>
                    <li><a href="#">Português (Brasil)</a></li> <i class="fas fa-plus-circle"></i>

                </ul>
            </div>
            <div class="footer-bottom">
                <ul>
                    <li><a href="#">Sign Up</a></li>
                    <li><a href="#">Log In</a></li>
                    <li><a href="#">Messenger</a></li>
                    <li><a href="#">Facebook Lite</a></li>
                    <li><a href="#">Watch</a></li>
                    <li><a href="#">People</a></li>
                    <li><a href="#">Pages</a></li>
                    <li><a href="#">Page categories</a></li>
                    <li><a href="#">Places</a></li>
                    <li><a href="#">Games</a></li>
                    <li><a href="#">Locations</a></li>
                    <li><a href="#">Marketplace</a></li>
                    <li><a href="#">Facebook Pay</a></li>
                    <li><a href="#">Groups</a></li>
                    <li><a href="#">Jobs</a></li>
                    <li><a href="#">Oculus</a></li>
                    <li><a href="#">Portal</a></li>
                    <li><a href="#">Instagram</a></li>
                    <li><a href="#">Local</a></li>
                    <li><a href="#">Instagram</a></li>
                    <li><a href="#">Fundraisers</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Voting Information Centre</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Create ad</a></li>
                    <li><a href="#">Create Page</a></li>
                    <li><a href="#">Developers</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Cookies</a></li>
                    <li><a href="#">AdChoices</a></li>
                    <li><a href="#">Terms</a></li>
                    <li><a href="#">Help</a></li>

                </ul>
                <b>Facebook &copy 2021</b>
            </div>
        </div>
    </section>


</body>

</html>

Style.css


*{
    margin: 0;
    padding: 0;
}
body{
    font-family: Montserrat;
    box-sizing: border-box;
}
.fb-header{
    background: #46629E;
    overflow: hidden;
}
.fb-header-container{
    padding: 15px;
    overflow: hidden;
    width: 70%;
    margin: auto;
}
.logo h1{
    color: rgb(252, 252, 252);
    float: left;
    text-align: center;
    text-transform: lowercase;
    font-size: 45px;

}
.fb-log-in{
    text-align: center;
    margin-top: 5px;
    float: right;
    padding: 10px;
}
.fb-log-in a{
    color: #fff;
    text-decoration: none;
    border: 1px solid #244180;
    background: #375492;
    padding: 8px;
    font-size: 15px;
    font-weight: bold;
}
.fb-log-in a:hover{
    background: #3357a5;
    transition: .5s;
}


/* ==================
-----  Account Info Started
===================*/

.acc-info{
    background: #EBEDF0;
}
.acc-wrapper{
    width: 30%;
    margin: auto;
}
.acc-header{
    overflow: hidden;;
}
.acc-header h1{
    font-size: 40px;
    margin: 15px 0;
    font-weight: 700;
    color: #333;
}
.acc-header h3{
    font-weight: normal;
    font-family: arial;
    font-size: 22px;
    color: rgb(112, 110, 110);
    margin-bottom: 15px;
}

.acc-input form input{
    width: 95%;
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;;
}
.acc-input form input:first-child{
    width: 44%;
    float: left;
    margin-right: 5px;
}
.acc-input form input:nth-child(2){
    width: 44.5%;
    float: left;
    margin-right: 0;
}

form input {
    padding: 10px;
    font-size: 18px;
    border: none;
    outline: none;
}

.acc-input form h3{
    color: gray;
    font-weight: none;
    font-family: arial;
    font-size: 16px;
    margin: 10px 0;
}

.acc-input select{
    padding: 5px;
    border: 1px solid #ddd;
}

.acc-input label input{
    width:20px !important;
    float: none !important;
}
.acc-input label span{
    font-size: 20px;
    color: #333;
    margin-right: 20px;
    font-weight: normal;
    font-family: arial;
}

.fb-input-disc{
    font-size: 11px;
    font-weight: normal;
    font-family: arial;
    width: 70%;
    color: gray;
    padding: 10px 0px;
}
.input-highLight{
    color: rgb(2, 128, 179);
}

.fb-input-button{
    padding: 15px 0;
    padding-bottom: 30px;
}
.fb-input-button input{
    background: #69a74e;
    color: white;
    padding: 8px 60px;
    font-size: 20px;
    font-family: arial;
    border: 1px solid black;
    outline: none;
    font-weight: bold;
    border-radius: 5px;
}
.fb-input-button input:hover{
    background: linear-gradient(#76b45b,#69a74e)
}

.fa-question-circle{
    color: rgb(122, 122, 122);
    font-size: 16px;
}

.fb-footer{
    margin-top: 50px;
}
.footer-wrapper{
    width: 70%;
    margin: auto;
}
.footer-head ul{
    width: 70%;
    list-style: none;
    padding: 10px 0px;
}
.footer-head ul li{
    display: inline-block;
    padding-right: 5px;

}
.footer-head ul li a{
    color: rgb(16, 75, 109);
    font-size: 11px;
    text-decoration: none;
    font-family: arial;

}
.fa-plus-circle{
    color: rgb(16, 75, 109);
}
.footer-bottom ul{
    width: 100%;
    list-style: none;
    border-top: 1px solid rgb(192, 191, 191);
    padding-top: 10px;
    padding-bottom: 20px;
}
.footer-bottom ul li{
    display: inline-block;
    padding-right: 15px;
}
.footer-bottom ul li a{
    color: rgb(16, 75, 109);
    font-size: 12px;
    font-family: arial;
    text-decoration: none;
}
.active{
    color: gray;
}
b{
    font-weight: normal;
    color: gray;
    font-size: 12px;
    font-family: arial;
    padding-bottom: 50px;
}

Author
Recent Posts

Publisher @ideasorblogs

Latest posts by Publisher (see all)

Age calculator using Javascript, HTML & CSS - October 28, 2023
Navigation bar using HTML & CSS - October 26, 2023
Calculator using HTML, CSS & JS - October 26, 2023

Tags: HTMl, Programming, Projects

Publisher

Publisher @ideasorblogs

Leave a Reply Cancel reply