-
Notifications
You must be signed in to change notification settings - Fork 162
/
Copy pathindex.html
312 lines (287 loc) · 18.7 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
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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html>
<head>
<title>Now Playing Responsive</title>
<!-- This is where your <meta> viewport tag should go -->
<!-- We need this to indicate to devices that our design is responsive -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat|Source+Sans+Pro">
<link rel="stylesheet" href="css/styles.css">
<script src="https://use.fontawesome.com/427c01bf2d.js" charset="utf-8"></script>
</head>
<body>
<header class="site-header">
<h1 class="site-logo"><img src="images/logo.svg" alt="Bitmaker Responsive Movie DB" class="site-logo-image"></h1>
<nav class="site-nav">
<ul class="site-nav-list">
<li class="site-nav-item">
<i class="fa fa-video-camera"></i>
<span class="site-nav-item-label">Movies</span>
</li>
<li class="site-nav-item">
<i class="fa fa-television"></i>
<span class="site-nav-item-label">TV Series</span>
</li>
<li class="site-nav-item">
<i class="fa fa-ticket"></i>
<span class="site-nav-item-label">Events</span>
</li>
<li class="site-nav-item">
<i class="fa fa-film"></i>
<span class="site-nav-item-label">Trailers</span>
</li>
<li class="site-nav-item">
<i class="fa fa-bookmark"></i>
<span class="site-nav-item-label">Watchlist</span>
</li>
</ul>
</nav>
</header>
<main>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Doctor Strange" src="http://image.tmdb.org/t/p/w780/xfWac8MTYDxujaxgPVcRD9yZaul.jpg" />
<img class="movie-backdrop" alt="Doctor Strange" src="http://image.tmdb.org/t/p/w1280/tFI8VLMgSTTU38i8TIsklfqS9Nl.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Doctor Strange</h1>
<p class="movie-overview">After his career is destroyed, a brilliant but arrogant surgeon gets a new lease on life when a sorcerer takes him under his wing and trains him to defend the world against evil.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Mad Max: Fury Road" src="http://image.tmdb.org/t/p/w780/kqjL17yufvn9OVLyXYpvtyrFfak.jpg" />
<img class="movie-backdrop" alt="Mad Max: Fury Road" src="http://image.tmdb.org/t/p/w1280/tbhdm8UJAb4ViCTsulYFL3lxMCd.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Mad Max: Fury Road</h1>
<p class="movie-overview">An apocalyptic story set in the furthest reaches of our planet, in a stark desert landscape where humanity is broken, and most everyone is crazed fighting for the necessities of life. Within this world exist two rebels on the run who just might be able to restore order. There's Max, a man of action and a man of few words, who seeks peace of mind following the loss of his wife and child in the aftermath of the chaos. And Furiosa, a woman of action and a woman who believes her path to survival may be achieved if she can make it across the desert back to her childhood homeland.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Arrival" src="http://image.tmdb.org/t/p/w780/4Iu5f2nv7huqvuYkmZvSPOtbFjs.jpg" />
<img class="movie-backdrop" alt="Arrival" src="http://image.tmdb.org/t/p/w1280/wFFlaVHmQG4U43m0l3eQqHZluvn.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Arrival</h1>
<p class="movie-overview">Taking place after alien crafts land around the world, an expert linguist is recruited by the military to determine whether they come in peace or are a threat.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Suicide Squad" src="http://image.tmdb.org/t/p/w780/e1mjopzAS2KNsvpbpahQ1a6SkSn.jpg" />
<img class="movie-backdrop" alt="Suicide Squad" src="http://image.tmdb.org/t/p/w1280/ndlQ2Cuc3cjTL7lTynw6I4boP4S.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Suicide Squad</h1>
<p class="movie-overview">From DC Comics comes the Suicide Squad, an antihero team of incarcerated supervillains who act as deniable assets for the United States government, undertaking high-risk black ops missions in exchange for commuted prison sentences.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="The Secret Life of Pets" src="http://image.tmdb.org/t/p/w780/WLQN5aiQG8wc9SeKwixW7pAR8K.jpg" />
<img class="movie-backdrop" alt="The Secret Life of Pets" src="http://image.tmdb.org/t/p/w1280/lubzBMQLLmG88CLQ4F3TxZr2Q7N.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">The Secret Life of Pets</h1>
<p class="movie-overview">The quiet life of a terrier named Max is upended when his owner takes in Duke, a stray whom Max instantly dislikes.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Jack Reacher: Never Go Back" src="http://image.tmdb.org/t/p/w780/IfB9hy4JH1eH6HEfIgIGORXi5h.jpg" />
<img class="movie-backdrop" alt="Jack Reacher: Never Go Back" src="http://image.tmdb.org/t/p/w1280/4ynQYtSEuU5hyipcGkfD6ncwtwz.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Jack Reacher: Never Go Back</h1>
<p class="movie-overview">Jack Reacher must uncover the truth behind a major government conspiracy in order to clear his name. On the run as a fugitive from the law, Reacher uncovers a potential secret from his past that could change his life forever.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Mechanic: Resurrection" src="http://image.tmdb.org/t/p/w780/tgfRDJs5PFW20Aoh1orEzuxW8cN.jpg" />
<img class="movie-backdrop" alt="Mechanic: Resurrection" src="http://image.tmdb.org/t/p/w1280/6kMu4vECAyTpj2Z7n8viJ4RAaYh.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Mechanic: Resurrection</h1>
<p class="movie-overview">Arthur Bishop thought he had put his murderous past behind him when his most formidable foe kidnaps the love of his life. Now he is forced to travel the globe to complete three impossible assassinations, and do what he does best, make them look like accidents.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Finding Dory" src="http://image.tmdb.org/t/p/w780/z09QAf8WbZncbitewNk6lKYMZsh.jpg" />
<img class="movie-backdrop" alt="Finding Dory" src="http://image.tmdb.org/t/p/w1280/iWRKYHTFlsrxQtfQqFOQyceL83P.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Finding Dory</h1>
<p class="movie-overview">"Finding Dory" reunites Dory with friends Nemo and Marlin on a search for answers about her past. What can she remember? Who are her parents? And where did she learn to speak Whale?</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Jurassic World" src="http://image.tmdb.org/t/p/w780/jjBgi2r5cRt36xF6iNUEhzscEcb.jpg" />
<img class="movie-backdrop" alt="Jurassic World" src="http://image.tmdb.org/t/p/w1280/dkMD5qlogeRMiEixC4YNPUvax2T.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Jurassic World</h1>
<p class="movie-overview">Twenty-two years after the events of Jurassic Park, Isla Nublar now features a fully functioning dinosaur theme park, Jurassic World, as originally envisioned by John Hammond.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Captain America: Civil War" src="http://image.tmdb.org/t/p/w780/5N20rQURev5CNDcMjHVUZhpoCNC.jpg" />
<img class="movie-backdrop" alt="Captain America: Civil War" src="http://image.tmdb.org/t/p/w1280/m5O3SZvQ6EgD5XXXLPIP1wLppeW.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Captain America: Civil War</h1>
<p class="movie-overview">Following the events of Age of Ultron, the collective governments of the world pass an act designed to regulate all superhuman activity. This polarizes opinion amongst the Avengers, causing two factions to side with Iron Man or Captain America, which causes an epic battle between former allies.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="The Last Starship" src="http://image.tmdb.org/t/p/w780/jZASQ15M6KUaRvHJhbUButeATDi.jpg" />
<img class="movie-backdrop" alt="The Last Starship" src="http://placehold.it/1280x720/?text=Backdrop not available" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">The Last Starship</h1>
<p class="movie-overview">Conflict and tension looms heavily across the broken remains of a distant, post-apocalyptic world. Controlled by a race of oppressive genetically-enhanced humans, the last natural-born humans have no choice but to bow down to their rule. The only alternative is to wander the vast wastelands surrounding the last habitable city, whilst relentlessly hunted by roaming pack of mutated monsters. Meanwhile, outside the towering walls of the citadel, aboard a massive hulking army tank, an uprising occurs amongst the natural-born crew. Their hope lies in the legend of the Republic of EZO: said to return aboard the last starship....</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Interstellar" src="http://image.tmdb.org/t/p/w780/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg" />
<img class="movie-backdrop" alt="Interstellar" src="http://image.tmdb.org/t/p/w1280/xu9zaAevzQ5nnrsXN6JcahLnG4i.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Interstellar</h1>
<p class="movie-overview">Interstellar chronicles the adventures of a group of explorers who make use of a newly discovered wormhole to surpass the limitations on human space travel and conquer the vast distances involved in an interstellar voyage.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Terminator Genisys" src="http://image.tmdb.org/t/p/w780/5JU9ytZJyR3zmClGmVm9q4Geqbd.jpg" />
<img class="movie-backdrop" alt="Terminator Genisys" src="http://image.tmdb.org/t/p/w1280/bIlYH4l2AyYvEysmS2AOfjO7Dn8.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Terminator Genisys</h1>
<p class="movie-overview">The year is 2029. John Connor, leader of the resistance continues the war against the machines. At the Los Angeles offensive, John's fears of the unknown future begin to emerge when TECOM spies reveal a new plot by SkyNet that will attack him from both fronts; past and future, and will ultimately change warfare forever.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="X-Men: Apocalypse" src="http://image.tmdb.org/t/p/w780/zSouWWrySXshPCT4t3UKCQGayyo.jpg" />
<img class="movie-backdrop" alt="X-Men: Apocalypse" src="http://image.tmdb.org/t/p/w1280/oQWWth5AOtbWG9o8SCAviGcADed.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">X-Men: Apocalypse</h1>
<p class="movie-overview">After the re-emergence of the world's first mutant, world-destroyer Apocalypse, the X-Men must unite to defeat his extinction level plan.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Fantastic Beasts and Where to Find Them" src="http://image.tmdb.org/t/p/w780/9HE9xiNMEFJnCzndlkWD7oPfAOx.jpg" />
<img class="movie-backdrop" alt="Fantastic Beasts and Where to Find Them" src="http://image.tmdb.org/t/p/w1280/6I2tPx6KIiBB4TWFiWwNUzrbxUn.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Fantastic Beasts and Where to Find Them</h1>
<p class="movie-overview">In 1926, Newt Scamander arrives at the Magical Congress of the United States of America with a magically expanded briefcase, which houses a number of dangerous creatures and their habitats. When the creatures escape from the briefcase, it sends the American wizarding authorities after Newt, and threatens to strain even further the state of magical and non-magical relations.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Inferno" src="http://image.tmdb.org/t/p/w780/oFOG2yIRcluKfTtYbzz71Vj9bgz.jpg" />
<img class="movie-backdrop" alt="Inferno" src="http://image.tmdb.org/t/p/w1280/anmLLbDx9d98NMZRyVUtxwJR6ab.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Inferno</h1>
<p class="movie-overview">After waking up in a hospital with amnesia, professor Robert Langdon and a doctor must race against time to foil a deadly global plot.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="The Legend of Tarzan" src="http://image.tmdb.org/t/p/w780/6FxOPJ9Ysilpq0IgkrMJ7PubFhq.jpg" />
<img class="movie-backdrop" alt="The Legend of Tarzan" src="http://image.tmdb.org/t/p/w1280/uC8RkYALi9VWHeZQWLRUqjxfW09.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">The Legend of Tarzan</h1>
<p class="movie-overview">Tarzan, having acclimated to life in London, is called back to his former home in the jungle to investigate the activities at a mining encampment.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Ice Age: Collision Course" src="http://image.tmdb.org/t/p/w780/dN3KkgXcDkP1QkOZPz5EGXzS8B7.jpg" />
<img class="movie-backdrop" alt="Ice Age: Collision Course" src="http://image.tmdb.org/t/p/w1280/o29BFNqgXOUT1yHNYusnITsH7P9.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Ice Age: Collision Course</h1>
<p class="movie-overview">Set after the events of Continental Drift, Scrat's epic pursuit of his elusive acorn catapults him outside of Earth, where he accidentally sets off a series of cosmic events that transform and threaten the planet. To save themselves from peril, Manny, Sid, Diego, and the rest of the herd leave their home and embark on a quest full of thrills and spills, highs and lows, laughter and adventure while traveling to exotic new lands and encountering a host of colorful new characters.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="Star Trek Beyond" src="http://image.tmdb.org/t/p/w780/mLrQMqyZgLeP8FrT5LCobKAiqmK.jpg" />
<img class="movie-backdrop" alt="Star Trek Beyond" src="http://image.tmdb.org/t/p/w1280/6uBlEXZCUHM15UNZqNig17VdN4m.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">Star Trek Beyond</h1>
<p class="movie-overview">The USS Enterprise crew explores the furthest reaches of uncharted space, where they encounter a mysterious new enemy who puts them and everything the Federation stands for to the test.</p>
</div>
</article>
<article class="movie">
<figure class="movie-image">
<img class="movie-poster" alt="The Hunger Games: Mockingjay - Part 1" src="http://image.tmdb.org/t/p/w780/gj282Pniaa78ZJfbaixyLXnXEDI.jpg" />
<img class="movie-backdrop" alt="The Hunger Games: Mockingjay - Part 1" src="http://image.tmdb.org/t/p/w1280/83nHcz2KcnEpPXY50Ky2VldewJJ.jpg" />
</figure>
<div class="movie-details">
<h2 class="movie-title-label">Movie</h2>
<h1 class="movie-title">The Hunger Games: Mockingjay - Part 1</h1>
<p class="movie-overview">Katniss Everdeen reluctantly becomes the symbol of a mass rebellion against the autocratic Capitol.</p>
</div>
</article>
</main>
<footer class="site-footer">
<nav class="footer-nav">
<ul class="footer-nav-list">
<li class="footer-nav-item">
<span class="footer-nav-item-label">Movies</span>
</li>
<li class="footer-nav-item">
<span class="footer-nav-item-label">TV Series</span>
</li>
<li class="footer-nav-item">
<span class="footer-nav-item-label">Events</span>
</li>
<li class="footer-nav-item">
<span class="footer-nav-item-label">Trailers</span>
</li>
<li class="footer-nav-item">
<span class="footer-nav-item-label">Watchlist</span>
</li>
</ul>
</nav>
<section class="about">
<p>Site created by <strong>YOUR NAME!</strong></p>
<p><small>A Bitmaker assignment © 2016</small></p>
</section>
</footer>
</body>
</html>