facebook home page design template

Tags | facebook homepage design template, facebook home page design code, facebook home page design download, facebook home page HTML code, facebook home page CSS template, facebook home page template HTML

Facebook Home Page Design

Facebook is one the top and most visited social networking website in the world. Every beginner and experienced website developer wanted to know how to design facebook style home page with easy steps. In this tutorial, I am going to explain a simple HTML and CSS coding for creating facebook style home page as well as registration and login option.

Facebook Home Page Body Sections

  • fb-header: This section basically divided into two sections left and right section. I have placed the logo on left section and Login and Password on the right section.
  • fb-body: This section basically divided into two sections left & right section. I have placed Map image on left section and Registration form on the right section.
  • fb-footer: In this section, I have used language selection link, Copyright link and Designed By link.

This example can help you to build a clone of facebook home page. In this example, I am using HTML, CSS code to design facebook home page. Find the source code below:-

<html>
<head>
    <link href="Style.css" rel="stylesheet" />
    <title>Facebook home page template html</title>
</head>
<body>
    <div id="header_wrapper">
        <div id="header">
            <form action="post">
                <li>Email or Phone<br><input type="text" name="email"></li>
                <li>Password<br><input type="password" name="password"><br><a href="">Forgotten account?</a></li>
                <li><input type="submit" name="login" value="Log In"></li>
            </form>
        </div>
    </div>

    <div id="wrapper">
        <div id="div1">
        </div>
        <div id="div2">
            <h1>Create an account</h1>
            <p>It's free and always will be.</p>
            <li><input type="text" placeholder="First Name" id="Firstname">
                <input type="text" placeholder="Surname" id="surname"></li>
            <li><input type="text" placeholder="Mobile number or email"></li>
            <li><input type="password" placeholder="New password"></li>
            <p>Birthday</p>
            <li>
                <select><option>Day</option></select>
                <select><option>Month</option></select>
                <select><option>Year</option></select>
                <a href="">Why do I need to provide my date of birth?</a>
            </li>

            <li><input type="radio">Female <input type="radio">Male</li>
            <li id="terms">By clicking Create an account, you agree to our <a href="">Terms</a> and that <br>you have read our <a href="">Data Policy</a>, including our <a href="">Cookie Use</a>.</li>
            <li><input type="submit" value="Create an account"></li>
            <li id="create_page"><a href="">Create a Page</a> for a celebrity, band or business.</li>
        </div>
    </div>
    <div id="footer_wrapper">
        <div id="footer1">
            English (UK) <a href="">हिन्दी</a><a href="">ਪੰਜਾਬੀ</a><a href=""> اردو</a><a href="">தமிழ்</a><a href="">বাংলা</a><a href="">मराठी</a><a href="">తెలుగు</a><a href="">ગુજરાતી</a><a href="">ಕನ್ನಡ</a><a href="">മലയാളം</a>
        </div>
        <div id="footer2">
            <a href="#">Sign Up</a><a href="#">Log In</a><a href="#">Messenger</a><a href="#">DotNetTec</a><a href="#">Mobile</a><a href="#">Find Friends</a>
            <a href="#">Badges</a><a href="#">People</a><a href="#">Pages</a><a href="#">Places</a><a href="#">Games</a><a href="#">Locations</a>
            <a href="">Celebrities</a><a href="">Groups</a><a href="">Moments</a><a href="">About</a>
            <a href="">Create Advert</a><a href="">Create Page</a><a href="">Developers</a>
            <a href="">Careers</a><a href="">Privacy</a><a href="">Cookies</a><a href="">Ads</a><a href="">Terms</a><a href="">Help</a>
        </div>
    </div>
</body>
</html>

-- Style.css --

body {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    background: linear-gradient(white, #D3D8E8);
}

#header_wrapper {
    width: 100%;
    min-width: 980px;
    background-color: #4c66a4;
}

#header {
    width: 980px;
    margin: 0px auto;
    padding: 0px;
    height: 85px;
}

    #header li {
        list-style-type: none;
        float: left;
        text-align: left;
        color: white;
    }

    #header #sitename {
        margin-top: 25px;
    }

        #header #sitename a {
            color: white;
            text-decoration: none;
            font-size: 30px;
            font-weight: 900;
        }

    #header form {
        margin-top: 15px;
        float: right;
    }

        #header form li {
            font-size: 13px;
            margin-left: 15px;
        }

            #header form li a {
                color: #A9BCF5;
                text-decoration: none;
            }

        #header form input[type="text"] {
            margin-top: 3px;
            margin-bottom: 3px;
            width: 150px;
            border: 1px solid #08298A;
            height: 25px;
            padding-left: 3px;
        }

        #header form input[type="password"] {
            margin-top: 3px;
            margin-bottom: 3px;
            width: 150px;
            border: 1px solid #08298A;
            height: 25px;
            padding-left: 3px;
        }

        #header form input[type="submit"] {
            height: 25px;
            margin-top: 20px;
            background-color: #084B8A;
            color: white;
            border: 1px solid #08298A;
        }

