Responsive landing page challenge from Frontend Mentor.
Built first with HTML, CSS & JavaScript, then refactored with React + TailwindCSS for cleaner component-based structure and modern styling.
This project is a solution for a responsive landing page, designed to look as close to the provided design as possible. The goal was to ensure an optimal layout for various screen sizes and provide smooth, interactive hover states for all clickable elements.
Live Previews:
- Responsive Layout – adapts to mobile, tablet, and desktop.
- Interactive Hover States – buttons, links, and navigation have custom hover effects.
- Mobile Menu Animation – smooth open/close transitions.
- Accessibility – semantic HTML structure and focus on readable, navigable content.
- Performance Tweaks – lazy loading and font preloading.
- Vanilla version: HTML5, CSS, JavaScript
- Refactor: React, TailwindCSS
I just remembered that I stumbled upon an article a few weeks ago about debugging z-index issues using the browser dev tools. https://www.webscope.io/blog/z-index-not-working-debug-it-the-modern-way