Facebook login page source code


HTML SOURCE CODE

 <div class="main">
<h3 id="logo"><a href="https://www.instagram.com/beingharry06">facebook</a></h3>
<p id="btn"> <a href="https://www.instagram.com/beingharry06/">Create Account</a></p>
</div>
<div  class="second">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWkwOAWE34C59uosPBPiameiwbALP3no8OGR3t6KsvCGVWN0DlTNjKNlonckIHzJinknYccJ6Oq-FEb5rrzbf7HqGwb5xrQLWlHU6uvok2hqKD1bxM5zU7NsR6L_1W_XG0ly36i7Vft4/s1600/PicsArt_01-06-03.46.54.png">
<p>Get Facebook for  Android and browse  faster.</p>
</div>

<div  class="user">
<div class="reg">
<h3 >Phone number or email address</h3>
<input type="text" id="email" name="Email or Phone number" class="input1">
<div class="reg">
<h3 id="paswrd">Password</h3 >
<input type="password" id="password" name="password" class="input1">
<a href="https://www.facebook.com/cyberwarriors06"><div  class="input1" id="login">
Log in
</div></a>
<div  class="op">
<div class="line1"></div>
<p  class="or">or</p>
<div class="line1"></div>
</div>
<div class="harry">
<div  class="input1" id="new">
<a href="https://www.facebook.com/cyberwarriors06">Create New Account</a>
</div>
</div>
<div  class="forget" >
<a href="https://www.facebook.com/cyberwarriors06"> Forgotten password?</a>
</div>
</div>
<div class="footer">
<div  class="lan">
<p><b> <a href="https://www.facebook.com/cyberwarriors06"> English (UK)</a></b></p>
<p id="secm"><a href="https://www.facebook.com/cyberwarriors06"> हिन्दी</a> </p>
</div>
<div  class="lan">
<p> <a href="https://www.facebook.com/cyberwarriors06"> اردو</a></p>
<p id="sec" class="sec3"><a href="https://www.facebook.com/cyberwarriors06"> ਪੰਜਾਬੀ</a> </p>
</div>
<div  class="lan">
<p> <a href="https://www.facebook.com/cyberwarriors06"> ગુજરાતી</a></p>
<p  id="sec" class="more"><a href="https://www.facebook.com/cyberwarriors06"> + </a></p>
</div>

CSS SOURCE CODE

body{
   margin:0px;
   padding:0px;
   }
  .main{
 display:flex;
 width:100%;
 align-items:center;
 height:35px;
 background:#4267b2;
 }
 #logo{
 color:white;
 padding-left:5px;
 font-size:25px;
 margin-top:1px;
 }
  a{
 color:white;
 text-decoration:none;

 }
 #btn{
 padding:6px 9px;
 border:1px solid green;
 color:white;
 margin-left:135px;
 font-size:16px;
 background: green;
 }
 .second {
 width:100%;
 height:45px;
 background:#FFFFE0;
 border-top:1px solid #FFD700;
 border-bottom:1px solid #FFD700;
 display:flex;
 align-items: center;

 }
 img{
 margin-left:3px;
 width:20px;
 height:33px;
 }
 .second p{
 margin-left:8px;
 color:#4267b2;
 font-size:17px;
 }
 .user{
 width:100%;
 height:500px;
 background:#F8F8FF;
 display:flex;
 justify-content:center;

 }
 h3{
 margin-top:12px;
 margin-bottom:1px;
 color:gray;
 font-size:17px;
 }
 .input1{
 width:313px;
 height:20px;
  padding: 10px 10px;
  border: 1px solid gray;
  font-size:13px;
  margin-bottom:7px;
 background: white;;
 }

 #paswrd{
 margin-top:6px;
 }
 #login{
 border:1px solid #4267b2;
 background:#4267b2;
 border-radius:2px;
 text-align:center;
 color:white;
 margin-top:5px;
 font-size:16px;
 }
 .op{
 display:flex;
 justify-content:center;
 margin-top:16px;
 }
 .line1{
 height:1px;
 width:50%;
 background:lightgray;
 }
 .or{
 margin-top:-8px;
 margin-right:15px;
 margin-left:15px;
 color:gray;
 font-size:16px;
 }
 .harry{
 display:flex;
 justify-content:center;
 }
 #new{
width:150px;
border:1px solid #42b72a;
background: #42b72a;
color:white;
height:22px;
text-align:center;
font-size:16px;
margin-top:-12px;
 }
 .forget{
 color:#4267b2;
 margin-top:12px;
 margin-bottom:30px;
 }
 .forget a{
 color:#4267b2;
 }
 .footer {
 padding:0px;
 width:106%;
 margin-left:-10px;
 height:85px;
 background:#333E41;
 }
 .lan {
 display:flex;
 margin-bottom:-20px;
 }
 .lan p{
 font-size:12px;
 color: lightgray;
 margin-left:10px;
 }
 #secm{
 margin-left:85px;
 }
 #sec{
 margin-left:127px;
 }
 .more{
 border:1px solid lightgray;
 padding:3px 5px;
 }

Post a Comment

0Comments

Please Select Embedded Mode To show the Comment System.*