-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
469 lines (430 loc) · 25.2 KB
/
Copy pathindex.html
File metadata and controls
469 lines (430 loc) · 25.2 KB
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
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space</title>
<!-- Link -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body>
<!-- Navbar -->
<nav>
<div class="logo">
<a href="#"><img src="Asset/img/Tab_Logo_W.png"></a>
</div>
<div class="top">
<ul>
<li><a href="#about">Space</a></li>
<li><a href="#planet">Planet</a></li>
<li><a href="#space-exploration">Space Exploration</a></li>
<li><a href="#gallery">Gallery</a></li>
</ul>
</div>
<div class="media-social">
<a href="https://github.com/Ryuz-V"><i data-feather="github"></i></a>
</div>
</nav>
<!-- End Of Navbar -->
<!-- Hero -->
<!-- shooting star -->
<div class="shooting-star" style="left: 10%; top: 20%; animation-delay: 0s;"></div>
<div class="shooting-star" style="left: 30%; top: 50%; animation-delay: 1s;"></div>
<div class="shooting-star" style="left: 70%; top: 30%; animation-delay: 2s;"></div>
<div class="shooting-star" style="left: 90%; top: 80%; animation-delay: 3s;"></div>
<!-- End Of Shooting Star -->
<section class="hero">
<img src="Asset/img/photo-1475274047050-1d0c0975c63e.jpg" id="background">
<img src="Asset/img/moon.png" id="moon">
<img src="Asset/img/zHG9S5Qv2qHdfmqLc_XPENNexlQWjVFL1zzFIAzSm58-removebg-preview.png" id="earth">
<img src="Asset/img/76cc321a-95ba-4802-ac87-5ce3a237ec99_43-removebg-preview.png" id="astranout">
<img src="Asset/img/Merkuarius.png" id="merkuarius">
<img src="Asset/img/Saturnus.png" id="saturnus">
<h2 id="text">SPACE</h2>
</section>
<!-- End Of Hero-->
<!-- Border hero and about -->
<div class="kotak"></div>
<div class="kotak-1"></div>
<!-- about -->
<section class="about" id="about">
<div class="container-about">
<!-- Content 1 -->
<div class="content-block">
<img src="Asset/img/jeremy-thomas-E0AHdsENmDg-unsplash.jpg" id="nasa">
<div class="text-content">
<h1 class="text1">What Is Space?</h1>
<h4 class="text2" style="font-weight: normal;">Space is a vast region beyond Earth's atmosphere,
a place where there is no air, almost no matter, and the physical conditions are very different from those on Earth.
Space begins about 100 kilometers above sea level, at a boundary called the Kármán Line.<br>
Beyond this line lies the expanse of the universe, which includes countless celestial bodies such as stars, planets, moons, asteroids, and galaxies.
Space is not completely empty — it contains traces of gas, dust, and energetic particles, as well as invisible phenomena like dark matter and dark energy.
The universe itself is believed to have originated from the Big Bang, a massive explosion that occurred approximately 13.8 billion years ago.
Since then, space has been expanding, and astronomers continue to observe its evolution using advanced telescopes and space missions.
</h4>
</div>
</div>
<!-- Content 2 -->
<div class="content-block-reverse">
<div class="text-content">
<h1 class="text-3">Milestones in Space Exploration</h1>
<h4 class="text-4" style="font-weight: normal;">Human exploration of space began in the 20th century,
with milestones such as the launch of Sputnik in 1957, the first manned Moon landing in 1969,
and the ongoing research aboard the International Space Station (ISS). These missions have deepened our understanding of space environments, physics,
and the potential for life beyond Earth.
In recent decades, space exploration has entered a new phase marked by international cooperation and commercial innovation. Space agencies such as NASA (United States), ESA (Europe),
Roscosmos (Russia), CNSA (China), and JAXA (Japan) continue to lead scientific missions, while private companies like SpaceX, Blue Origin, and Rocket Lab are revolutionizing how we access and utilize space.
One major focus of current exploration is the Moon, with programs like NASA’s Artemis aiming to return humans to the lunar surface and establish a sustainable presence.
Mars has also become a key target, with robotic missions such as NASA’s Perseverance rover searching for signs of past life and preparing for future crewed missions.</h4>
</div>
<img src="Asset/img/the-new-york-public-library-kvHhSroTNPY-unsplash.jpg" id="lonely">
</div>
<!-- Content 3 -->
<div class="content-block">
<img src="Asset/img/spacex-yJv97tE7GDM-unsplash.jpg" id="rocket">
<div class="text-content">
<h1 class="text-5">Advancements in Space Exploration</h1>
<h4 class="text-6" style="font-weight: normal;">Today, space exploration is advancing rapidly, driven by both government agencies like NASA and private companies such as SpaceX.
Scientists are now studying distant exoplanets, searching for signs of life, and preparing for future missions to the Moon, Mars, and beyond.</h4>
</div>
</div>
</div>
</section>
<!-- End Of about -->
<!-- Planet -->
<section class="planet" id="planet">
<div class="container-planet">
<h1 class="text-7">PLANET</h1>
<h4 class="text-8" style="font-weight: 500;">Discover the wonders of the planets in our Solar System - from the heat of Venus to the majestic rings of Saturn.
Explore the extraordinary world that surrounds our Sun!</h4>
</div>
<div class="content-1" data-aos="fade-left">
<div class="neptune-text">
<h1 class="neptune-title">Neptune</h1>
<h4 class="neptune-content">Neptune is the farthest planet from the Sun.
Neptune is the fourth largest planet by diameter (49,530 km) and the third largest by mass.
Neptune is 17 times more massive than Earth, and slightly smaller than Uranus.Neptune is a giant ice planet with strong winds,
the fastest in the solar system, reaching speeds of 2,100 km/hour.
Neptune has a deep blue colour because the methane in its atmosphere absorbs red light.The planet is named after the Roman god of the seas. Its astronomical symbol is ♆, which is the trident of the god Neptune.</h4>
</div>
<img src="Asset/img/64c9528b228b7-removebg-preview.png" id="neptune">
</div>
<div class="content-2" data-aos="fade-right">
<div class="uranus-text">
<h1 class="uranus-title">Uranus</h1>
<h4 class="uranus-content">Uranus is the seventh planet from the Sun and belongs to the group of ice giants along with Neptune.
Uranus is known for its extreme tilt, as if the planet is ‘rolling’ as it orbits the Sun.Uranus rotates on its axis at an inclination of about 97.77 degrees, making it appear to roll in its orbit.
Due to its unique rotation, Uranus experiences very long seasons, with one season lasting about 42 Earth years. Uranus is the coldest planet in the solar system, with the lowest temperature reaching -224°C.
Uranus has a ring system, although it is not as clear and bright as Saturn's rings. Uranus is also the only planet to be named after a character in Greek mythology, from a Latinised version of the name of the Greek sky god Ouranos.</h4>
</div>
<img src="Asset/img/uranus-removebg-preview.png" id="uranus">
</div>
<div class="content-3" data-aos="fade-left">
<div class="saturn-text">
<h1 class="saturn-title">Saturn</h1>
<h4 class="saturn-content">Saturn is the sixth planet from the Sun in our solar system and is known as the most recognisable planet because it has the largest and brightest ring system.
Saturn belongs to the group of gas giant planets along with Jupiter, Uranus, and Neptune.Saturn is about 116,464 kilometres in diameter, almost 10 times larger than Earth.
Saturn's atmosphere is dominated by hydrogen and helium, with small amounts of methane and ammonia.Saturn has more than 80 natural satellites, including Titan,
which is the second largest satellite in the solar system and the only one with a thick atmosphere.</h4>
</div>
<img src="Asset/img/Saturnus.png" id="saturn">
</div>
<div class="content-4" data-aos="fade-right">
<div class="jupiter-text">
<h1 class="jupiter-title">Jupiter</h1>
<h4 class="jupiter-content">Jupiter is the largest planet in our solar system. It is also the fifth closest planet to the Sun. Jupiter is known as a ‘gas giant’ because it is mostly made up of hydrogen and helium. In addition, Jupiter has large red spots that are giant storms that have lasted for centuries.
Jupiter has a diameter of about 140,000 kilometres, making it 11 times larger than Earth.Jupiter has a mass about 2.5 times the mass of all the other planets in the solar system combined.
Jupiter, with its large mass, plays an important role in keeping the solar system stable by attracting asteroids and comets that might be harmful to the inner planets.</h4>
</div>
<img src="Asset/img/jupiter-removebg-preview.png" id="jupiter">
</div>
<div class="content-5" data-aos="fade-left">
<div class="mars-text">
<h1 class="mars-title">Mars</h1>
<h4 class="mars-content">Mars is the fourth planet from the Sun and is often nicknamed the ‘red planet’ because of its reddish appearance.
It has features such as a thin atmosphere, a rocky surface with craters, volcanoes, valleys and ice caps at its poles.
Mars has two moons named Phobos and Deimos. Mars' environment is more hospitable to life than that of Venus. However, it is not ideal for humans.
The low temperature and low air pressure, coupled with the mostly carbon dioxide composition of the air, means that humans would have to use breathing apparatus if they wanted to live there.</h4>
</div>
<img src="Asset/img/6032084f2a154-planet-mars_665_374-removebg-preview.png" id="mars">
</div>
<div class="content-6" data-aos="fade-right">
<div class="bumi-text">
<h1 class="bumi-title">Earth</h1>
<h4 class="bumi-content">Earth is the third closest planet to the Sun and the fifth most populous and largest of the eight planets in our Solar System.
Earth is also the largest of the four terrestrial planets in the Solar System.
Earth is home to millions of living things, including humans.Earth's mineral resources and other products of the biosphere contribute to the provision of resources to support the global human population.
Earth's human-inhabited regions are grouped into 200 sovereign states, which interact with each other through diplomacy, travel, trade and military action.</h4>
</div>
<img src="Asset/img/earth-removebg-preview.png" id="bumi">
</div>
<div class="content-7" data-aos="fade-left">
<div class="venus-text">
<h1 class="venus-title">Venus</h1>
<h4 class="venus-content">Venus is the second planet from the Sun and is one of the closest planets to Earth.
Venus is known to be the hottest planet in our solar system, even though it is not the closest to the Sun.
This is because Venus' thick, carbon dioxide-rich atmosphere creates a very strong greenhouse effect. Venus is similar in size and mass to Earth,
often referred to as Earth's ‘twin sister’. Venus' surface temperature can reach 471 degrees Celsius, making it the hottest planet in the solar system.
Venus looks very bright in the night sky and is often referred to as the twilight star or the Morning Star because of its bright appearance.</h4>
</div>
<img src="Asset/img/venus-removebg-preview.png" id="venus">
</div>
<div class="content-8" data-aos="fade-right">
<div class="mercury-text">
<h1 class="mercury-title">Mercury</h1>
<h4 class="mercury-content">Mercury is the first and smallest planet in our Solar System and the closest to the Sun.
Its revolutionary period is the shortest of all the planets in the Solar System at 87.79 days.
Like Venus, Mercury is an inferior planet whose orbit lies inside the Earth's orbit, and when observed from Earth,
its angular distance from the Sun never exceeds 28°. Due to its close proximity to the Sun, the planet can only be seen near the western horizon after sunset or
the eastern horizon before sunrise, or usually at dawn. Mercury will appear like a bright star if observed at these times,
but it is often much harder to observe than Venus. If observed from a telescope, Mercury will display a series of phases similar to those of Venus and the Moon,
as it moves in its inner orbit relative to Earth and repeats itself in one synodic cycle, which is about 116 days.</h4>
</div>
<img src="Asset/img/Merkuarius.png" id="mercury">
</div>
</section>
<!-- End Of Planet -->
<!-- Space Exploration -->
<section class="space-exploration" id="space-exploration">
<div class="container-exploration">
<h1 class="text-9">SPACE EXPLORATION</h1>
<h4 class="text-10" style="font-weight: 500;">Space exploration is humanity's greatest adventure—a journey beyond Earth to uncover the mysteries of our solar system,
the stars, and the vast universe. Through satellites, robotic missions, and human spaceflight, we expand the boundaries of what's possible, pushing science, technology,
and imagination to new frontiers.</h4>
</div>
<div class="apollo-container" data-aos="fade-up">
<div class="apollo-image">
<img src="Asset/img/Aldrin_Apollo_11_original.jpg" alt="Buzz Aldrin on the Moon">
<div class="image-caption">Buzz Aldrin on the lunar surface during Apollo 11 (NASA)</div>
</div>
<div class="apollo-content">
<div class="apollo-header">
<h1 class="apollo-title">Apollo 11</h1>
<div class="mission-facts">
<div class="fact-item">
<i data-feather="calendar"></i>
<span>July 16-24, 1969</span>
</div>
<div class="fact-item">
<i data-feather="users"></i>
<span>Armstrong, Aldrin, Collins</span>
</div>
<div class="fact-item">
<i data-feather="target"></i>
<span>First Moon Landing</span>
</div>
</div>
</div>
<div class="apollo-details">
<div class="detail-section">
<h3>Historic Achievement</h3>
<p>Apollo 11 was the United States space mission that landed the first humans on the Moon. Commander Neil Armstrong and lunar module pilot Buzz Aldrin landed the Apollo Lunar Module Eagle on July 20, 1969, at 20:17 UTC.</p>
</div>
<div class="detail-section">
<h3>Mission Timeline</h3>
<ul class="timeline-list">
<li><strong>Launch:</strong> July 16 from Kennedy Space Center</li>
<li><strong>Lunar Orbit:</strong> July 19</li>
<li><strong>Landing:</strong> July 20 at 20:17 UTC</li>
<li><strong>First Step:</strong> Armstrong at 02:56 UTC July 21</li>
<li><strong>Moonwalk:</strong> 2 hours 31 minutes</li>
<li><strong>Return:</strong> Splashdown July 24</li>
</ul>
</div>
<div class="detail-section">
<h3>Legacy</h3>
<p>The mission fulfilled President Kennedy's 1961 goal of landing humans on the Moon before the end of the decade. They collected 21.5kg of lunar material and left behind scientific instruments that continue to transmit data.
</p>
<div class="quote-box">
<p>"That's one small step for [a] man, one giant leap for mankind."</p>
<cite>- Neil Armstrong</cite>
</div>
</div>
</div>
</div>
</div>
<div class="voyager-container" data-aos="fade-up">
<div class="voyager-image">
<img src="Asset/img/Voyager_-_mission_logo.png" alt="Voyager Spacecraft">
<div class="image-caption">Voyager 1 spacecraft (NASA)</div>
</div>
<div class="voyager-content">
<div class="voyager-header">
<h1 class="voyager-title">Voyager Missions</h1>
<div class="mission-facts">
<div class="fact-item">
<i data-feather="calendar"></i>
<span>Launched 1977</span>
</div>
<div class="fact-item">
<i data-feather="zap"></i>
<span>Still Operational</span>
</div>
<div class="fact-item">
<i data-feather="navigation"></i>
<span>Interstellar Space</span>
</div>
</div>
</div>
<div class="voyager-details">
<div class="detail-section">
<h3>Historic Journey</h3>
<p>The Voyager program consists of two robotic probes, Voyager 1 and Voyager 2, launched in 1977 to study the outer Solar System and beyond. Voyager 1 entered interstellar space in 2012, becoming the first human-made object to do so.</p>
</div>
<div class="detail-section">
<h3>Mission Timeline</h3>
<ul class="timeline-list">
<li><strong>Launch:</strong> September 5, 1977 (Voyager 1)</li>
<li><strong>Jupiter Flyby:</strong> March 1979</li>
<li><strong>Saturn Flyby:</strong> November 1980</li>
<li><strong>Interstellar Space:</strong> August 2012</li>
<li><strong>Current Distance:</strong> Over 14 billion miles</li>
</ul>
</div>
<div class="detail-section">
<h3>Golden Record</h3>
<p>Each Voyager carries a Golden Record containing sounds and images selected to portray the diversity of life and culture on Earth, intended for any intelligent extraterrestrial life that might find them.</p>
<div class="quote-box">
<p>"The spacecraft will be encountered and the record played only if there are advanced spacefaring civilizations in interstellar space."</p>
<cite>- Carl Sagan</cite>
</div>
</div>
</div>
</div>
</div>
<div class="hubble-container" data-aos="fade-up">
<div class="hubble-image">
<img src="Asset/img/Vostok_spacecraft.jpg" alt="Hubble Space Telescope">
<div class="image-caption">Hubble Space Telescope (NASA)</div>
</div>
<div class="hubble-content">
<div class="hubble-header">
<h1 class="hubble-title">Hubble Telescope</h1>
<div class="mission-facts">
<div class="fact-item">
<i data-feather="calendar"></i>
<span>Launched 1990</span>
</div>
<div class="fact-item">
<i data-feather="eye"></i>
<span>Deep Field Images</span>
</div>
<div class="fact-item">
<i data-feather="refresh-cw"></i>
<span>5 Servicing Missions</span>
</div>
</div>
</div>
<div class="hubble-details">
<div class="detail-section">
<h3>Window to the Universe</h3>
<p>The Hubble Space Telescope has revolutionized astronomy by providing unprecedented views of the universe. Orbiting above Earth's atmosphere, it can observe astronomical objects with minimal distortion.</p>
</div>
<div class="detail-section">
<h3>Key Discoveries</h3>
<ul class="timeline-list">
<li><strong>Age of Universe:</strong> Refined to 13.8 billion years</li>
<li><strong>Dark Energy:</strong> Helped confirm its existence</li>
<li><strong>Exoplanets:</strong> First direct images of planets outside our solar system</li>
<li><strong>Galaxies:</strong> Deep Field images showing thousands of galaxies</li>
</ul>
</div>
<div class="detail-section">
<h3>Technical Specs</h3>
<p>Hubble has a 2.4-meter mirror and instruments that observe in the ultraviolet, visible, and near-infrared spectra. Despite initial problems with its mirror, servicing missions have kept it operational for decades.</p>
<div class="quote-box">
<p>"Hubble has given us not just pretty pictures, but profound insights into the nature of our universe."</p>
<cite>- NASA Administrator</cite>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Of Space Exploration -->
<!-- Gallery -->
<section class="gallery" id="gallery">
<div class="container-gallery">
<h1 class="text-11">Gallery</h1>
<p class="text-12">See the world beyond Earth through the lens of astronomers and spacecraft.
This gallery features a collection of the best images from the Hubble telescope,
James Webb and other exploration missions.</p>
</div>
<div class="gallery-grid">
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=800&auto=format" alt="Galaxy">
</div>
<div class="gallery-item">
<img src="Asset/img/nasa-7Cz6bWjdlDs-unsplash.jpg" alt="Nebula">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?w=800&auto=format" alt="Space">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&auto=format" alt="Earth from space">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?w=800&auto=format" alt="Space station">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1506443432602-ac2fcd6f54e0?w=800&auto=format" alt="Aurora">
</div>
<div class="gallery-item">
<img src="/Asset/img/nasa-CpHNKNRwXps-unsplash.jpg" alt="Milky Way">
</div>
<div class="gallery-item">
<img src="/Asset/img/spacex-OHOU-5UVIYQ-unsplash.jpg" alt="Saturn">
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1462332420958-a05d1e002413?w=800&auto=format" alt="Solar eclipse">
</div>
</div>
</section>
<!-- End Of Gallery -->
<!-- quizz -->
<section class="quiz">
<div class="heading">
<h1 class="text-13">Quiz</h1>
<p class="text-14">Take this fun quiz to see how much you know about space</p>
</div>
<div class="link-quiz">
<a href="quiz/quiz.html" class="quiz-button">Start Quiz</a>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-container">
<div class="footer-content">
<div class="footer-logo">
<img src="Asset/img/Tab_Logo_W.png" alt="Space Logo">
<h1>SPACE</h1>
<p>Made By Niel</p>
</div>
<div class="footer-contact">
<div class="social-media">
<a href="https://github.com/Ryuz-V"><i data-feather="github"></i></a>
<a href="https://www.linkedin.com/in/jathniel-urda-167a7834a/"><i data-feather="linkedin"></i></a>
<a href="https://www.instagram.com/ryuzzv_/"><i data-feather="instagram"></i></a>
</div>
</div>
</div>
<div class="footer-bottom-container">
<div class="footer-bottom">
<p>© 2025 NexaVStudio. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!-- End Of Footer -->
<script src="js/script.js"></script>
<script>
feather.replace();
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>