Full Source Code
HTML + CSS + JavaScript — three-tab project. Pixel-perfect Facebook login UI with CSS Flexbox two-column layout, focus ring input states, responsive media queries, and JavaScript form validation with e.preventDefault(). Study each tab to understand the full pattern: HTML structure → CSS layout and styling → JavaScript events and validation.
HTML
CSS
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Facebook - log in or sign up</title>
<link href="https://fonts.googleapis.com/css2?family=Helvetica:wght@400;600;700&display=swap" rel="stylesheet" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: Helvetica, Arial, sans-serif;
background-color: #f0f2f5;
color: #1c1e21;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content { flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px; }
.container { max-width: 980px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 80px; }
.left-section { flex: 1; max-width: 580px; }
.logo-text { color: #1877f2; font-size: 60px; font-weight: 700; letter-spacing: -1px; }
.tagline { font-size: 28px; line-height: 32px; color: #1c1e21; padding-right: 32px; }
.right-section { width: 396px; flex-shrink: 0; }
.login-box {
background: #ffffff; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
padding: 20px 16px 28px; margin-bottom: 28px;
}
.login-form input {
width: 100%; height: 52px; padding: 14px 16px; font-size: 17px;
border: 1px solid #dddfe2; border-radius: 6px; margin-bottom: 12px;
}
.login-form input:focus { border-color: #1877f2; box-shadow: 0 0 0 2px rgba(24,119,242,0.2); outline: none; }
.login-btn {
width: 100%; height: 48px; background: #1877f2; border: none; border-radius: 6px;
color: white; font-size: 20px; font-weight: 600; cursor: pointer;
}
.login-btn:hover { background: #166fe5; }
.forgot-link { display: block; text-align: center; color: #1877f2; font-size: 14px; text-decoration: none; margin: 16px 0 20px; }
.forgot-link:hover { text-decoration: underline; }
.divider { border-top: 1px solid #dadde1; margin: 20px 0; }
.signup-btn {
display: block; width: fit-content; margin: 0 auto; padding: 0 48px; height: 48px;
background: #42b72a; border: none; border-radius: 6px; color: white;
font-size: 17px; font-weight: 600; cursor: pointer;
}
.signup-btn:hover { background: #36a420; }
.create-page { text-align: center; margin-top: 28px; font-size: 14px; }
.create-page a { color: #1c1e21; font-weight: 600; text-decoration: none; }
.create-page a:hover { text-decoration: underline; }
footer { background: #ffffff; padding: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; color: #8a8d91; margin-bottom: 8px; }
.footer-links a { color: #8a8d91; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.plus-btn { background: #f5f6f7; border: 1px solid #ccd0d5; color: #4b4f56; padding: 0 8px; cursor: pointer; }
.footer-divider { border-top: 1px solid #dddfe2; margin: 8px 0; }
.copyright { font-size: 11px; color: #8a8d91; }
@media (max-width: 900px) {
.container { flex-direction: column; gap: 40px; align-items: center; }
.left-section { text-align: center; max-width: 400px; }
.logo-text { font-size: 48px; }
.tagline { font-size: 24px; padding: 0; }
}
@media (max-width: 500px) {
.logo-text { font-size: 40px; }
.tagline { font-size: 20px; }
.login-box { box-shadow: none; background: transparent; }
}
</style>
</head>
<body>
<div class="main-content">
<div class="container">
<div class="left-section">
<div class="logo-text">facebook</div>
<p class="tagline">Facebook helps you connect and share with the people in your life.</p>
</div>
<div class="right-section">
<div class="login-box">
<form class="login-form" id="loginForm">
<input type="text" id="email" placeholder="Email or phone number" autocomplete="username" required />
<input type="password" id="pass" placeholder="Password" autocomplete="current-password" required />
<button type="submit" class="login-btn">Log In</button>
<a href="#" class="forgot-link">Forgot password?</a>
<div class="divider"></div>
<button type="button" class="signup-btn" id="signupBtn">Create new account</button>
</form>
</div>
<div class="create-page">
<a href="#"><strong>Create a Page</strong></a> for a celebrity, brand or business.
</div>
</div>
</div>
</div>
<footer>
<div class="footer-links">
<a href="#">English (US)</a> <a href="#">Español</a> <a href="#">Français (France)</a>
<a href="#">中文(简体)</a> <a href="#">العربية</a> <a href="#">Português (Brasil)</a>
<a href="#">Italiano</a> <a href="#">한국어</a> <a href="#">Deutsch</a> <a href="#">हिन्दी</a>
<button class="plus-btn">+</button>
</div>
<div class="footer-divider"></div>
<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="#">Instagram</a>
<a href="#">Threads</a> <a href="#">Privacy Policy</a> <a href="#">Terms</a>
<a href="#">About</a> <a href="#">Help</a>
</div>
<div class="copyright">Meta © 2025</div>
</footer>
<script>
const loginForm = document.getElementById('loginForm');
const signupBtn = document.getElementById('signupBtn');
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value.trim();
const pass = document.getElementById('pass').value;
if (!email || !pass) {
alert('Please enter both email/phone and password.');
return;
}
alert('Login submitted! (Demo only — no actual login)');
});
signupBtn.addEventListener('click', function() {
alert('This would redirect to the signup page.');
});
document.querySelector('.forgot-link').addEventListener('click', function(e) {
e.preventDefault();
alert('This would redirect to password recovery.');
});
</script>
</body>
</html>