MovieFlix is a responsive front-end clone of Netflix's landing page that I built using HTML, CSS, and JavaScript. My goal with this project was to recreate Netflix's signature look and feel — including its dark theme, bold visuals, and smooth interactions — while strengthening my front-end development and responsive design skills.
This project replicates the visual design and user experience of Netflix's homepage. It includes interactive sections such as:
- A hero banner with an email signup form
- A trending movies carousel
- A feature highlights grid
- A FAQ accordion
All built from scratch using semantic HTML, modern CSS, and vanilla JavaScript.
- Netflix-style layout with logo and sign-in button
- Full-width background banner with overlay
- Email signup form and CTA buttons styled in Netflix red
- Horizontally scrollable gallery showcasing top 10 trending titles
- Smooth scroll animations using JavaScript
- Hover zoom effects on movie posters
- Numbered rankings on posters
- Responsive behavior that hides arrows on smaller screens
- Four feature cards highlighting Netflix's main benefits (watch anywhere, download, etc.)
- Gradient backgrounds and icon illustrations
- Responsive grid layout for all screen sizes
- Fully interactive accordion built with vanilla JavaScript
- Smooth expand/collapse animations
- Icon switching between "+" and "x" states
- Organized multi-column layout with common navigation links
- Contact info and responsive grid structure
- HTML5 – Semantic and accessible structure
- CSS3 – Custom animations, gradients, and responsive design
- JavaScript (Vanilla) – Handles interactivity and animations
- Bootstrap CSS – Used selectively for grid and utility classes
I designed MovieFlix using a mobile-first approach, ensuring smooth adaptation across mobile, tablet, and desktop devices. Layouts, text sizes, and interactions adjust dynamically for each viewport.
- Carousel Controls: Left/right arrows scroll the trending movie list smoothly
- FAQ Accordion: Toggles question visibility with animated icon changes
- Smooth Transitions: Added subtle fade and scale effects for a polished UI
- Achieving pixel-perfect alignment with Netflix's official design
- Writing clean, semantic, and maintainable code
- Enhancing UX with subtle animations
- Ensuring responsiveness and cross-browser compatibility
- Strengthening my CSS layout and DOM manipulation skills
- Integrate a movie API for dynamic content
- Add user login and video playback functionality
- Implement search and user profiles
- Expand to include movie detail pages
- This is a front-end only educational project with no backend integration
- All images and links are placeholders
- Created purely for learning and portfolio purposes — not affiliated with Netflix, Inc.