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

Popular posts from this blog

E-books based on web designing and some programming languages

Here I am with some PDF books.This time I am only publishing PDF books related various programming languages and some PDF books required to a beginner web developer.Each PDF book is fully detailed and contains very efficient content.These books are specially dedicated to the students and beginners.Each programming book contains 500+ pages. Download Your Required Books Here : Advanced c++ programming language.pdf download Ethical hacking full course.pdf download Pearl programming language.pdf download Advanced in linux OS.pdf download Java programming language full course.pdf download Html 5 full course.pdf download Gmail hacking full course.pdf download Network security full course.pdf download C Programming language.pdf download html and css full advanced course.pdf download html,css and java script all in one.pdf download Beside these PDFs, I have 100s of PDF books of C# programming,C++ programmi
6 comments
Read more

Top 10 websites for learning ethical hacking

Do you want to become a Computer expert? Well ,almost 80% of answers will be 'yes'.But becoming a cyber expert is not soo easy task.This is 21st century ,age of science abd technology or let's say age of Internet as well.Now a days computers and internet is used in almost every field of human being including Teaching-learning,Business,industries,scientific study,communication and many more.Some people think that hacking means illegal works like accessing others system for illegal purpose but hacking also means preventing those illegal works and the hacker doing so are known as ethical hackers.Preventing the black hat hackers or illegal hackers form taking other peiple's and tracking such people is the main aima and work of ethical hackers. You can learn hacking online in various websites but some most visited and top rated courses providing websites are listed below.Cybrary is one of the best online site for learning ethical hacking,penetration testing,social en
Post a Comment
Read more

Designing a simple login form using HTML and CSS with source code

This is a simple login form designed for learning purpose only.I have used HTML and CSS for designing this form.Its source code is available below... Way of executing the given code: Copy the given HTML code and paste it in your Text editor and save it as Loginform.html Copy the CSS code to your text editor and save it as loginform.css Download this image and save it as login_logo.png Both the files including the above image must be in same location. HTML CODE... Account management Search User Login ! Forgot password? Or Sign up CSS CODE... body{ background-color:#000025; } div.header{ background:#0052cc; min-height:30px;width:100%; padding:10px; left:0px;top:0px; position:fixed; } input.search{ color:grey; background:#000025; font-family:serif;letter-spacing:1px; margin-left:120px; border:1px solid #000090;outline:none; border-radius:10px; height:25px;width:220px;padding:5px; } input.search:hover { border:none; }
8 comments
Read more