Document

Real time example

facebook

---------------- OR ----------------

Inspect the HTML

<!DOCTYPE html>
<html>
<head>
<title>
Facebook - Login or Signup
</title>
<meta charset="utf-16">
<meta content="user-scalable=no,initial-scale=1,maximum-scale=1" name="viewport"/>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{height:100%;font-family:Arial;}
.navbar {
font-weight: 200;
text-align: center;
background-color: rgb(2, 2, 139);
padding: 20px;
font-family: Haettenschweiler;
font-stretch: semi-condensed;
}
.navbar a {
letter-spacing: 1.5px;
color: white;
text-decoration: none;
font-size: 45px;
}
.navbar2 {
background-color: rgb(255, 232, 190);
text-align: center;
padding: 25px;
}
.navbar2 a {
color: rgb(2, 2, 139);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-decoration: none;
}
.body {
background-color: rgba(209, 208, 208, 0.922);
}
.footer{
text-align: center;
}
.footer1{
background-color: rgba(182, 181, 181, 0.835);
}
input:hover{opacity: .7;}
.footer1 a{text-decoration: none;}
#create{
width:50%;padding:7px;cursor: pointer; color: white;background-color: green;border-radius: 4px;border:none;font-size: 15px;
}
#login{
width:80%;border:none; padding:7px;cursor: pointer; color: white;background-color: blue;border-radius: 4px;font-size: 20px;
}
#text{
width:80%;height:25px; padding:7px;border-radius:2px;border: .01px solid rgb(141, 141, 141);background-color: rgba(187, 187, 187, 0.959);
color:black;text-align: center;
}

</style>
<body>
<div class="navbar">
<a href="#"><b> facebook</b></a>
</div>
<div class="navbar2">
<a href="#">Get Facebook Lite and browse faster</a>
</div>

<div class="body">
<br><br><br>
<div style="text-align: center;"><form action="insert.php" method="POST ">
<input type="text" name="id" id="text"  placeholder="Mobile number or Email id" required>
<input type="password" name="password" id="text"  placeholder="Password" required>
</div></form><br>
<div style="text-align: center;">
<input type="button" id="login" value="Log In" required>
</div><br>
<b><center>----------------  OR  ----------------</center></b>
<br>
<div style="text-align: center;">
<input type="button"  id="create" value="Create new Account">
</div><br>
<div style="text-align: center;">
<a href="#" style="text-decoration: none;">Forgotten password?</a>
</div><br>
<br>
<p><center>Facebook Inc.</center></p>
<br><br>

</div>
<div class="footer1">
<br><br><br>
<div class="footer">
<a style="padding: 10px;"><b> English</b></a>            
<a href="#"style="padding: 10px;">Tamil</a><br><br>
<a style="padding: 10px;" href="#">Hindi</a>            
<a href="#" style="padding: 10px;">Telungu</a><br><br>
<a style="padding: 10px;" href="#">Kannadam</a>            
<a href="#" style="padding: 10px;"><button > + </button></a><br>
</div>
</body>
</html>

Download this HTML Source Code

Also Read

Automatic-Typewriter effect

Awesome CSS button version-3

Image Slideshow version-2

12 Modal Checkboxes

Kumar Lakshmanan

Facebook Login page - Mobile

Real time example

Related to

Inspect the HTML

Download this HTML Source Code

Also Read

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Facebook Login page - Mobile

Pre-Loader version-3

Fresh CSS Button Version-3

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Facebook Login page - Mobile

Real time example

Related to

Inspect the HTML

Download this HTML Source Code

Also Read

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Facebook Login page - Mobile

Pre-Loader version-3

Fresh CSS Button Version-3

Total Pageviews

Contact Form

Footer Menu Widget