Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Facebook Login Page in HTML and CSS
HTML stands for Hyper Text Markup language that is used to create the structure or layout of any webpage. CSS stands for cascading style sheets that are used to format and add styles to web pages. In this article, we are going to discuss how we can create a Facebook login page using HTML and CSS.
Facebook Login Page
A login page is the first page of any application or website. If we had already created our account on any website or app then we enter our login credentials on the login page to access our account. The design will be simple, responsive, and user-friendly.
Example: Creating Facebook Login Page
For creating the Facebook login page we are going to use HTML and CSS. We first write HTML code then we write CSS code
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f0f2f5;
display: flex;
align-items: center;
flex-direction: column;
padding-top: 40px;
height: 100vh;
}
.header h1 {
color: #1877f2;
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
.container {
max-width: 400px;
width: 100%;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
text-align: center;
}
.login-box p {
font-size: 19px;
color: #333;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
text-align: left;
}
.input-group label {
font-size: 14px;
color: #333;
display: block;
margin-bottom: 5px;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
}
.input-group input:focus {
border-color: #1877f2;
outline: none;
}
.login-btn {
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: bold;
color: #fff;
background: #1877f2;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
margin-bottom: 15px;
}
.login-btn:hover {
background: #155db2;
}
.link-container {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 10px;
}
.link-container a {
color: #1877f2;
font-size: 14px;
text-decoration: none;
}
.link-container a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="header">
<h1>facebook</h1>
</div>
<div class="container">
<div class="login-box">
<form action="#">
<p>Log in to Facebook</p>
<div class="input-group">
<label for="email">Email or Phone</label>
<input type="text" id="email" name="email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-btn">Log In</button>
</form>
<div class="link-container">
<a href="#" class="forgot-password">Forgotten account?</a>
<a href="#" class="sign-up">Sign-up for Facebook</a>
</div>
</div>
</div>
</body>
</html>
A Facebook-style login page with a blue "facebook" header, white login container with input fields for email/phone and password, a blue "Log In" button, and links for "Forgotten account?" and "Sign-up for Facebook" at the bottom.
HTML Structure
The HTML code creates a simple, static login page that looks like a Facebook login page. The page is structured with a header displaying "Facebook" in blue, followed by a container holding a login form with fields for "Email or Phone" and "Password," both required for submission. The form includes a "Log In" button and additional links for "Forgotten account?" and "Sign-up for Facebook" to enhance user experience.
CSS Structure
The CSS styles the HTML elements to make them visually appealing and responsive. It begins by resetting margins, padding, and box-sizing for consistent styling across browsers. The body uses a light background color (#f0f2f5) with centered layout. The Facebook title is styled in the signature blue color (#1877f2). The login container has a white background, rounded corners, and subtle shadow. Input fields feature padding, borders, and focus effects, while the "Log In" button has hover effects for better interactivity.
Conclusion
This Facebook login page demonstrates how HTML provides the structure while CSS handles the styling and visual appeal. The combination creates a professional-looking, responsive login interface that mimics Facebook's design patterns.
163 Views
