Skip to main content

Designing a Facebook login page with source code.

Do you use Facebook lite?This is the login page of Facebook lite.This is for learning purpose only.The front-end design of login page of Facebook very simple using HTML and CSS.The source code and way of executing the code is below:

How to execute the code?

  1. Copy the HTML code and paste it in your notepad or text editor and save it as Facebooksample.html
  2. Copy the CSS code and paste it in your notepad or text editor and save it as facebooksample.css
  3. The location of both the files must be same otherwise there will be error...

HTML CODE

<html> <head> <title>Facebook sample</title> <body> <div id="header"> <center> Facebook</center> </div> <div id="form"> <label id="email_Value"> Mobile Number Or Email</label><br /> <input id="email" type="email" /><br /> <div id="passwrd"> <label id="password_value"> Password</label><br /> <input id="password" type="password" /></div> <input id="bttn" type="button" value="Log In" /> <div id="fgpass"> <a href="#">Forgot your password?</a></div> </div> <div id="more"> <center id="or"> Or</center> <center> <input id="bttn2" type="button" value="Create New Account" /> </center> <span style="color: #404040;">English</span><br /> <a href=""> न&#2375;प&#2366;ल&#2368; </a><br /> <a href="">More Languages...</a><br /> </div> <div id="footer"> <a href="" id="more1">Help</a> <a href="" id="more2">Exit</a> </div> </body> </head></html>

CSS CODE

#header{ background-color:#0052cc; position:fixed; min-height:20px; padding:5px; width:100%; left:0px; top:0px; color:white; } #form{ margin-top:36px; } #email_value{color:#404040;font-size:15px;} #email{ background:#f2f2f2; margin-top:10px; height:35px; width:100%; border:1px solid silver; } #password{ background:#f2f2f2; margin-top:10px; height:35px; width:100%; border:1px solid silver; } #password_value{ margin-top:10px; color:#404040; font-size:15px;} #passwrd{ margin-top:10px;} #bttn{ margin-top:10px; height:40px; width:100%; font-weight:bold; color:white; background-color:#4d79ff; border:1px solid #4d79ff; border-radius:1px;} #fgpass{ margin-top:15px; font-size:15px; } a{ text-decoration:none; font-size: color:#0052cc;} #more{ border-top:1px solid silver; margin-top:15px; width:100%; background:#f2f2f2; height:46%; } #footer{ background:#0052cc; height:20px; padding:12px; width:100%; position:fixed; left:0px; bottom:0px; } #more1{ margin-top:10px; color:white; font-size:15px; } #more2{ color:white; font-size:15px; margin-left:78%; } #or{ margin-top:15px;} #bttn2{ margin-top:15px; height:48px; padding:10px; font-weight:bold; color:white; background-color:#599526; border:1px solid #599526; }
If you like this don't forget to Comment you suggestions and press the follow button...

Comments

Post a Comment