A fully responsive, pixel-perfect clone of the Twitter (now X) home page built with pure HTML and CSS. Experience the authentic Twitter UI across all devices, from desktop to mobile.
🌐 Live Demo: Experience the Clone
📌 Repository: GitHub Repo
- 100% Responsive Design: Seamlessly adapts to all screen sizes (desktop, tablet, mobile)
- Pixel-Perfect UI Replication: Authentic Twitter interface with attention to detail
- Pure HTML & CSS: No JavaScript dependencies, lightweight and fast
- Mobile-First Approach: Optimized for mobile devices with touch-friendly interface
- Semantic HTML5: Clean, structured, and accessible markup
- Modern CSS3: Flexbox layouts, smooth transitions, and hover effects
- Left Sidebar Navigation: Complete menu with Twitter logo, navigation links, and post button
- Middle Feed Section: Tweet composition box, timeline posts with images, and interactions
- Right Sidebar: Search bar, premium subscription card, trending topics, and follow suggestions
- Responsive Bottom Navigation: Mobile-optimized navigation bar for small screens
- Interactive Elements: Hover effects, smooth transitions, and button animations
- Tweet Cards: Profile pictures, verified badges, timestamps, and engagement metrics
- Trending Section: What's happening with trending topics and live indicators
- Who to Follow: User suggestions with follow buttons
- Footer Links: Terms, privacy policy, and additional information
- Desktop Large (1280px+): Full three-column layout
- Desktop (1024px - 1280px): Optimized column widths
- Tablet (768px - 1024px): Collapsed sidebar with icons only
- Mobile (480px - 768px): Single column with bottom navigation
- Mobile Small (360px - 480px): Optimized for smaller phones
- Mobile Extra Small (<360px): Compact layout for very small screens
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No build tools or dependencies required
- Clone the repository:
git clone https://github.com/avdeshjadon/Twitter-Home.git- Navigate to the project directory:
cd Twitter-Home- Open the
index.htmlfile in your browser:
open index.htmlOr simply drag and drop the index.html file into your browser.
Twitter-Home/
├── index.html # Main HTML file
├── style.css # All styling and responsive design
├── README.md # Project documentation
└── assets/
├── images/ # Profile pictures and post images
└── svg/ # Twitter icons and logos
- Desktop: Full sidebar with text labels and icons
- Tablet: Icon-only sidebar to save space
- Mobile: Bottom navigation bar with essential links
- Three-column layout on desktop (sidebar, feed, trending)
- Two-column layout on tablet (collapsed sidebar, feed)
- Single-column layout on mobile (feed only, bottom nav)
- Touch-friendly button sizes
- Optimized image scaling
- Readable font sizes
- Efficient use of screen space
- Fixed bottom navigation for easy access
- Dark Theme: Authentic Twitter dark mode
- Smooth Transitions: Hover effects and animations
- Typography: Twitter's native font stack
- Icons: SVG icons for crisp display
- Spacing: Consistent padding and margins
- Colors: Exact color matching with Twitter's palette
- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
- Desktop (1920x1080 and above)
- Laptop (1366x768, 1440x900)
- Tablet (768x1024)
- Mobile (iPhone SE, iPhone 12/13/14, Samsung Galaxy, etc.)
- Small Mobile (360x640)
Contributions are welcome! Feel free to:
- Report bugs
- Suggest new features
- Submit pull requests
- Improve documentation
Avdesh Jadon
- GitHub: @avdeshjadon
- Twitter: @avdeshjadon003
This project is created for educational purposes. Twitter and X are trademarks of X Corp.
If you found this project helpful, please give it a ⭐ on GitHub!
Made with ❤️ by Avdesh Jadon