This project involves designing a Facebook homepage clone using only HTML and CSS. The design replicates the clean, intuitive layout of Facebook’s main interface, showcasing the login form, branding elements, and a responsive structure. By focusing on modern web design principles, the project ensures compatibility across devices and demonstrates proficiency in front-end development. It serves as a hands-on exercise to enhance skills in creating visually appealing and functional user interfaces using core web technologies.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Facebook Clone</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <!-- Left Section --> <div class="left-section"> <h1>facebook</h1> <p>Facebook helps you connect and share with the people in your life.</p> </div> <!-- Right Section --> <div class="right-section"> <div class="login-box"> <form id="loginForm"> <input type="email" id="email" placeholder="Email address or phone number" required> <input type="password" id="password" placeholder="Password" required> <button type="submit" class="login-btn">Log In</button> </form> <a href="#" class="forgot-password">Forgotten password?</a> <hr> <button class="create-account-btn">Create New Account</button> </div> </div> </div> <p class="footer-text">Create a Page for a celebrity, brand, or business.</p> <script src="script.js"></script> </body> </html>
/* General styles */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f2f5; color: #1c1e21; } .container { display: flex; justify-content: center; align-items: center; min-height: 100vh; gap: 2rem; padding: 1rem; } /* Left section */ .left-section { text-align: left; max-width: 500px; } .left-section h1 { font-size: 3rem; color: #1877f2; margin: 0; font-weight: bold; } .left-section p { font-size: 1.2rem; color: #1c1e21; } /* Right section */ .right-section { background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 2rem; text-align: center; max-width: 400px; width: 100%; } .login-box input { width: 100%; padding: 0.8rem; margin: 0.5rem 0; border: 1px solid #dddfe2; border-radius: 6px; font-size: 1rem; } .login-btn { width: 100%; background-color: #1877f2; color: white; font-weight: bold; padding: 0.8rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; margin-top: 1rem; } .login-btn:hover { background-color: #165ec9; } .forgot-password { display: inline-block; margin: 1rem 0; font-size: 0.9rem; color: #1877f2; text-decoration: none; } .forgot-password:hover { text-decoration: underline; } hr { border: 0; height: 1px; background-color: #dddfe2; margin: 1rem 0; } .create-account-btn { width: 70%; font-weight: bold; background-color: #42b72a; color: white; padding: 0.8rem; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; } .create-account-btn:hover { background-color: #36a420; } .footer-text { font-size: 0.9rem; color: #606770; margin-top: 1rem; }