In this tutorial , We can create a simple replication of a Facebook login page using HTML and CSS. It involves designing the basic structure and styles to replicate the look of the actual page.
Let’s start!
Steps for creating the replica of Facebook login page:
1.HTML:
HyperText Markup Language is the standard language used to create and design web pages. We can create the structure of the web page using html tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log in to Facebook</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>facebook</h1>
</div>
<div class="login-container">
<form>
<h2>Log in to Facebook</h2>
<input type="text" placeholder="Email address or phone number">
<input type="password" placeholder="Password">
<button type="submit">Log in</button>
<a href="#">Forgotten account?</a> · <a href="#">Sign up for Facebook</a>
</form>
</div>
</div>
<div class="length-footer">
<footer>
<div class="footer-content">
<div class="languages">
<a href="#">English (UK)</a> <a href="#">தமிழ்</a> <a href="#">తెలుగు</a> <a href="#">ಕನ್ನಡ</a> <a href="#">اردو</a> <a href="#">हिन्दी</a> <a href="#">മലയാളം</a> <a href="#">සිංහල</a> <a href="#">ਪੰਜਾਬੀ</a> <a href="#">বাংলা</a> <a href="#">ગુજરાતી</a> <button type="icon">+</button>
</div>
<hr>
<div class="footer-links">
<a href="#">Sign Up</a> <a href="#">Log In</a> <a href="#">Messenger</a> <a href="#">Facebook Lite</a> <a href="#">Video</a> <a href="#">Places</a> <a href="#">Games</a> <a href="#">Marketplace</a> <a href="#">Meta Pay</a> <a href="#">Meta Store</a> <a href="#">Meta Quest</a> <a href="#">Meta AI</a> <a href="#">Instagram</a> <a href="#">Threads</a> <a href="#">Fundraisers</a> <a href="#">Services</a> <a href="#">Voting Information Centre</a> <a href="#">Privacy Policy</a> <a href="#">Privacy Centre</a> <a href="#">Groups</a> <a href="#">About</a> <a href="#">Create ad</a> <a href="#">Create Page</a> <a href="#">Developers</a> <a href="#">Careers</a> <a href="#">Cookies</a>
<a href="">AdChoices</a> <a href="">Terms</a> <a href="">Help</a> <a href="">Contact uploading and non-users</a>
</div>
<h5>Meta © 2024</h5>
</div>
</footer>
</div>
</body>
</html>
2.CSS:
Cascading Style Sheets is a stylesheet language used to control the presentation and layout of HTML documents.CSS is responsible for the visual appearance, including colors, fonts, spacing, and positioning.
body, html {
margin: 0;
padding: 0;
font-family: Arial,sans-serif;
background-color: #f0f2f5;
display: flex;
flex-direction: column;
min-height: 115vh;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: baseline;
align-items: center;
}
.header {
margin-top: 20px;
}
.header h1 {
color: rgb(24 119 242);
font-size: 45px;
font-weight: bold;
margin: 10px;
margin-bottom: 10px;
margin-top: 20px;
}
.login-container {
background-color:white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 1000px;
max-width: 370px;
text-align: center;
margin-bottom:20px;
}
.login-container h2 {
margin-bottom: 10px;
color: #1c1e21;
font-size: 18px;
font-weight: lighter;
}
.login-container input {
width:320px;
padding: 15px;
margin: 8px 0;
border: 1px solid #dddfe2;
border-radius: 6px;
font-size: 16px;
outline: none;
}
.login-container button {
width: 350px;
padding: 15px;
margin: 8px 0;
background-color:rgb(24 119 242);
color: white;
border: none;
border-radius: 6px;
font-size: 19px;
cursor: pointer;
font-weight: bold;
}
.login-container button:hover {
background-color: #165ecb;
}
.login-container a {
color: #1877f2;
text-decoration: none;
font-size: 14px;
}
.login-container a:hover {
text-decoration: underline;
}
footer {
background-color: white;
padding: 20px 0;
text-align: left;
width: 100%;
}
footer .languages a,
footer .footer-links a {
color: #777;
text-decoration: none;
font-size: 12px;
margin: 0 5px;
width: 80%;
}
footer .languages button {
width: 25px;
color: #777;
font-size: medium;
font-weight:bold;
}
footer .languages a:hover,
footer .footer-links a:hover {
text-decoration: underline;
}
.footer-content {
width: 80%;
text-align: left;
margin-left: 80px;
}
footer .languages {
margin-bottom: 10px;
}
h5{
color:#777 ;
font-weight: lighter;
text-align: left;
}
Output:
HOPE YOU LIKED THIS TUTORIAL!