-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexplore.html
324 lines (303 loc) · 15.4 KB
/
explore.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
<!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="./css/style.css" />
<script>
function togglePopup() {
document.getElementById("popup-1").classList.toggle("active");
}
function togglePopup2() {
document.getElementById("popup-2").classList.toggle("active");
}
function togglePopup3() {
document.getElementById("popup-3").classList.toggle("active");
}
function togglePopup4() {
document.getElementById("popup-4").classList.toggle("active");
}
function togglePopup5() {
document.getElementById("popup-5").classList.toggle("active");
}
function togglePopup6() {
document.getElementById("popup-6").classList.toggle("active");
}
function togglePopup7() {
document.getElementById("popup-7").classList.toggle("active");
}
function togglePopup8() {
document.getElementById("popup-8").classList.toggle("active");
}
</script>
<title>Space Archive</title>
</head>
<body>
<header>
<h1><a href="/index.html">SPACE ARCHIVE</a></h1>
<nav>
<ul>
<li><a href="/index.html"><button>HOME</button></a></li>
<li><a href="/explore.html"><button>EXPLORE</button></a></li>
<li><a href="/latest.html"><button>LATEST</button></a></li>
<li><a href="/about.html"><button>ABOUT US</button></a></li>
</ul>
</nav>
</header>
<div id="explorecover">
<div class="row">
<div class="col">
<h1>EXPLORE THE UNIVERSE</h1>
<p> The universe is a vast and mysterious place, filled with wonders and mysteries waiting to be explored. From
the majestic beauty of distant galaxies to the intricate workings of our own solar system, the universe is a
never-ending source of fascination and wonder.As we learn more about the universe, we gain a deeper
understanding of our place in it and the incredible forces that shape it. Whether you're an astronomy
enthusias or just someone who is curious about the world around us, learning about the universe is a journey
that is both educational and enriching. So why not take a moment to discover the vastness and wonder of the
universe for yourself?</p>
</div>
<div class="col">
<div class="card card1">
<h5> THE FIRST IMAGE OF A BLACKHOLE </h5>
<p> Captured by the Event Horizon Telescope in April 2019 </p>
</div>
<div class="card card2">
<h5> LAST PICTURE TAKEN BY THE OPPURTUNITY ROVER </h5>
<p> A robotic rover that was active on the surface of Mars from 2004 to 2018. </p>
</div>
<div class="card card3">
<h5> EARTHRISE FROM MOON </h5>
<p> The famous Apollo 8 picture of Earthrise over the moon that established our planetary facthood and beauty
and rareness (dry moon, barren space) and began to bend human consciousness. </p>
</div>
<div class="card card4">
<h5> BOOTPRINT ON THE MOON </h5>
<p> 1969 Photographed by Buzz Aldrin </p>
</div>
</div>
</div>
</div>
<div id="explorecontainer">
<div class=" row2 ">
<div class="popup" id="popup-1">
<div class="content">
<div class="closebtn" onclick="togglePopup()">× </div>
<h1> MOON </h1>
<p> The moon is a celestial body that orbits around a planet. It is typically smaller than the planet and is
held in place by the planet's gravity. There are many moons in the universe and they can be found orbiting
around planets in our solar system and beyond. Some moons are thought to have formed from debris created
when a celestial object collided with the planet, while others may have formed from the planet itself. The
moon's surface can vary greatly, with some having smooth, solid surfaces and others having rough, rocky
terrain. The presence of a moon can also have an effect on the planet it orbits, such as causing tides on
Earth. In our solar system, the most well-known moon is the moon that orbits around Earth. </p>
</div>
</div>
<button onclick="togglePopup()">
<div class="box">
<img src="css\images\Moon_Moon.jpg">
<h2> MOON </h2>
</div>
</button>
<div class="popup" id="popup-2">
<div class="content">
<div class="closebtn" onclick="togglePopup2()">× </div>
<h1> PLANETS </h1>
<p> There are eight planets in our solar system: Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, and
Neptune. These planets orbit around the sun, which is a star located at the center of our solar system. The
planets are divided into two categories: terrestrial planets and gas giants. Terrestrial planets are small
and have solid surfaces, such as Earth and Mars. Gas giants are much larger and are composed mostly of gas
and other volatile substances, such as Jupiter and Saturn. Each planet has its own unique characteristics,
such as size, composition, and number of moons. Some planets, like Earth, have conditions suitable for life,
while others, like Venus, have surface temperatures hot enough to melt lead. The study of planets, including
their formation and potential for hosting life, is a fascinating field of science known as planetary
science. </p>
</div>
</div>
<button onclick="togglePopup2()">
<div class="box">
<img src="css\images\Planet_Mars.jpg">
<h2> PLANETS </h2>
</div>
</button>
<div class="popup" id="popup-3">
<div class="content">
<div class="closebtn" onclick="togglePopup3()">× </div>
<h1> EARTH </h1>
<p> The Earth is the third planet from the sun and the only known planet to support life. It is a terrestrial
planet, meaning it has a solid surface, and is the fifth largest planet in our solar system. The Earth is
composed of various layers, including the crust, mantle, and core. The crust is the outermost layer and is
made up of solid rock. The mantle is the layer below the crust and is made up of hot, solid rock that is
able to flow slowly. The core is the innermost layer and is made up of a molten mixture of iron and other
metals. The Earth has a diverse range of environments, including land, water, and air, which support a wide
variety of life forms. The Earth's atmosphere, which is the layer of gases surrounding the planet, protects
life on Earth by shielding it from harmful solar radiation. </p>
</div>
</div>
<button onclick="togglePopup3()">
<div class="box">
<img src="css\images\Planet_Earth.jpg">
<h2> EARTH </h2>
</div>
</button>
<div class="popup" id="popup-4">
<div class="content">
<div class="closebtn" onclick="togglePopup4()">× </div>
<h1> SUN </h1>
<p> The sun is a star located at the center of the solar system. It is the largest object in the solar system
and is primarily composed of hydrogen and helium. The sun is a massive ball of glowing gas that generates
energy through nuclear fusion, a process in which hydrogen atoms combine to form helium. This process
releases a tremendous amount of energy in the form of light and heat, which is radiated outward from the
sun's surface. The sun is the primary source of energy for life on Earth, as it provides light and heat
necessary for plants to grow and animals to survive. The sun's gravity also holds the solar system together
and keeps all of the planets, including Earth, in their orbits. The sun is an important object in many
cultures and has been revered as a deity in many ancient civilizations. </p>
</div>
</div>
<button onclick="togglePopup4()">
<div class="box">
<img src="css\images\Sun_Sun.jpg">
<h2> SUN </h2>
</div>
</button>
</div>
<div class=" row2 ">
<div class="popup" id="popup-5">
<div class="content">
<div class="closebtn" onclick="togglePopup5()">× </div>
<h1> COMET </h1>
<p> Comets are small celestial bodies made up of ice, dust, and rock. They are often referred to as "dirty
snowballs" due to their composition. Comets are thought to be leftovers from the formation of the solar
system, and they typically orbit the sun in highly elliptical paths. When a comet gets close to the sun, the
heat causes the ice to turn into a gas, creating a bright halo called a coma around the comet. The coma can
be up to 100,000 kilometers (62,000 miles) wide, making the comet visible from Earth. Comets also have a
long, glowing tail that points away from the sun. The tail is made up of particles that are blown away from
the coma by the solar wind, a stream of charged particles that flows from the sun. Comets are fascinating
objects to study because they can provide insights into the early solar system and the formation of planets.
</p>
</div>
</div>
<button onclick="togglePopup4()">
<div class="box">
<img src="css\images\Sun_Sun.jpg">
<h2> SUN </h2>
</div>
</button>
<div class="popup" id="popup-5">
<div class="content">
<div class="closebtn" onclick="togglePopup6()">× </div>
<h1> GALAXY </h1>
<p> A galaxy is a vast collection of gas, dust, and billions of stars and their solar systems, all held
together by gravity. There are an estimated 2 trillion galaxies in the observable universe, each with its
own unique characteristics. The Milky Way, which is the galaxy that Earth and our solar system are a part
of, is a barred spiral galaxy and is thought to contain around 400 billion stars. Galaxies come in a variety
of shapes and sizes, ranging from small, irregular galaxies to large, elliptical galaxies. Within a galaxy,
stars are generally organized into clusters called star systems, and these systems are further organized
into arms that spiral out from the galaxy's center. The study of galaxies and their formation and evolution
is a branch of astronomy known as extragalactic astronomy. The exploration of galaxies and the search for
extraterrestrial life within them continues to be a fascinating and important area of scientific study. </p>
</div>
</div>
<button onclick="togglePopup5()">
<div class="box">
<img src="css\images\Comet_Hyakutake.jpg">
<h2> COMET </h2>
</div>
</button>
<div class="popup" id="popup-7">
<div class="content">
<div class="closebtn" onclick="togglePopup7()">× </div>
<h1> NEBULA </h1>
<p> A nebula is a giant cloud of dust, gas, and other particles that can be found in the space between stars.
There are several different types of nebulae, including emission nebulae, reflection nebulae, and planetary
nebulae. Emission nebulae are clouds of gas that are lit up by the energy emitted by nearby stars, while
reflection nebulae are clouds of dust that reflect the light of nearby stars. Planetary nebulae are created
when a star expels its outer layers of gas into space at the end of its life. These nebulae are often
colorful and can be seen in the night sky with a telescope. Nebulae can be the birthplace of new stars and
planets, as the dust and gas within them can condense and collapse under the influence of gravity, forming
new celestial bodies. The study of nebulae is an important part of astrophysics, as they provide insight
into the life cycles of stars and the evolution of galaxies. </p>
</div>
</div>
<button onclick="togglePopup7()">
<div class="box">
<img src="css\images\Nebula_1.jpg">
<h2> NEBULA </h2>
</div>
</button>
<div class="popup" id="popup-8">
<div class="content">
<div class="closebtn" onclick="togglePopup8()">× </div>
<h1> VOID </h1>
<p> A black hole is a region of spacetime from which nothing, not even light, can escape. It is created when a
massive star collapses in on itself, creating a gravitational field so strong that not even light can escape
its grasp. Black holes come in different sizes, ranging from small, stellar black holes with masses only a
few times greater than the sun, to supermassive black holes with masses millions or billions of times
greater than the sun. These massive black holes are often found at the centers of galaxies. While black
holes themselves are invisible, they can be detected through their effects on nearby matter. For example, a
black hole can pull in gas and dust from its surroundings, creating a bright accretion disk that can be
observed with telescopes. The study of black holes and their properties is a fascinating and active area of
research in astrophysics. </p>
</div>
</div>
<button onclick="togglePopup8()">
<div class="box">
<img src="css\images\Black_Hole_2.jpg">
<h2> VOID </h2>
</div>
</button>
</div>
</div>
<div id="explorearticles">
<h1> IMAGES OF THE UNIVERSE </h1>
<div class="row2">
<div class="cover">
<div class="pic">
<img src='../css/images/EA_Clear_Universe.jpg'>
<h2> Clearest infrared image of the Universe </h2>
</div>
<div class="pic">
<img src='../css/images/EA_Horsehead_Nebula.png'>
<h2> The HorseHead Nebula<Br> Image by: Jason Close </h2>
</div>
<div class="pic">
<img src='../css/images/EA_Teal_Ridge.jpg'>
<h2> "Teal Ridge" <br> captured by NASA's Curiosity Rover </h2>
</div>
</div>
</div>
<div class="row2">
<div class="cover">
<div class="pic">
<img src='../css/images/EA_Cartwheel_Galaxy.png'>
<h2> The Chaos of the Cartwheel Galaxy <br> Captured by NASA's James Webb Telescope </h2>
</div>
<div class="pic">
<img src='../css/images/EA_Pillars_Creation.png'>
<h2> The Pillars of Creation </h2>
</div>
<div class="pic">
<img src='../css/images/EA_Spiral_Galaxy.jpg'>
<h2> Spiral Galaxy NGC 1300 </h2>
</div>
</div>
</div>
<div class="row2">
<div class="cover">
<div class="pic">
<img src='../css/images/EA_Merging_Galaxy.jpg'>
<h2> Galactic Get Together <br> A merging galaxy pair cavort</h2>
</div>
<div class="pic">
<img src='../css/images/EA_Small_Cloud.jpg'>
<h2> Small Magellanic Cloud </h2>
</div>
<div class="pic">
<img src='../css/images/EA_Splash_Stars.jpg'>
<h2> Bright Splash of Stars </h2>
</div>
</div>
</div>
</div>
<footer>Space Archive ©2022</footer>
</body>
</html>