#wrapper {
    margin: 0 auto;
    padding: 0px;
    text-align: center;
    width: 980px;
}

    #wrapper div {
        float: left;
        font-family: helvetica, arial, sans-serif;
    }

    #wrapper #div1 {
        margin-top: 30px;
        width: 590px;
        text-align: left;
    }

        #wrapper #div1 p {
            font-size: 20px;
            font-family: arial;
            font-weight: bold;
            margin: 0px;
            color: #0e385f;
        }

    #wrapper #div2 {
        margin-top: 10px;
        width: 390px;
        text-align: left;
    }

        #wrapper #div2 h1 {
            margin: 0px;
            font-size: 37px;
            color: #2E2E2E;
        }

        #wrapper #div2 p {
            font-size: 18px;
            color: #2E2E2E;
        }

        #wrapper #div2 li {
            list-style-type: none;
            margin-top: 10px;
        }

            #wrapper #div2 li #firstname {
                width: 49%;
            }

            #wrapper #div2 li #surname {
                margin-left: 2%;
                width: 49%;
            }

            #wrapper #div2 li input[type="text"] {
                width: 100%;
                height: 40px;
                border-radius: 5px;
                padding-left: 10px;
                font-size: 18px;
                border: 1px solid #BDBDBD;
            }

            #wrapper #div2 li input[type="password"] {
                width: 100%;
                height: 40px;
                border-radius: 5px;
                padding-left: 10px;
                font-size: 18px;
                border: 1px solid #BDBDBD;
            }

            #wrapper #div2 li select {
                padding: 4px;
                float: left;
            }

            #wrapper #div2 li a {
                margin-left: 10px;
                width: 150px;
                color: #045FB4;
                text-decoration: none;
                font-size: 11px;
                display: inline-block;
                vertical-align: middle;
                line-height: 15px;
            }

                #wrapper #div2 li a:hover {
                    text-decoration: underline;
                }

        #wrapper #div2 li {
            color: #2E2E2E;
            font-size: 18px;
        }

        #wrapper #div2 #terms {
            color: #424242;
            font-size: 11px;
        }

            #wrapper #div2 #terms a {
                display: inline;
                margin: 0px;
            }

        #wrapper #div2 li input[type="submit"] {
            width: 205px;
            height: 45px;
            text-align: center;
            font-size: 19px;
            margin-top: 10px;
            margin-bottom: 10px;
            font-family: 'Freight Sans Bold', helvetica, arial, sans-serif !important;
            font-weight: bold !important;
            background: linear-gradient(#67ae55, #578843);
            background-color: #69a74e;
            box-shadow: inset 0 1px 1px #a4e388;
            border-color: #3b6e22 #3b6e22 #2c5115;
            border: 1px solid;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            position: relative;
            text-shadow: 0 1px 2px rgba(0,0,0,.5);
        }

        #wrapper #div2 #create_page {
            color: #424242;
            font-size: 13px;
            font-weight: bold;
        }

            #wrapper #div2 #create_page a {
                display: inline;
                margin: 0px;
                font-size: 13px;
            }

#footer_wrapper {
    width: 100%;
    clear: both;
    float: left;
    margin-top: 30px;
    min-width: 995px;
    background-color: white;
    text-align: left;
}

#footer1 {
    width: 980px;
    margin: 0px auto;
    padding: 0px;
    border-bottom: 1px solid #E6E6E6;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #848484;
}

    #footer1 a {
        color: #365899;
        display: inline;
        margin-left: 10px;
        text-decoration: none;
    }

        #footer1 a:hover {
            text-decoration: underline;
        }

#footer2 {
    width: 980px;
    margin: 0px auto;
    padding: 0px;
    font-size: 12px;
    color: #848484;
}

    #footer2 a {
        color: #365899;
        display: inline-block;
        margin: 5px;
        margin-left: 0px;
        min-width: 80px;
        text-decoration: none;
    }

        #footer2 a:hover {
            text-decoration: underline;
        }

Download Source Code

Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

LEAVE A REPLY

Please enter your comment!
Please enter your name here