Hotstar clone app

kishanrajput23 · Oct 14, 2023 · e0f8f8d · e0f8f8d
1 parent dee8b1e
commit e0f8f8d
Show file tree

Hide file tree

Showing 35 changed files with 756 additions and 0 deletions.
diff --git a/Hotstar-clone-App/images/add.png b/Hotstar-clone-App/images/add.png
diff --git a/Hotstar-clone-App/images/disney.PNG b/Hotstar-clone-App/images/disney.PNG
diff --git a/Hotstar-clone-App/images/geographic.PNG b/Hotstar-clone-App/images/geographic.PNG
diff --git a/Hotstar-clone-App/images/logo.png b/Hotstar-clone-App/images/logo.png
diff --git a/Hotstar-clone-App/images/marvel.PNG b/Hotstar-clone-App/images/marvel.PNG
diff --git a/Hotstar-clone-App/images/nxt.png b/Hotstar-clone-App/images/nxt.png
diff --git a/Hotstar-clone-App/images/pixar.PNG b/Hotstar-clone-App/images/pixar.PNG
diff --git a/Hotstar-clone-App/images/play.png b/Hotstar-clone-App/images/play.png
diff --git a/Hotstar-clone-App/images/poster 1.png b/Hotstar-clone-App/images/poster 1.png
diff --git a/Hotstar-clone-App/images/poster 10.png b/Hotstar-clone-App/images/poster 10.png
diff --git a/Hotstar-clone-App/images/poster 11.png b/Hotstar-clone-App/images/poster 11.png
diff --git a/Hotstar-clone-App/images/poster 12.png b/Hotstar-clone-App/images/poster 12.png
diff --git a/Hotstar-clone-App/images/poster 2.png b/Hotstar-clone-App/images/poster 2.png
diff --git a/Hotstar-clone-App/images/poster 3.png b/Hotstar-clone-App/images/poster 3.png
diff --git a/Hotstar-clone-App/images/poster 4.png b/Hotstar-clone-App/images/poster 4.png
diff --git a/Hotstar-clone-App/images/poster 5.png b/Hotstar-clone-App/images/poster 5.png
diff --git a/Hotstar-clone-App/images/poster 6.png b/Hotstar-clone-App/images/poster 6.png
diff --git a/Hotstar-clone-App/images/poster 7.png b/Hotstar-clone-App/images/poster 7.png
diff --git a/Hotstar-clone-App/images/poster 8.png b/Hotstar-clone-App/images/poster 8.png
diff --git a/Hotstar-clone-App/images/poster 9.png b/Hotstar-clone-App/images/poster 9.png
diff --git a/Hotstar-clone-App/images/pre.png b/Hotstar-clone-App/images/pre.png
diff --git a/Hotstar-clone-App/images/slider 1.PNG b/Hotstar-clone-App/images/slider 1.PNG
diff --git a/Hotstar-clone-App/images/slider 2.PNG b/Hotstar-clone-App/images/slider 2.PNG
diff --git a/Hotstar-clone-App/images/slider 3.PNG b/Hotstar-clone-App/images/slider 3.PNG
diff --git a/Hotstar-clone-App/images/slider 4.PNG b/Hotstar-clone-App/images/slider 4.PNG
diff --git a/Hotstar-clone-App/images/slider 5.PNG b/Hotstar-clone-App/images/slider 5.PNG
diff --git a/Hotstar-clone-App/images/star-wars.PNG b/Hotstar-clone-App/images/star-wars.PNG
diff --git a/Hotstar-clone-App/index.html b/Hotstar-clone-App/index.html
@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width , initial-scale=1.0 " />
+    <title>Hotstar+ clone.</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+    <nav class="navbar">
+        <img src="./images/logo.png" class="brand-logo" alt="Disney hotstar 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="#" class="login-link">Login</a>
+        </div>
+    </nav>
+
+    <div class="carousel-container">
+        <div class="carousel">
+            <!-- <div class="slider">
+                <div class="slider-content">
+                    <h1 class="movie-title">Loki</h1>
+                    <p class="movie-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam nihil placeat ratione autem deleniti!
+                    </p>
+                </div>
+                <img src="./images/slider 1.PNG" alt="slider" />
+            </div> -->
+        </div>
+    </div>
+
+    <div class="video-card-container">
+        <div class="video-card">
+            <image src="images/disney.PNG" class="card-image" alt="disney" />
+            <video src="videos/disney.mp4" class="card-video" muted="" loop=""></video>
+        </div>
+
+        <div class="video-card">
+            <image src="images/pixar.PNG" class="card-image" alt="pixar" />
+            <video src="videos/pixar.mp4" class="card-video" muted="" loop=""></video>
+        </div>
+
+        <div class="video-card">
+            <image src="images/marvel.PNG" class="card-image" alt="marvel" />
+            <video src="videos/marvel.mp4" class="card-video" muted="" loop=""></video>
+        </div>
+
+        <div class="video-card">
+            <image src="images/star-wars.PNG" class="card-image" alt="star wars" />
+            <video src="videos/star-war.mp4" class="card-video" muted="" loop=""></video>
+        </div>
+
+        <div class="video-card">
+            <image src="images/geographic.PNG" class="card-image" alt="geographic" />
+            <video src="videos/geographic.mp4" class="card-video" muted="" loop=""></video>
+        </div>
+    </div>
+
+    <h1 class="title">Recommended For You</h1>
+    <div class="movies-list">
+        <button class="pre-btn" title="btn">
+        <img src="images/pre.png" alt="" />
+      </button>
+        <button class="nxt-btn" title="btn">
+        <img src="images/nxt.png" alt="" />
+      </button>
+
+        <div class="card-container">
+            <div class="card">
+                <img src="images/poster 1.png" class="card-img" alt="p1" />
+                <div class="card-body">
+                    <h2 class="name">Loki</h2>
+                    <h6 class="des">This is best marvel movie</h6>
+                    <button class="watchlist-btn">Add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 2.png" class="card-img" alt="p2" />
+                <div class="card-body">
+                    <h2 class="name">mulkan</h2>
+                    <h6 class="des">This is best marvel movie</h6>
+                    <button class="watchlist-btn">Add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 3.png" class="card-img" alt="p3" />
+                <div class="card-body">
+                    <h2 class="name">felcon and the winter soldier</h2>
+                    <h6 class="des">This is best marvel movie</h6>
+                    <button class="watchlist-btn">Add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 4.png" class="card-img" alt="p4" />
+                <div class="card-body">
+                    <h2 class="name">avengers</h2>
+                    <h6 class="des">This is best marvel movie</h6>
+                    <button class="watchlist-btn">Add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 5.png" class="card-img" alt="p5" />
+                <div class="card-body">
+                    <h2 class="name">thor ragnarok</h2>
+                    <h6 class="des">This is best marvel movie</h6>
+                    <button class="watchlist-btn">Add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 6.png" class="card-img" alt="p6" />
+                <div class="card-body">
+                    <h2 class="name">Avengers</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 7.png" class="card-img" alt="p7" />
+                <div class="card-body">
+                    <h2 class="name">Pirates Of The Carribean:Salazar's Revenge</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 8.png" class="card-img" alt="p8" />
+                <div class="card-body">
+                    <h2 class="name">Soul</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 9.png" class="card-img" alt="p9" />
+                <div class="card-body">
+                    <h2 class="name">Raya And The Last Dragon</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 10.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Luca</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 11.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Ford Vs Farrari</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 12.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">X-man: Dark Pheonix</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <h1 class="title">Popular Shows</h1>
+    <div class="movies-list">
+        <button class="pre-btn" title="btn">
+        <img src="images/pre.png" alt="" />
+      </button>
+        <button class="nxt-btn" title="btn">
+        <img src="images/nxt.png" alt="" />
+      </button>
+        <div class="card-container">
+            <div class="card">
+                <img src="images/poster 12.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">X-man: Dark Pheonix</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 11.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Ford Vs Farrari</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 10.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Luca</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 9.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Raya And The Last Dragon</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 8.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Soul</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 7.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Pirates Of The Carribean:Salazar's Revenge</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 6.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Avengers</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 5.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Thor Ragnarok</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 4.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Avengers:Endgame</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 3.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">The Falcon And The Winter Soldier</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+            <div class="card">
+                <img src="images/poster 2.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Mulan</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <img src="images/poster 1.png" class="card-img" alt="" />
+                <div class="card-body">
+                    <h2 class="name">Loki</h2>
+                    <h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
+                    <button class="watchlist-btn">add to watchlist</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="main.js" async></script>
+
+</body>
+
+</html>