Search This Blog

 Royal Brothers Website simple design: The first licensed bike rental in Bangalore was started by Royal Brothers in july 2015 you can now re...

 Royal Brothers Website simple design:

The first licensed bike rental in Bangalore was started by Royal Brothers in july 2015 you can now rent a bike on monthly basis and zoom off in 26 cities.

In this blog post learn how to build royal brothers website easy way by using html,css,boot strap and java script. 






Download Source Code By GitHub

How to create Facebook login page by using html and css: How to create Facebook login page by using html and css || facebook login page html...


How to create Facebook login page by using html and css:

How to create Facebook login page by using html and css || facebook login page html and css 2021.

Facebook is the one of the top most visited social networking website in the world.Every one should know how to design Facebook login page with easy steps

In this blog post learn how to create facebook login page using html and css and source code download.

Facebook Login Page Output:

How to create Facebook login page by using html and css,facebook profile page html code facebook login page html code 2020 facebook login html code playground facebook login page html code github html codes for facebook login page 2020 coding the facebook login page by hand how to get html code of facebook page html code for login and password


Download Source Code By GitHub
HTML CODE:

<!DOCTYPE html>
<html>
<head>
<title>welcome to facebook login</title>
<link rel="stylesheet" type="text/css" href="facebook.css">
</head>
<body>
<header>
<div class="fblogo">
<img src="fb2.png" height="60px">
</div>
<div class="login">
<table>
<tr>
<td><p>Email or Phone</p></td>
<td><p>Password</p></td>
</tr>
<tr>
<td><input type="text" name="usn" class="inputtex"></td>
<td><input type="password" name="usn" class="inputtex"></td>
<td><button class="btn">Log In</button></td>
</tr>
<tr>
<td></td>
<td><p><a href="#">Forgetten Account?</a></p></td>
</tr>
</table>
</div>
</header>
<section>
<div class="left">
<h3>Facebook helps you connect and share with the<br>people in your life</h3>
<img src="network.png">
</div>
<div class="right">
<div class="id">
<h2 style="">Create an account</h2> <br>
<h4>It's free and always will be</h4>
<br>
<form>
<input type="text" name="usn" placeholder="First name">
<input type="text" name="usn" placeholder="Last name"><br><br>
<input type="text" name="usn" placeholder="Mobile number or email adress" class="mobile"><br><br>
<input type="password" name="usn" placeholder="New Password" class="password"> <br> <br>
<label><b>Birthday</b></label><br>
<input type="date" name="date">
<a href="#"><p class="date">Why do I need provide my <br>date of birth?</p></a><br> <br>
<input type="radio" name="r1"><b>Female</b>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="r1"><b>Male</b><br> <br>
<h5>By clicking SinUp.you agree to our <a href="#">Terms Data Policy</a> and <br> <a href="#">Cookie policy</a>.You may receive SMS notification from us and <br>can opt at any time </h5> <br>
<button class="button"><b>SignUp</b></button> <br> <br>
<hr> <br>
<a href="#">Create a page</a> for a celebrity,band or bussiness
</form>
</div>
</div>
</section>
<footer>
<div class="footer">
<a href="#">English(US)</a>&nbsp; &nbsp;
<a href="#">à°¤ెà°²ుà°—ు</a>&nbsp;&nbsp;
<a href="#">اردو</a>&nbsp;&nbsp;
<a href="#">हिन्दी</a>&nbsp;&nbsp;
<a href="#">தமிà®´்</a>&nbsp;&nbsp;
<a href="#">ଓଡ଼ିଆ</a>&nbsp;&nbsp;
<a href="#">മലയാà´³ം</a>&nbsp;&nbsp;
<a href="#">ಕನ್ನಡ</a>&nbsp;&nbsp;
<a href="#">Español</a>&nbsp;&nbsp;
<a href="#">Português (Brasil)</a>&nbsp;&nbsp;
<a href="#">Français (France)</a>&nbsp;&nbsp;
<button>+</button> <br> <br>
<hr> <br>
<a href="#">SignUp</a>&nbsp; &nbsp;
<a href="#">LogIn</a>&nbsp; &nbsp;
<a href="#">Messanger</a>&nbsp; &nbsp;
<a href="#">Facebook Lite</a>&nbsp; &nbsp;
<a href="#">Watch</a>&nbsp; &nbsp;
<a href="#">People</a>&nbsp; &nbsp;
<a href="#">Pages</a>&nbsp; &nbsp;
<a href="#">Page Categories</a>&nbsp; &nbsp;
<a href="#">Places</a>&nbsp; &nbsp;
<a href="#">Games</a> &nbsp; &nbsp;
<a href="#">Locations</a><br>&nbsp; &nbsp;
<a href="#">Marketplace</a>&nbsp; &nbsp;
<a href="#">Facebook Pay</a>&nbsp; &nbsp;
<a href="#">Groups</a>&nbsp; &nbsp;
<a href="#">Jobs</a>&nbsp; &nbsp;
<a href="#">Oculus</a>&nbsp; &nbsp;
<a href="#">Portal</a>&nbsp; &nbsp;
<a href="#">Instagram</a>&nbsp; &nbsp;
<a href="#">Local</a>&nbsp; &nbsp;
<a href="#">Fundraisers</a>&nbsp; &nbsp;
<a href="#">Services</a>&nbsp; &nbsp;
<a href="#">Volting Information Center <br></a>&nbsp; &nbsp;
<a href="#">About</a>&nbsp; &nbsp;
<a href="#">Create ad</a>&nbsp; &nbsp;
<a href="#">Create page</a>&nbsp; &nbsp;
<a href="#">Developers</a>&nbsp; &nbsp;
<a href="#">Careers</a>&nbsp; &nbsp;
<a href="#">Privacy</a>&nbsp; &nbsp;
<a href="#">Cookies</a>&nbsp; &nbsp;
<a href="#">Ad choices</a>&nbsp; &nbsp;
<a href="#">Terms</a>&nbsp; &nbsp;
<a href="#">Help</a><br>
<br>
Facebook&copy;2020
</div>
</footer>
</body>
</html>



