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. In the below example see how HTML and CSS are used to create the structure and style of this 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.

HTML Structure

This HTML code creates a simple, static login page that looks like a Facebook login page. HTML is used to define the layout and content of the login page The page is structured using HTML and styled with an external CSS file. The code begins with a header that will display the word "Facebook". Below this, is a container that holds a login form with fields for "Email or Phone" and "Password," both required for submission. This form will include a "Log In" button styled for easy interaction. This login page will not contain any backend functionality. We use additional links that allow users to navigate to a "Forgotten account?" or "Sign-up for Facebook" page, enhancing user experience. The layout of this page is clean, organized, and styled to look like a real and professional login interface.

Below is the HTML code:

CSS Structure

The CSS styles the HTML elements to make them visually appealing and responsive. This CSS code begins by resetting margins, padding, and box-sizing for consistent styling across browsers. The body is styled with a light background color, a centered layout, and a clean font. The title of the login page is bold and highlighted in Facebook's signature blue color. The container, which holds the login form, has a white background, rounded corners, and a subtle shadow for a polished look. The input fields are styled with padding, borders, and a focus effect to improve interactivity with users. The "Log In" button features a blue background with hover effects for a better look and interactivity with the users.

Below is the CSS code:

* {
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 h3 {
font-size: 19px;
color: #333;
margin-bottom: 20px;
}

.input-group {
margin-bottom: 15px;
text-align: left;
}

.input-group label {
font-size: 14px;
color: #333;
}

.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

.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;
}

.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;
}