Categories: CSSFacebookJquery

Facebook Style Homepage Design with Registration Form, Login Form using CSS3

Every web designer knows that Facebook is the great place to learn UI design. Because their design is more attractive & user friendly. I
n my experience, most of the clients are asking to design their networking sites like facebook only.
So In this post I am going to explain how to create a facebook style homepage with registration form & login form using css3 & HTML5

CSS Code

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 {
	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 {
#logo {
	float: left;
	height: 70px;
	position: relative;
	width: 160px;
#logo a {
	position: absolute;
	top: 20px;
	font-size:23px; font-weight:bold; color:#FFF;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

#header-main-right {
	float: right;
	height: 68px;
	position: relative;
#header-main-right-nav {
	padding: 4px 6px 4px 4px;
	position: absolute;
	right: 0;
#login_form .inputtext {
	background-color: #FFFFFF;
	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

<!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">
<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" />
<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">
              <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>
                  <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>
<!-- 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 class="loginform">
      <form id="login" action="" method="post">
          <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" />
          <input type="text" id="email" name="email" placeholder="Your Email" value="" class="radius" />
          <input type="text" id="remail" name="remail" placeholder="Re-enter Email" class="radius" />
          <input type="password" id="password" name="password" placeholder="New Password" class="radius" />
          <button class="radius title" name="signup">Sign Up for Facebook</button>

Please don’t forget to share and subscribe to latest updates of the blog.


Marimuthu :