Netflix UI Clone

A responsive Netflix India landing page clone built with HTML5 and CSS3. This project demonstrates modern frontend development practices and responsive web design principles.

Live Demo

View Live Project

Project Overview

This project is a pixel-perfect recreation of Netflix's homepage, featuring:

• Responsive Design: Optimized for mobile, tablet, and desktop devices
• Modern Layout: Clean, professional structure using semantic HTML5
• CSS3 Styling: Advanced styling with Flexbox and responsive media queries
• Interactive Elements: Hero section with call-to-action buttons
• Media Integration: Embedded videos and optimized images
• FAQ Section: Collapsible frequently asked questions
• Professional Footer: Complete with links and contact information

Technologies Used

• HTML5: Semantic markup and structure
• CSS3: Responsive styling, Flexbox, and animations
• Google Fonts: Custom typography (Poppins, Martel Sans)
• Media Queries: Cross-device compatibility

Features

• Fully responsive design
• Cross-browser compatibility
• Optimized performance
• Clean, maintainable code structure
• Professional UI/UX design

Installation and Setup

1. Clone the repository: �ash git clone https://github.com/Harshad2321/Netflix-UI-Clone.git

2. Navigate to the project directory: �ash cd Netflix-UI-Clone

3. Open index.html in your preferred web browser or use a local development server: `�ash

   Using Python 3

   python -m http.server 8000

   Using Node.js (if you have http-server installed)

   npx http-server `

4. Visit http://localhost:8000 in your browser

Project Structure

Netflix-UI-Clone/ index.html # Main HTML file style.css # CSS styles favicon.ico # Website icon README.md # Project documentation LICENSE # MIT License .gitignore # Git ignore rules .github/ # GitHub Actions workflow assets/ images/ bg.jpg # Background image logo.svg # Netflix logo

Responsive Design

The project implements responsive design principles:

• Mobile First: Optimized for mobile devices
• Flexible Grid: Responsive layout using CSS Grid and Flexbox
• Media Queries: Breakpoints for different screen sizes
• Scalable Images: Properly sized images for all devices
• Touch-Friendly: Interactive elements optimized for touch interfaces

Browser Support

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/improvement)
3. Commit your changes (git commit -am 'Add new feature')
4. Push to the branch (git push origin feature/improvement)
5. Create a Pull Request

License

This project is open source and available under the MIT License.

Contact

• Developer: Harshad Parab
• GitHub: @Harshad2321
• Project Link: https://github.com/Harshad2321/Netflix-UI-Clone

---

Note: This project is for educational purposes only and is not affiliated with Netflix, Inc.