Facebook Style login page using HTML and CSS Script

  • 113436

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.

Facebook Login Page Output:

facebook-login-page-html

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" />
</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;
}
Tags:
Varun Singh
Varun Singh

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, Insta, LinkedIn and Twitter.
I need your support to continue.