-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopular.html
209 lines (206 loc) · 17 KB
/
popular.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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<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">
<link rel="stylesheet" href="style.css">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Sen:wght@400;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<title>Movie Design</title>
</head>
<body>
<div class="navbar">
<div class="navbar-container">
<div class="logo-container">
<h1 class="logo">Cineflix</h1>
</div>
<div class="menu-container">
<ul class="menu-list">
<a href="./index.html"><li class="menu-list-item active">Home</li></a>
<a href="./movies.html"><li class="menu-list-item">Movies</li></a>
<a href="./series.html"><li class="menu-list-item" >Series</li></a>
<a href="./popular.html"><li class="menu-list-item">Popular</li></a>
</ul>
</div>
<p style="color:grey;">Dark Mode </p>
<div class="toggle">
<i class="fas fa-moon toggle-icon"></i>
<i class="fas fa-sun toggle-icon"></i>
<div class="toggle-ball"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="content-container">
<div class="movie-list-container">
<br>
<h1 class="movie-list-title">NEW RELEASES</h1>
<div class="movie-list-wrapper">
<div class="movie-list">
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/1.jpeg" alt="">
<span class="movie-list-item-title">Her</span>
<p class="movie-list-item-desc">Theodore Twombly, an introverted writer, buys an Artificial Intelligence system to help him write. However, when he finds out about the AI's ability to learn and adapt, he falls in love with it.</p>
<a href="https://youtu.be/dJTU48_yghs"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/2.jpeg" alt="">
<span class="movie-list-item-title">Star Wars</span>
<p class="movie-list-item-desc">The revival of Emperor Palpatine resurrects the battle between the Resistance and the First Order while the Jedi's legendary conflict with the Sith Lord comes to a head.</p>
<a href="https://youtu.be/8Qn_spdM5Zg"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/3.jpg" alt="">
<span class="movie-list-item-title">Storm</span>
<p class="movie-list-item-desc">After learning about some major developing storms, Pete, a storm chaser, heads to Silverton to film tornadoes. Soon, he discovers that a tornado shifts course and heads towards a high school.</p>
<a href="https://youtu.be/lT-fhZh7_e8 "><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/4.jpg" alt="">
<span class="movie-list-item-title">1917</span>
<p class="movie-list-item-desc">Two soldiers, assigned the task of delivering a critical message to another battalion, risk their lives for the job in order to prevent them from stepping right into a deadly ambush.</p>
<a href="https://youtu.be/YqNYrYUiMfg"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/5.jpg" alt="">
<span class="movie-list-item-title">Avengers</span>
<p class="movie-list-item-desc">Nick Fury is compelled to launch the Avengers Initiative when Loki poses a threat to planet Earth. His squad of superheroes put their minds together to accomplish the task.</p>
<a href="https://youtu.be/QwievZ1Tx-8"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/6.jpg" alt="">
<span class="movie-list-item-title">Rampage</span>
<p class="movie-list-item-desc">Primatologist Davis Okoye teams up with a geneticist, Dr Kate Caldwell, and tries to save George, an albino gorilla, and prevent two giant mutated animals from wreaking havoc in Chicago.</p>
<a href="https://youtu.be/coOKvrsmQiI"><button class="movie-list-item-button">Watch</button></a>
</div>
<i class="fas fa-chevron-right arrow"></i>
</div>
</div>
<div class="movie-list-container">
<h1 class="movie-list-title">POPULAR</h1>
<div class="movie-list-wrapper">
<div class="movie-list">
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/8.jpg" alt="">
<span class="movie-list-item-title">Oblivion</span>
<p class="movie-list-item-desc">Jack Harper, a drone repairman stationed on Earth that has been ravaged by war with extraterrestrials, questions his identity after rescuing the woman who keeps appearing in his dreams.</p>
<a href="https://youtu.be/XmIIgE7eSak"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/9.jpg" alt="">
<span class="movie-list-item-title">Hobbit</span>
<p class="movie-list-item-desc">The Hobbit is a series of three high fantasy adventure films directed by Peter Jackson. The three films are subtitled An Unexpected Journey, The Desolation of Smaug, and The Battle of the Five Armies. The films are based on the 1937 novel The Hobbit by J. R. R.</p>
<a href="https://youtu.be/JTSoD4BBCJc"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/10.jpg" alt="">
<span class="movie-list-item-title">Due Date</span>
<p class="movie-list-item-desc">Peter Highman must reach Los Angeles to make it in time for his child's birth. However, he is forced to travel with Ethan, an aspiring actor, who frequently lands him in trouble.</p>
<a href="https://youtu.be/1p3NnJ_oiE0"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/11.jpg" alt="">
<span class="movie-list-item-title">Kick ass-2</span>
<p class="movie-list-item-desc">Kick-Ass, a superhero in high school, is forced to join new heroes and old allies in order to fight his old nemesis, Red Mist, when he forms a team of supervillains to get revenge against him.</p>
<a href="https://youtu.be/Td921lYSBIA"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/12.jpg" alt="">
<span class="movie-list-item-title">Emoji movie</span>
<p class="movie-list-item-desc">Gene, a multi-expression emoji, gets sentenced to be deleted after he messes up a message his user Alex sends to his crush. Gene escapes the agents sent to destroy him and accepts his uniqueness.</p>
<a href="https://youtu.be/r8pJt4dK_s4"><button class="movie-list-item-button">Watch</button></a>
</div>
</div>
<i class="fas fa-chevron-right arrow"></i>
</div>
</div>
<div class="featured-content"
style="background: linear-gradient(to bottom, rgba(0,0,0,0), #151515), url('img/f-2.jpg');">
<img class="featured-title" src="img/f-t-2.png" alt="">
<p class="featured-desc">When two children go missing in a small German town, its sinful past is exposed along with the double lives and fractured relationships that exist among four families as they search for the kids. The mystery-drama series introduces an intricate puzzle filled with twists that includes a web of curious characters, all of whom have a connection to the town's troubled history -- whether they know it or not. The story includes supernatural elements that tie back to the same town in 1986. "Dark" represents the first German original series produced for Netflix.</p>
<a href="https://youtu.be/cq2iTHoLrt0"><button class="featured-button">WATCH</button></a>
</div>
<div class="movie-list-container">
<h1 class="movie-list-title">TOP HITS</h1>
<div class="movie-list-wrapper">
<div class="movie-list">
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/1.jpeg" alt="">
<span class="movie-list-item-title">Her</span>
<p class="movie-list-item-desc">Theodore Twombly, an introverted writer, buys an Artificial Intelligence system to help him write. However, when he finds out about the AI's ability to learn and adapt, he falls in love with it.</p>
<a href="https://youtu.be/dJTU48_yghs"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/2.jpeg" alt="">
<span class="movie-list-item-title">Star Wars</span>
<p class="movie-list-item-desc">The revival of Emperor Palpatine resurrects the battle between the Resistance and the First Order while the Jedi's legendary conflict with the Sith Lord comes to a head.</p>
<a href="https://youtu.be/8Qn_spdM5Zg"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/15.jpg" alt="">
<span class="movie-list-item-title">The Lego Batman Movie</span>
<p class="movie-list-item-desc">Batman works together with his ward, Robin, and the police commissioner's daughter, Barbara, to foil Joker's plans of taking over Gotham City.</p>
<a href="https://youtu.be/h6DOpfJzmo0"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/3.jpg" alt="">
<span class="movie-list-item-title">Strom</span>
<p class="movie-list-item-desc">After learning about some major developing storms, Pete, a storm chaser, heads to Silverton to film tornadoes. Soon, he discovers that a tornado shifts course and heads towards a high school.</p>
<a herf="https://youtu.be/xBH25XxM-7g"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/4.jpg" alt="">
<span class="movie-list-item-title">1917</span>
<p class="movie-list-item-desc">Two soldiers, assigned the task of delivering a critical message to another battalion, risk their lives for the job in order to prevent them from stepping right into a deadly ambush.</p>
<a href="https://youtu.be/YqNYrYUiMfg"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/5.jpg" alt="">
<span class="movie-list-item-title">Avengers</span>
<p class="movie-list-item-desc">Nick Fury is compelled to launch the Avengers Initiative when Loki poses a threat to planet Earth. His squad of superheroes put their minds together to accomplish the task.</p>
<a href="https://youtu.be/QwievZ1Tx-8"><button class="movie-list-item-button">Watch</button></a>
</div>
</div>
<i class="fas fa-chevron-right arrow"></i>
</div>
</div>
<div class="movie-list-container">
<h1 class="movie-list-title">ALL TIME FAVOURITES</h1>
<div class="movie-list-wrapper">
<div class="movie-list">
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/17.jpg" alt="">
<span class="movie-list-item-title">Aquaman</span>
<p class="movie-list-item-desc">In 1985 Maine, lighthouse keeper Thomas Curry rescues Atlanna, the queen of the underwater kingdom of Atlantis, during a storm. They fall in love and have a son named Arthur, who has the power to communicate with sea creatures. </p>
<a href="https://youtu.be/WDkg3h8PCVU"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/18.jpg" alt="">
<span class="movie-list-item-title">Fairy Tale Dragon Cry</span>
<p class="movie-list-item-desc">Natsu and his friends travel to the island kingdom of Stella to recapture the Dragon Cry, a magical artefact with enough power to destroy the world.</p>
<a href="https://youtu.be/9Yk5cBOTcZ8"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/19.jpg" alt="">
<span class="movie-list-item-title">Spiderman</span>
<p class="movie-list-item-desc">Spider-Man seeks the help of Doctor Strange to forget his exposed secret identity as Peter Parker. However, Strange's spell goes horribly wrong, leading to unwanted guests entering their universe.</p>
<a href="https://youtu.be/nbp3Ra3Yp74"><button class="movie-list-item-button">Watch</button></a>
</div>
<div class="movie-list-item">
<img class="movie-list-item-img" src="img/7.jpg" alt="">
<span class="movie-list-item-title">Star Wars</span>
<p class="movie-list-item-desc">The revival of Emperor Palpatine resurrects the battle between the Resistance and the First Order while the Jedi's legendary conflict with the Sith Lord comes to a head.</p>
<a href="https://youtu.be/8Qn_spdM5Zg"><button class="movie-list-item-button">Watch</button></a>
</div>
</div>
<i class="fas fa-chevron-right arrow"></i>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>