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>
<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;
}
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;
}