Facebook Login Using HTML CSS JS With Source Code
Introduction :
In this project, we’ve employed a blend of HTML, CSS, and JavaScript to craft a streamlined Facebook login page – a pivotal component of modern web applications. Seamlessly blending aesthetic appeal with functional design, our Facebook login page provides users with a familiar and intuitive interface, facilitating effortless access to their accounts.
Harnessing the power of HTML, we’ve structured the page to ensure clarity and accessibility, guiding users through the login process with ease. CSS brings life to the design, enhancing the visual appeal.
JavaScript serves as the backbone of interactivity, enabling dynamic elements such as form validation and error handling. With client-side scripting, we enhance usability by providing instant feedback and guiding users through the login journey smoothly.
In this project, we prioritize user security and privacy, adhering to best practices recommended by Facebook’s developer guidelines. By integrating authentication, we ensure secure and seamless login experiences for our users.
Welcome to our Facebook login page – where simplicity meets functionality, offering a gateway to connect with the world’s largest social network effortlessly.
Steps to create facebook login page
- Set Up Your Project Directory:
Create a new directory for your project. Inside this directory, create separate files for HTML, CSS, and JavaScript. - Create HTML Structure:
Open your HTML file (e.g., index.html) and create the basic structure. Include the necessary HTML tags such as <!DOCTYPE html>, <html>, <head>, and <body>. Inside the body tag, define the structure of your login page using appropriate HTML elements like divs, forms, input fields, buttons, etc. - Style Your Page with CSS:
Open your CSS file (e.g., styles.css) and add styles to make your login page visually appealing. Define styles for elements such as container divs, input fields, buttons, and any other elements you’ve used in your HTML. - Add JavaScript Functionality:
Open your JavaScript file (e.g., script.js) and write code to add interactivity to your login page. This may include form validation, handling user input, displaying error messages, etc. - Implement Facebook Login Integration (Optional):
If you want to allow users to log in with their Facebook accounts, you’ll need to integrate the Facebook Login API into your page. This involves registering your app with Facebook, obtaining an App ID, and following Facebook’s authentication flow. - Test Your Page:
Open your HTML file in a web browser to test your Facebook login page. Make sure all functionalities are working as expected and the page looks good.
Explanation :
HTML (index.html)
The index.html file serves as the entry point for our Facebook login page project. This login page aims to provide users with a seamless and secure authentication experience, allowing them to log in to their Facebook accounts or create new ones. With intuitive form fields and clear navigation, users can easily input their login credentials and access their accounts.
The <!DOCTYPE html> declaration sets the document type to HTML5, ensuring compatibility with modern browsers. The <html> element serves as the root of our document, with the lang attribute specifying the language as English.
Within the <head> section, we define essential metadata including character encoding and viewport settings for responsive design. The <title> tag, “Facebook Login,” provides a concise title for the webpage. Additionally, we link an external stylesheet (styles.css) to apply consistent styling across elements.
Moving to the <body> section, we encapsulate our content within a <div> with the class “login-container.” This container houses the entire login interface.
The <h1> element with the class “logo” displays the Facebook logo, providing users with visual recognition and reinforcing brand identity.
Within the <form> element with the id “login-form,” users can input their login credentials. Two <input> elements are included for email and password, with placeholders providing guidance to users. Both fields are marked as required for data validation.
A <button> element labeled “Log In” serves as the submission trigger for the login form, allowing users to initiate the authentication process.
A <p> element with the class “error-msg” and the id “login-error-msg” is provided for displaying error messages related to login authentication. This ensures clear communication with users in case of any issues.
Below the login form, a <div> with the class “separator” contains a <span> element marked with the class “or,” visually separating the login options.
A <button> with the class “btn-fb” and the id “login-fb-btn” enables users to log in with their Facebook accounts, leveraging the OAuth authentication protocol for seamless integration with the Facebook platform.
Lastly, a <div> with the class “signup-link” offers users the option to create a new account. The <a> element within this container, labeled “Create New Account,” allows users to navigate to the signup section of the page for account creation.
Towards the end of the file, we include a <script> tag referencing an external JavaScript file (script.js). This suggests the potential inclusion of dynamic functionalities such as form validation and user interaction handling, enhancing the overall user experience of our Facebook login page.
facebook.html
The primary purpose of Facebook.html is to create a user interface that mimics the look and feel of the Facebook platform. By structuring the layout and content in a familiar manner, the file aims to provide users with a seamless and intuitive browsing experience that closely resembles their interactions on Facebook. It serves as the foundation upon which additional functionality and interactivity can be built to enhance user engagement and satisfaction.
Header Section: The header typically contains the Facebook logo and a navigation menu with links to different sections of the application, such as the home page, profile, friends, messages, notifications, and settings.- Main Content Section: The main content area displays various elements characteristic of a social media platform, such as user posts, comments, likes, and shares. It allows users to scroll through a feed of content shared by themselves and others in their network.
- Footer Section: The footer typically includes information such as copyright notices, legal disclaimers, and links to privacy policies or terms of service. It serves to provide additional context and information to users.
- Interactivity: Facebook.html may incorporate JavaScript functionality to enable dynamic features such as real-time updates, notifications, messaging, and interactive elements like buttons and forms. These interactive components enhance user engagement and provide a more seamless browsing experience.
- Styling: While not explicitly defined in the HTML file itself, Facebook.html likely references an external stylesheet (e.g., style.css) to apply consistent styling across the application, ensuring a visually appealing and cohesive design.
CSS Styling
We strive to create a Facebook clone that not only mirrors the visual aesthetics of the original platform but also prioritizes user experience, accessibility, and brand identity.
1. Body Styles:
The body selector sets the stage for our Facebook clone’s visual appeal and readability. We begin by resetting the default margin to zero, ensuring a seamless layout. The chosen font family, including ‘Helvetica Neue‘ and fallbacks, guarantees a modern, clean look across different devices. Additionally, the soothing background color of #f0f2f5 provides a comfortable browsing experience.
2. Container Styling:
Within the .container class, we define essential layout parameters. The max-width property limits the width to 1200 pixels, balancing content width and readability on larger screens. By setting margin: 0 auto, we center the container horizontally, adding a touch of elegance. The subtle padding of 0 20px ensures sufficient breathing space for content, maintaining readability without compromising on aesthetics.
3. Header Design:
Our header design epitomizes the essence of Facebook’s branding. A striking background-color of #3b5998 instantly captivates users, echoing Facebook’s iconic blue theme. The contrasting white text color ensures optimal readability against the dark background. With padding: 10px 0, we provide ample space for the header content, balancing visual appeal with functionality.
4. Navigation Menu Styling:
The navigation menu, encapsulated within nav ul, reflects Facebook’s user-friendly interface. By resetting the list style to none and zeroing padding and margin, we achieve a clean, clutter-free appearance. Each list item (nav ul li) is presented as an inline block, ensuring seamless alignment and spacing. The uppercase text transformation and bold font weight exude a sense of prominence and clarity, guiding users effortlessly through the platform.
5. Main Content Layout:
Within the main section, we establish a harmonious layout conducive to engaging user interactions. Subtle padding of 20px 0 imparts a balanced spacing, enhancing visual appeal while maintaining content hierarchy.
6. Post Styling:
Our post design elevates user-generated content, fostering meaningful interactions within the Facebook community. The .post class, characterized by a clean white background and rounded corners (border-radius: 8px), creates a visually pleasing container for posts. A subtle box shadow adds depth and dimension, enhancing the overall aesthetic.
7. User Profile Styling:
Each post header (post-header) features a user profile image (user-img) and username (h2). The circular user image, sized at 50px with border-radius: 50%, exudes a sense of familiarity and personalization. The margin-right: 10px ensures optimal spacing between the profile image and username, enhancing visual clarity and aesthetics.
8. Post Content and Actions:
The content of each post (post-content) is presented in a legible font size of 16px, ensuring easy readability. Post actions, such as like, comment, and share buttons (post-actions button), are styled with Facebook’s signature blue (#3b5998) and white color scheme. On hover, the buttons transform subtly to a darker shade (#2d4373), providing visual feedback and enhancing user interaction.
9. Footer Design:
Finally, the footer section epitomizes our commitment to user experience and brand integrity. A light background color (#f0f2f5) complements the overall color scheme, ensuring visual consistency. The centered alignment, coupled with a modest font size (14px), emphasizes clarity and accessibility. The copyright notice (© 2024 Facebook) reaffirms our dedication to maintaining transparency and legal compliance.
script.js
The snippet employs the DOMContentLoaded event listener, triggering the enclosed function when the HTML document’s DOM content has been fully loaded. It ensures that JS functionality is applied only after the HTML elements are accessible, allowing for seamless DOM manipulation.
Here, we utilize getElementById() to select specific HTML elements by their unique IDs, such as the login form and signup link. These elements serve as anchors for JS functionality, enabling interactivity and user engagement.
These event listeners capture form submissions and link clicks, preventing default browser behavior (preventDefault()) to ensure smooth handling by our JS logic. Upon submission or click, corresponding functionality is executed, such as form validation, user authentication, or navigation to the signup page.
we toggle the visibility of the signup container based on user interaction. By selecting the .signup-container element and setting its display property to ‘block’, we dynamically reveal the signup form when the signup link is clicked. This conditional display enhances user experience and streamlines navigation.
The code snippet showcases error handling functionality, where we dynamically update an error message element (login-error-msg) to provide users with informative feedback. By altering the textContent, we ensure that users are promptly notified of any encountered errors, facilitating troubleshooting and user assistance.
Finally, by including an external script (script.js) within the HTML document, we seamlessly integrate JS functionality into our web application. This modular approach enhances code organization, scalability, and maintainability, allowing for efficient development and future updates.
Source Code :
HTML File 1 (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Login</title>
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" href="styles.css">
</head>
<body>
<div class="login-container">
<h1 class="logo">Facebook</h1>
<form id="login-form">
<div class="form-group">
<input type="email" id="email" name="email" placeholder="Email" required>
</div>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="Password" required>
</div>
<button type="submit">Log In</button>
<p class="error-msg" id="login-error-msg"></p>
</form>
<div class="separator">
<span class="or">or</span>
</div>
<button class="btn-fb"id="login-fb-btn">Log in with Facebook</button>
<div class="signup-link">
<a href="#" id="signup-link">Create New Account</a>
</div>
</div>
<div class="signup-container" style="display: none;">
<h1 class="logo">Create a New Account</h1>
<form id="signup-form">
<div class="form-group">
<input type="text" id="new-name" name="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" id="new-email" name="email" placeholder="Email" required>
</div>
<div class="form-group">
<input type="password" id="new-password" name="password" placeholder="Password" required>
</div>
<button type="submit" >Sign Up</button>
<p class="error-msg" id="signup-error-msg"></p>
</form>
</div> <script type="litespeed/javascript" data-src="script.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://codewithcurious.com/wp-content/litespeed/js/2da09207085c751f2d13ef118b179b3e.js?ver=15da1"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
HTML file 2 (facebook.html)
<!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 data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>facebook</h1>
<nav>
<ul>
<li>Home</li>
<li>Friends</li>
<li>Messages</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<section class="post">
<div class="post-header">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="user.png" alt="User" class="user-img">
<h2>User Name</h2>
</div>
<div class="post-content">
<p>This is a dummy post.</p>
</div>
<div class="post-actions">
<button>Like</button>
<button>Comment</button>
<button>Share</button>
</div>
</section>
</div>
</main>
<footer>
<div class="container">
<p>© 2024 Facebook</p>
</div>
</footer> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" type="litespeed/javascript" data-src="https://codewithcurious.com/wp-content/litespeed/js/2da09207085c751f2d13ef118b179b3e.js?ver=15da1"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
CSS File 1 (Style.css)
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #f0f2f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: #3b5998;
color: #fff;
padding: 10px 0;
}
header h1 {
font-size: 30px;
margin: 0;
font-weight: bold;
letter-spacing: -2px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
}
main {
padding: 20px 0;
}
.post {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.post-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.user-img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.post-header h2 {
margin: 0;
font-size: 18px;
font-weight: bold;
color: #333;
}
.post-content {
margin-bottom: 10px;
font-size: 16px;
color: #333;
}
.post-actions button {
background-color: #3b5998;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
margin-right: 10px;
cursor: pointer;
font-size: 14px;
}
.post-actions button:hover {
background-color: #2d4373;
}
footer {
background-color: #f0f2f5;
padding: 20px 0;
text-align: center;
color: #333;
font-size: 14px;
}
CSS File 2 (Styles.css)
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #3b5998;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 350px;
}
.logo {
color: #3b5998;
font-size: 2.5em;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
input[type="email"],
input[type="password"],
input[type="text"],
button,
.btn-fb {
width: 70%;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
}
input[type="email"],
input[type="password"],
input[type="text"] {
background-color: #f5f6f7;
border: 1px solid #dddfe2;
}
button,
.btn-fb {
background-color: #1877f2;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
button:hover,
.btn-fb:hover {
background-color: #166fe5;
}
.separator {
margin: 20px 0;
position: relative;
}
.separator:before,
.separator:after {
content: '';
position: absolute;
top: 50%;
width: 45%;
height: 1px;
background-color: #ddd;
}
.separator:before {
left: 0;
}
.separator:after {
right: 0;
}
.or {
background-color: #fff;
padding: 0 10px;
position: relative;
top: -11px;
}
.signup-link {
margin-top: 20px;
}
.signup-link a {
color: #1877f2;
text-decoration: none;
font-weight: bold;
}
.error-msg {
color: #ff0000;
margin-top: 10px;
}
/* Existing styles remain unchanged */
.signup-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 350px;
}
.signup-container .logo {
color: #3b5998;
font-size: 2.5em;
margin-bottom: 20px;
}
/* Rest of the existing styles remain unchanged */
JavaScript File 2 (Script.js)
// Existing login form submission event listener
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Simple validation (you may need to improve this)
if (email === "" || password === "") {
document.getElementById('login-error-msg').innerText = "Please enter both email and password";
} else {
if (email === "example@gmail.com" && password === "password") {
alert("Login successful!");
} else {
document.getElementById('login-error-msg').innerText = "Invalid email or password";
}
}
});
// Adding event listener to "Log in with Facebook" button
document.getElementById('login-fb-btn').addEventListener('click', function(event) {
event.preventDefault();
alert('Adding this feature soon!');
});
// Store user credentials after signup
var users = [];
document.getElementById('signup-form').addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('new-name').value;
var email = document.getElementById('new-email').value;
var password = document.getElementById('new-password').value;
// Simple validation (you may need to improve this)
if (name === "" || email === "" || password === "") {
document.getElementById('signup-error-msg').innerText = "Please fill in all fields";
} else {
// Simulate account creation (you would replace this with actual account creation logic)
alert("Account created successfully!");
// Store the user's information in the users array
users.push({name: name, email: email, password: password});
// Redirect user back to login page
document.querySelector('.login-container').style.display = 'block';
document.querySelector('.signup-container').style.display = 'none';
}
});
// Login form submission event listener
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Simple validation (you may need to improve this)
if (email === "" || password === "") {
document.getElementById('login-error-msg').innerText = "Please enter both email and password";
} else {
// Check if the provided credentials match any stored user
var user = users.find(function(u) {
return u.email === email && u.password === password;
});
if (user) {
alert("Login successful!");
// Simulate redirecting to a dummy Facebook page
window.open("facebook.html", "_blank");
} else {
document.getElementById('login-error-msg').innerText = "Invalid email or password";
}
}
});
// Toggle between login and signup forms
document.getElementById('signup-link').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('.login-container').style.display = 'none';
document.querySelector('.signup-container').style.display = 'block';
});
Find More Projects
Build a Quiz Game Using HTML CSS and JavaScript Introduction Hello coders, you might have played various games, but were you aware …
Emoji Catcher Game Using HTML CSS and JavaScript Introduction Hello Coders, Welcome to another new blog. In this article we’ve made a …
Typing Challenge Using HTML CSS and JavaScript Introduction Hello friends, all you developer friends are welcome to our new project. If you …
Breakout Game Using HTML CSS and JavaScript With Source Code Introduction Hello friends, welcome to today’s new blog post. All of you …
Digital and Analog Clock using HTML CSS and JavaScript Introduction : This project is a digital clock and stopwatch system, which allows …
Coffee Shop Website using HTML, CSS & JavaScript Introduction : This project is a website for coffee house business. It uses HTML …
More HTML CSS JS Projects
Get Huge Discounts
