Every web designer knows that Facebook is the great place to learn UI design. Because their design is more attractive & user friendly. Facebook login and registration form is very clean and easy to use. People are keeping their website very simple. They wanted to keep both login and registration form in a single page instead of multiple urls. So I thought Facebook Style Home Page Design will help them to create a single page for both login and registration forms. In this Tutorial we will see how to create Facebook Style Login & Registration Page in HTML & CSS.
In my experience, most of the clients are asking to design their networking sites like facebook only.
Checkout my popular post on Bootstrap Modal Popup forms
So In this post I am going to explain how to create a facebook style homepage with registration form & login form using css3 & HTML5
CSS3 Code for Facebook Style Login Page Template
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body.login { background: url(bg.jpg); }
h2 { font-size: 30px; line-height:38px; font-weight:normal; }
.loginbox { background: #FBFCFD; padding: 10px; width: 490px; margin: 4% auto 0 auto; position: relative; }
.loginboxinner {
background: #FBFCFD; padding: 5px; position: relative; border: 1px solid #FBFCFD;
-moz-box-shadow: inset 0 1px 0 #FBFCFD; -webkit-box-shadow: inset 0 1px 0 #FBFCFD; box-shadow: inset 0 1px 0 #FBFCFD;
}
.loginheader { height: 20px; }
.loginform { margin: 4px auto; text-align:center; }
.loginbox h1 { font-size: 30px; letter-spacing: 1px; color: #555; font-weight: normal; padding-top: 10px; }
.loginbox p { margin: 7px 0 5px 0; }
.loginbox label { display: block; color: #666; letter-spacing: 1px; font-size: 18px; }
.loginbox input.mini { width:195px; }
.loginbox input {
padding: 12px 10px; color: #ccc;
font-family: Arial, Helvetica, sans-serif; margin-top: 8px; font-size: 15px; border: 1px solid #ccc; width: 420px; outline: none;
}
.loginbox button {
background: #5870A8; background-image:-webkit-linear-gradient(top, #637BAD, #4F67A4); padding: 10px 20px; font-size: 18px; border: 1px solid #1D3871; letter-spacing: 1px; color: #fff; width: 440px; line-height:30px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-moz-box-shadow: 1px 1px 3px #1D3871; -webkit-box-shadow: 1px 1px 3px #1D3871; box-shadow: 1px 1px 3px #1D3871; cursor: pointer;
}
.radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.radius1 { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#8E989E; line-height:28px; font-weight:normal; text-align:center; font-size:16px; }
@media screen and (max-width: 430px) {
body { font-size: 11px; }
button, input, select, textarea { font-size: 11px; }
.loginbox { width: auto; margin: 10px; }
.loginbox input { width: 95%; }
.loginbox button { width: 100%; }
}
#facebook-Bar {
background:#45619D;
border-bottom: 1px solid #0053A6;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.52);
min-width: 1000px;
width: 100%;
z-index: 1000;
}
#facebook-Frame {
margin-left:auto;
margin-right:auto;
max-width:1000px;
height:70px;
display:block;
}
/*-------LOGO-----------*/
#logo {
float: left;
height: 70px;
position: relative;
width: 160px;
}
#logo a {
position: absolute;
top: 20px;
font-size:23px; font-weight:bold; color:#FFF;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/*-------Login-----------*/
#header-main-right {
float: right;
height: 68px;
position: relative;
top:5px;
}
#header-main-right-nav {
padding: 4px 6px 4px 4px;
position: absolute;
right: 0;
}
#login_form .inputtext {
background-color: #FFFFFF;
height:16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
margin: 0;
padding: 5px 8px 5px 8px;
width: 166px;
border:1px solid #3A518A;
}
#login_form .inputtext:hover {
border-color: #A0A0A0 #B9B9B9 #B9B9B9;
border-image: none;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
#login_form table tr td {
padding: 0 0 0 5px;
}
#login_form table tr td label {
color: #fff;
cursor: pointer;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
padding-left: 1px;
text-align: left;
vertical-align: middle;
}
.fbbutton { border:1px solid #1D3871; width:94px; background-image:-webkit-linear-gradient(top, #637BAD, #4F67A4); font-size:14px; line-height:25px; font-weight:normal; color:#fff; }
HTML Code for Facebook Style Login Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Facebook Style Home Page Design - demo by w3lessons.info</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="login">
<!-- header starts here -->
<div id="facebook-Bar">
<div id="facebook-Frame">
<div id="logo"> <a href="http://w3lessons.info">W3lessons.info</a> </div>
<div id="header-main-right">
<div id="header-main-right-nav">
<form method="post" action="" id="login_form" name="login_form">
<table border="0" style="border:none">
<tr>
<td ><input type="text" tabindex="1" id="email" placeholder="Email or Phone" name="email" class="inputtext radius1" value=""></td>
<td ><input type="password" tabindex="2" id="pass" placeholder="Password" name="pass" class="inputtext radius1" ></td>
<td ><input type="submit" class="fbbutton" name="login" value="Login" /></td>
</tr>
<tr>
<td><label>
<input id="persist_box" type="checkbox" name="persistent" value="1" checked="1"/>
<span style="color:#ccc;">Keep me logged in</span></label></td>
<td><label><a href="" style="color:#ccc; text-decoration:none">forgot your password?</a></label></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<!-- header ends here -->
<div class="loginbox radius">
<h2 style="color:#141823; text-align:center;">Welcome to Facebook</h2>
<div class="loginboxinner radius">
<div class="loginheader">
<h4 class="title">Connect with friends and the world around you.</h4>
</div>
<!--loginheader-->
<div class="loginform">
<form id="login" action="" method="post">
<p>
<input type="text" id="firstname" name="firstname" placeholder="First Name" value="" class="radius mini" />
<input type="text" id="lastname" name="lastname" placeholder="Last Name" value="" class="radius mini" />
</p>
<p>
<input type="text" id="email" name="email" placeholder="Your Email" value="" class="radius" />
</p>
<p>
<input type="text" id="remail" name="remail" placeholder="Re-enter Email" class="radius" />
</p>
<p>
<input type="password" id="password" name="password" placeholder="New Password" class="radius" />
</p>
<p>
<button class="radius title" name="signup">Sign Up for Facebook</button>
</p>
</form>
</div>
<!--loginform-->
</div>
<!--loginboxinner-->
</div>
<!--loginbox-->
</body>
</html>
Please don’t forget to share and subscribe to latest updates of the blog.
Thanks!
View Live Demo
Hi, yes this piece of writing is truly pleasant and I have learned
lot of things from it regarding blogging. thanks.
Hey! Can u pls take a guide on me,cause making a pishing site is hard for me,can u pls teach me better with a video or a clip,showing how to create a pishing site?
Thank you!😁
If some one needs expert view on the topic of blogging then i
recommend him/her to visit this blog, Keep up the pleasant job.
nice
I like this post, enjoyed this one appreciate it for putting up.
i can’t download source
downloadded
how we can have this page on wordpress ??
thank you……….
sir how to create the html source code for facebook page
you can improve this also, in Facebook there are changing the background pick by time so you can put body background dynamically
please can you mail me
thats a amazing skill! can i use it for practice coding? ths bro.
Yes Mombu.. you can
Hy!
Can you help me please?
I’d like to quiq comment option for my wordpress site.
The idea:
Crate a link on homepage, the “leave me a comment” link for,the link name: quick comment.
When you click this, you can get a div which content is a facebook like comment system.
The comment form must be get gravatar picture and the comment form id must be “comment”,if possible get links meta datas,like facebook,and if you like add comment,must be register for my site(use the wordpress registration form).
This too big for me,but if you can know make tutorial for this, i’m very be beholden.
This very useful not just me,a lot of people.