Create Facebook Login Page Using Html & Css

Facebook Home Page Body Sections:

In this tutorials I have used three body sections to create Facebook style home page.
1. fb-header: This section basically divided in two sections left and right section. I have placed logo on left section and Login and Password on right section.

2. fb-body: This section basically divided in two sections left and right section. I have placed Map image on left section and Registration form on right section.

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

<div id="div-regForm">

<div class="form-title">Sign Up</div>
<div class="form-sub-title">It's free and anyone can join</div>

<form id="regForm" action="submit.php" method="post">
<table>
<tbody>
<tr>

<td><label for="fname">First Name:</label></td>
<td><div class="input-container">
<input name="fname" id="fname" type="text" />
</div></td>

</tr>
<tr>

<td><label for="lname">Last Name:</label></td>
<td><div class="input-container">
<input name="lname" id="lname" type="text" />
</div></td>

</tr>
<tr>

<td><label for="email">Your Email:</label></td>
<td><div class="input-container">
<input name="email" id="email" type="text" />
</div></td>

</tr>
<tr>

<td><label for="pass">New Password:</label></td>
<td><div class="input-container">
<input name="pass" id="pass" type="password" />
</div></td>

</tr>
<tr>

<td><label for="sex-select">I am:</label></td>
<td>
<div class="input-container">
<select name="sex-select" id="sex-select">
<option value="0">Select Sex:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>

</div>
</td>
</tr>
<tr>
<td><label>Birthday:</label></td>
<td>

<div class="input-container">

<select name="month">
<option value="0">Month:</option>
<?=generate_options(1,12,'callback_month')?>
</select>

<select name="day">
<option value="0">Day:</option>
<?=generate_options(1,31)?>
</select>

<select name="year">
<option value="0">Year:</option>
<?=generate_options(date('Y'),1900)?>
</select>

</div>

</td>

</tr>
<tr>

<td>&nbsp;</td>
<td><input type="submit" class="greenButton" value="Sign Up" />
<img id="loading" src="img/ajax-loader.gif" alt="working.." />
</td>

</tr>

</tbody>
</table>

</form>

<div id="error">
&nbsp;
</div>

</div>

The CSS

In order to convert our plain XHML coding into something eye-catching and facebook-likey, we need some serious styling.

/* Page styles */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
}

body{
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;

font-size:11px;
}

/* Form styles */
input,select{
padding:3px;
color:#333333;

border:1px solid #96A6C5;
margin-top:2px;
width:200px;
font-size:11px;
}

select{
width:auto;
padding:2px;
}

.formline{
padding:3px;
}

label{
font-size:11px;
text-align:right;
}

table{
width:300px;
}

td{
font-size:11px;
}

.input-container{
padding:1px;
}

#div-regForm,.registered{
border:3px solid #eeeeee;
padding:15px;

background:url(img/bg.jpg) repeat-x #cbd4e4;
color:#203360;

margin:30px auto 40px auto;
width:400px;
}

.form-title,
.form-sub-title{
font-size:20px;

font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
font-size:20px;
font-weight:bold;
}

.form-sub-title{
font-weight:normal;
padding:6px 0 15px 0;
}

.greenButton {
width:auto;
margin:10px 0 0 2px;
padding:3px 4px 3px 4px;
color:white;
background-color:#589d39;
outline:none;
border:1px solid #006600;
font-weight:bold;
}

.greenButton:active {
background-color:#006600;
padding:4px 3px 2px 5px;
}

#loading {
left:10px;
position:relative;
top:3px;
visibility:hidden;
}

#error {
background-color:#ffebe8;
border:1px solid #dd3c10;
padding:7px 3px;
text-align:center;
margin-top:10px;
visibility:hidden;
}

Written By:

Sarmad Gardezi A blog scientist by Mind and a Passionate Blogger by heart. Sarmad is Freelancer, Entrepreneur and Google Apps Scripts Developer from Islamabad, Pakistan.

Subscribe to Email Newsletter