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:
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>
<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>
<a href="#">à°¤ెà°²ుà°—ు</a>
<a href="#">اردو</a>
<a href="#">हिन्दी</a>
<a href="#">தமிà®´்</a>
<a href="#">ଓଡ଼ିଆ</a>
<a href="#">മലയാà´³ം</a>
<a href="#">ಕನ್ನಡ</a>
<a href="#">Español</a>
<a href="#">Português (Brasil)</a>
<a href="#">Français (France)</a>
<button>+</button> <br> <br>
<hr> <br>
<a href="#">SignUp</a>
<a href="#">LogIn</a>
<a href="#">Messanger</a>
<a href="#">Facebook Lite</a>
<a href="#">Watch</a>
<a href="#">People</a>
<a href="#">Pages</a>
<a href="#">Page Categories</a>
<a href="#">Places</a>
<a href="#">Games</a>
<a href="#">Locations</a><br>
<a href="#">Marketplace</a>
<a href="#">Facebook Pay</a>
<a href="#">Groups</a>
<a href="#">Jobs</a>
<a href="#">Oculus</a>
<a href="#">Portal</a>
<a href="#">Instagram</a>
<a href="#">Local</a>
<a href="#">Fundraisers</a>
<a href="#">Services</a>
<a href="#">Volting Information Center <br></a>
<a href="#">About</a>
<a href="#">Create ad</a>
<a href="#">Create page</a>
<a href="#">Developers</a>
<a href="#">Careers</a>
<a href="#">Privacy</a>
<a href="#">Cookies</a>
<a href="#">Ad choices</a>
<a href="#">Terms</a>
<a href="#">Help</a><br>
<br>
Facebook©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.
0 comments: