Facebook login css

Facebook is the most popular social networking website in the world. Every developer wants to know about how to design Facebook style home page and login page using Html and CSS. So, in this blog post, I will share facebook login page html code and html code for the Facebook home page.

Subscribe to our blog and get the latest posts delivered right to your inbox.

Keep reading onGmail Login Page Html Code,How to create a transparent login form using Html and Css

HTML Code for Facebook Home Page

This example can help you to create a clone of the Facebook home page. There are basically 3 sections to design Facebook style homepage.

fb-header: Its divided into 2 sections left and right section. I have placed the logo on the left section and login and password in the right section.

fb-body: Its also divided into two sections left and right section. I have placed Map image on the left section and the registration form on the right section.

fb-footer: In this section, I have used the language selection link, Copyright link, and Designed By link.

Find the below source code:-

<html> <head> <link href="Style.css" rel="stylesheet" /> <title>facebook home page html code</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"> <h2>Create an account</h2> <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>

Download Source Code

Conclusion

I hope you liked this article on Facebook Style Homepage and Login Page Design using Html and CSS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Sharing is Caring :)