Instagram Home Clone Using HTML, CSS and JavaScript With Source Code
Introduction :
The project is a web-based clone of Instagram, built using HTML, CSS, and JavaScript. The purpose of this project is to recreate the look and feel of Instagram’s web interface while providing basic functionality such as navigation, interactive buttons, and dynamic content handling using JavaScript. This project serves as a practice for understanding front-end web development principles, including layout design, styling, and DOM manipulation.
Explanation :
HTML Structure
HTML (HyperText Markup Language) is used to create the structure of the web page. In this project, the HTML file defines the layout of various sections such as the header, navigation menu, profile area, feed, and footer.
- Header: Contains the Instagram logo, a search bar, and action icons like home, messages, and profile.
- Navigation: Provides links to different sections such as the home feed, explore page, and user profile.
- Main Content Area: Displays the user’s feed with posts, each containing images, captions, likes, comments, and options to share.
- Sidebar: Includes suggestions for people to follow, user profile details, and additional links.
- Footer: Lists links to other pages such as About, Help, and Privacy, reflecting the actual Instagram footer.
CSS Styling
CSS (Cascading Style Sheets) is responsible for the visual presentation of the web page. In the Instagram Web clone, CSS is used to style elements to match Instagram’s sleek, minimalist design.
- Layout Design: CSS Grid and Flexbox are often employed to create responsive layouts, ensuring that the content is properly aligned and spaced, resembling the actual Instagram interface.
- Typography: Custom fonts and font sizes are used to match Instagram’s branding, providing a similar look and feel.
- Color Scheme: Instagram’s recognizable color scheme, including shades of black, white, and gray, is implemented to maintain brand consistency.
- Interactive Elements: Buttons, icons, and input fields are styled to be visually appealing and to provide feedback (e.g., hover effects) to users when interacted with.
JavaScript Interactivity
JavaScript is used to add interactivity and dynamic behavior to the web page, making it more engaging and functional.
- Event Handling: JavaScript captures and responds to user actions such as clicking, typing, or scrolling. For instance, clicking on a heart icon might trigger an animation that simulates liking a post.
- DOM Manipulation: JavaScript can modify the Document Object Model (DOM) to update the page’s content without reloading. For example, adding a new comment to a post dynamically.
- Responsive Behavior: JavaScript can be used to adjust the layout or content based on the user’s device or window size, ensuring a consistent experience across devices.
- Local Storage: Though limited in a basic clone, JavaScript could be used to store user preferences or data locally, providing a more personalized experience.
Responsive Design
To ensure the Instagram clone is accessible on various devices (desktops, tablets, smartphones), the project likely includes responsive design principles.
- Media Queries: CSS media queries are used to apply different styles depending on the screen size. This might involve changing the layout from a multi-column format on desktop to a single column on mobile.
- Flexible Layouts: Elements such as images, text, and containers are designed to scale appropriately, maintaining their appearance and functionality across different screen sizes.
- Touch-Friendly Interactions: On smaller screens, interactive elements like buttons and links are made larger and spaced appropriately for easy tapping.
User Experience (UX) Considerations
The project emphasizes creating an intuitive and pleasant user experience.
- Navigation: The layout and navigation mimic Instagram’s design, allowing users familiar with the platform to feel comfortable and confident while interacting with the clone.
- Visual Hierarchy: Important elements, such as the profile section and the main feed, are prominently displayed, guiding users naturally through the content.
- Loading Indicators: If included, loading animations or spinners can improve UX by providing feedback when content is being fetched or processed.
Learning Outcomes
- Front-End Development Skills: Through this project, you enhance your understanding of HTML, CSS, and JavaScript, learning how to apply these technologies in a cohesive manner.
- UI/UX Design Principles: The clone project helps you grasp the importance of design consistency, responsiveness, and user-centered design.
- Problem-Solving: Encountering and overcoming challenges during development builds problem-solving skills and enhances your ability to debug and refine your code.
- Code Organization: Working on a project of this scale encourages you to write clean, modular, and maintainable code, crucial for any front-end developer.
Future Enhancements
- Backend Integration: To take the clone to the next level, you could integrate a backend service to handle user data, authentication, and real-time updates.
- Advanced Features: Adding features like direct messaging, notifications, or even a simple version of Instagram Stories could further enhance the clone.
- Performance Optimization: Implementing techniques like lazy loading images, optimizing JavaScript, and minimizing CSS could improve the web page’s load time and responsiveness.
Source Code :
index.html
Your download is starting now...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram clone </title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" href="style.css">
</head>
<body>
<div class="container">
<nav>
<div class="navbar">
<div class="instagram-text-logo">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDEwMjQgNTEyIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" width="1024" height="512" decoding="async" data-src="https://i.postimg.cc/qMFTcDw1/instagram-text.png" id="white-color" alt="">
</div>
<div class="sub-section" id="clicked">
<i class="fa-solid fa-house" ></i>
<a href="#">Dark-mode</a>
</div>
<div class="sub-section" >
<i class="fa-solid fa-magnifying-glass"></i>
<a href="#">Search</a>
</div>
<div class="sub-section" >
<i class="fa-regular fa-compass"></i>
<a href="#">Explore</a>
</div>
<div class="sub-section">
<i class="fa-solid fa-clapperboard"></i>
<a href="#">Reels</a>
</div>
<div class="sub-section">
<i class="fa-regular fa-message"></i>
<a href="#">Messages</a>
</div>
<div class="sub-section" id="hidden2">
<i class="fa-regular fa-heart"></i>
<a href="#">Notification</a>
</div>
<div class="sub-section" id="hidden1">
<i class="fa-solid fa-square-plus"></i>
<a href="#">Create</a>
</div>
<div class="sub-section">
<div class="profile-img">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3OTYiIGhlaWdodD0iNzk4IiB2aWV3Qm94PSIwIDAgNzk2IDc5OCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="796" height="798" decoding="async" data-src="https://i.postimg.cc/zB3mRnhs/apy-logo.png" alt="">
</div>
<a href="#">Profile</a>
</div>
<div class="menu-section " id="hidden">
<i class="fa-solid fa-bars"></i>
<a href="#">More</a>
</div>
</div>
</nav>
<div class="middle-section">
<div class="post-section">
<div class="nav-hidden">
<div class="nav-hidden-logo" id="white-2color">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDEwMjQgNTEyIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" width="1024" height="512" decoding="async" data-src="https://i.postimg.cc/qMFTcDw1/instagram-text.png" alt="">
</div>
<div class="nav-hide-2">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
</div>
<div class="story-section">
<div class="story">
<div class="story-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZmlsZSUyMGltYWdlfGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<span>Aaradhya_gu.</span>
</div>
<div class="story">
<div class="story-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZmlsZSUyMGltYWdlfGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<span>Adah_paret..</span>
</div>
<div class="story" id="story-2">
<div class="story-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://images.unsplash.com/photo-1517702145080-e4a4d91435bb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHByb2ZpbGUlMjBpbWFnZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<span>Adhira_boi..</span>
</div>
<div class="story" id="story-3">
<div class="story-image" >
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="https://media.istockphoto.com/id/1418475387/photo/robotic-hand-pressing-a-keyboard-on-a-laptop-3d-rendering.webp?b=1&s=612x612&w=0&k=20&c=bqtiTjtbsN85HMdO40gidWq6uE4BW1-RGlUOkSfEgoI=" alt="">
</div>
<span>Anika@189</span>
</div>
<div class="story" id="story-4">
<div class="story-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cHJvZmlsZSUyMGltYWdlfGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<span>Kashvi_tut</span>
</div>
<div class="story" id="story-5">
<div class="story-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMzk5IiB2aWV3Qm94PSIwIDAgNjAwIDM5OSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="399" decoding="async" data-src="https://images.unsplash.com/photo-1558203728-00f45181dd84?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMGltYWdlfGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<span>Rebecca.io</span>
</div>
<div class="story" id="story-6">
<div class="story-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="400" decoding="async" data-src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<span>Sahana_pie.</span>
</div>
<div class="story" id="story-7">
<div class="story-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAyIiB2aWV3Qm94PSIwIDAgNjAwIDkwMiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="902" decoding="async" data-src="https://plus.unsplash.com/premium_photo-1664453546896-ad5e0f895eab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<span>Zara_comp</span>
</div>
</div>
<div class="post-area">
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://images.unsplash.com/photo-1461800919507-79b16743b257?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fG1lbnMlMjBpbWFnZXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Vin Diesel</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 1h </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://images.unsplash.com/photo-1535223289827-42f1e9919769?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHRlY2hub2xvZ3l8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>balcoo </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://plus.unsplash.com/premium_photo-1684953583774-ccdded89e093?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Ym95c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Miley Cyrus</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 1d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNzY1IiB2aWV3Qm94PSIwIDAgNjAwIDc2NSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="765" decoding="async" data-src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHdlYiUyMGRldmxvcG1lbnR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Jamie Foxx </span>The Union Cabinet on Monday (September 18) approved the Women Reservation Bill that grants 33 percent reservation for......<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijg1MyIgdmlld0JveD0iMCAwIDEyODAgODUzIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" width="1280" height="853" decoding="async" data-src="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866574_1280.jpg" alt="">
</div>
<p class="post-username">
Katy Perry</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5h </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://images.unsplash.com/photo-1528109966604-5a6a4a964e8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8dmlkZW9zfGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
John Legend </span>Pal Yaad Aayenge Wo Pal!...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODUzIiB2aWV3Qm94PSIwIDAgNjAwIDg1MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="853" decoding="async" data-src="https://images.unsplash.com/photo-1567591370504-80142b28f1c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8a3Jpc2huYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Lady Gaga</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMzc1IiB2aWV3Qm94PSIwIDAgNjAwIDM3NSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="375" decoding="async" data-src="https://images.unsplash.com/photo-1694676517357-25cd4d8f67f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHx8&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Cardi B </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijg1MyIgdmlld0JveD0iMCAwIDEyODAgODUzIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojY2ZkNGRiO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" width="1280" height="853" decoding="async" data-src="https://cdn.pixabay.com/photo/2016/11/29/01/34/man-1866574_1280.jpg" alt="">
</div>
<p class="post-username">
Nicki Minaj</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 1w </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://images.unsplash.com/photo-1692885228334-e3cdcb9cfad7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMTh8fHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Lana Del Rey </span>A blog post title’s quality also depends on your goals. What works for increasing click-through rates might not work for social shares. And blog titles that get tons of social media shares might not be great for search engine optimization<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODUzIiB2aWV3Qm94PSIwIDAgNjAwIDg1MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="853" decoding="async" data-src="https://images.unsplash.com/photo-1567591370504-80142b28f1c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8a3Jpc2huYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Lady Gaga</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://plus.unsplash.com/premium_photo-1675433344518-21eb72dfc7a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzF8fG5hdHVyZXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Cardi B </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODUzIiB2aWV3Qm94PSIwIDAgNjAwIDg1MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="853" decoding="async" data-src="https://images.unsplash.com/photo-1567591370504-80142b28f1c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8a3Jpc2huYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Lady Gaga</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgNjAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="400" decoding="async" data-src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bmV3c3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Cardi B </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODUzIiB2aWV3Qm94PSIwIDAgNjAwIDg1MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="853" decoding="async" data-src="https://images.unsplash.com/photo-1567591370504-80142b28f1c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8a3Jpc2huYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Lady Gaga</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODQwIiB2aWV3Qm94PSIwIDAgNjAwIDg0MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="840" decoding="async" data-src="https://images.unsplash.com/photo-1593376853899-fbb47a057fa0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHJvYm90fGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Cardi B </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODUzIiB2aWV3Qm94PSIwIDAgNjAwIDg1MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="853" decoding="async" data-src="https://images.unsplash.com/photo-1567591370504-80142b28f1c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8a3Jpc2huYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Lady Gaga</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iOTAwIiB2aWV3Qm94PSIwIDAgNjAwIDkwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="900" decoding="async" data-src="https://plus.unsplash.com/premium_photo-1680807869144-9a88225849b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGdpcmxzJTIwcGhvdG98ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Cardi B </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODUzIiB2aWV3Qm94PSIwIDAgNjAwIDg1MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="853" decoding="async" data-src="https://images.unsplash.com/photo-1567591370504-80142b28f1c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8a3Jpc2huYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Lady Gaga</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODk5IiB2aWV3Qm94PSIwIDAgNjAwIDg5OSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="899" decoding="async" data-src="https://plus.unsplash.com/premium_photo-1688821124243-4c8a1bd1e285?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTl8fHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Cardi B </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODUzIiB2aWV3Qm94PSIwIDAgNjAwIDg1MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="853" decoding="async" data-src="https://images.unsplash.com/photo-1567591370504-80142b28f1c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8a3Jpc2huYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Lady Gaga</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODg3IiBoZWlnaHQ9IjI4MzEiIHZpZXdCb3g9IjAgMCAxODg3IDI4MzEiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNjZmQ0ZGI7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+" width="1887" height="2831" decoding="async" data-src="https://plus.unsplash.com/premium_photo-1694941311111-05d41b8b9f34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Cardi B </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODUzIiB2aWV3Qm94PSIwIDAgNjAwIDg1MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="853" decoding="async" data-src="https://images.unsplash.com/photo-1567591370504-80142b28f1c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8a3Jpc2huYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Lady Gaga</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMzc2IiB2aWV3Qm94PSIwIDAgNjAwIDM3NiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="376" decoding="async" data-src="https://images.unsplash.com/photo-1584714268709-c3dd9c92b378?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHVybHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Cardi B </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
<div class="post-main">
<div class="post-header">
<div class="post-left-header">
<div class="post-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iODUzIiB2aWV3Qm94PSIwIDAgNjAwIDg1MyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="853" decoding="async" data-src="https://images.unsplash.com/photo-1567591370504-80142b28f1c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8a3Jpc2huYXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<p class="post-username">
Lady Gaga</p>
<i class="fa-solid fa-certificate"></i>
<span class="one-day"> . 5d </span>
</div>
<i class="fa-solid fa-grip-lines"></i>
</div>
<div class="post-main-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNzEyIiB2aWV3Qm94PSIwIDAgNjAwIDcxMiI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="600" height="712" decoding="async" data-src="https://images.unsplash.com/photo-1598128558393-70ff21433be0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8dXJsfGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60" alt="">
</div>
<div class="post-fotter">
<div class="post-fotter-left">
<i class="fa-regular fa-heart"></i>
<i class="fa-regular fa-message"></i>
<i class="fa-regular fa-paper-plane"></i>
</div>
<i class="fa-regular fa-bookmark"></i>
</div>
<div class="post-description">
<p class="post-liked">Liked by sarasshree and others</p>
<p class="title"><span>
Cardi B </span>Monsoon fury rained havoc in various parts of Himachal Pradesh this year with the death toll crossing 260. The rains...<br> more</p>
<p class="comments"> view all comments</p>
</div>
</div>
</div>
</div>
<div class="follow-section">
<div class="profile-follow profile-foolow-hovering">
<div class="profile-follow-left">
<div class="profile-follow-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3OTYiIGhlaWdodD0iNzk4IiB2aWV3Qm94PSIwIDAgNzk2IDc5OCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="796" height="798" decoding="async" data-src="https://i.postimg.cc/zB3mRnhs/apy-logo.png" alt="">
</div>
<div class="profile-follow-content">
<p class="profile-id">Aasu_Yadav_59</p>
<p class="profile-name">Aaasu Yadav</p>
</div>
</div>
<a href="#" class="follow">switch</a>
</div>
<div class="suggestion-follow">
<p class="suggestion">Suggested for you</p>
<a href="#" class="see-all">see all</a>
</div>
<div class="profile-follow profile-foolow-hovering">
<div class="profile-follow-left">
<div class="profile-follow-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MTIiIGhlaWdodD0iNDA4IiB2aWV3Qm94PSIwIDAgNjEyIDQwOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="612" height="408" decoding="async" data-src="https://media.istockphoto.com/id/1388253782/photo/positive-successful-millennial-business-professional-man-head-shot-portrait.webp?b=1&s=612x612&w=0&k=20&c=VsTsa0kjyZ7ALe-nyKAUfynyRxZo8H4LRMdu_ecPuOY=" alt="">
</div>
<div class="profile-follow-content">
<p class="profile-id">rohit_@135</p>
<p class="profile-name">Followed by shiv_s177</p>
</div>
</div>
<a href="#" class="follow">follow</a>
</div>
<div class="profile-follow profile-foolow-hovering">
<div class="profile-follow-left">
<div class="profile-follow-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNjQwIiB2aWV3Qm94PSIwIDAgNTEyIDY0MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="512" height="640" decoding="async" data-src="https://cdn.pixabay.com/photo/2022/09/08/15/16/cute-7441224_640.jpg" alt="">
</div>
<div class="profile-follow-content">
<p class="profile-id">ubey_lih</p>
<p class="profile-name">Followed by shriiiiii_89_ + 2 more
</p>
</div>
</div>
<a href="#" class="follow">follow</a>
</div>
<div class="profile-follow profile-foolow-hovering">
<div class="profile-follow-left">
<div class="profile-follow-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODAiIGhlaWdodD0iNjQwIiB2aWV3Qm94PSIwIDAgNDgwIDY0MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="480" height="640" decoding="async" data-src="https://cdn.pixabay.com/photo/2020/08/02/18/08/woman-5458225_640.png" alt="">
</div>
<div class="profile-follow-content">
<p class="profile-id">limsean_awersom</p>
<p class="profile-name">Followed by ajeetyadav8242 +....
</p>
</div>
</div>
<a href="#" class="follow">follow</a>
</div>
<div class="profile-follow profile-foolow-hovering">
<div class="profile-follow-left">
<div class="profile-follow-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MjciIGhlaWdodD0iNjQwIiB2aWV3Qm94PSIwIDAgNDI3IDY0MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="427" height="640" decoding="async" data-src="https://cdn.pixabay.com/photo/2021/07/19/04/36/woman-6477171_640.jpg" alt="">
</div>
<div class="profile-follow-content">
<p class="profile-id">rootpies567t</p>
<p class="profile-name">Followed by ravish_thakur31
</p>
</div>
</div>
<a href="#" class="follow">follow</a>
</div>
<div class="profile-follow profile-foolow-hovering">
<div class="profile-follow-left">
<div class="profile-follow-image">
<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iMzkwIiB2aWV3Qm94PSIwIDAgNjQwIDM5MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="640" height="390" decoding="async" data-src="https://cdn.pixabay.com/photo/2019/11/01/06/11/profile-4593404_640.jpg" alt="">
</div>
<div class="profile-follow-content">
<p class="profile-id">michal_kuu</p>
<p class="profile-name">New to Instagram</p>
</div>
</div>
<a href="#" class="follow">follow</a>
</div>
<p class="copyrights"> @All rights reserved by aasu</p>
</div>
</div>
</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/498f68a5eb4ec694db8478345e6b6a23.js?ver=971c1"></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>
style.css
/* font-family: 'Archivo', sans-serif;
font-family: 'Inconsolata', monospace;
font-family: 'Merriweather', serif;
font-family: 'Poppins', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Signika', sans-serif; */
:root{
--background-color:rgb(252, 251, 251);
--font-color:rgb(0, 0, 0);
--secod-font-color:rgb(101, 101, 101);
--secondary-font-color : rgb(179, 179, 179);
--background-on-hover:rgb(215, 214, 214);
}
.dark-mode{
--background-color:rgb(15, 15, 15);
--font-color:rgb(254, 252, 252);
--secod-font-color:rgb(197, 195, 195);
--secondary-font-color : rgb(108, 106, 106);
--background-on-hover:rgba(52, 51, 51, 0.834);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
p{
font-family: 'Roboto', sans-serif;
}
.container{
display: flex;
/* gap: 10px; */
/* overflow-x: hidden; */
}
.middle-section{
display: flex;
justify-content: space-evenly;
/* width: 100%; */
}
a{
text-decoration: none;
color: var(--font-color);
font-family: 'Signika', sans-serif;
font-size: 0.9rem;
font-weight: 550;
}
body{
background-color: var(--background-color);
overflow-x: hidden;
/* border: 1px solid red; */
min-height: 100vh;
width: 100vw;
overflow-x: hidden;
}
/* styling navbar section */
.navbar{
display: flex;
flex-direction: column;
gap: 10px;
height: 100vh;
width: 245px;
/* justify-content: space-between; */
background-color: var(--background-color);
padding-top: 20px;
padding-bottom: 10px;
padding-inline: 10px;
border-right: 0.1px solid rgba(76, 75, 75, 0.737);
position: sticky;
top: 0px;
}
@media (max-width:750px) {
.container .navbar{
flex-direction: row;
background-color: var(--background-color);
position: fixed;
z-index: 1000;
height: 60px;
bottom: -1px;
top: auto;
gap: 0;
border-right:none;
width: 100vw;
justify-content: space-around;
align-items: center;
padding: 0;
box-shadow: -1px 14px 20px 4px black;
}
.middle-section .post-section{
padding: 40px 5px;
}
.navbar a{
display: none;
}
.navbar .sub-section{
padding: 10px 10px;
}
#hidden{
display: none;
}
#hidden1{
display: none;
}
#hidden2{
display: none;
}
.instagram-text-logo{
display: none;
}
}
@media (max-width:1198px) {
.navbar .sub-section a{
display: none;
}
.navbar .menu-section a{
display: none;
}
.navbar .sub-section{
gap: 0;
}
.instagram-text-logo{
display: none;
/* position: absolute; */
}
.navbar{
width: 79px;
}
}
@media (max-width:1003px) {
.follow-section{
display: none;
}
.middle-section .post-area{
padding-inline: 0;
}
}
@media (max-width:690px) {
.post-section .story-section{
justify-content: space-evenly;
}
.story-section #story-7{
display: none;
}
}
@media (max-width:562px){
.story-section #story-6{
display: none;
}
}
@media (max-width:482px){
.story-section #story-5{
display: none;
}
}
@media (max-width:402px){
.story-section #story-4{
display: none;
}
}
@media (max-width:323px){
#story-3{
display: none;
}
}
@media (max-width:259px){
#story-2{
display: none;
}
}
.instagram-text-logo{
width: 150px;
margin: 5px 30px;
cursor: pointer;
}
.instagram-text-logo img{
width: 100%;
/* filter: brightness(5); */
}
.sub-section{
display: flex;
align-items: center;
gap: 25px;
border-radius: 5px;
cursor: pointer;
padding: 10px 20px;
transition: all 0.2s ease;
}
.sub-section:hover{
background-color: var(--background-on-hover);
}
.sub-section:hover i{
transform: scale(1.07);
transition: all 0.2s ease;
}
.sub-section:hover a{
font-weight: 600;
}
.sub-section:hover .profile-img{
transform: scale(1.07);
transition: all 0.2s ease;
}
.sub-section i{
font-size: 1.3rem;
color: var(--font-color);
transition: all 0.2s ease;
}
.profile-img{
width: 22px;
transition: all 0.2s ease;
cursor: pointer;
}
.profile-img img{
width: 100%;
border-radius: 50%;
}
.menu-section{
display: flex;
gap: 25px;
align-items: center;
/* position: absolute;
bottom: 10px; */
margin-top: 23px;
border-radius: 5px;
cursor: pointer;
padding: 10px 20px;
transition: all 0.3s ease;
}
.menu-section:hover{
background-color: var(--background-on-hover);
}
.menu-section:hover i{
transform: scale(1.07);
transition: all 0.2s ease;
}
.menu-section i{
color: var(--font-color);
font-size: 1.2rem;
transition: all 0.2s ease;
}
/* post section started frome here */
.post-section{
padding:20px 20px;
/* border: 2px solid pink; */
background-color: var(--background-color);
max-width: 660px;
}
.story-section{
display: flex;
gap: 10px;
justify-content: center;
/* flex-wrap: wrap; */
/* width: 100%;
overflow:scroll; */
/* overflow-x: auto; */
}
.story{
overflow: hidden;
display: flex;
gap: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.story-image{
/* height: 60px;
width: 55px; */
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
height: 65px;
width: 65px;
background-image: cover;
}
.story-image img{
width: 90%;
height: 90%;
border: 2px solid var(--background-color);
border-radius: 50%;
background-image: cover;
background-position: center;
background-size: cover;
}
.story span{
font-family: 'Roboto', sans-serif;
color: var(--font-color);
font-size: 0.8rem;
font-weight: 500;
}
.post-area{
margin-top: 50px;
padding-inline: 80px;
margin-bottom: 50px;
}
.post-main{
color: var(--font-color);
}
.post-image{
width: 40px;
height: 40px;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.post-image img{
width: 90%;
height: 90%;
border: 2px solid var(--background-color);
border-radius: 50%;
}
.post-username{
color: var(--font-color);
font-size: 1rem;
}
.one-day{
font-size: 0.8rem;
color: var(--secod-font-color);
}
.post-header{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
padding-inline: 5px;
}
.post-header i{
color: var(--font-color);
cursor: pointer;
transition: all 0.2s ease;
}
.post-header i:hover{
color: var(--secondary-font-color);
}
.post-left-header{
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.post-left-header i{
color: rgb(85, 85, 250);
}
.post-left-header i:hover{
color: rgb(30, 30, 150);
}
.post-main-image{
margin-top: 10px;
width: 100%;
}
.post-main-image img{
width: 100%;
border-radius: 1px;
}
.post-fotter{
display: flex;
justify-content: space-between;
margin-top: 7px;
padding-inline: 5px;
}
.post-fotter i{
font-size: 1.2rem;
cursor: pointer;
/* font-weight: 2000; */
transition: all 0.2s ease;
}
.post-fotter i:hover{
color: var(--secondary-font-color);
}
.post-fotter-left{
display: flex;
gap: 20px;
}
.post-description{
margin-block: 3px;
padding-inline: 5px;
}
.post-liked{
margin-block: 7px;
font-size: 0.8rem;
color: var(--secod-font-color);
cursor: pointer;
}
.title{
font-size: 0.9rem;
color: var(--secod-font-color);
cursor: pointer;
}
.title span{
color: var(--font-color);
font-weight: bold;
}
.comments{
margin-block: 5px;
font-size: 0.8rem;
color: var(--secod-font-color);
cursor: pointer;
}
/* profile follow section startted fome here */
.profile-follow-image{
width: 40px;
height: 40px;
}
.profile-follow-image img{
width: 100%;
border-radius: 50%;
height: 100%;
}
.profile-follow-content{
color: var(--font-color)
}
.profile-follow-left{
display: flex;
gap: 20px;
cursor: pointer;
}
.profile-follow{
display: flex;
justify-content: space-between;
align-items: center;
margin-block: 7px;
}
.profile-follow-content{
display: flex;
flex-direction: column;
justify-content: center;
}
.follow{
color: rgb(19, 85, 240);
font-weight: 20;
font-size: 0.7rem;
font-weight: 550;
line-height: 0.1;
transition: all 0.1s ease;
}
.follow:hover{
color: var(--font-color);
}
.profile-id{
color: var(--font-color);
font-size: 0.8rem;
font-weight: 550;
}
.profile-name{
color: var(--secod-font-color);
font-size: 0.7rem;
margin-top: 5px;
font-weight: 100;
}
.suggestion{
color: var(--secod-font-color);
font-size: 0.9rem;
font-weight: 500;
}
.see-all{
color: var(--secod-font-color);
font-size: 0.8rem;
transition: all 0.1s ease;
}
.see-all:hover{
color: var(--secondary-font-color);
}
.follow-section{
margin-top: 46px;
width: 320px;
padding: 10px 20px;
}
.suggestion-follow{
display: flex;
justify-content: space-between;
color: var(--font-color);
margin-block: 10px;
}
.copyrights{
color: var(--secod-font-color);
font-size: 0.9rem;
margin-top: 50px;
text-align: center;
}
.profile-foolow-hovering{
padding: 5px;
cursor: pointer;
border-radius: 5px;
transition: all 0.1s ease-in-out;
}
.profile-foolow-hovering:hover{
background-color: var(--background-on-hover);
}
.nav-hidden{
display: none;
}
.nav-hidden i{
font-size: 1.4rem;
cursor: pointer;
color: var(--font-color);
transition: all 0.2s ease;
}
.nav-hidden i:hover{
color: var(--secondary-font-color);
}
.nav-hidden-logo{
width: 136px;
cursor: pointer;
}
.nav-hidden-logo img{
width: 100%;
}
.nav-hide-2{
display: flex;
gap: 30px;
}
@media (max-width:750px){
.nav-hidden{
width: 100%;
display: flex;
justify-content: space-between;
padding-inline: 10px;
align-items: center;
}
.middle-section .post-section{
padding: 0;
padding-bottom: 20px;
}
}
script.js
var dark = document.getElementById("clicked");
var white = document.getElementById("white-color");
var lol = document.getElementById("white-2color");
dark.onclick = function (){
document.body.classList.toggle("dark-mode");
if(document.body.classList.contains("dark-mode")){
white.style.filter = "brightness(5)";
lol.style.filter = "brightness(5)";
}
else{
white.style.filter = "none";
lol.style.filter = "none";
}
}
Output :
See the Pen pure instagram clone by Aasu Yadav (@Aasu-Yadav) on CodePen.
More HTML CSS JS Projects
Get Huge Discounts
Get Discount on Top EdTech Compnies
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 …
