Introduction
Login pages are everywhere — they’re the gateway to most websites and apps. As a beginner in web development, I decided to recreate the Facebook login page using HTML and CSS. This project helped me practice layout design, button styling, and footer links.
Page Layout
The page is divided into three sections:
Left side: Facebook logo, tagline, and an image.
Right side: Login form with input fields and buttons.
Footer: Language links displayed at the bottom.
I used CSS Grid to split the page into two columns and Flexbox to align items inside the login form.
Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
main{
border-bottom:none;
height:90vh;
display:grid;
grid-template-columns: 2fr 1fr;
}
footer{
border-top: 1px solid gray;
/* border:1px solid; */
height:10vh;
}
.left{
/* border:1px solid; */
display:grid;
grid-template-columns: 1fr 1fr;
}
.right{
border-left:1px solid gray;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
/* border:1px solid; */
display:flex;
flex-direction:column;
justify-content: space-between;
}
.img{
/* border: 1px solid; */
}
.logo-img{
height: 130px;
width:130px;
padding:30px;
}
.logo h1{
/* border:1px solid; */
width: 60%;
font-size: 54px;
padding: 25px;
}
.img-img{
height:500px;
width: 500px;
padding:10px
}
span{
color:rgb(24, 119, 242);
}
input,button{
font size 16px;
padding:15px;
border-radius: 10px;
}
.login{
/* border: 1px solid; */
display: flex;
flex-direction: column;
justify-content: space-between;
width:80%;
gap: 12px;
font-size:17px;
}
#login{
background-color:rgb(66, 103, 178);
font-size: 20px;
border-radius: 25px;
color:white;
font-weight: 600;
}
#forget{
border-radius: 25px;
border:none;
background-color: white;
font-size: 20px;
curser:pointer;
font-weight: 600;
}
#create{
border-radius: 25px;
background-color:white;
color:rgb(66, 103, 178);
font-size:20px;
border:2px solid rgb(66, 103, 178);
font-weight: 600;
}
input:hover{
border:1px solid black;
}
#forget:hover{
background-color:rgb(236, 235, 235);
}
#create:hover{
background-color:rgb(236, 235, 235);
}
.login img{
width:80px;
}
.meta{
text-align: center;
}
footer {
text-align:center;
font-size: small;
}
footer a{
margin-right:15px;
text-decoration: none;
color: gray;
}
</style>
</head>
<body>
<main>
<div class="left">
<div class="logo">
<img class="logo-img" src="https://thf.bing.com/th/id/OIP._6VkGA8hbkjwvRaUbavwVAHaHa?w=190&h=190&c=7&r=0&o=7&cb=thfc1falcon2&dpr=1.3&pid=1.7&rm=3" alt="fb">
<h1>Explore the things <span>you love</span>.</h1>
</div>
<div class="img">
<img class="img-img" src="https://static.xx.fbcdn.net/rsrc.php/yb/r/HpEiFYDux5j.webp" alt="ff">
</div>
</div>
<div class="right">
<div class="login">
<p>Log in to Facebook</p>
<input type="text" placeholder="Email address or mobile number">
<input type="password" placeholder="Password">
<button id="login" type="submit">Log in</button>
<button id="forget" type="">Forgotten password?</button>
<button id="create">Create new account</button>
<div class="meta">
<img src="https://1000logos.net/wp-content/uploads/2021/10/Meta-Logo.png" alt="mt">
</div>
</div>
</main>
<footer>
<a href="">English (UK)</a>
<a href="">தமிழ்</a>
<a href="">తెలుగు</a>
<a href="">ಕನ್ನಡ</a>
<a href="">اردو</a>
<a href="">हिन्दी</a>
<a href="">മലയാളം</a>
</footer>
</body>
</html>
HTML Structure
<main>
<div class="left">
<div class="logo">
<img class="logo-img" src="logo.png" alt="fb">
<h1>Explore the things <span>you love</span>.</h1>
</div>
<div class="img">
<img class="img-img" src="banner.png" alt="ff">
</div>
</div>
<div class="right">
<div class="login">
<p>Log in to Facebook</p>
<input type="text" placeholder="Email address or mobile number">
<input type="password" placeholder="Password">
<button id="login">Log in</button>
<button id="forget">Forgotten password?</button>
<button id="create">Create new account</button>
<div class="meta">
<img src="meta-logo.png" alt="Meta">
</div>
</div>
</div>
</main>
<footer>
<a href="">English (UK)</a>
<a href="">தமிழ்</a>
<a href="">తెలుగు</a>
<a href="">ಕನ್ನಡ</a>
<a href="">اردو</a>
<a href="">हिन्दी</a>
<a href="">മലയാളം</a>
</footer>
CSS Styling
Grid Layout:
main {
display: grid;
grid-template-columns: 2fr 1fr;
height: 90vh;
}
Login Button (Facebook Blue):
#login {
background-color: rgb(66, 103, 178); /* Facebook Blue */
color: white;
font-size: 20px;
border-radius: 25px;
font-weight: 600;
}
Other Buttons:
#forget {
background-color: white;
font-size: 20px;
font-weight: 600;
}
#create {
background-color: white;
color: rgb(66, 103, 178);
border: 2px solid rgb(66, 103, 178);
font-size: 20px;
font-weight: 600;
}
Hover Effects:
#forget:hover, #create:hover {
background-color: rgb(236, 235, 235);
}
Footer Links:
footer {
text-align: center;
font-size: small;
}
footer a {
margin-right: 15px;
text-decoration: none;
color: gray;
}
Design Choices
Colors: The login button uses Facebook’s signature blue (rgb(66, 103, 178)), while other buttons are styled white with blue borders.
Typography: I chose Times New Roman for a clean, readable look.
Hover Effects: Adding hover states makes the buttons interactive.
Footer: Language links mimic Facebook’s multilingual accessibility.
Output
Top comments (0)