Introduction :
The Facebook clone app is a simplified web-based application that emulates the basic layout and functionalities of Facebook. Built using HTML, CSS, and JavaScript, this project demonstrates the use of web technologies to create a social media platform interface. This clone includes features such as a top navigation bar, a left sidebar with links, a news feed for posts, and a right sidebar for additional content.
This clone project is an effort to replicate the user interface and fundamental functionalities of the social media platform, Facebook, using web technologies such as HTML, CSS, and JavaScript. This project provides a comprehensive understanding of how a modern social media application can be structured and implemented from the ground up. It serves as an excellent exercise for web developers to hone their skills in frontend development, user experience design, and interactive web programming.
This project serves multiple educational purposes. It allows developers to explore the structure and semantics of HTML, the styling and layout capabilities of CSS, and the dynamic, client-side behavior enabled by JavaScript. Through this process, developers can learn how to create a user interface that is not only visually appealing but also highly functional and user-friendly.
Explanation :
Creating a Facebook clone involves a comprehensive exploration of web development technologies, which allows developers to build a functional, interactive, and visually appealing social media platform. This endeavor requires an understanding of several core areas, including the structure of web pages using HTML, the design and layout of content using CSS, and the interactivity and dynamic behaviors enabled by JavaScript. The following detailed explanation breaks down each aspect of this project, emphasizing the skills and concepts that developers will learn and apply.
HTML Structure
HTML (HyperText Markup Language) is the backbone of any web page. It defines the structure and content, using various elements to organize information logically and semantically.
Semantics:
- Semantic HTML tags such as
<header>,<nav>,<section>,<article>, and<footer>are used to clearly define the different parts of the web page. This improves both accessibility and search engine optimization (SEO). - For example, the
<nav>tag is used for the navigation bar,<section>for grouping related content in the main feed, and<article>for individual posts.
- Semantic HTML tags such as
Forms and Inputs:
- Forms are crucial for user interaction, enabling functionalities like login, search, and post creation. Elements like
<form>,<input>,<textarea>, and<button>are employed. - For instance, the login form will include fields for email and password, while the post creation form will have fields for text input, file uploads, and submission buttons.
- Forms are crucial for user interaction, enabling functionalities like login, search, and post creation. Elements like
Multimedia Integration:
- Including multimedia elements like images, videos, and audio to make the platform more engaging. Tags such as
<img>for images and<video>for video content are used. - A typical post might include an image or video, making the user experience richer and more interactive.
- Including multimedia elements like images, videos, and audio to make the platform more engaging. Tags such as
CSS Styling
CSS (Cascading Style Sheets) is used to control the presentation, layout, and visual aesthetics of the web pages. It ensures that the application is visually appealing and user-friendly.
Layout Design:
- CSS Grid and Flexbox are powerful layout systems that help create responsive designs. They allow for flexible and complex layouts that adapt to different screen sizes.
- The overall layout includes a fixed navigation bar at the top, a sidebar for quick links, a main content area for the news feed, and a right sidebar for additional features.
Styling Components:
- Consistent styles are applied to elements such as buttons, forms, and cards to maintain a cohesive look throughout the application.
- For instance, buttons might have a uniform style with specific colors, border-radius, padding, and hover effects to provide a consistent user experience.
Animations and Transitions:
- Adding animations and transitions improves the user experience by providing visual feedback and making interactions more intuitive.
- Common uses include hover effects on buttons, smooth transitions for dropdown menus, and animations for loading new posts.
JavaScript Interactivity
JavaScript is essential for adding dynamic behavior and interactivity to the web application. It enables the platform to respond to user actions and update content without requiring a page reload.
Event Handling:
- Event listeners detect user actions such as clicks, form submissions, and mouse movements. Functions are defined to respond to these events appropriately.
- For example, clicking the “Like” button on a post triggers an event listener that updates the like count and changes the button’s appearance.
DOM Manipulation:
- The Document Object Model (DOM) represents the structure of the web page. JavaScript can manipulate the DOM to update the content dynamically.
- When a user submits a new post, JavaScript can create new DOM elements to display the post immediately without reloading the page.
Asynchronous Operations:
- AJAX (Asynchronous JavaScript and XML) allows the web application to fetch data from the server asynchronously. This enables real-time updates and a smoother user experience.
- For example, when the user scrolls down the news feed, new posts can be loaded and displayed without refreshing the entire page.
Key Features and Functionalities
Navigation Bar:
- The navigation bar includes essential elements like the search bar, notifications, and user profile access. It remains fixed at the top of the page for easy access.
- The search functionality involves a form that sends a query to the server and displays the results dynamically.
Sidebar:
- The left sidebar provides quick access to various sections of the platform, such as the user’s profile, news feed, groups, and pages.
- It also includes a list of online friends, allowing users to start chat conversations directly from the sidebar.
Main Content Area:
- The main content area is the core of the application, displaying the news feed where users see posts from their friends and pages they follow.
- Users can create new posts by filling out a form that includes text input and media uploads. This form uses JavaScript to validate the input and submit the data.
Right Sidebar:
- The right sidebar showcases trending topics, news, and sponsored content. It provides additional information and keeps users engaged with current events and advertisements.
Learning Outcomes
By undertaking the Facebook clone project, developers can achieve a range of learning outcomes that are crucial for modern web development:
Comprehensive Understanding of Web Technologies:
- Developers gain a thorough understanding of how HTML, CSS, and JavaScript work together to create a dynamic web application.
Responsive Design Principles:
- Learning to design layouts that adapt to different screen sizes ensures that the application is usable on desktops, tablets, and smartphones.
Interactive User Interfaces:
- Developers learn how to create interfaces that respond to user actions, making the application more engaging and user-friendly.
Real-Time Updates:
- Implementing real-time updates with AJAX and other asynchronous techniques provides a seamless user experience without the need for page reloads.
Project Management:
- Managing a project of this scope involves breaking down tasks into manageable components, coordinating between front-end and back-end development, and ensuring all parts integrate smoothly.
Conclusion
The Facebook clone project is a substantial undertaking that provides developers with a robust educational experience. It covers the full spectrum of web development skills, from structuring HTML and designing with CSS to programming interactivity with JavaScript. This project not only enhances technical proficiency but also fosters critical thinking about user experience, design aesthetics, and efficient coding practices. By replicating the functionalities of a sophisticated platform like Facebook, developers build a solid foundation in web development that prepares them for a variety of challenges in the field.
SOURCE CODE :
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Facebook Design Clone</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="topbar">
<a class="logo" href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDQ1IDMwIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" decoding="async" alt="" data-src="fb.png" width="45" height="30"> </a>
<div class="search-box">
<div class="input-group">
<input aria-describedby="basic-addon2" class="form-control" placeholder="Search Facebook" type="text" />
<button class="input-group-addon pointer" id="basic-addon2">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="right-group">
<div class="link-group">
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png">Michael
</a>
</div>
<div class="link-group">
<a href="javascript:void(0)">Home</a>
</div>
<div class="notification-group">
<div class="link-group">
<a class="freqnotif" href="javascript:void(0)">
<i class="fa fa-group"></i>
</a>
</div>
<div class="link-group">
<a class="msgnotif" href="javascript:void(0)">
<i class="fa fa-comment"></i>
</a>
</div>
<div class="link-group">
<a class="notif" href="javascript:void(0)">
<i class="fa fa-globe"></i>
</a>
</div>
<div class="link-group">
<a class="helpguide" href="javascript:void(0)">
<i class="fa fa-question-circle"></i>
</a>
</div>
</div>
</div>
</div>
<div class="left-content">
<div class="global-links">
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" /> First Last
<span class="counter">1</span>
</a>
<a class="activepage" href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="nf.png" /> News Feed
<span class="counter">
<i class="fa fa-ellipsis-h"></i>
</span>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="512" height="512" decoding="async" data-src="http://icons.iconarchive.com/icons/wineass/ios7-redesign/512/Messages-icon.png" /> Messenger
<span class="counter">1</span>
</a>
<div class="group-content">
<h4>shortcuts</h4>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDkiIGhlaWdodD0iODA5IiB2aWV3Qm94PSIwIDAgODA5IDgwOSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="809" height="809" decoding="async" data-src="http://theieltscoach.com/wp-content/uploads/2015/03/IELTS-Speaking-Tips-Icon-2.png" /> Group name
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDkiIGhlaWdodD0iODA5IiB2aWV3Qm94PSIwIDAgODA5IDgwOSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="809" height="809" decoding="async" data-src="http://theieltscoach.com/wp-content/uploads/2015/03/IELTS-Speaking-Tips-Icon-2.png" /> Group name
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDkiIGhlaWdodD0iODA5IiB2aWV3Qm94PSIwIDAgODA5IDgwOSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="809" height="809" decoding="async" data-src="http://theieltscoach.com/wp-content/uploads/2015/03/IELTS-Speaking-Tips-Icon-2.png" /> Group name
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDkiIGhlaWdodD0iODA5IiB2aWV3Qm94PSIwIDAgODA5IDgwOSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="809" height="809" decoding="async" data-src="http://theieltscoach.com/wp-content/uploads/2015/03/IELTS-Speaking-Tips-Icon-2.png" /> Group name
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDkiIGhlaWdodD0iODA5IiB2aWV3Qm94PSIwIDAgODA5IDgwOSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="809" height="809" decoding="async" data-src="http://theieltscoach.com/wp-content/uploads/2015/03/IELTS-Speaking-Tips-Icon-2.png" /> Group name
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<i class="fa fa-caret-down"></i>
<span>See More...</span>
</a>
</div>
<div class="group-content">
<h4>explore</h4>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNjZmQ0ZGI7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+" width="1024" height="1024" decoding="async" data-src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/calendar-icon.png" /> Events
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="http://image.flaticon.com/icons/png/512/223/223120.png" /> Saved
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="512" height="512" decoding="async" data-src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-13/512/Webpage-icon.png" />
Pages
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.iconfinder.com/data/icons/unique-round-blue/93/group-512.png" /> Groups
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="http://www.thesuccesswriter.com/images/fundraising.png" /> Fundraisers
<span class="counter">1</span>
</a>
<a href="javascript:void(0)">
<i class="fa fa-caret-down"></i>
<span>See More...</span>
</a>
</div>
<div class="group-content">
<h4>create</h4>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async"
data-src="http://1agb93314bcf1knhv22id9u9.wpengine.netdna-cdn.com/wp-content/uploads/2015/02/Marketing_Advertising_Icon.png" />
Ad
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="512" height="512" decoding="async" data-src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-13/512/Webpage-icon.png" /> Page
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://www.iconfinder.com/data/icons/unique-round-blue/93/group-512.png" /> Group
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjEwMjQiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNjZmQ0ZGI7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+" width="1024" height="1024" decoding="async" data-src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/calendar-icon.png" /> Event
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="http://www.thesuccesswriter.com/images/fundraising.png" /> Fundraiser
</a>
</div>
</div>
</div>
<div class="feed-content">
<div class="recentcontainer">
<ul class="newpostheader nav nav-tabs nav-justified">
<li>
<a href="javascript:void(0)">
<i class="fa fa-pencil"></i>
<span>Create a Post</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-book"></i>
<span>Media Album</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-video-camera"></i>
<span>Live Video</span>
</a>
</li>
</ul>
<div class="newpost">
<textarea placeholder="Post Something..."></textarea>
</div>
<ul class="newpostfooter nav nav-tabs nav-justified">
<li>
<a href="javascript:void(0)">
<i class="fa fa-picture-o"></i>
<span>Photo/Video</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-smile-o"></i>
<span>Feeling/Activity</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-ellipsis-h"></i>
</a>
</li>
</ul>
</div>
<div class="recentcontainer">
<div class="newpostheader">
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" />
<span class="name">First Last</span>
</a>
<span>shared <a href="javascript:void(0)">Demyos's</a> <a href="javascript:void(0)">post</a>.</span>
<p>
<a class="date" href="javascript:void(0)">44 mins</a>
<a href="javascript:void(0)">
<i class="fa fa-globe"></i>
</a>
<div class="rightsideofpost">
<a class="follow" href="javascript:void(0)">
<i class="fa fa-star"></i>
</a>
<a class="personpostmenu" href="javascript:void(0)">
<i class="fa fa-caret-down"></i>
</a>
</div>
</p><div class='code-block code-block-7' style='margin: 8px 0; clear: both;'> <script type="litespeed/javascript" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2145094925886663"
crossorigin="anonymous"></script> <ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2145094925886663"
data-ad-slot="5244933720"></ins> <script type="litespeed/javascript">(adsbygoogle=window.adsbygoogle||[]).push({})</script></div>
</div>
<div class="newpost">
<div class="postcontent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate sunt quasi in quam asperiores! Optio
voluptate impedit eos ex nisi, molestias facilis sint cupiditate, dolores veritatis cum? Enim vel, qui!
</div>
</div>
<ul class="newpostfooter nav nav-tabs nav-justified">
<li>
<a href="javascript:void(0)">
<i class="fa fa-thumbs-up"></i>
<span>Like</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="Leave a comment">
<i class="fa fa-comment-o"></i>
<span>Comment</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="Send this to friends or post it to your timeline">
<i class="fa fa-share"></i>
<span>Share</span>
</a>
</li>
</ul>
<ul class="community-counter nav nav-tabs nav-justified">
<li>
<a href="javascript:void(0)">
<i class="fa fa-thumbs-up"></i>
<span>1</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-comment-o"></i>
<span>3</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-share"></i>
<span>4</span>
</a>
</li>
</ul>
<div class="commentpost">
<div class="input-group">
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" />
</a>
<textarea class="form-control" placeholder="Write a comment..."></textarea>
<div class="input-group-btn">
<a class="btn btn-default" href="javascript:void(0)">
<i class="fa fa-smile-o"></i>
</a>
<a class="btn btn-default" href="javascript:void(0)">
<i class="fa fa-picture-o"></i>
</a>
<a class="btn btn-default" href="javascript:void(0)">
<i class="fa fa-gift"></i>
</a>
</div>
</div>
</div>
</div>
<div class="recentcontainer">
<div class="newpostheader">
<h4>
Suggested post
</h4>
<hr />
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" />
<span class="name">First Last</span>
</a>
<p>
<a class="date" href="javascript:void(0)">Sponsored</a>
<a href="javascript:void(0)">
<i class="fa fa-globe"></i>
</a>
<div class="rightsideofpost">
<a class="follow" href="javascript:void(0)">
<i class="fa fa-star"></i>
</a>
<a class="personpostmenu" href="javascript:void(0)">
<i class="fa fa-caret-down"></i>
</a>
</div>
</p>
</div>
<div class="newpost">
<div class="postcontent">
We lose 48 football fields of forest every minute. :-(
By using "<a href="http://ecosia.org" target="_blank" rel="noopener">Ecosia.org</a>" for your web searches you can help stop this trend.
Let's plant some trees together!
<div class="tc">
<iframe
src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fecosia%2Fvideos%2F10154359809121611%2F&show_text=0&width=400"
width="400" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allowFullScreen="true"></iframe>
</div>
</div>
</div>
<ul class="newpostfooter nav nav-tabs nav-justified">
<li>
<a href="javascript:void(0)">
<i class="fa fa-thumbs-up"></i>
<span>Like</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="Leave a comment">
<i class="fa fa-comment-o"></i>
<span>Comment</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="Send this to friends or post it to your timeline">
<i class="fa fa-share"></i>
<span>Share</span>
</a>
</li>
</ul>
<ul class="community-counter nav nav-tabs nav-justified">
<li>
<a href="javascript:void(0)">
<i class="fa fa-thumbs-up"></i>
<span>1</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-comment-o"></i>
<span>3</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-share"></i>
<span>4</span>
</a>
</li>
</ul>
<div class="commentpost">
<div class="input-group">
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" />
</a>
<textarea class="form-control" placeholder="Write a comment..."></textarea>
<div class="input-group-btn">
<a class="btn btn-default" href="javascript:void(0)">
<i class="fa fa-smile-o"></i>
</a>
<a class="btn btn-default" href="javascript:void(0)">
<i class="fa fa-picture-o"></i>
</a>
<a class="btn btn-default" href="javascript:void(0)">
<i class="fa fa-gift"></i>
</a>
</div>
</div>
</div>
</div>
<div class="recentcontainer">
<div class="newpostheader">
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" />
<span class="name">First Last</span>
</a>
<p>
<a class="date" href="javascript:void(0)">44 mins</a>
<a href="javascript:void(0)">
<i class="fa fa-globe"></i>
</a>
<div class="rightsideofpost">
<a class="follow" href="javascript:void(0)">
<i class="fa fa-star"></i>
</a>
<a class="personpostmenu" href="javascript:void(0)">
<i class="fa fa-caret-down"></i>
</a>
</div>
</p><div class='code-block code-block-8' style='margin: 8px 0; clear: both;'> <script type="litespeed/javascript" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2145094925886663"
crossorigin="anonymous"></script> <ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2145094925886663"
data-ad-slot="9706922910"></ins> <script type="litespeed/javascript">(adsbygoogle=window.adsbygoogle||[]).push({})</script></div>
</div>
<div class="newpost">
<div class="postcontent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate sunt quasi in quam asperiores! Optio
voluptate impedit eos ex nisi, molestias facilis sint cupiditate, dolores veritatis cum? Enim vel, qui!
</div>
</div>
<ul class="newpostfooter nav nav-tabs nav-justified">
<li>
<a href="javascript:void(0)">
<i class="fa fa-thumbs-up"></i>
<span>Like</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="Leave a comment">
<i class="fa fa-comment-o"></i>
<span>Comment</span>
</a>
</li>
<li>
<a href="javascript:void(0)" title="Send this to friends or post it to your timeline">
<i class="fa fa-share"></i>
<span>Share</span>
</a>
</li>
</ul>
<ul class="community-counter nav nav-tabs nav-justified">
<li>
<a href="javascript:void(0)">
<i class="fa fa-thumbs-up"></i>
<span>1</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-comment-o"></i>
<span>3</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="fa fa-share"></i>
<span>4</span>
</a>
</li>
</ul>
<div class="commentpost">
<div class="input-group">
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" />
</a>
<textarea class="form-control" placeholder="Write a comment..."></textarea>
<div class="input-group-btn">
<a class="btn btn-default" href="javascript:void(0)">
<i class="fa fa-smile-o"></i>
</a>
<a class="btn btn-default" href="javascript:void(0)">
<i class="fa fa-picture-o"></i>
</a>
<a class="btn btn-default" href="javascript:void(0)">
<i class="fa fa-gift"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="thirdcol-content">
<div class="section-content">
<h4>
Your Pages
<a href="javascript:void(0)">
<i class="fa fa-caret-up"></i>
</a>
<hr>
</h4>
<a href="javascript:void(0)">
<i class="fa fa-caret-down"></i>
</a>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" />
</a>
<p>
<a href="javascript:void(0)">
<span>Your Page</span>
</a>
<a href="javascript:void(0)">
<i class="fa fa-comment"></i>
Messages
</a>
<a href="javascript:void(0)">
<i class="fa fa-globe"></i>
Notifications <span>1</span>
</a>
<hr>
</p>
<p>
<a href="javascript:void(0)">
<i class="fa fa-pencil-square-o"></i>
Publish
</a>
<a href="javascript:void(0)">
<i class="fa fa-camera"></i>
Photo
</a>
<a href="javascript:void(0)">
<i class="fa fa-calendar"></i>
Event
</a>
<a href="javascript:void(0)">
<i class="fa fa-bell"></i>
Promote
</a>
</p><div class='code-block code-block-9' style='margin: 8px 0; clear: both;'> <script type="litespeed/javascript" data-src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2145094925886663"
crossorigin="anonymous"></script> <ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2145094925886663"
data-ad-slot="7515873849"></ins> <script type="litespeed/javascript">(adsbygoogle=window.adsbygoogle||[]).push({})</script></div>
</div>
<div class="section-content">
<a href="javascript:void(0)">
<i class="fa fa-calendar"></i>
1 event invite
</a>
</div>
<div class="section-content">
<h4>
Trending
<a href="javascript:void(0)">
<i class="fa fa-video-camera"></i>
</a>
<a href="javascript:void(0)">
<i class="fa fa-futbol-o"></i>
</a>
<a href="javascript:void(0)">
<i class="fa fa-flask"></i>
</a>
<a href="javascript:void(0)">
<i class="fa fa-balance-scale"></i>
</a>
<a class="activetrend" href="javascript:void(0)">
<i class="fa fa-line-chart"></i>
</a>
</h4>
<div class="trend-feed">
<ul>
<li>
<a href="javascript:void(0)">Alex Honnold</a>
<span>'Free solo' climber conquers El Capitan without rope, safety gear ‑ <span>msn.com</span></span>
</li>
<li>
<a href="javascript:void(0)">Michael Bloomberg</a>
<span>Michael Bloomberg Pledges $15 Million For Paris Climate Pact ‑ <span>huffingtonpost.com</span></span>
</li>
<li>
<a href="javascript:void(0)">Theresa May</a>
<span>UK PM May's lead cut to just 1 point over Labour - Survation poll ‑ <span>reuters.com</span></span>
</li>
</ul>
<div>
<a href="javascript:void(0)">
<i class="fa fa-caret-down"></i>
See More
</a>
<a href="javascript:void(0)">
<i class="fa fa-question"></i>
</a>
</div>
</div>
</div>
<div class="section-content">
<h4>
Sponsored
</h4>
<a href="javascript:void(0)">
Create Ad
</a>
<div>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODUiIGhlaWdodD0iMTQ5IiB2aWV3Qm94PSIwIDAgMjg1IDE0OSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="285" height="149" decoding="async" data-src="//i.imgur.com/pZ2VCSf.png">
<div>
Play at Global Poker!
<div>
<small>GlobalPoker.com</small>
</div>
</div>
<div>
Real Poker. Real Winnings. Legally Cash Out via PayPal
</div>
</a>
</div>
<div>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODQiIGhlaWdodD0iMTQ5IiB2aWV3Qm94PSIwIDAgMjg0IDE0OSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="284" height="149" decoding="async" data-src="//i.imgur.com/2miHaRa.png">
<div>
How To Start Your Own Social Media Marketing Agency and Get Small Businesses To Hire You
</div>
<div>
Tai Lopez went from broke & sleeping on his mom's sofa to becoming a social media mogul an...
</div>
</a>
</div>
</div>
<div class="section-content">
<a href="javascript:void(0)">English (US)</a> · <a href="javascript:void(0)">Español</a> · <a
href="javascript:void(0)">Português (Brasil)</a> · <a href="javascript:void(0)">Français (France)</a> · <a
href="javascript:void(0)">Deutsch</a>
</div>
<div>
<a href="javascript:void(0)">Privacy</a> · <a href="javascript:void(0)">Terms</a> · <a
href="javascript:void(0)">Advertising</a> · <a href="javascript:void(0)">Ad Choices</a> · <a
href="javascript:void(0)">Cookies</a> · <a href="javascript:void(0)">More</a>
<p>
Facebook © 2017
</p>
</div>
</div>
<div class="right-content">
<ul>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <span>likes First Name's post</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <span>likes First Name's post</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <span>likes First Name's post</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <span>likes First Name's post</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <span>likes First Name's post</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <span>likes First Name's post</span>
</a>
</li>
</ul>
<ul>
<h4>Your Pages</h4>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>Page Name</b> <span>1</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>Page Name</b>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>Page Name</b> <span>2</span>
</a>
</li>
<h4>Contacts</h4>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <i class="fa fa-circle"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <i class="fa fa-circle"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <i class="fa fa-circle"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <i class="fa fa-circle"></i>
</a>
</li>
<li>
<a href="javascript:void(0)">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="profile.png" align="left">
<b>First Name</b> <i class="fa fa-circle"></i>
</a>
</li>
</ul>
</div>
<script type="litespeed/javascript" data-src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> <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://foolishdeveloper.com/wp-content/litespeed/js/693a5a62df373c90aa3a6a952b1096a6.js?ver=ebeb3"></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 (style.css)
body {
background-color: #e9ebee;
}
textarea,
.form-control {
border: 0;
border-radius: 0;
resize: none;
}
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
padding: 6px 26px;
height: 42px;
background: #3b5e95;
border-bottom: 1px solid #294c7b;
overflow: hidden;
}
.topbar .right-group {
float: right;
}
.topbar .right-group .link-group {
position: relative;
top: -4px;
display: inline-block;
padding: 0;
}
.topbar .right-group .link-group a {
padding: 9px 8px;
color: #fff;
font-size: 12px;
}
.topbar .right-group .link-group a img {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 9px;
}
.topbar .right-group .link-group a:hover {
background: #355486;
text-decoration: none;
}
.topbar .right-group .link-group:nth-child(2) a {
margin-right: 16px;
border-left: 1px solid #355485;
}
.topbar .right-group .notification-group {
display: inline-block;
position: relative;
top: 3px;
}
.topbar .right-group .notification-group .link-group a {
margin: 0;
border: 0;
}
.topbar .right-group .notification-group a {
color: #17253c;
font-size: 21px;
}
.topbar .right-group .notification-group a:hover {
color: #111;
background: transparent;
}
.topbar .right-group .link-group:nth-child(4) a {
margin-left: 16px;
border-left: 1px solid #355485;
}
.topbar .search-box {
display: inline-block;
width: calc(100vw - 72%);
}
.topbar .search-box .input-group * {
font-size: 12px;
height: 25px;
border: 1px solid #fff;
background: #fff;
outline: 0;
}
.topbar .search-box .input-group button {
color: #7a7a7a;
transition: all ease 150ms;
}
.topbar .search-box .input-group button:hover {
color: #000;
}
.left-content {
left: 0;
}
.left-content {
position: fixed;
top: 42px;
bottom: 0;
width: 250px;
background: #e9ebee;
overflow: auto;
}
.left-content .global-links {
padding: 10px;
margin-left: 10px;
}
.left-content .global-links a {
display: inline-block;
color: #000;
font-size: 12px;
width: 100%;
padding: 2px 8px;
}
.left-content .global-links a img {
width: 20px;
height: 20px;
margin-right: 6px;
}
.left-content .global-links .counter {
float: right;
color: #90949c;
}
.left-content .global-links .counter .fa-ellipsis-h {
font-size: 20px;
}
.left-content .global-links .activepage {
padding-top: 5px;
background: #fff;
border-radius: 2px;
border: 1px solid #dddfe2;
}
.left-content .group-content h4 {
margin: 20px 0 8px 0;
font-size: 13px;
color: #444;
text-transform: uppercase;
}
.left-content a:last-child .fa-caret-down {
margin-right: 12px;
}
.feed-content {
position: absolute;
top: 42px;
bottom: 0;
left: 250px;
right: 0;
padding: 12px 7px;
background: #e9ebee;
overflow: auto;
}
.feed-content .recentcontainer {
border-radius: 2px;
border: 1px solid #dddfe2;
margin-bottom: 15px;
overflow: hidden;
}
.feed-content .recentcontainer .newpostheader,
.feed-content .recentcontainer .newpostfooter {
padding: 4px 5px;
background: #f6f7f9;
}
.feed-content .recentcontainer .newpostheader li,
.feed-content .recentcontainer .newpostfooter li {
display: inline-block;
width: 100%;
text-align: center;
}
.feed-content .recentcontainer .newpostheader li:first-child,
.feed-content .recentcontainer .newpostfooter li:first-child {
float: left;
}
.feed-content .recentcontainer .newpostheader li:last-child,
.feed-content .recentcontainer .newpostfooter li:last-child {
float: rght;
}
.feed-content .recentcontainer .newpostheader h4,
.feed-content .recentcontainer .newpostfooter h4 {
font-size: 14px;
margin: 10px 5px;
color: #666;
}
.feed-content .recentcontainer .newpostheader a:first-child,
.feed-content .recentcontainer .newpostfooter a:first-child {
margin-right: 5px;
}
.feed-content .recentcontainer .newpostheader a,
.feed-content .recentcontainer .newpostfooter a {
font-size: 14px;
}
.feed-content .recentcontainer .newpostheader a img,
.feed-content .recentcontainer .newpostfooter a img {
width: 40px;
height: 40px;
margin: 5px 5px 0 5px;
}
.feed-content .recentcontainer .newpostheader a .name,
.feed-content .recentcontainer .newpostfooter a .name {
position: relative;
top: -6px;
}
.feed-content .recentcontainer .newpostheader a .fa,
.feed-content .recentcontainer .newpostfooter a .fa {
display: inline-block;
margin: 5px;
}
.feed-content .recentcontainer .newpostheader > span,
.feed-content .recentcontainer .newpostfooter > span {
position: relative;
top: -6px;
left: -4px;
font-size: 14px;
}
.feed-content .recentcontainer .newpostheader p,
.feed-content .recentcontainer .newpostfooter p {
position: relative;
top: -22px;
left: 55px;
font-size: 12px;
}
.feed-content .recentcontainer .newpostheader p a,
.feed-content .recentcontainer .newpostfooter p a {
font-size: 12px;
color: #4b4f56;
margin-right: 5px;
}
.feed-content .recentcontainer .newpostheader .rightsideofpost,
.feed-content .recentcontainer .newpostfooter .rightsideofpost {
position: relative;
top: -73px;
float: right;
}
.feed-content .recentcontainer .newpostheader .rightsideofpost .personpostmenu,
.feed-content .recentcontainer .newpostfooter .rightsideofpost .personpostmenu {
color: #4b4f56;
}
.feed-content .recentcontainer .newpostheader li a,
.feed-content .recentcontainer .newpostfooter li a {
font-size: 14px;
color: #4b4f56;
margin-right: 5px;
}
.feed-content .recentcontainer .newpostheader li a .fa,
.feed-content .recentcontainer .newpostfooter li a .fa {
display: inline-block;
margin: 5px;
}
.feed-content .recentcontainer .community-counter {
padding: 4px 5px;
background: #f6f7f9;
}
.feed-content .recentcontainer .community-counter li a {
font-size: 14px;
color: #4b4f56;
margin-right: 5px;
}
.feed-content .recentcontainer .community-counter li a .fa {
display: inline-block;
margin: 5px;
}
.feed-content .recentcontainer .newpost textarea,
.feed-content .recentcontainer .newpost .postcontent {
display: inherit;
padding: 10px;
width: 100%;
height: 100%;
background: #f6f7f9;
}
.feed-content .recentcontainer .newpost .postcontent {
position: relative;
margin-top: -40px;
padding-bottom: 40px;
white-space: pre-line;
}
.feed-content .recentcontainer .newpostfooter {
margin-top: 1px;
}
.feed-content .recentcontainer .commentpost {
display: inherit;
background: #f6f7f9;
margin-top: -1px;
}
.feed-content .recentcontainer .commentpost img {
margin: 10px;
height: 40px;
}
.feed-content .recentcontainer .commentpost .input-group-btn {
display: inline-block;
background: #fff;
}
.feed-content .recentcontainer .commentpost .input-group-btn a {
margin-top: 10px;
}
.feed-content .recentcontainer:nth-child(1) .newpostfooter li:first-child .fa {
color: #96b756;
}
.feed-content .recentcontainer:nth-child(1) .newpostfooter li:nth-child(2) .fa {
color: #f1c04e;
}
.feed-content .recentcontainer:nth-child(1) .newpostfooter li:last-child a:last-child {
font-size: 20px;
}
.thirdcol-content {
position: fixed;
top: 42px;
bottom: 0;
width: 250px;
background: #e9ebee;
right: 0;
display: block;
width: 300px;
padding: 12px 7px;
background: #e9ebee;
overflow-x: auto;
}
.thirdcol-content > div > a,
.thirdcol-content > div > p {
font-size: 12px;
}
.thirdcol-content .section-content {
border-radius: 2px;
border: 1px solid #dddfe2;
margin: 0 0 15px 0;
overflow-y: hidden;
padding: 4px 5px;
background: #f6f7f9;
}
.thirdcol-content .section-content h4:nth-child(1) {
font-size: 14px;
margin: 6px;
padding: 6px;
color: #888;
}
.thirdcol-content .section-content h4:nth-child(1) a {
float: right;
color: #8a8a8a;
}
.thirdcol-content .section-content p a {
display: block;
}
.thirdcol-content .section-content p a span:not(:first-child) {
display: inline-block;
margin-left: 4px;
font-size: 9px;
padding: 1px 2px;
color: #545454;
background: #fff;
border: 1px solid #b8b8b8;
}
.thirdcol-content .section-content a {
font-size: 14px;
margin-right: 5px;
}
.thirdcol-content .section-content a img {
width: 64px;
height: 64px;
margin: 5px 5px 0 5px;
}
.thirdcol-content .section-content a .fa {
display: inline-block;
margin: 5px;
}
.thirdcol-content .section-content p:nth-child(3) {
text-align: right;
margin: -20px 0 4px 0;
padding: 2px;
width: 80%;
}
.thirdcol-content .section-content p:nth-child(3) a {
display: inline-block;
position: relative;
top: -18px;
}
.thirdcol-content .section-content p:nth-child(4) {
margin-top: -64px;
margin-left: 75px;
font-size: 12px;
}
.thirdcol-content .section-content p:nth-child(4) a:not(:nth-child(1)) {
font-size: 12px;
color: #4b4f56;
margin-right: 5px;
}
.thirdcol-content .section-content p:nth-child(7) {
text-align: center;
}
.thirdcol-content .section-content p:nth-child(7) a {
width: 20%;
display: inline-block;
color: #333;
}
.thirdcol-content .section-content p:nth-child(7) .fa {
display: block;
}
.thirdcol-content .section-content .activetrend,
.thirdcol-content .section-content .activetrend .fa {
color: #1273b8;
}
.thirdcol-content .section-content .trend-feed ul {
margin: 0 30px;
padding: 0;
list-style: square url("http://i.imgur.com/Etzny0O.png");
}
.thirdcol-content .section-content .trend-feed ul li {
font-size: 12px;
}
.thirdcol-content .section-content .trend-feed ul li span:nth-child(1) {
color: #999;
}
.thirdcol-content .section-content .trend-feed div a {
float: left;
font-size: 12px;
margin-top: 4px;
}
.thirdcol-content .section-content .trend-feed div a:first-child {
padding: 4px 0 0 4px;
}
.thirdcol-content .section-content .trend-feed div a:last-child {
float: right;
padding: 4px 0 0 4px;
}
.thirdcol-content .section-content:nth-child(1) > a:nth-child(2) {
float: right;
color: #8a8a8a;
}
.thirdcol-content .section-content:nth-child(4) {
font-size: 12px;
}
.thirdcol-content .section-content:nth-child(4) h4 {
float: left;
}
.thirdcol-content .section-content:nth-child(4) a:nth-child(2) {
margin-top: 10px;
float: right;
}
.thirdcol-content .section-content:nth-child(4) div {
padding: 5px;
}
.thirdcol-content .section-content:nth-child(4) div a {
display: block;
}
.thirdcol-content .section-content:nth-child(4) div a img {
width: 100%;
height: auto;
}
.thirdcol-content .section-content:nth-child(4) div a:hover {
text-decoration: none;
}
.thirdcol-content .section-content:nth-child(4) div div {
padding: 5px 5px 0 5px;
font-size: 12px;
}
.thirdcol-content .section-content:nth-child(4) div div div {
padding: 0;
}
.thirdcol-content .section-content:nth-child(4) div div:nth-child(3) {
color: #878787;
}
.thirdcol-content .section-content:nth-child(5) a {
font-size: 12px;
}
.feed-content {
right: 300px;
}
.right-content {
display: none;
position: fixed;
top: 42px;
bottom: 0;
width: 250px;
background: #e9ebee;
right: 0;
width: 275px;
padding: 12px 7px;
background: #e9ebee;
overflow-x: auto;
border-left: 1px solid #a3a3a3;
}
.right-content ul {
list-style: none;
padding: 0;
margin: 0;
height: 50%;
overflow: auto;
}
.right-content ul li {
display: block;
padding: 5px 5px 15px 5px;
width: 100%;
border-bottom: 1px solid #a3a3a3;
cursor: pointer;
}
.right-content ul:first-child {
list-style: none;
padding: 0;
height: 50%;
overflow: auto;
}
.right-content ul:first-child li {
display: block;
padding: 5px 5px 15px 5px;
width: 100%;
border-bottom: 1px solid #a3a3a3;
cursor: pointer;
}
.right-content ul:first-child li a {
padding: 5px;
font-size: 12px;
}
.right-content ul:first-child li img {
display: inline-block;
width: 32px;
height: 32px;
}
.right-content ul:first-child li b,
.right-content ul:first-child li span {
color: #000;
}
.right-content ul:first-child li span {
color: #545454;
}
.right-content ul:first-child li a:hover {
text-decoration: none;
}
.right-content ul:first-child li:hover {
background: #ccc;
}
.right-content ul:nth-child(2) {
list-style: none;
padding: 0;
height: 50%;
overflow: auto;
}
.right-content ul:nth-child(2) h4 {
font-size: 12px;
margin-top: 15px;
color: #474747;
text-transform: uppercase;
}
.right-content ul:nth-child(2) li {
display: block;
padding: 5px 5px 15px 5px;
width: 100%;
border-bottom: 1px solid #a3a3a3;
cursor: pointer;
}
.right-content ul:nth-child(2) li a {
padding: 5px;
font-size: 12px;
}
.right-content ul:nth-child(2) li img {
display: inline-block;
width: 32px;
height: 32px;
}
.right-content ul:nth-child(2) li b,
.right-content ul:nth-child(2) li span {
color: #000;
}
.right-content ul:nth-child(2) li span {
display: block;
float: right;
position: relative;
top: 8px;
font-size: 9px;
padding: 1px 2px;
color: #545454;
background: #fff;
border: 1px solid #b8b8b8;
}
.right-content ul:nth-child(2) li .fa {
float: right;
position: relative;
top: 8px;
color: #1f0;
}
.right-content ul:nth-child(2) li a:hover {
text-decoration: none;
}
.right-content ul:nth-child(2) li:hover {
background: #ccc;
}
@media all and (max-width: 700px) {
.left-content {
display: none;
}
.feed-content {
left: 0;
}
.topbar .right-group > .link-group {
display: none;
}
}
@media all and (max-width: 1000px) {
.thirdcol-content {
display: none;
}
.feed-content {
right: 0;
}
}
@media all and (min-width: 1260px) {
.feed-content {
right: 250px;
}
.right-content {
right: 0;
}
}
@media all and (min-width: 1260px) {
.feed-content {
right: 575px;
}
.thirdcol-content {
right: 275px;
}
.right-content {
display: block;
}
}
.pointer {
cursor: pointer;
}
.ib {
display: inline-block;
}
.fl {
float: left;
}
.fr {
float: right;
}
.tc {
text-align: center;
}
JavaScript (script.js)
(function() {
}).call(this);
OUTPUT :