CSS CODE:


*{
padding: 0px;
margin: 0px;
}
body{
background-color: lavender;
}
header{
background-color: midnightblue;
width: 100%;
height: 90px;
}
footer{
background-color: white;
height: 190px;
}
footer .footer{
position: relative;
top: 20px;
width:100%;
}
footer .footer a{
color: gray;
text-decoration: none;
padding: 10px;
}
@media (max-width:700px)
{
.main-nav
{
flex-direction:column;
}
.nav-items
{
margin-top:20px;
}
header{
height: 180px;
}
footer{
height: 310px;
}
.fblogo{
position: relative;
left: 10px;
}
.login{
margin-right: -50px;
}
section .left{
display: none;
}
section .right{
margin-right: 600px;
}
}
.fblogo{
float: left;
margin-top: 15px;
margin-left: 30px;
}
.login{
float: right;
}
.login p{
color: white;
margin-left: 10px;
}
.login p a{
text-decoration: none;
color: white;
}

.login .inputtex{
height: 20px;
width: 170px;
margin-left: 10px;
border: none;
outline: none;
}
.login table{
margin-top: 13px;
margin-right: 80px; 
}
.login .btn{
background-color: #2980b9;
color: white;
margin-left: 10px;
padding: 5px;
outline: none;
cursor: pointer;
border: none;

}
section{
width: 980px;
height: 600px;
margin: auto;
}
section .left{
float: left;
}
section .left h3{
margin-top: 30px;
font-size: 30px;
color: midnightblue;
margin-left: -150px;
}
section .left img{
width: 600px;
margin-left: -120px;
}
section .right{
float: right;
}
section .right .id{
margin-right: -20px;
}
section .right h2{
font-size: 30px;
margin-top: 10px;
}
section .right h4{
font-size: 20px;
font-weight: normal;

}
.right input[type='text'],
.right input[type='password']
{
height: 30px;
outline: none;
}
.right .id .mobile,.password
{
width: 348px;
}
.date{
display: inline-block;
position: relative;
top: 10px;
}
.button{
background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    width: 200px;
    border-radius: 10px;
    border: none;
}



How to create Facebook login page by using html and css || facebook login page using html and css.
Subscribe to: Posts (Atom)