NETFLIX CLONE -- STREAMFLIX
A responsive front-end streaming UI inspired by Netflix
CONTENTS
01 · The Story
02 · What It Does
03 · The Stack
04 · How To Use
05 · The Fine Print
01 · The Story
*"A front-end recreation of the Netflix interface built to practice responsive design, layout structuring, and UI development using HTML, CSS, and JavaScript.
Note: This is a learning-based project created for educational purposes. Non-commercial exercise to understand web development concepts, responsive design, and CSS layout techniques."*
02 · What It Does
🚀 FEATURES
-
Landing Page
→ Hero section with FAQ accordion and feature highlights
-
Login Page
→ Custom sign-in form using contenteditable divs (blocks password managers)
-
Browse Page
- 🎬 Hero Billboard → Auto-rotating featured content with backdrop & metadata
- 📺 Content Rows → Horizontally scrollable movie categories (Trending, Top 10, Originals, etc.)
- 🖱️ Hover Cards → Expanded previews with quick-action buttons
- 📄 Movie Modal → Detailed view (cast, genres, similar titles)
- 🔍 Search Overlay → Live search across all titles
-
Responsive Design
→ Optimized for mobile devices (< 768px)
-
Profiles Page
→ Profile selector with animated avatars
📂 PROJECT STRUCTURE
| File | Description |
|---|
index.html | Landing page |
login.html | Sign-in page |
profiles.html | Profile selection screen |
browse.html | Main dashboard / browse page |
style.css | All styles (variables, components, responsive) |
script.js | JavaScript (API integration, UI logic, search, modal) |
bg.jpg | Hero background image |
📱 RESPONSIVE DESIGN
- Simplified navigation for mobile screens
- Adjusted billboard size and typography scaling
- Implemented touch-friendly horizontal scrolling for movie rows
03 · The Stack


04 · How To Use
Install.
Key Activities:
Input Dialog
Assign (BMI calculation)
If / FlowDecision
Message Box
Open Browser / Type Into / Click / Scroll (web scraping)
Flowchart for branching workflows
Run.
⚙️ SETUP
1️⃣ Clone or download the repository
2️⃣ Open index.html in your browser
3️⃣ Sign in using any email + password
→ (No real authentication — this is a UI demo only)
05 · The Fine Print
Contributing. Pull requests are welcome. For major changes, please open an issue first.
Movie Data & Images: TMDB public API.
By. Nishant Nahar
FOOTNOTES. All trademarks belong to their respective owners. Netflix Clone -- Streamflix is open-source software.
