Skip to main content

Documentation 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.

Hotstar.html is the main entry point of the Disney+ Hotstar Clone. It renders four major visual sections stacked vertically: a fixed navigation bar at the top, a full-width hero carousel showcasing featured titles, a row of five franchise video preview cards, and two horizontally scrollable movie rows — Latest Releases and Recommended For You — each containing ten poster cards with hover overlays.

​
Section Breakdown

1

Fixed Navbar

The navbar is pinned to the top of the viewport using position: fixed and sits 80px tall across the full page width. It is composed of three distinct areas laid out with flexbox:
  • Brand logo — an <img> with class .brand-logo (70px tall), sourced from images/logo.png
  • Nav links — an unordered list (.nav-links) with four items: TV, Movies, Sports, and Premium, each an anchor tag (<a href="#">)
  • Right container (.right-container) — holds the search box, Subscribe button, and Login link
.navbar {
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 4%;
    background: #0c111b;
    z-index: 0;
    display: flex;
    align-items: center;
}
The search box expands smoothly on focus from 250px to 400px using a CSS transition: 0.5s, and gains a blue border (#1f80e0):
.search-box {
    border: none;
    border-bottom: 1px solid #aaa;
    background: transparent;
    outline: none;
    height: 30px;
    color: #fff;
    width: 250px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    transition: 0.5s;
}
.search-box:focus {
    width: 400px;
    border-color: #1f80e0;
}
The Subscribe button (.sub-btn) uses a blue background (#1f80e0) with uppercase white text, and the Login link (.login-link) navigates to login.html:
.sub-btn {
    background: #1f80e0;
    height: 30px;
    padding: 0 20px;
    color: #fff;
    border-radius: 5px;
    border: none;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    margin: 0 10px;
}
The Subscribe button and all four nav links (TV, Movies, Sports, Premium) are not yet wired to actual pages — the nav links use href="#" and the Subscribe button has no click handler.
2

Hero Carousel

Directly below the navbar (offset by margin-top: 80px), the .carousel-container spans the full page width at 450px height and hides overflow. Inside it, .carousel is a flex row containing five .slider divs — one for each featured title. JavaScript clones all five slides for a seamless infinite loop, and setInterval advances the carousel every 3000 milliseconds.See Hero Carousel for the full implementation details.
3

Franchise Video Cards

Below the carousel, .video-card-container renders five side-by-side franchise cards at height: 10vw. Each .video-card shows a branded logo image at rest and plays a looping preview video when the user hovers over the card.The five franchises are: Disney, Pixar, Marvel, Star Wars, and National Geographic.See Video Cards for the full implementation details.
4

Latest Releases Movie Row

A .movies-list section containing a .card-container with ten horizontally scrollable .card elements. Each card shows a poster image and, on hover, fades in a .card-body overlay with the title, description, and an Add to watchlist button. The ten titles are: Mission Mangal, Kerala, The Night Manager, Good Night, IB71, Janaki Jaane, The Trial, Aashikana, Tezz, and Panga.See Movie Rows for the full implementation details.
5

Recommended For You Movie Row

A second .movies-list section structured identically to Latest Releases, with ten different poster cards. The ten titles are: Loki, Mulan, The Falcon, Avengers, Thor, Avengers, Pirates, Soul, Raya, and Luca.See Movie Rows for the full implementation details.

​
Full HTML Structure Overview

<nav class="navbar">
  <img src="./images/logo.png" class="brand-logo" alt="logo" />
  <ul class="nav-links">
    <li class="nav-items"><a href="#">TV</a></li>
    <li class="nav-items"><a href="#">Movies</a></li>
    <li class="nav-items"><a href="#">Sports</a></li>
    <li class="nav-items"><a href="#">Premium</a></li>
  </ul>
  <div class="right-container">
    <input type="text" class="search-box" placeholder="Search">
    <button class="sub-btn">subscribe</button>
    <a href="./login.html" class="login-link">Login</a>
  </div>
</nav>

<div class="carousel-container">
  <div class="carousel">
    <!-- 5 .slider divs -->
  </div>
</div>

<div class="video-card-container">
  <!-- 5 .video-card divs -->
</div>

<h1 class="title">Latest Releases</h1>
<div class="movies-list">
  <!-- .pre-btn, .nxt-btn, .card-container with 10 .card divs -->
</div>

<h1 class="title">Recommended For You</h1>
<div class="movies-list">
  <!-- .pre-btn, .nxt-btn, .card-container with 10 .card divs -->
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us