-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
313 lines (295 loc) · 15 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
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Night Sky</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="top">
<h1>Night Sky</h1>
<p>There are 88 officially recognised constellations covering the night sky. Scroll right to find out more about 12 of them.</p>
</div>
<div id="aries"> <!-- http://www.constellation-guide.com/constellation-list/aries-constellation/ -->
<div class="constellation">
<div class="star first botein"></div>
<div class="star second hamal"></div>
<div class="star third sheratan"></div>
<div class="star fourth mesarthim"></div>
<div class="star fifth 41ari"></div>
</div>
<div class="info">
<h3>Aries</h3>
<p>Aries is the first astrological sign in the Zodiac. 'Aries', meaning 'ram', is a symbol based on Chrysomallus, the flying ram that provided the Golden Fleece.</p>
</div>
</div>
<div id="taurus">
<div class="constellation">
<div class="star first omicron-tauri"></div>
<div class="star second xi-tauri"></div>
<div class="star third pectus-tauri"></div>
<div class="star fourth gamma-tauri"></div>
<div class="star fifth theta-tauri"></div>
<div class="star sixth delta-tauri"></div>
<div class="star seventh aldebaran"></div>
<div class="star eighth epsilon-tauri"></div>
<div class="star ninth t-tauri"></div>
<div class="star tenth zeta-tauri"></div>
<div class="star eleventh elnath"></div>
</div>
<div class="info">
<h3>Taurus</h3>
<p>Taurus is the second astrological sign in the Zodiac. Taurus is Latin for "the Bull", and its symbol is based upon the Cretan Bull, the white bull that fathered the Minotaur who was killed by Theseus.</p>
</div>
</div>
<div id="gemini">
<div class="constellation">
<div class="star first theta-gem"></div>
<div class="star second castor"></div>
<div class="star third tau-gem"></div>
<div class="star fourth pollux"></div>
<div class="star fifth propus"></div>
<div class="star sixth u-gem"></div>
<div class="star seventh kappa-gem"></div>
<div class="star eighth mebsuta"></div>
<div class="star ninth tejat-posterior"></div>
<div class="star tenth propus"></div>
<div class="star eleventh wasat"></div>
<div class="star twelfth mekbuda"></div>
<div class="star thirteenth nu-gem"></div>
<div class="star fourteenth gamma-gem"></div>
<div class="star fifteenth lambda-gem"></div>
<div class="star sixteenth alzirr"></div>
</div>
<div class="info">
<h3>Gemini</h3>
<p>Gemini is the third astrological sign in the Zodiac. 'Gemini' is Latin for 'twins', and it is associated with the twins Castor and Pollux in Greek mythology.</p>
</div>
</div>
<div id="cancer">
<div class="constellation">
<div class="star first iota-cancri "></div>
<div class="star second asellus-borealis"></div>
<div class="star third asellus-australis"></div>
<div class="star fourth acubens"></div>
<div class="star fifth al-tarf"></div>
</div>
<div class="info">
<h3>Cancer</h3>
<p>Cancer is the fourth astrological sign in the Zodiac. The symbol of the crab is based on the Karkinos, a giant crab that harassed Heracles during his fight with the Hydra.</p>
</div>
</div>
<div id="leo">
<div class="constellation">
<div class="star first rasalas"></div>
<div class="star second epsilon-leonis"></div>
<div class="star third adhafera"></div>
<div class="star fourth algieba"></div>
<div class="star fifth zosma"></div>
<div class="star sixth eta-leonis"></div>
<div class="star seventh chort"></div>
<div class="star eighth denebola"></div>
<div class="star ninth regulus"></div>
</div>
<div class="info">
<h3>Leo</h3>
<p>Leo is the fifth astrological sign in the Zodiac. The symbol of the lion is based on the Nemean lion, a lion with an impenetrable hide.</p>
</div>
</div>
<div id="virgo">
<div class="constellation">
<div class="star first vindemiatrix"></div>
<div class="star second auva"></div>
<div class="star third nu-virginis"></div>
<div class="star fourth zavijava"></div>
<div class="star fifth zaniah"></div>
<div class="star sixth porrima"></div>
<div class="star seventh tau-virginis"></div>
<div class="star eighth heze"></div>
<div class="star ninth syrma"></div>
<div class="star tenth theta-virginis"></div>
<div class="star eleventh spica"></div>
</div>
<div class="info">
<h3>Virgo</h3>
<p>Virgo is the sixth astrological sign in the Zodiac. The symbol of the maiden is based on Astraea. Astraea was the last immortal to abandon Earth at the end of the Silver Age, when the gods fled to Olympus.</p>
</div>
</div>
<div id="libra">
<div class="constellation">
<div class="star first zubeneschemali"></div>
<div class="star second zubenelakrab"></div>
<div class="star third zubenelgenubi"></div>
<div class="star fourth brachium"></div>
</div>
<div class="info">
<h3>Libra</h3>
<p>Libra is the seventh astrological sign in the Zodiac. The symbol of the scales is based on the Scales of Justice held by Themis, the Greek personification of divine law and custom. Libra is symbolised by the gryphon, a mythological creature with the head, wings and talons of an eagle and hind legs of a lion.</p>
</div>
</div>
<!--
<div id ='exit'><span>x</span></div>
<h4>Spica</h4><p>Spica is the brightest star in the constellation Virgo, and the 15th birghtest star in the night sky. It is a spectroscopic binary and rotating ellipsoidal variable - a system whose two main stars are so close together they are egg-shaped rather than spherical.</p>
<table><tr><td>Apparent Magnitude</td>
<td>0.97</td>
</tr><tr><td>Spectral type</td>
<td>B1 III-IV</td>
</tr><tr><td>Mass</td>
<td>10.25 Solar Masses</td>
</tr><tr><td>Luminosity</td>
<td>12,100 Solar Luminosity</td>
</tr><tr><td>Distance from Earth</td>
<td>250ly / 77pc</td>
</tr><tr><td>Temperature</td>
<td>22,400 K</td></tr></table>
-->
<div id="scorpio">
<div class="constellation">
<div class="star first jabbah"></div>
<div class="star second graffias"></div>
<div class="star third dschubba"></div>
<div class="star fourth pi-scorpii"></div>
<div class="star fifth rho-scorpii"></div>
<div class="star sixth alniyat"></div>
<div class="star seventh antares"></div>
<div class="star eighth epsilon-scorpii"></div>
<div class="star ninth mu-scorpii"></div>
<div class="star tenth zeta-scorpii"></div>
<div class="star eleventh eta-scorpii"></div>
<div class="star twelfth sargas"></div>
<div class="star thirteenth iota-scorpii"></div>
<div class="star fourteenth girtab"></div>
<div class="star fifteenth shaula"></div>
<div class="star sixteenth lesath"></div>
</div>
<div class="info">
<h3>Scorpio</h3>
<p>Scorpio is the eighth astrological sign in the Zodiac. The symbol of the scorpion is based on Scorpius, a giant scorpion sent by Gaia to kill Orion.</p>
</div>
</div>
<div id="sagittarius">
<div class="constellation">
<div class="star first polis"></div>
<div class="star second kaus-borealis"></div>
<div class="star third phi-sagittarii"></div>
<div class="star fourth nunki"></div>
<div class="star fifth tau-sagitarii"></div>
<div class="star sixth ascella"></div>
<div class="star seventh kaus-media"></div>
<div class="star eighth alnasl"></div>
<div class="star ninth kaus-australis"></div>
<div class="star tenth sephdar"></div>
</div>
<div class="info">
<h3>Sagittarius</h3>
<p>Sagittarius is the ninth astrological sign in the Zodiac. The symbol of the archer is based on the centaur Chiron, who mentored Achilles in archery.<br>
Sagittarius, half human and half-norse, is the centaur of mythology, the learned healer who forms a bridge between earth and Heaven. Also known as the Archer, Sagittarius is represented by the symbol of bow and arrow.</p>
</div>
</div>
<div id="capricorn">
<div class="constellation">
<div class="star first deneb-algedi"></div>
<div class="star second nashira"></div>
<div class="star third epsilon-capricorni"></div>
<div class="star fourth iota-capricorni"></div>
<div class="star fifth zeta-capricorni"></div>
<div class="star sixth dorsum"></div>
<div class="star seventh eta-capricorni"></div>
<div class="star eighth "></div>
<div class="star ninth baten-algiedi"></div>
<div class="star tenth psi-capricorni"></div>
<div class="star eleventh rho-capricorni"></div>
<div class="star twelfth dabih"></div>
<div class="star thirteenth algiedi"></div>
</div>
<div class="info">
<h3>Capricorn</h3>
<p>Capricorn is the tenth astrological sign in the Zodiac. Its symbol is based on the Sumerian primordial god of wisdom and waters, Enki, with the head and upper body of a mountain goat, and the lower body and tail of a fish.</p>
</div>
</div>
<div id="aquarius">
<div class="constellation">
<div class="star first phi-aquarii"></div>
<div class="star second lambda-aquarii"></div>
<div class="star third eta-aquarii"></div>
<div class="star fourth sadaltager"></div>
<div class="star fifth delta-aquarii"></div>
<div class="star sixth skat"></div>
<div class="star seventh pi-aquarii"></div>
<div class="star eighth sadachbia"></div>
<div class="star ninth sadalmelik"></div>
<div class="star tenth theta-aquarii"></div>
<div class="star eleventh iota-aquarii"></div>
<div class="star twelfth sadalsuud"></div>
<div class="star thirteenth epsilon-aquarii"></div>
</div>
<div class="info">
<h3>Aquarius</h3>
<p>Aquarius is the eleventh astrological sign in the Zodiac. The water carrier represented by the zodiacal constellation Aquarius is Ganymede, a beautiful Phrygian youth. Ganymede was the son of Tros, king of Troy. While tending to his father's flocks on Mount Ida, Ganymede was spotted by Jupiter. The king of gods became enamored of the boy and flew doen to the mountain in the form of a large bird, whisking Ganymede away to the heavens. Ever since, the boy has served as cupbearer to the gods.</p>
</div>
</div>
<div id="pisces">
<div class="constellation">
<div class="star first tau-piscium"></div>
<div class="star second upsilon-piscium"></div>
<div class="star third phi-piscium"></div>
<div class="star fourth psi-piscium"></div>
<div class="star fifth kullat-nunu"></div>
<div class="star sixth omicron-piscium"></div>
<div class="star seventh alrescha"></div>
<div class="star eighth nu-piscium"></div>
<div class="star ninth epsilon-piscium"></div>
<div class="star tenth delta-piscium"></div>
<div class="star eleventh omega-piscium"></div>
<div class="star twelfth iota-piscium"></div>
<div class="star thirteenth theta-piscium"></div>
<div class="star fourteenth gamma-piscium"></div>
<div class="star fifteenth kappa-piscium"></div>
<div class="star sixteenth lambda-piscium"></div>
</div>
<div class="info">
<h3>Pisces</h3>
<p>Pisces is the twelfth astrological sign in the Zodiac. The symbol of the fish is derived from the ichthyocentaurs, who aided Aphrodite when she was born from the sea.</p>
</div>
</div>
<a href="aurora.html">
<div id="aurora">
<h2>Aurora</h2>
<p>The Aurora is a natural light display in the sky, predominantly seen in the high latitude regions. They are red, green and occasionally blue, and can sometimes resemble fire.<br><br>
Once, the Roman Emperor Tiberius thought a city was on fire, and sent firefighters to that city. They city on fire was actually a city against a backdrop of a red aurora.<br><br>
Auroras occur when solar winds hit the Earth at polar areas where the Earth's magnetic field is less powerful. When the particles from the solar wind hit the particles in the Earth's atmosphere, the atmosphere is heated and excited and the excess energy gets away. The result of this interaction is a stunning display of light in the night sky.<br><br>
Click & scroll down to see an Aurora in action</p>
</div>
</a>
<div id="starinfo">
</div>
<nav class="bottomnav">
<ul>
<li><a href="#top">Home</a></li>
<li><a href="#aries">Aries</a></li>
<li><a href="#taurus">Taurus</a></li>
<li><a href="#gemini">Gemini</a></li>
<li><a href="#cancer">Cancer</a></li>
<li><a href="#leo">Leo</a></li>
<li><a href="#virgo">Virgo</a></li>
<li><a href="#libra">Libra</a></li>
<li><a href="#scorpio">Scorpio</a></li>
<li><a href="#sagittarius">Sagittarius</a></li>
<li><a href="#capricorn">Capricorn</a></li>
<li><a href="#aquarius">Aquarius</a></li>
<li><a href="#pisces">Pisces</a></li>
<li><a href="#aurora">Aurora</a></li>
</ul>
</nav>
</div>
<script src="js/jquery-2.2.1.js"></script>
<script src="js/smooth-scroll.js"></script>
<script src="js/easing.js"></script>
<script src="js/main.js"></script>
<script>
smoothScroll.init();
</script>
</body>
</html>