Facebook Home Page Source Code

Facebook is one the top and most visited social networking website in the world. In this article I am going to explain a simple HTML and CSS coding for creating facebook home page as well as registration and login option.

There are many stylish facebook home page, with HTML and CSS. But today I will show you the use of HTM and css as a Style Facebook Home Page. This source code is really simple and easy to understand.

Facebook Home Page Source Code Checkout Here Below:

This Facebook Home Page made with Only HTML and CSS. Copy source code from here.

For creating this program you have to create HTML and CSS File Separately. Follow the steps to creating this without any error.

facebook.html or facebook.htm

Create an HTML file named ‘facebook.html‘ and put these codes given below.

 
<!-- Code by technoniit (https://www.technoniit.tk) -->
<!Doctype html>
<html>
<head>
 <title>facebook.com | TECHNO NIIT</title>
 <link rel="stylesheet" type="text/css" href="Your CSS FILE PATH">
</head>

<body>
 <div class="top">
 <h1 id="facebook">
facebook</h1>
<table class="table">
<tr>
  <td>Email or Phone<br/> <input type="text" required> <br/> <br/></td>
  <td>Password<br/> <input type="password" required> <br/><a href="forgetpassword.html">Forgotten account</a></td>
  <td id="login"> <a href="login.html"><input type="submit" value="Login"></a> </td>
  </tr>
</table>
</div>
<div class="left">
 </div>
<div class="right">
 <h1>
Create an account</h1>
<p>
It's free and always will be</p>
<form>
 <table class="form">
<tr>
  <td><input type="text" placeholder="First namae" name="f1" required>
  <input type="text" placeholder="Surname" name="s1" required></td>
  </tr>
<tr>
  <td> <input type="number/email" placeholder="Phone number or email address" name="e1" required> </td>
  </tr>
<tr>
  <td><input type="password" placeholder="New password" name="p1" required></td>
  </tr>
<tr>
  <td>Birthday<br/><input type="date" name="d1" required> </td>
  </tr>
<tr>
  <td>Gender<br/><input type="radio" name="r1" checked value="male">Male
  <input type="radio" name="r1"  value="female">Female
  <input type="radio" name="r1" value="custom">Custom
  </td>
  </tr>
<tr>
  <td><p style="font-size:12px" id="policy">
By clicking Sign up, you are agree to our <a href="terms.html">Terms</a>, <a href="datapolicy.html">Data Policy</a> and <br/>
  <a href="cookie.html">Cookie Policy.</a> You may receive SMS notification s from us and <br/>
  can opt out at any time</p>
</td>
  </tr>
<tr>
  <td id="signup"><a href="signup.html"> Sign up</a></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

facebook.html

facebook.css

Create a CSS file named ‘facebook.css‘ and put these codes given below.

 
      /* Code by technoniit (https://www.technoniit.tk) */
  
         div.top
  {
   position:absolute;
   left:0%;
   top:0%;
   height:15%;
   width:100%;
   background-color:#264d73;
   color:white; 
  }
  
 div.left
  {
   position:absolute;
   left:0%;
   top:15%;
   height:90%;
   width:54%;
   background-color:#eaeffa;
  }
  
 div.right
  {
   position:absolute;
   left:54%;
   top:15%;
   height:90%;
   width:46%;
   background-color:#eaeffa;
  }
 .table
  {
   position:absolute;
   bottom:0%;
   right:15%; 
  }
  
 #facebook 
  {
   font-size:40px;
   padding:1px 105px;
    
  }
  
 #signup a:link
   {
    text-decoration:none;
    color:white;
    background-color: #336600;
    font-size:25px;
    border:1px solid green;
   }
  
 #signup a:hover{background-color:#339933;}
  
  a:link
  {
   text-decoration:none;
   color:grey;
  }
  
  a:hover{text-decoration:underline;}
  
 #login a:link input
  {
   text-decoration:none;
   color:white;
   background-color:#2a52a2;
   font-size:15px;
  }
  
 #login a:hover input{background-color:#264d73;}
  
 #policy a:link 
  {
   text-decoration:none;
   color:blue;
  }
  
 #policy a:hover{text-decoration:underline;}
  
  input[type="text"],
  input[type="password"]
  {
   width:150px;
   border-radius:5px;
  }
  
  input[type="number/email"],
  input[type=" Newpassword"]
  {
   width:300px;
   border-radius:5px;
  }

facebook.css

That’s it. Now you have successfully created Facebook Page. If you have any doubt or question comment down below.
I hope this post will useful to you, Thanks For Visiting, Keep Visiting

TECHNO NIIT

Facebook Home Page Source Code

Facebook Home Page Source Code

Facebook Home Page Source Code Checkout Here Below:

No comments

Social Counter

Contact Form

Popular

Facebook

Youtube

Recent in Technology

Labels

Recent Posts

Archive

Categories

Business