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 includes two side-scrolling movie card sections — Latest Releases and Recommended For You — each containing ten poster cards. Both rows share an identical HTML and CSS structure: a .movies-list wrapper that holds a pair of navigation buttons and a .card-container that scrolls horizontally. Each .card shows a poster image at rest and fades in a .card-body overlay with the title, a short description, and an Add to watchlist button when the user hovers.

​
Card Titles

Latest Releases (in source order):
  1. Mission Mangal
  2. Kerala
  3. The Night Manager
  4. Good Night
  5. IB71
  6. Janaki Jaane
  7. The Trial
  8. Aashikana
  9. Tezz
  10. Panga
Recommended For You (in source order):
  1. Loki
  2. Mulan
  3. The Falcon
  4. Avengers
  5. Thor
  6. Avengers
  7. Pirates
  8. Soul
  9. Raya
  10. Luca

​
HTML Structure for One Card

<div class="card">
    <img src="./images/latest 1.png" class="card-img" alt="l1">
    <div class="card-body">
        <h2 class="name">Mission Mangal</h2>
        <h6 class="des">This is the best marvel show</h6>
        <button class="watchlist-btn" onclick="showFullscreenAlert()">Add to watchlist</button>
    </div>
</div>
Each .card contains:
  • .card-img — a full-bleed poster image (width: 100%; height: 100%; object-fit: cover)
  • .card-body — an absolutely positioned overlay, hidden by default (opacity: 0), revealed on hover via a CSS opacity transition

​
CSS — Card Layout and Hover Effects

Each card is fixed at 150px wide and 200px tall. On hover, the card scales up to 1.1× its size and the .card-body fades in. The overlay uses a bottom-anchored gradient (linear-gradient(to bottom, rgba(4,8,15,0), #192133 90%)) so the lower portion of the poster darkens and the title text remains legible. 
.card {
    position: relative;
    min-width: 150px;
    width: 150px;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    transition: .5s;
}
.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card:hover {
    transform: scale(1.1);
}
.card-body {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(4,8,15,0), #192133 90%);
    padding: 10px;
    transition: 0.5s;
}
.card:hover .card-body {
    opacity: 1;
}

​
Horizontal Scroll

The .card-container is set to overflow-x: auto with scroll-behavior: smooth so it can scroll horizontally when the card content overflows. The native scrollbar is hidden on WebKit browsers using the ::-webkit-scrollbar pseudo-element: 
.card-container {
    position: relative;
    width: 92%;
    padding-left: 10px;
    height: 220px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
}
.card-container::-webkit-scrollbar {
    display: none;
}
Each .movies-list includes .pre-btn (left) and .nxt-btn (right) buttons positioned absolutely at the edges of the row. They use gradient backgrounds that blend into the page color, creating a soft fade effect. Their arrow icons (pre.png and nxt.png) are invisible by default and fade in to opacity: 1 only on button hover: 
.pre-btn,
.nxt-btn {
    position: absolute;
    top: 0;
    width: 5%;
    height: 100%;
    z-index: 2;
    border: none;
    cursor: pointer;
    outline: none;
}
.pre-btn {
    left: 0;
    background: linear-gradient(to right, #0c111b 0%, #0c111b00);
}
.nxt-btn {
    right: 0;
    background: linear-gradient(to left, #0c111b 0%, #0c111b00);
}
.pre-btn img,
.nxt-btn img {
    width: 15px;
    height: 20px;
    opacity: 0;
}
.pre-btn:hover img,
.nxt-btn:hover img {
    opacity: 1;
}
The JavaScript scroll logic for .pre-btn and .nxt-btn is present in Hotstar.js but is fully commented out. Clicking the buttons currently has no effect — the arrow icons are purely decorative. To enable scrolling, uncomment and fix the card-slider block in Hotstar.js.

​
Adding a New Card

To add an eleventh card to either row, insert a new .card div at the end of the corresponding .card-container in Hotstar.html: 
<div class="card">
    <img src="./images/your-poster.png" class="card-img" alt="your title">
    <div class="card-body">
        <h2 class="name">Your Title</h2>
        <h6 class="des">Your short description</h6>
        <button class="watchlist-btn" onclick="showFullscreenAlert()">Add to watchlist</button>
    </div>
</div>
The .card-container flex layout and overflow-x: auto automatically accommodate the new card without any CSS or JavaScript changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us