Skip to content

Commit fbf088e

Browse files
apu52apu52
authored
Hotstar Clone
1 parent 80d2278 commit fbf088e

3 files changed

Lines changed: 839 additions & 0 deletions

File tree

‎Projects/Hotsar Clone/Index.html‎

Lines changed: 392 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,392 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Disney+ Hotstar</title>
8+
<link rel="stylesheet" href="styles.css" />
9+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
10+
</head>
11+
<body>
12+
<!-- navbar -->
13+
<nav class="navbar">
14+
<img src="logo.png" class="brand-logo" alt="" />
15+
<ul class="nav-links">
16+
<li class="nav-items"><a href="#">TV</a></li>
17+
<li class="nav-items"><a href="#">Movies</a></li>
18+
<li class="nav-items"><a href="#">Sports</a></li>
19+
<li class="nav-items"><a href="#">Premium</a></li>
20+
</ul>
21+
<div class="right-container">
22+
<input type="text" class="search-box" placeholder="search" />
23+
<button class="sub-btn">subscribe</button>
24+
<a href="#" class="login-link">Login</a>
25+
</div>
26+
</nav>
27+
28+
<div class="carousel-container">
29+
<div class="carousel">
30+
<!-- <div class="slider">
31+
<div class="slide-content">
32+
<h1 class="movie-title">Loki</h1>
33+
<p class="movie-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nihil, cupiditate possimus quisquam ipsum enim?</p>
34+
</div>
35+
<img src="images/slider 1.PNG" alt="">
36+
37+
</div> -->
38+
</div>
39+
</div>
40+
41+
<div class="video-card-container">
42+
<div class="video-card">
43+
<img src="disney.PNG" class="video-card-image" alt="" />
44+
<video src="disney.mp4" muted loop class="card-video"></video>
45+
</div>
46+
<div class="video-card">
47+
<img src="pixar.PNG" class="video-card-image" alt="" />
48+
<video src="pixar.mp4" muted loop class="card-video"></video>
49+
</div>
50+
<div class="video-card">
51+
<img src="marvel.PNG" class="video-card-image" alt="" />
52+
<video src="videos/marvel.mp4" muted loop class="card-video"></video>
53+
</div>
54+
<div class="video-card">
55+
<img src="star-wars.PNG" class="video-card-image" alt="" />
56+
<video src="videos/star-war.mp4" muted loop class="card-video"></video>
57+
</div>
58+
<div class="video-card">
59+
<img src="images/geographic.PNG" class="video-card-image" alt="" />
60+
<video
61+
src="videos/geographic.mp4"
62+
muted
63+
loop
64+
class="card-video"
65+
></video>
66+
</div>
67+
</div>
68+
69+
<h1 class="title">recommended for you</h1>
70+
<div class="movies-list">
71+
<button class="pre-btn"><img src="images/pre.png" alt="" /></button>
72+
<button class="nxt-btn"><img src="images/nxt.png" alt="" /></button>
73+
<div class="card-container">
74+
<div class="card">
75+
<img src="images/poster 1.png" class="card-img" alt="" />
76+
<div class="card-body">
77+
<h2 class="name">Loki</h2>
78+
<h6 class="des">
79+
Superhero, Science Fiction, Action,fantasy Marvel <br />
80+
The mercurial villain Loki resumes his role as the God of...
81+
</h6>
82+
<button class="watchlist-btn">add to watchlist</button>
83+
</div>
84+
</div>
85+
<div class="card">
86+
<img src="images/poster 2.png" class="card-img" alt="" />
87+
<div class="card-body">
88+
<h2 class="name">movie name</h2>
89+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
90+
<button class="watchlist-btn">add to watchlist</button>
91+
</div>
92+
</div>
93+
<div class="card">
94+
<img src="images/poster 3.png" class="card-img" alt="" />
95+
<div class="card-body">
96+
<h2 class="name">movie name</h2>
97+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
98+
<button class="watchlist-btn">add to watchlist</button>
99+
</div>
100+
</div>
101+
<div class="card">
102+
<img src="images/poster 4.png" class="card-img" alt="" />
103+
<div class="card-body">
104+
<h2 class="name">movie name</h2>
105+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
106+
<button class="watchlist-btn">add to watchlist</button>
107+
</div>
108+
</div>
109+
<div class="card">
110+
<img src="images/poster 5.png" class="card-img" alt="" />
111+
<div class="card-body">
112+
<h2 class="name">movie name</h2>
113+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
114+
<button class="watchlist-btn">add to watchlist</button>
115+
</div>
116+
</div>
117+
<div class="card">
118+
<img src="images/poster 6.png" class="card-img" alt="" />
119+
<div class="card-body">
120+
<h2 class="name">movie name</h2>
121+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
122+
<button class="watchlist-btn">add to watchlist</button>
123+
</div>
124+
</div>
125+
<div class="card">
126+
<img src="images/poster 7.png" class="card-img" alt="" />
127+
<div class="card-body">
128+
<h2 class="name">movie name</h2>
129+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
130+
<button class="watchlist-btn">add to watchlist</button>
131+
</div>
132+
</div>
133+
<div class="card">
134+
<img src="images/poster 8.png" class="card-img" alt="" />
135+
<div class="card-body">
136+
<h2 class="name">movie name</h2>
137+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
138+
<button class="watchlist-btn">add to watchlist</button>
139+
</div>
140+
</div>
141+
<div class="card">
142+
<img src="images/poster 9.png" class="card-img" alt="" />
143+
<div class="card-body">
144+
<h2 class="name">movie name</h2>
145+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
146+
<button class="watchlist-btn">add to watchlist</button>
147+
</div>
148+
</div>
149+
<div class="card">
150+
<img src="images/poster 10.png" class="card-img" alt="" />
151+
<div class="card-body">
152+
<h2 class="name">movie name</h2>
153+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
154+
<button class="watchlist-btn">add to watchlist</button>
155+
</div>
156+
</div>
157+
<div class="card">
158+
<img src="images/poster 11.png" class="card-img" alt="" />
159+
<div class="card-body">
160+
<h2 class="name">movie name</h2>
161+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
162+
<button class="watchlist-btn">add to watchlist</button>
163+
</div>
164+
</div>
165+
<div class="card">
166+
<img src="images/poster 12.png" class="card-img" alt="" />
167+
<div class="card-body">
168+
<h2 class="name">movie name</h2>
169+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
170+
<button class="watchlist-btn">add to watchlist</button>
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
176+
<h1 class="title">popular shows</h1>
177+
<div class="movies-list">
178+
<button class="pre-btn"><img src="images/pre.png" alt="" /></button>
179+
<button class="nxt-btn"><img src="images/nxt.png" alt="" /></button>
180+
<div class="card-container">
181+
<div class="card">
182+
<img src="images/poster 10.png" class="card-img" alt="" />
183+
<div class="card-body">
184+
<h2 class="name">movie name</h2>
185+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
186+
<button class="watchlist-btn">add to watchlist</button>
187+
</div>
188+
</div>
189+
<div class="card">
190+
<img src="images/poster 11.png" class="card-img" alt="" />
191+
<div class="card-body">
192+
<h2 class="name">movie name</h2>
193+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
194+
<button class="watchlist-btn">add to watchlist</button>
195+
</div>
196+
</div>
197+
<div class="card">
198+
<img src="images/poster 12.png" class="card-img" alt="" />
199+
<div class="card-body">
200+
<h2 class="name">movie name</h2>
201+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
202+
<button class="watchlist-btn">add to watchlist</button>
203+
</div>
204+
</div>
205+
<div class="card">
206+
<img src="images/poster 9.png" class="card-img" alt="" />
207+
<div class="card-body">
208+
<h2 class="name">movie name</h2>
209+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
210+
<button class="watchlist-btn">add to watchlist</button>
211+
</div>
212+
</div>
213+
<div class="card">
214+
<img src="images/poster 8.png" class="card-img" alt="" />
215+
<div class="card-body">
216+
<h2 class="name">movie name</h2>
217+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
218+
<button class="watchlist-btn">add to watchlist</button>
219+
</div>
220+
</div>
221+
<div class="card">
222+
<img src="images/poster 7.png" class="card-img" alt="" />
223+
<div class="card-body">
224+
<h2 class="name">movie name</h2>
225+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
226+
<button class="watchlist-btn">add to watchlist</button>
227+
</div>
228+
</div>
229+
<div class="card">
230+
<img src="images/poster 6.png" class="card-img" alt="" />
231+
<div class="card-body">
232+
<h2 class="name">movie name</h2>
233+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
234+
<button class="watchlist-btn">add to watchlist</button>
235+
</div>
236+
</div>
237+
<div class="card">
238+
<img src="images/poster 5.png" class="card-img" alt="" />
239+
<div class="card-body">
240+
<h2 class="name">movie name</h2>
241+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
242+
<button class="watchlist-btn">add to watchlist</button>
243+
</div>
244+
</div>
245+
<div class="card">
246+
<img src="images/poster 4.png" class="card-img" alt="" />
247+
<div class="card-body">
248+
<h2 class="name">movie name</h2>
249+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
250+
<button class="watchlist-btn">add to watchlist</button>
251+
</div>
252+
</div>
253+
<div class="card">
254+
<img src="images/poster 3.png" class="card-img" alt="" />
255+
<div class="card-body">
256+
<h2 class="name">movie name</h2>
257+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
258+
<button class="watchlist-btn">add to watchlist</button>
259+
</div>
260+
</div>
261+
<div class="card">
262+
<img src="images/poster 2.png" class="card-img" alt="" />
263+
<div class="card-body">
264+
<h2 class="name">movie name</h2>
265+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
266+
<button class="watchlist-btn">add to watchlist</button>
267+
</div>
268+
</div>
269+
<div class="card">
270+
<img src="images/poster 1.png" class="card-img" alt="" />
271+
<div class="card-body">
272+
<h2 class="name">Loki</h2>
273+
<h6 class="des">
274+
Superhero, Science Fiction, Action,fantasy Marvel <br />
275+
The mercurial villain Loki resumes his role as the God of...
276+
</h6>
277+
<button class="watchlist-btn">add to watchlist</button>
278+
</div>
279+
</div>
280+
</div>
281+
</div>
282+
283+
<h1 class="title">new releases</h1>
284+
<div class="movies-list">
285+
<button class="pre-btn"><img src="images/pre.png" alt="" /></button>
286+
<button class="nxt-btn"><img src="images/nxt.png" alt="" /></button>
287+
<div class="card-container">
288+
<div class="card">
289+
<img src="images/poster 7.png" class="card-img" alt="" />
290+
<div class="card-body">
291+
<h2 class="name">movie name</h2>
292+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
293+
<button class="watchlist-btn">add to watchlist</button>
294+
</div>
295+
</div>
296+
<div class="card">
297+
<img src="images/poster 6.png" class="card-img" alt="" />
298+
<div class="card-body">
299+
<h2 class="name">movie name</h2>
300+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
301+
<button class="watchlist-btn">add to watchlist</button>
302+
</div>
303+
</div>
304+
<div class="card">
305+
<img src="images/poster 5.png" class="card-img" alt="" />
306+
<div class="card-body">
307+
<h2 class="name">movie name</h2>
308+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
309+
<button class="watchlist-btn">add to watchlist</button>
310+
</div>
311+
</div>
312+
<div class="card">
313+
<img src="images/poster 8.png" class="card-img" alt="" />
314+
<div class="card-body">
315+
<h2 class="name">movie name</h2>
316+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
317+
<button class="watchlist-btn">add to watchlist</button>
318+
</div>
319+
</div>
320+
<div class="card">
321+
<img src="images/poster 9.png" class="card-img" alt="" />
322+
<div class="card-body">
323+
<h2 class="name">movie name</h2>
324+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
325+
<button class="watchlist-btn">add to watchlist</button>
326+
</div>
327+
</div>
328+
<div class="card">
329+
<img src="images/poster 10.png" class="card-img" alt="" />
330+
<div class="card-body">
331+
<h2 class="name">movie name</h2>
332+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
333+
<button class="watchlist-btn">add to watchlist</button>
334+
</div>
335+
</div>
336+
<div class="card">
337+
<img src="images/poster 1.png" class="card-img" alt="" />
338+
<div class="card-body">
339+
<h2 class="name">Loki</h2>
340+
<h6 class="des">
341+
Superhero, Science Fiction, Action,fantasy Marvel <br />
342+
The mercurial villain Loki resumes his role as the God of...
343+
</h6>
344+
<button class="watchlist-btn">add to watchlist</button>
345+
</div>
346+
</div>
347+
<div class="card">
348+
<img src="images/poster 2.png" class="card-img" alt="" />
349+
<div class="card-body">
350+
<h2 class="name">movie name</h2>
351+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
352+
<button class="watchlist-btn">add to watchlist</button>
353+
</div>
354+
</div>
355+
<div class="card">
356+
<img src="images/poster 3.png" class="card-img" alt="" />
357+
<div class="card-body">
358+
<h2 class="name">movie name</h2>
359+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
360+
<button class="watchlist-btn">add to watchlist</button>
361+
</div>
362+
</div>
363+
<div class="card">
364+
<img src="images/poster 4.png" class="card-img" alt="" />
365+
<div class="card-body">
366+
<h2 class="name">movie name</h2>
367+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
368+
<button class="watchlist-btn">add to watchlist</button>
369+
</div>
370+
</div>
371+
<div class="card">
372+
<img src="images/poster 11.png" class="card-img" alt="" />
373+
<div class="card-body">
374+
<h2 class="name">movie name</h2>
375+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
376+
<button class="watchlist-btn">add to watchlist</button>
377+
</div>
378+
</div>
379+
<div class="card">
380+
<img src="images/poster 12.png" class="card-img" alt="" />
381+
<div class="card-body">
382+
<h2 class="name">movie name</h2>
383+
<h6 class="des">Lorem ipsum dolor sit amet consectetur.</h6>
384+
<button class="watchlist-btn">add to watchlist</button>
385+
</div>
386+
</div>
387+
</div>
388+
</div>
389+
390+
<script src="index.js" async></script>
391+
</body>
392+
</html>

0 commit comments

Comments
 (0)