-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
346 lines (336 loc) · 21.3 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
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<!DOCTYPE html>
<html lang="en" data-theme="light">
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A website about the movie Interstellar" />
<!-- CSS -->
<link rel="stylesheet" href="styles/style.css" />
<!-- Favicon -->
<link rel="shortcut icon" href="assets/icons/saturn-icon.svg" type="image/x-icon" />
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet" />
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8f604c477e.js" crossorigin="anonymous"></script>
<!-- Parallax -->
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
<!-- Title -->
<title>Interstellar</title>
</head>
<body>
<header>
<section class="header-container">
<section class="header-box-one">
<section class="header-title">
<h1>Interstellar</h1>
</section>
<section class="header-navigation-box">
<nav class="header-nav">
<ul class="header-list">
<li class="item" id="home">Home</li>
<li class="item" id="planets">Planets</li>
<li class="item" id="characters">Characters</li>
<li class="item" id="about">About</li>
</ul>
<section id="theme-switcher">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
id="icon-sun">
<path
d="M12 5.53125C11.7265 5.53125 11.4642 5.4226 11.2708 5.2292C11.0774 5.03581 10.9688 4.7735 10.9688 4.5V2.25C10.9688 1.9765 11.0774 1.71419 11.2708 1.5208C11.4642 1.3274 11.7265 1.21875 12 1.21875C12.2735 1.21875 12.5358 1.3274 12.7292 1.5208C12.9226 1.71419 13.0312 1.9765 13.0312 2.25V4.5C13.0312 4.7735 12.9226 5.03581 12.7292 5.2292C12.5358 5.4226 12.2735 5.53125 12 5.53125Z" />
<path
d="M12 22.7812C11.7265 22.7812 11.4642 22.6726 11.2708 22.4792C11.0774 22.2858 10.9688 22.0235 10.9688 21.75V19.5C10.9688 19.2265 11.0774 18.9642 11.2708 18.7708C11.4642 18.5774 11.7265 18.4688 12 18.4688C12.2735 18.4688 12.5358 18.5774 12.7292 18.7708C12.9226 18.9642 13.0312 19.2265 13.0312 19.5V21.75C13.0312 22.0235 12.9226 22.2858 12.7292 22.4792C12.5358 22.6726 12.2735 22.7812 12 22.7812Z" />
<path
d="M17.3035 7.7278C17.0995 7.72777 16.9002 7.66729 16.7307 7.55401C16.5611 7.44072 16.429 7.27971 16.3509 7.09133C16.2728 6.90294 16.2524 6.69565 16.2921 6.49564C16.3318 6.29563 16.43 6.11189 16.5741 5.96764L18.165 4.3767C18.3593 4.18751 18.6202 4.08243 18.8914 4.08422C19.1625 4.08601 19.422 4.19451 19.6138 4.38624C19.8055 4.57798 19.914 4.83751 19.9158 5.10866C19.9176 5.3798 19.8125 5.64074 19.6233 5.83499L18.0324 7.42592C17.9367 7.52176 17.8231 7.59777 17.698 7.64957C17.5729 7.70138 17.4389 7.72796 17.3035 7.7278Z" />
<path
d="M5.10562 19.9256C4.90165 19.9256 4.70226 19.8651 4.53268 19.7518C4.3631 19.6384 4.23095 19.4773 4.15292 19.2889C4.0749 19.1004 4.05452 18.893 4.09435 18.693C4.13418 18.4929 4.23245 18.3092 4.37671 18.165L5.96765 16.5741C6.06294 16.4762 6.17671 16.3983 6.30236 16.3448C6.42801 16.2913 6.56304 16.2633 6.6996 16.2624C6.83617 16.2615 6.97155 16.2877 7.0979 16.3396C7.22424 16.3914 7.33903 16.4678 7.4356 16.5644C7.53217 16.661 7.60859 16.7758 7.66044 16.9021C7.71228 17.0285 7.73852 17.1638 7.73762 17.3004C7.73672 17.437 7.70871 17.572 7.6552 17.6976C7.60169 17.8233 7.52376 17.9371 7.42593 18.0324L5.83499 19.6233C5.73933 19.7193 5.62565 19.7954 5.50048 19.8472C5.37531 19.8991 5.24112 19.9258 5.10562 19.9256Z" />
<path
d="M21.75 13.0312H19.5C19.2265 13.0312 18.9642 12.9226 18.7708 12.7292C18.5774 12.5358 18.4688 12.2735 18.4688 12C18.4688 11.7265 18.5774 11.4642 18.7708 11.2708C18.9642 11.0774 19.2265 10.9688 19.5 10.9688H21.75C22.0235 10.9688 22.2858 11.0774 22.4792 11.2708C22.6726 11.4642 22.7812 11.7265 22.7812 12C22.7812 12.2735 22.6726 12.5358 22.4792 12.7292C22.2858 12.9226 22.0235 13.0312 21.75 13.0312Z" />
<path
d="M4.5 13.0312H2.25C1.9765 13.0312 1.71419 12.9226 1.5208 12.7292C1.3274 12.5358 1.21875 12.2735 1.21875 12C1.21875 11.7265 1.3274 11.4642 1.5208 11.2708C1.71419 11.0774 1.9765 10.9688 2.25 10.9688H4.5C4.7735 10.9688 5.03581 11.0774 5.2292 11.2708C5.4226 11.4642 5.53125 11.7265 5.53125 12C5.53125 12.2735 5.4226 12.5358 5.2292 12.7292C5.03581 12.9226 4.7735 13.0312 4.5 13.0312Z" />
<path
d="M18.8944 19.9256C18.7589 19.9258 18.6247 19.8991 18.4995 19.8472C18.3743 19.7953 18.2607 19.7192 18.165 19.6233L16.5741 18.0323C16.3849 17.8381 16.2798 17.5772 16.2816 17.306C16.2834 17.0349 16.3919 16.7753 16.5836 16.5836C16.7753 16.3919 17.0349 16.2834 17.306 16.2816C17.5772 16.2798 17.8381 16.3849 18.0323 16.5741L19.6233 18.165C19.7675 18.3092 19.8658 18.4929 19.9056 18.693C19.9455 18.893 19.9251 19.1004 19.8471 19.2888C19.769 19.4773 19.6369 19.6384 19.4673 19.7517C19.2977 19.8651 19.0983 19.9256 18.8944 19.9256Z" />
<path
d="M6.69655 7.7278C6.56114 7.72806 6.42702 7.70152 6.30192 7.64971C6.17682 7.5979 6.06321 7.52185 5.96764 7.42592L4.3767 5.83499C4.18751 5.64074 4.08243 5.3798 4.08422 5.10866C4.08601 4.83751 4.19451 4.57798 4.38624 4.38624C4.57798 4.19451 4.83751 4.08601 5.10866 4.08422C5.3798 4.08243 5.64074 4.18751 5.83499 4.3767L7.42592 5.96764C7.57005 6.11189 7.66818 6.29563 7.70791 6.49564C7.74764 6.69565 7.72718 6.90294 7.64912 7.09133C7.57105 7.27971 7.43889 7.44072 7.26934 7.55401C7.09979 7.66729 6.90046 7.72777 6.69655 7.7278Z" />
<path
d="M12 16.7813C11.0544 16.7813 10.13 16.5008 9.34368 15.9755C8.55741 15.4501 7.94458 14.7034 7.5827 13.8297C7.22082 12.956 7.12614 11.9947 7.31062 11.0672C7.49511 10.1398 7.95048 9.28782 8.61915 8.61915C9.28782 7.95048 10.1398 7.49511 11.0672 7.31062C11.9947 7.12614 12.956 7.22082 13.8297 7.5827C14.7034 7.94458 15.4501 8.55741 15.9755 9.34368C16.5008 10.13 16.7813 11.0544 16.7813 12C16.7798 13.2676 16.2755 14.4829 15.3792 15.3792C14.4829 16.2755 13.2676 16.7798 12 16.7813Z" />
</svg>
<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"
id="icon-moon">
<path
d="M11.375 21.5C8.49077 21.5 5.72467 20.3542 3.68521 18.3148C1.64576 16.2753 0.5 13.5092 0.5 10.625C0.5 6.21874 3.03125 2.26812 6.95047 0.562338C7.0886 0.502139 7.24165 0.48494 7.3897 0.512981C7.53774 0.541023 7.6739 0.613005 7.78045 0.719548C7.88699 0.826092 7.95897 0.962256 7.98701 1.1103C8.01506 1.25834 7.99786 1.4114 7.93766 1.54953C7.48766 2.58265 7.25 3.90593 7.25 5.37499C7.25 10.5444 11.4556 14.75 16.625 14.75C18.0941 14.75 19.4173 14.5123 20.4505 14.0623C20.5886 14.0021 20.7417 13.9849 20.8897 14.013C21.0377 14.041 21.1739 14.113 21.2804 14.2195C21.387 14.3261 21.459 14.4623 21.487 14.6103C21.5151 14.7583 21.4979 14.9114 21.4377 15.0495C19.7319 18.9687 15.7813 21.5 11.375 21.5Z" />
</svg>
</section>
</nav>
</section>
</section>
<section class="header-box-two">
<section class="description">
<h2>A Christopher Nolan film</h2>
<a href="https://www.primevideo.com/detail/0PUNMGZEWOMYFKR1XIGOLTL2YM/ref=atv_dl_rdr?tag=justbrcock-20"
target="_blank" rel="noopener noreferrer">
<button title="Watch in the Prime video">Watch</button>
</a>
</section>
</section>
</section>
</header>
<main>
<section class="main-container">
<section class="prais-box">
<h3 class="prais-title">
A wonderful movie for lovers of the universe
</h3>
</section>
<section class="theories-box">
<section class="endurance-image"></section>
<section class="theories">
<h4>Do you know the theories of relativity?</h4>
<p>
The whole movie talks about the theories, but do you know what
they are like?
</p>
<a href="https://www.space.com/17661-theory-general-relativity.html" target="_blank"
title="Know the theories"><button class="theories-button">To know</button></a>
</section>
<section class="gargantua-image"></section>
</section>
<section class="planets-cards" id="Planets">
<section class="planets-tittle">
<h4>Planets</h4>
</section>
<section class="cards-container">
<section class="card">
<section class="card-image">
<img src="./assets/images/planets/miller.webp"
alt="A scene depicting Dr. Brand going into the ship with a wave coming in."
loading="lazy" draggable="false" />
</section>
<section class="card-description">
<section class="card-title">
<h5>Miller</h5>
</section>
<section class="planet-description">
<p>A planet full of water</p>
<i class="fa-solid fa-droplet"></i>
</section>
</section>
</section>
<section class="card">
<section class="card-image">
<img src="./assets/images/planets/dr-man.webp"
alt="A scene depicting Dr. Mann and Cooper on the planet" loading="lazy"
draggable="false" />
</section>
<section class="card-description">
<section class="card-title">
<h5>Mann</h5>
</section>
<section class="planet-description">
<p>A planet with frozen mountains</p>
<i class="fa-solid fa-snowflake"></i>
</section>
</section>
</section>
<section class="card">
<section class="card-image">
<img src="./assets/images/planets/edmunds.webp" alt="Dr. Brand going to camp at Edmund's"
loading="lazy" draggable="false" />
</section>
<section class="card-description">
<section class="card-title">
<h5>Edmunds</h5>
</section>
<section class="planet-description">
<p>A rocky planet</p>
<i class="fa-solid fa-mountain"></i>
</section>
</section>
</section>
</section>
</section>
<section class="characters-container" id="Characters">
<section class="characters-title">
<h4>Characters</h4>
</section>
<section class="characters-cards">
<section class="character-card">
<section class="character-image">
<img src="./assets/images/characters/cooper.webp" alt="Cooper" loading="lazy"
draggable="false" />
</section>
<section class="character-description">
<section>
<h5>Cooper</h5>
</section>
<section class="actor">
<p>Matthew McConaughey</p>
</section>
</section>
</section>
<section class="character-card">
<section class="character-image">
<img src="./assets/images/characters/brand.webp" alt="Brand" loading="lazy"
draggable="false" />
</section>
<section class="character-description">
<section class="character-name">
<h5>Amelia Brand</h5>
</section>
<section class="actor">
<p>Anne Hathaway</p>
</section>
</section>
</section>
<section class="character-card">
<section class="character-image">
<img src="./assets/images/characters/romilly.webp" alt="Romilly" loading="lazy"
draggable="false" />
</section>
<section class="character-description">
<section class="character-name">
<h5>Romilly</h5>
</section>
<section class="actor">
<p>David Gyasi</p>
</section>
</section>
</section>
<section class="character-card">
<section class="character-image">
<img src="./assets/images/characters/doyle.webp" alt="Doyle" loading="lazy"
draggable="false" />
</section>
<section class="character-description">
<section class="character-name">
<h5>Doyle</h5>
</section>
<section class="actor">
<p>Wes Bentley</p>
</section>
</section>
</section>
<section class="character-card">
<section class="character-image">
<img src="./assets/images/characters/murphy.webp" alt="Murphy" loading="lazy"
draggable="false" />
</section>
<section class="character-description">
<section class="character-name">
<h5>Murphy</h5>
</section>
<section class="actor">
<p>Mackenzie Foy (10 Yrs.)</p>
<p>Jessica Chastain</p>
<p>Ellen Burstyn (Older)</p>
</section>
</section>
</section>
<section class="character-card">
<section class="character-image">
<img src="./assets/images/characters/tom.webp" alt="Tom" loading="lazy" draggable="false" />
</section>
<section class="character-description">
<section class="character-name">
<h5>Tom</h5>
</section>
<section class="actor">
<p>Timothée Chalamet (15 Yrs.)</p>
<p>Casey Affleck</p>
</section>
</section>
</section>
<section class="character-card">
<section class="character-image">
<img src="./assets/images/characters/professor-brand.webp" alt="Professor Brand"
loading="lazy" draggable="false" />
</section>
<section class="character-description">
<section class="character-name">
<h5>Professor Brand</h5>
</section>
<section class="actor">
<p>Michael Caine</p>
</section>
</section>
</section>
<section class="character-card">
<section class="character-image">
<img src="./assets/images/characters/donald.webp" alt="Donald" loading="lazy"
draggable="false" />
</section>
<section class="character-description">
<section class="character-name">
<h5>Donald</h5>
</section>
<section class="actor">
<p>John Lithgow</p>
</section>
</section>
</section>
</section>
<section class="more-characters">
<a href="https://interstellarfilm.fandom.com/wiki/Category:Characters" title="See more characters"
target="_blank">
<button class="more-characters-button">More characters</button>
</a>
</section>
</section>
<section class="about" id="About">
<section class="about-title">
<h4>About Interstellar</h4>
</section>
<section class="about-description">
<p>Earth's future has been riddled by disasters, famines, and droughts. There is only one way to
ensure mankind's survival: Interstellar travel. A newly discovered wormhole in the far reaches
of our solar system allows a team of astronauts to go where no man has gone before, a planet
that may have the right environment to sustain human life.
</p>
</section>
</section>
<section class="loader">
<p>Wait a second please</p>
<img src="./assets/gifs/rocket.gif" class="rocket" />
</section>
</main>
<footer>
<section class="footer-container">
<section class="footer-title">
<h4>Interstellar</h4>
</section>
<section class="footer-links">
<section class="social">
<a href="https://www.facebook.com/Interstellar/" target="_blank" title="Interstellar Facebook">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</a>
<a href="https://twitter.com/interstellar" target="_blank" title="Interstellar Twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="https://www.imdb.com/title/tt0816692/" target="_blank" title="Interstellar IMDB">
<i class="fa fa-imdb" aria-hidden="true"></i>
</a>
</section>
<section class="navigation">
<ul class="footer-list">
<li class="item" id="home">Home</li>
<li class="item" id="planets">Planets</li>
<li class="item" id="characters">Characters</li>
<li class="item" id="about">About</li>
</ul>
</section>
</section>
<section class="copyright">
<a href="https://pin.it/6rPkEFU" target="_blank" title="Reference image">Image used as reference</a>
<p>© <span id="year"> </span> All rights reserved</p>
</section>
</section>
</footer>
<script src="script.js"></script>
</body>
</html>