The Disney+ Hotstar Clone is a static, front-end-only recreation of the Disney+ Hotstar streaming platform interface. It is built entirely with vanilla HTML5, CSS3, and JavaScript ES6 — no frameworks, no package managers, no build tools, and noDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/Vipul-Gejage/Disney-Hotstar-Clone/llms.txt
Use this file to discover all available pages before exploring further.
node_modules folder. Every interaction, from the auto-advancing hero carousel to the hover-triggered franchise video previews, is implemented directly in the browser using native web APIs. The project serves as a practical study in replicating a production-grade streaming UI using only the fundamentals of the web platform.
What This Project Covers
The project is organized into three HTML pages, each responsible for a distinct part of the user experience:Hotstar.html— The main home page. It contains the hero image carousel, the five franchise video preview cards (Disney, Pixar, Marvel, Star Wars, National Geographic), and two horizontally scrollable movie rows (“Latest Releases” and “Recommended For You”), each with watchlist buttons.login.html— The login page. It presents a centered form where the user enters a mobile phone number and clicks “Generate OTP” to proceed.otp.html— The OTP verification page. It presents a second form where the user enters the one-time password and clicks “Submit OTP” to return to the main page.
Features
Hero Carousel
An auto-advancing image slider showcasing five featured titles — Loki, The Falcon and the Winter Soldier, WandaVision, Raya, and Luca — with CSS transitions and JavaScript clone-based infinite looping.
Franchise Video Cards
Five interactive cards for Disney, Pixar, Marvel, Star Wars, and National Geographic. On hover, the static franchise logo is replaced by a looping muted
.mp4 preview video powered by the HTML5 Video API.Movie Rows
Two horizontally scrollable rows — “Latest Releases” (10 cards) and “Recommended For You” (10 cards) — with poster images, titles, descriptions, and smooth CSS scale-up hover effects.
Watchlist
Each movie card includes an “Add to Watchlist” button. Clicking it triggers a fullscreen overlay alert with a fade-in/fade-out transition, built entirely with vanilla JavaScript DOM manipulation.
Login & OTP Flow
A two-step authentication UI — a mobile number entry form on
login.html and an OTP entry form on otp.html — styled with login.css and navigating between pages via location.href.Technology Stack
The entire project runs in a browser with no compilation step or external dependencies.| Technology | Role |
|---|---|
| HTML5 | Page structure, semantic layout, form elements, and <video> elements for franchise cards |
| CSS3 | Visual styling, fixed navbar, flexbox layouts, carousel transitions, hover animations, and the fullscreen watchlist alert overlay |
| JavaScript ES6 | Auto-advancing carousel logic with slide cloning, mouseenter/mouseleave video play/pause, and the watchlist fullscreen alert (createElement, appendChild, remove) |
| HTML5 Video API | Inline <video> elements with muted and loop attributes; .play() and .pause() called from JS event listeners on franchise cards |
This is a front-end only project. There is no backend server, no database, and no real authentication system. The login form’s
action attribute points to a generate-otp.php file that does not exist in the repository — the “Generate OTP” and “Submit OTP” buttons navigate between pages using location.href overrides directly in the HTML. No actual OTP is generated or verified.