A high-fidelity, fully responsive landing page clone of UsabilityHub, built to demonstrate modern frontend development techniques, pixel-perfect UI replication, and clean code architecture.
To demonstrate the design's flexibility, here is the visual preview across different device sizes:
| Desktop View | Mobile View (Responsive) |
|---|---|
 |
Pro-Tip: Replace the placeholders above with your specific desktop and mobile screenshots located in your
/imagesfolder.
The goal of this project was to replicate the complex and clean layout of UsabilityHub. This project focuses on mastering core CSS skills like Flexbox and Responsive Design without the use of external frameworks.
- Fully Responsive: Optimized for all devices including Desktop, Tablet (991px), and Mobile (479px).
- Interactive Navigation: A functional mobile "hamburger" menu built with Vanilla JavaScript and FontAwesome icons.
- Modern CSS Architecture: Uses CSS Variables (
:root) for consistent color schemes and easy maintenance. - Utility-First Approach: Implements a utility class system for flex layouts and typography consistency.
- Semantic HTML: Structured with HTML5 tags for better SEO and web accessibility.
- HTML5: For semantic markup and structure.
- CSS3: Advanced styling using Flexbox, CSS Variables, and custom Media Queries.
- JavaScript: Used for the responsive navigation toggle functionality.
- FontAwesome: Integrated for high-quality vector icons.
Based on the current repository organization:
If you like my work or want to discuss a project, feel free to reach out:
Name: Ronit kumar Soni
LinkedIn: Ronit Kumar
GitHub: @RonitkumarSoni
Email: [ronitkumarsoni.cg@gmail.com]
Usability-Hub-Clone/
├── assets/ # Brand logos and website background assets
├── images/ # Documentation screenshots and previews
├── index.html # Core structure of the landing page
├── style.css # Global styles and variables
├── media-Quary.css # Dedicated responsive breakpoints
├── LICENSE # MIT License
└── README.md # Project documentation