🎬 Netflix Landing Page Clone

A static Netflix India landing page clone built with HTML & CSS. This project replicates the official Netflix homepage UI with responsive design, hero sections, and interactive styling.

It is a frontend-only project made for learning and practice purposes — no backend or real video streaming.

---

🚀 Features

• Netflix-style hero section with background image & overlay

• Navigation bar with logo, language selector, and Sign In button

• Call-to-action input for email signup

• Multiple showcase sections:

  • Enjoy on your TV (with embedded video inside TV image)
  • Download shows on mobile
  • Watch everywhere (multi-device streaming demo)
  • Kids profile section

• FAQ section (Frequently Asked Questions) with expandable items (UI ready)

• Footer with signup form

• Responsive layout using Flexbox & media queries

---

📂 Project Structure

Netflix/
│── index.html        # Main HTML file
│── style.css         # Styling for the page
│── favicon.ico       # Netflix-style favicon
│── logo.svg          # Netflix logo
│── bg.jpg            # Background hero image
│── tv.png            # TV section image
│── kids.png          # Kids profile section image
│── mobile-0819.jpg   # Mobile section image
│── video1.m4v        # Sample video for "Watch Everywhere"
│── video2.m4v        # Sample video for "Enjoy on your TV"
│── plus-svgrepo-com.svg # Icon for FAQ section

---

🛠️ Tech Stack

• HTML5
• CSS3 (Flexbox, positioning, hover effects)
• Google Fonts (Martel Sans, Archivo Black)

---

📸 Preview

(Add a screenshot or GIF here) Example:

---

🧰 Setup & Usage

1. Clone this repository

   git clone https://github.com/abhishekOvO/Web-Dev.git
   cd Web-Dev/Netflix

2. Open index.html directly in your browser or run a local server:

   python3 -m http.server 8000

   Then visit 👉 http://localhost:8000

---

🎯 Learning Highlights

• Using background overlays for readability
• Embedding video inside images with positioning
• Handling flexbox layouts for different sections
• Creating FAQ accordion structure (currently static, can be enhanced with JS)
• Structuring a real-world landing page clone with sections & CTAs

---

✅ Future Improvements

• Add JavaScript interactivity to FAQ (expand/collapse answers)
• Improve responsiveness for smaller devices
• Add carousel/slider for movies & shows
• Integrate with The Movie DB API for real movie data
• Add sign-in / sign-up pages

---

📄 License

This project is for educational purposes only. Not affiliated with Netflix in any way.

---