Building Facebook Login Page using HTML and CSS
Table of Contents
This article is for beginners. Those individuals who are learning the basics of web development, they can elevate their skills in HTML and CSS with this simple basic project. Creating a Facebook login page with HTML and CSS is simple and yet you will learn the use of tag.
In this article, we’ll learn different HTML tags like, forms, inputs, and links. Also, we’ll learn the CSS properties.
Follow this video for complete guidance :
Let’s get hands on this project.
Steps for building Facebook Login Page using HTML and CSS
Step 1: HTML Code
Add the given HTML code inside your .html file.
Here, we’ll create two “div” class. One div will contain the logo of facebook and another div will contain the Login form.
<!DOCTYPE html>
<html>
<head>
<title>Facebook</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="box1">
<div class="logo">
<img src="facebook.png" width="301.06" height="106">
<div class="text">Connect with friends and the world around you on Facebook.
</div>
<div class="box2">
<form>
<div class="user">
<input type="text" name="Email" maxlength="50" placeholder="Email or Phone number"><br> <br>
<input type="password" name="password" maxlength="50" placeholder="Enter password"><br><br>
<input type="submit" value="Log In">
<br><br>
<p><a href="#">Forget Pasword?</p>
</div>
</form>
</div>
</div>
</div>
</body>
</html>You may also like our content on Color generator using HTML, CSS & JS.Step 2: CSS Code
Add the given CSS code to style your login form.
.box1{
width: 788px;
height: 536px;
background-color: white;
padding-top: 20px;
padding-bottom: 164px;
}
.logo{
text-align: center;
}
.text{
font-size: 24px;
font-family: sans-serif;
}
.box2{
width: 396px;
height: 400px;
background-color: white;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
box-shadow: 0 4px 10px rgb(0 0 0 / 20%), 0 10px 18px rgb(0 0 0 / 20%);
padding-top: 20px;
}
.user input[type="text"], input[type="password"]{
width: 90%;
height: 50px;
outline: none;
border: 1px solid;
border-color:#d3d3d3;
border-radius: 5px;
background: transparent;
}
.user input[placeholder="Email or Phone number"], input[placeholder="Enter password"]{
font-family: sans-serif;
font-size: 17px;
padding-left: 10px;
}
.user input[type="submit"]{
width: 93%;
height: 50px;
border:none;
background: #1877f2;
border-radius: 5px;
color: #fff;
font-size: 20px;
font-family: sans-serif;
font-weight: bold;
}
.user input[type="submit"]: hover{
cursor: pointer;
}
.user a{
text-decoration: none;
color: #1877f2;
font-family: sans-serif;
}Final Thoughts
By following these steps, you’ve created a Facebook login page using HTML and CSS. This project is a way to practice your web development skills and gain a understanding of how HTML and CSS work together to create user interfaces.
You can further enhance this project by adding JavaScript for form validation, integrating with a backend system for authentication, or exploring other CSS techniques to improve the design. Keep experimenting and learning—this is just the beginning of what you can create with web technologies!
Happy Learning!
Follow us on Facebook for more contents.
