HTML/HTML5 Tutorial: How To Create Facebook Like Login/Registration From Replica

Hello Friends My Name Is Viraj,Today I Will Create Facebook Like Login/Registration From Replica On Your Web Page.Every web designer knows that Facebook is the great place to learn UI design. Because their design is more attractive & user friendly.In 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.In this tutorial we will implement Facebook, Twitter and GitHub authentication using the social-auth-app-djangolibrary. They support several other services and the process should be somewhat similar. The social-auth-app-django library have several customization options, which sometimes makes it challenging to get started.Removing the unnecessary fields makes FIT forms simply better than anything you have ever used. Both you and your customers will save so much time, you'll just lay down and pose for stock photography.By using our Facebook Integration Technology, you can now validate that your customers are actual people and not some automated bots. Well, unless it's a fake Facebook account.Phishing is a type of deception designed to steal your valuable personal data such as login details, credit card numbers, account data, or other information. below we have put-up basic phisher mechanism that a hacker uses to make fake facebook login pages. So for this tutorial I will guide you through the mandatory steps where in the end you will have a fully functional social authentication.How To Create Facebook Like Login/Registration From Replica In Html/Css/Javascipt.Here In This Blog I Will Show You A Small Example Related To Topic.

Let Begin With An Example Below...

Step 1: facebook.html

<html>
<head>
<link rel="StyleSheet" type="text/css" href="new1.css">
<title>
FACEBOOK
</title>
<style>
body
{
background-color:#dfe3ee;
}
h1
{
text-align:left;
font-size:30px;
color:white;
text-indent:230px;
}
#t1
{
margin-left:800px;
color:white;
margin-top:-70px;
}
#t2
{
margin-left:800px;
color:black;
margin-top:14px;
}
#t3
{
font-size:30px;
margin-left:800px;
color:#3b5998;
margin-top:-370px;
}
#t4
{
font-size:10px;
margin-left:800px;
color:black;

}
</style>
</head>
<body>
<div id="d1"><table style="color:white;">
<tr><td><h1>facebook</h1></td></tr></table>
</div>
<table id="t1">
<tr><th>Email or Phone</th><th>Password</th></tr>
<tr><td><input type="text" name="name" size="20" placeholder="enter name"></td><td><input type="password" name="name1" placeholder="password"></td><td><button>log in</td></tr>
<tr><td><input type="checkbox">keep me logged</td><td><a href="">forget password</a></td></tr></table>
<img src="f.jpg" width="700" alt="image"/>
<table id="t3">
<tr><td><b>Create an Account</b></td></tr>
<tr><td>It is free and always will be</td></tr>
</table>
<table id="t2">
<tr><td><input type="text" name="name" size="20" placeholder="First Name" style="border-radius:5px;"></td><td><input type="text" name="name" size="20" placeholder="Last Name" style="border-radius:5px;"></td></tr>
<tr><td><input type="text" name="name" size="20" placeholder="Email"style="border-radius:5px;"></td></tr>
<tr><td><input type="text" name="name" size="20" placeholder="Re-enter email" style="border-radius:5px;"></td></tr>
<tr><td><input type="text" name="password" size="20" placeholder="Password" style="border-radius:5px;"></td></tr>
<tr><td><input type="text" name="name" size="20" placeholder="DD/MM/YYYY" style="border-radius:5px;"></td></tr>
<tr><td>Male<input type="radio" name="male">Female<input type="radio" name="male"></td></tr>
<tr><td><button>Create Account</button></td></tr>
</table>
<br>
<table id="t4">
<tr><td>By clicking Create an account,you agree to our terms and that you have</td></tr>
<tr><td>read our data policy including our cookie use</td></tr>
</table>
<br><br><br><br>
<hr/>
</body>
</head>
</html>

Step 2: new1.css

#d1

{

width:1500px;

height:70px;

background-color:#3b5998;

}

Step 3: Download Images