Netflix Frontend Clone

A responsive Netflix landing page clone built with HTML, CSS, and JavaScript.

Features

🎬 Interactive Carousel

• Smooth sliding carousel for trending movies
• Arrow navigation (left/right)
• Keyboard navigation (arrow keys)
• Touch/swipe support for mobile devices
• Responsive design that adapts to screen size

❓ FAQ Accordion

• Click to expand/collapse FAQ items
• Smooth animations and transitions
• Only one FAQ item open at a time
• Keyboard accessible (Escape key to close)
• Hover effects for better UX

📧 Email Validation

• Real-time email validation
• Visual feedback for valid/invalid emails
• Form submission with loading states
• Success/error notifications
• Prevents invalid form submissions

📱 Mobile Optimizations

• Responsive design for all screen sizes
• Touch-friendly carousel navigation
• Optimized form layout for mobile
• Smooth scrolling and animations

♿ Accessibility Features

• Keyboard navigation support
• ARIA labels for screen readers
• Focus indicators for interactive elements
• High contrast and readable text

🎨 Enhanced UI/UX

• Smooth scroll to top button
• Loading states for buttons
• Toast notifications for user feedback
• Hover effects and transitions
• Professional Netflix-like styling

Technical Implementation

JavaScript Features

• Carousel System: Custom carousel with touch/swipe support
• FAQ Accordion: Smooth expand/collapse functionality
• Form Validation: Real-time email validation with regex
• Responsive Design: Dynamic carousel sizing based on viewport
• Error Handling: Comprehensive error handling and user feedback
• Performance: Debounced scroll/resize events for optimal performance

CSS Enhancements

• Smooth Transitions: All interactive elements have smooth animations
• Mobile-First: Responsive design with mobile optimizations
• Accessibility: Focus states and keyboard navigation support
• Modern Styling: Netflix-inspired design with gradients and effects

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

Getting Started

1. Open index.html in your web browser
2. All functionality is included and ready to use
3. No additional setup or dependencies required

File Structure

├── index.html          # Main HTML structure
├── style.css           # CSS styles and responsive design
├── script.js           # JavaScript functionality
├── logo.svg            # Netflix logo
├── bg.jpg              # Background image
├── favicon.ico         # Site favicon
└── README.md           # This file

Features in Detail

Carousel Navigation

• Arrow Controls: Click left/right arrows to navigate
• Keyboard Support: Use arrow keys for navigation
• Touch Support: Swipe left/right on mobile devices
• Responsive: Automatically adjusts number of visible cards
• Smooth Animation: CSS transitions for smooth movement

FAQ System

• Single Open: Only one FAQ item can be open at a time
• Smooth Animation: CSS transitions for expand/collapse
• Click to Toggle: Click any question to open/close
• Keyboard Accessible: Escape key closes open items
• Visual Feedback: Hover effects and active states

Form Validation

• Real-time Validation: Validates email as you type
• Visual Feedback: Green border for valid, red for invalid
• Loading States: Button shows loading state during submission
• Notifications: Toast notifications for success/error messages
• Prevention: Prevents submission of invalid emails

Customization

The code is well-commented and modular, making it easy to customize:

• Modify carousel behavior in the initCarousel() function
• Adjust FAQ animations in the initFAQ() function
• Customize form validation in the initFormValidation() function
• Update styling in the CSS file

Performance

• Debounced scroll and resize events
• Efficient DOM queries with caching
• Smooth 60fps animations
• Minimal JavaScript footprint
• Optimized for mobile devices

Enjoy your Netflix clone! 🎬