Hello everyone👋,
Today, through this article we'll Create Facebook Login Page's Clone With pure HTML and CSS
Here Is What We're Going to Make:
Prerequisites:-
To create this all you need to know is:-
•Basics Of Html
•Some CSS
Get Started With HTML :-
First Let's Start With Some HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Login Page Clone</title>
</head>
<body bgcolor:#d3d3d3>
<div class="top">
<img src="fb.png" alt="fb">
</div>
<div class="form">
<form>
<input placeholder="Mobile number or email address">
<input placeholder="Enter your password">
<button class="submit" type="submit">Log In</button>
</form>
<a href="#">Forgotten your password</a>
</div>
<div class="or">
<p>or</p>
</div>
<div class="cna">
<button>Create new account</button>
</div>
<div class="footer">
<a href="#">about</a>
<a href="#">help</a>
<a href="#">more</a>
<br/>
<a href="#">meta©</a>
</div>
</body>
</html>
*Add Some CSS *
<style>
.top{
text-align:center;
}
img{
height:99px;
width:170px;
}
.form{
text-align:center;
}
input{
height:35px;
width:280px;
margin:5px;
border:none;
background-color:#F1EEF1;
border-radius:5px;
}
input:focus{
border:2px solid #2737E4;
outline:none;
}
.submit{
height:30px;
width:280px;
margin:6px;
border:none;
border-radius:5px;
background-color:#1100ff;
color:white;
font-weight:bold;
}
.form a{
text-decoration:none;
font-weight:bold;
color:#6aa2ff;
}
.or{
text-align:center;
}
.cna{
text-align:center;
}
.cna button{
height:30px;
width:280px;
margin:6px;
border:none;
border-radius:5px;
background-color:#4ed836;
color:white;
font-weight:bold;
}
.footer{
text-align:center;
margin-top:100px;
}
.footer>a{
color:grey;
text-decoration:none;
}
</style>
Now let's style our page with some basic CSS
Our Final Code Is gonna look like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Login Page Clone</title>
<style>
.top{
text-align:center;
}
img{
height:99px;
width:170px;
}
.form{
text-align:center;
}
input{
height:35px;
width:280px;
margin:5px;
border:none;
background-color:#F1EEF1;
border-radius:5px;
}
input:focus{
border:2px solid #2737E4;
outline:none;
}
.submit{
height:30px;
width:280px;
margin:6px;
border:none;
border-radius:5px;
background-color:#1100ff;
color:white;
font-weight:bold;
}
.form a{
text-decoration:none;
font-weight:bold;
color:#6aa2ff;
}
.or{
text-align:center;
}
.cna{
text-align:center;
}
.cna button{
height:30px;
width:280px;
margin:6px;
border:none;
border-radius:5px;
background-color:#4ed836;
color:white;
font-weight:bold;
}
.footer{
text-align:center;
margin-top:100px;
}
.footer>a{
color:grey;
text-decoration:none;
}
</style>
</head>
<body bgcolor:#d3d3d3>
<div class="top">
<img src="fb.png" alt="fb">
</div>
<div class="form">
<form>
<input placeholder="Mobile number or email address">
<input placeholder="Enter your password">
<button class="submit" type="submit">Log In</button>
</form>
<a href="#">Forgotten your password</a>
</div>
<div class="or">
<p>or</p>
</div>
<div class="cna">
<button>Create new account</button>
</div>
<div class="footer">
<a href="#">about</a>
<a href="#">help</a>
<a href="#">more</a>
<br/>
<a href="#">meta©</a>
</div>
</body>
</html>
We Hope You Loved It...
Follow For More❤️
Top comments (0)