CLONE OF FACEBOOK LOGIN PAGE USING ONLY HTML & CSS
<!DOCTYPE html>
<html>
<head>
<title>Facebook Log In</title>
<style>
body{margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{height: 100vh;
width: 100%;
background: #e9ebee;
}
.header{
width: 100%;
height: 100px;
background: #3b5998;
}
.header img{
margin-left: 13%;
margin-top: 25px;
}
.sign-btn{
background: #52b72a;
border:0;
width: 67px;
height: 27px;
color: #fff;
border-radius: 3px;
opacity: 0.9;
}
.sign-btn:hover{
opacity: 1;
}
.box{
position: absolute;
top: 30%;
left: 30%;
height: 284px;
width: 614px;
background: #fff;
text-align: center;
display: inline-block;
}
.box h5{
font-size: 25px;
text-align: center;
}
.text-mail, .text-pass{
width: 300px;
height: 30px;
display: block;
margin-left: 150px;
border:1px solid #dddfe2;
margin-bottom: 10px;
}
input[type=text]{
padding-left: 15px;
}
.text-btn{
width: 310px;
height: 50px;
border:0;
background: #3b5998;
color: #fff;
font-weight: bold;
margin-bottom: 10px;
opacity: 0.9;
}
.text-btn:hover{
opacity: 1;
}
.box-links a{
text-decoration: none;
color: #3b5998;
}
.box-links:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<img src="facebook.png" height="60" width="200">
<button class="sign-btn">Sign Up</button>
</div>
<div class="box">
<h5>Log In to Facebook</h5>
<input type="text" class="text-mail" placeholder="Email Address or Phone Number">
<input type="text" class="text-pass" placeholder="Password">
<input type="button" class="text-btn" value="Log In">
<div class="box-links">
<a href="#">Forgotten account?</a>
<a href="#">Sign Up for Facebook</a>
</div>
</div>
</div>
</body>
</html>
CODE BY
POULOMI TALUKDAR
Comments
Post a Comment