Facebook Style Homepage and login page Design using HTML and CSS

POSTED

Facebook is one the top and most visited social networking website in the world. Every beginners 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. 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. Now i am going to display the output of our Facebook style home page.

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.

Facebook style Page Output:

Here is the output of the facebook style home page with registration and login page.

facebook-style-homepage

download download

Implementation of code:


index.html: This is the html file for front-end design. Here is the code of this file.

<html>
	
	<title>Facebook Style Homepage Design using HTML and CSS</title>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css" />
		<meta name="Description" content="Facebook Style Homepage Design with Login Form registration for using html and CSS"/>


	</head>
	<body>
		<div class="fb-header-base">
		</div>
		<div class="fb-header">
			<div id="img1" class="fb-header"><img src="facebook.png" /></div>
			<div id="form1" class="fb-header">Email or Phone<br>
			<input placeholder="Email" type="mail" name="name" /><br>
			<input type="checkbox" />keep me logged in</div>
			
			<div id="form2" class="fb-header">Password<br>
			<input placeholder="Password" type="password" name="password" /><br>
			Forgotten your password?
			</div>
			</div>
		</div>
		<input type="submit" class="submit1" value="login" />
		<div class="fb-body">
			<div id="intro1" class="fb-body">Facebook helps you connect and share with the <br>
			people in your life.</div>
			<div id="intro2" class="fb-body">Create an account</div>
			<div id="img2" class="fb-body"><img src="world.png" /></div>
			<div id="intro3" class="fb-body">It's free and always will be.</div>
			<div id="form3" class="fb-body">
				<input placeholder="First Name" type="text" id="namebox" name="name1" />
				<input placeholder="Last Name" type="text" id="namebox"  /> <br>
				<input placeholder="Emai" type="text" id="mailbox" /><br>
				<input placeholder="Re-enter email" type="text" id="mailbox"  /><br>
				<input placeholder="Password" type="password" id="mailbox"  /><br>
				<input type="date" id="namebox"  /><br><br>
				<input type="radio" id="r-b" name="sex" value="male" />Male
				<input type="radio" id="r-b" name="sex" value="female" />Female<br><br>
				<p id="intro4">By clicking Create an account, you agree to our Terms and that 
				you have read our Data Policy, including our Cookie Use.</p>
				<input type="submit" class="button2" value="Create an account" />
				<br><hr>
				<p id="intro5">Create a Page for a celebrity, band or business.</p>
				
			</div>
			
		</div>
		<div class="fb-body-footer">
				<div id="fb-body-footer-base" class="fb-body-footer">English (UK)<br><hr>
				Sign Up	Log In	&copy; www.coderglass.com &nbsp;&nbsp; Design by Varun Singh</div>
			</div>
	</body>
	
</html>


style.css: This file is used to set the every body part and other things on perfect postion.

body{
	background-image: url("grid.png");
	height:750px;
	
}
.fb-header-base{
	width:100%;
	height:90px;
	position:absolute;
	top:0;
	left:0;
	color:white;
	z-index:7;
	font-family:verdana;
	-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.fb-header{
	width:100%;
	height:90px;
	position:absolute;
	background:#3d5b99;
	top:0;
	left:0;
	color:white;
	z-index:7;
	font-family:verdana;
	
}
#img1{
	left:178px;
	height:50px;
	width:100px;
	top:25px;
}
#form1{
	left:750px;
	height:60px;
	width:180px;
	top:20px;
	font-family:verdana;
	font-size:12px;
}
#form2{
	left:940px;
	height:60px;
	width:250px;
	top:20px;
	font-family:verdana;
	font-size:12px;
}
.submit1{
	left:1130px;
	top:35px;
	background:#5b7bc0;
	color:white;
	position:fixed;
	z-index:20;
	height:22px;
	width:50px;
	cursor:pointer;
	

	
}
.fb-body{
	position:absolute;
	left:0px;
	top:90px;
	width:100%;
	height:645px;
	

}
#intro1{
	left:178px;
	top:20px;
	font-family:verdana;
	font-size:20px;
	color:#142170;
	height:75px;
	width:550px;
}
#intro2{
	left:750px;
	top:20px;
	font-family:verdana;
	font-size:30px;
	color:#000;
	font-weight:bold;
	height:75px;
	width:500px;
}
#img2{
	top:130px;
	left:178px;
	width:537px;
	height:195px;
}
#intro3{
	left:750px;
	top:70px;
	font-family:verdana;
	font-size:18px;
	color:#000;
	height:50px;
	width:300px;
}
#form3{
	top:120px;
	left:750px;
	font-family:verdana;
	font-size:20px;
	color:#142170;
	width:450px;
	height:495px;
	
}
#namebox{
	width:200px;
	height:40px;
	border-radius:5px 5px 5px 5px;
	background:white;
	padding:10px;
	font-size:18px;
	margin-top:8px;
	border-width: 1px;
	border-style:solid;
	border-color: gray;
}
#mailbox{
	width:408px;
	height:40px;
	border-radius:5px 5px 5px 5px;
	background:white;
	padding:10px;
	font-size:18px;
	margin-top:8px;
	border-width: 1px;
	border-style:solid;
	border-color: gray;
}
#r-b{
	font-size:12px;
	height:15px;
	width:15px;
}
.button2{
	width:250px;
	height:40px;
	left:750px;
	top:625px;
	background:green;
	font-family:verdana;
	font-size:18px;
	color:white;
	border-radius:5px 5px 5px 5px;
	border-width: 1px;
	border-style:solid;
	border-color: gray;
	cursor:pointer;
	outline:none;
	
}
#intro4{
	font-family:verdana;
	font-size:12px;
	color:gray;
	
}
#intro5{
	font-family:verdana;
	font-size:14px;
	color:gray;
	
}
.fb-body-footer{
	width:100%;
	position:absolute;
	left:0px;
	height:80px;
	background:white;
	top:700px;
	
}
#fb-body-footer-base{
	width:900px;
	top:15px;
	left:200px;
	color:blue;
	height:60px;
}

The End:

Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section. We will be very happy to hear that.

If you like my tutorial, please follow us on facebook, Google + and Twitter. I need your support to continue.



Advertise Here

Comments: