-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
271 lines (237 loc) · 11.1 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
<!DOCTYPE html>
<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" />
<title>Our Solar System</title>
<meta property="og:title" content="Our Solar System">
<meta name="description" content="An overview of our local neighborhood in the Orion arm of the Milky Way galaxy.">
<meta property="og:description"
content="An overview of our local neighborhood in the Orion arm of the Milky Way galaxy.">
<meta
content="Planets, Sun, Venus, Earth, Earth's Moon, Moon, Satellite, Mars, Jupiter, Europa, Saturn, Enceladus, Titan, Uranus, Neptune, Dwarf Planet, Pluto, Our Solar System"
name="keywords">
<meta property="og:image"
content="https://raw.githubusercontent.com/98mohitkumar/solar-system/host/Resources/Preview.jpg">
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Our Solar System" />
<meta property="og:site_name" content="Our Solar System">
<script src="https://kit.fontawesome.com/3a7346116e.js" crossorigin="anonymous"></script>
<meta name="theme-color" content="#121212">
<link rel="preload" href="css/style.css" as='style' />
<link rel="preload"
href='https://gistcdn.githack.com/mfd/09b70eb47474836f25a21660282ce0fd/raw/e06a670afcb2b861ed2ac4a1ef752d062ef6b46b/Gilroy.css'
as='style' />
<link rel="preload" href="css/responsive.css" as="style" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="shortcut icon" type="image/svg" href="Resources/icons/Solar_system_i.svg">
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<div class="navbar-links">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="explore.html">Explore</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div class="logo">
<a href="#top"><img src="Resources/Mobile PNGs/Solar System.png" alt=""></a>
</div>
<div class="hamwrap">
<div class="first ham"></div>
<div class="second ham"></div>
<div class="third ham"></div>
</div>
</nav>
<!-- Section -->
<div class="container" id="top">
<div class="showcase-wrap">
<section class="primary">
<h1 class="l-heading">Our Solar System</h1>
<p>
The planetary system we call home is located in an outer spiral arm of
the Milky Way galaxy.
</p>
</section>
<!-- scroll icon -->
<div class="scroll-wrap">
<div class="scroll-icon">
<div class="scroll-icon_dot"></div>
</div>
</div>
</div>
</div>
<!-- contents of the home page -->
<div id="home-contents">
<!-- Section Jump Links -->
<div class="sections">
<h3>Sections</h3><br>
<ul>
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#Size_and_Distance">Size and Distance</a></li>
<li><a href="#Formation">Formation</a></li>
<li><a href="#Structure">Structure</a></li>
<li><a href="#Potential_for_life">Potential for life</a></li>
<li><a href="#Moons">Moons</a></li>
</ul>
</div>
<div class="paragraphs">
<!-- Introduction -->
<div class="flex-wrap">
<div class="intro-size">
<h2 class="m-heading" id="Introduction">Introduction</h2><br>
<p>
Our solar system consists of our star, the Sun, and everything bound
to it by gravity — the planets Mercury, Venus, Earth, Mars, Jupiter,
Saturn, Uranus and Neptune, dwarf planets such as Pluto, dozens of
moons and millions of asteroids, comets and meteoroids.
</p>
<br />
<p>
Beyond our own solar system, there are more planets than stars in
night sky. So far, we have discovered thousands of planetary systems
orbiting other stars in the Milky Way, with more planets being found
all the time. Most of the hundreds of billions of stars in our galaxy
are thought to have planets of their own, and the Milky Way is but one
of perhaps 100 billion galaxies in the universe.
</p>
<br>
<br>
<!-- Size and Distance -->
<h2 class="m-heading" id="Size_and_Distance">Size and Distance</h2><br>
<p>
Our solar system extends much farther than the eight planets that
orbit the Sun. The solar system also includes the Kuiper Belt that
lies past Neptune's orbit. This is a sparsely occupied ring of icy
bodies, almost all smaller than the most popular Kuiper Belt Object,
dwarf planet Pluto. <br />
<br />
And beyond the fringes of the Kuiper belt is the Oort Cloud. This
giant spherical shell surrounds our solar system. It has never been
directly observed, but its existence is predicted based on
mathematical models and observations of comets that likely originate
there. <br />
<br />
The Oort Cloud is made of icy pieces of space debris the sizes of
mountains and sometimes larger, orbiting our Sun as far as 1.6 light
years away. This shell of material is thick, extending from 5,000
astronomical units to 100,000 astronomical units. One astronomical
unit (or AU) is the distance from the Sun to Earth, or about 93
million miles (150 million kilometers). The Oort Cloud is the boundary
of the Sun's gravitational influence, where orbiting objects can turn
around and return closer to our Sun. <br />
<br />
The Sun's heliosphere doesn't extend quite as far. The heliosphere is
the bubble created by the solar wind—a stream of electrically charged
gas blowing outward from the Sun in all directions. The boundary where
the solar wind is abruptly slowed by pressure from interstellar gases
is called the termination shock. This edge occurs between 80-100
astronomical units. <br />
<br />
Two NASA spacecraft, launched in 1977, have crossed the termination
shock: Voyager 1 in 2004 and Voyager 2 in 2007. But it will be many
thousands of years before the two Voyagers exit the Oort Cloud.
</p>
<br>
<br>
</div>
<!-- Solar system photo -->
<div class="orbits"></div>
</div>
<div class="form-moons">
<!--Formation -->
<h2 class="m-heading" id="Formation">Formation</h2><br>
<p>
Our solar system formed about 4.5 billion years ago from a dense cloud
of interstellar gas and dust. The cloud collapsed, possibly due to the
shockwave of a nearby exploding star, called a supernova.When this
dust cloud collapsed, it formed a solar nebula—a spinning, swirling
disk of material. <br />
<br />
At the center, gravity pulled more and more material in. Eventually
the pressure in the core was so great that hydrogen atoms began to
combine and form helium, releasing a tremendous amount of energy. With
that, our Sun was born, and it eventually amassed more than 99 percent
of the available matter. <br />
<br />
Matter farther out in the disk was also clumping together. These
clumps smashed into one another, forming larger and larger objects.
Some of them grew big enough for their gravity to shape them into
spheres, becoming planets, dwarf planets and large moons. In other
cases, planets did not form: the asteroid belt is made of bits and
pieces of the early solar system that could never quite come together
into a planet. Other smaller leftover pieces became asteroids, comets,
meteoroids, and small, irregular moons.
</p>
<br>
<br>
<!--Structure -->
<h2 class="m-heading" id="Structure">Structure</h2><br>
<p>
The order and arrangement of the planets and other bodies in our solar
system is due to the way the solar system formed. Nearest the Sun,
only rocky material could withstand the heat when the solar system was
young. For this reason, the first four planets—Mercury, Venus, Earth
and Mars—are terrestrial planets. They're small with solid, rocky
surfaces. <br />
<br />
Meanwhile, materials we are used to seeing as ice, liquid or gas
settled in the outer regions of the young solar system. Gravity pulled
these materials together, and that is where we find gas giants Jupiter
and Saturn and ice giants Uranus and Neptune.
</p>
<br>
<div class="orbits2"></div><br>
<!-- Potential for life -->
<h2 class="m-heading" id="Potential_for_life">Potential for Life</h2><br>
<p>
Our solar system is the only place we know of that harbors life, but
the farther we explore the more we find potential for life in other
places. Both Jupiter’s moon Europa and Saturn’s moon Enceladus have
global saltwater oceans under thick, icy shells.
</p>
<br>
<br>
<!-- Moons -->
<h2 class="m-heading" id="Moons">Moons</h2><br>
<p>
There are more than 150 known moons in our solar system and several
more awaiting confirmation of discovery. Of the eight planets, Mercury
and Venus are the only ones with no moons. The giant planets grab the
most moons. Jupiter and Saturn have long lead our solar system’s moon
counts. <br /><br />
In some ways, the swarms of moons around these worlds resemble mini
versions of our solar system. Pluto, smaller than our own moon, has
five moons in its orbit, including the Charon, a moon so large it
makes Pluto wobble. Even tiny asteroids can have moons. In 2017,
scientists found asteroid 3122 Florence had two tiny moons.
</p> <br><br>
<div class="buttons">
<div class="btn"><a href="#top">Back to Top</a></div>
<div class="btn"><a href="Explore.html">Explore</a></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="footer-wrap">
<div class="footer-text">
<h3>Our Solar System</h3>
</div>
<div class="social-links">
<a href="https://github.com/98mohitkumar" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/98mohitkumar" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>