forked from Kumardinesh1908/Netflix-Clone
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (120 loc) · 4.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="icon" href="/assests/netflix.ico">
<title>Netflix</title>
</head>
<body>
<!-- Header container -->
<header class="header">
<img src="/assests/netflix.png" alt="logo" id="netflix-logo">
<div class="input-container">
<input type="text" id="searchInput" placeholder="Search movies...">
<div id="searchResults"></div>
</div>
<button id="goToWatchlist" class="watchList-Btn">WatchList</button>
</header>
<!-- Banner container -->
<div id="banner-container">
<img id="banner" src="" alt="banner" />
<div id="details-container">
<h1 id="banner-title"></h1>
<div id="button-container">
<button id="play-button">
<img style="width: 0.8rem; height: 0.8rem;" src="/assests/play.png" />
<span>Play</span>
</button>
<button id="more-info">
<img id="info-icon" src="/assests/info.png" />
<span>More Information</span>
</button>
</div>
</div>
<div id="empty"></div>
</div>
<!-- Netflix Originals container -->
<section class="movie-section">
<h1>NETFLIX ORIGINALS</h1>
<div class=" movie-container">
<button class="navigation-button previous netflix-previous"><</button>
<!-- Display netflix movies here -->
<div class="movies-box netflix-container"></div>
<button class="navigation-button next netflix-next">></button>
</div>
</section>
<!-- Netflix Shows container -->
<section class="movie-section ">
<h1>NETFLIX SHOWS</h1>
<div class=" movie-container">
<button class="navigation-button previous netflixShows-previous"><</button>
<!-- Display netflixShows movies here -->
<div class="movies-box netflixShows-container"></div>
<button class="navigation-button next netflixShows-next">></button>
</div>
</section>
<!-- Trending Movies container -->
<section class="movie-section">
<h1>Trending Now</h1>
<div class="movie-container">
<button class="navigation-button previous trending-previous"><</button>
<!-- Display trending movies here -->
<div class="movies-box trending-container"></div>
<button class="navigation-button next trending-next">></button>
</div>
</section>
<!-- Top Movies container -->
<section class="movie-section ">
<h1>Top Rated </h1>
<div class=" movie-container">
<button class="navigation-button previous top-previous"><</button>
<!-- Display top movies here -->
<div class="movies-box top-container"></div>
<button class="navigation-button next top-next">></button>
</div>
</section>
<!-- Horror Movies container -->
<section class="movie-section ">
<h1>Horror Movies </h1>
<div class=" movie-container">
<button class="navigation-button previous horror-previous"><</button>
<!-- Display horror movies here -->
<div class="movies-box horror-container"></div>
<button class="navigation-button next horror-next">></button>
</div>
</section>
<!-- romantic Movies container -->
<section class="movie-section ">
<h1>Romantic Movies </h1>
<div class=" movie-container">
<button class="navigation-button previous romantic-previous"><</button>
<!-- Display romantic movies here -->
<div class="movies-box romantic-container"></div>
<button class="navigation-button next romantic-next">></button>
</div>
</section>
<!-- comedy Movies container -->
<section class="movie-section ">
<h1>Comedy Movies </h1>
<div class=" movie-container ">
<button class="navigation-button previous comedy-previous"><</button>
<!-- Display comedy movies here -->
<div class="movies-box comedy-container"></div>
<button class="navigation-button next comedy-next">></button>
</div>
</section>
<!-- action Movies container -->
<section class="movie-section ">
<h1>Action Movies </h1>
<div class=" movie-container ">
<button class="navigation-button previous action-previous"><</button>
<!-- Display action movies here -->
<div class="movies-box action-container"></div>
<button class="navigation-button next action-next">></button>
</div>
</section>
<script src="index.js"></script>
</body>
</html>