-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (156 loc) · 7.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<script src="https://kit.fontawesome.com/bd0e2c5b6f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="index.css"/>
<!-- <link rel="stylesheet" type="text/css" href="background.css" /> -->
<script type = "text/javascript" src="functions.js"></script>
</head>
<body>
<header>
<nav>
<a href="index.html" id="logo" aria-label="Home"><img src="images/SPACELOGO.png" id="img-logo" alt="Website logo"
aria-label="Image of the website logo"></a>
<ul id="links">
<li><a href="#neptune" class="navLink" aria-label="Neptune">Neptune</a></li>
<li><a href="#uranus" class="navLink" aria-label="Uranus">Uranus</a></li>
<li><a href="#saturn" class="navLink" aria-label="Saturn">Saturn</a></li>
<li><a href="#jupiter" class="navLink" aria-label="Jupiter">Jupiter</a></li>
<li><a href="#mars" class="navLink" aria-label="Mars">Mars</a></li>
<li><a href="#earth" class="navLink" aria-label="Earth">Earth</a></li>
</ul>
<a href="javascript:void(0);" class="icon" onclick="mobileDropdown()" aria-label="Expand navigation menu">
<i class="fa fa-bars"></i>
</a>
</nav>
</header>
<main id="main-index">
<article id="space">
<h1>Journey back to earth</h1>
<div id="asteroid-belt">
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top" aria-label="Return to top">
<i class="fa-solid fa-chevron-up"></i></button>
<a id="neptune"></a>
<section>
<div class="planet">
<a href="destinations/neptune.html" aria-label="Neptune page">
<img src="images/neptune.png" alt="Image of neptune" aria-label="Image of neptune">
</a>
</div>
<div class="planet-info">
<h2>Neptune</h2>
<p>
Neptune is the eighth and farthest known planet from the Sun in our solar system. It's often
referred to as an "ice giant" because it's primarily composed of icy and gaseous materials.
</p>
</div>
</section>
<a id="uranus"></a>
<section>
<div class="planet">
<a href="destinations/uranus.html" aria-label="Uranus page">
<img src="images/uranus.png" alt="Image of uranus" aria-label="Image of uranus">
</a>
</div>
<div class="planet-info">
<h2>Uranus</h2>
<p>
Uranus is the seventh planet from the Sun in our solar system. It's known for its distinct
bluish-green color and is often referred to as an "ice giant." Uranus has a unique feature in
that it rotates on its side, with its poles nearly in line with its orbital plane.
</p>
</div>
</section>
<a id="saturn"></a>
<section>
<div class="planet">
<a href="destinations/saturn.html" aria-label="Saturn page">
<img src="images/saturn.png" alt="Image of saturn" aria-label="Image of saturn">
</a>
</div>
<div class="planet-info">
<h2>Saturn</h2>
<p>
Saturn, the sixth planet from the Sun, is known for its stunning and iconic ring system. It's a
gas giant, primarily composed of hydrogen and helium. Saturn has at least 83 confirmed moons,
with Titan being the largest and notable for its thick atmosphere and liquid methane lakes.
</p>
</div>
</section>
<a id="jupiter"></a>
<section>
<div class="planet">
<a href="destinations/jupiter.html" aria-label="Jupiter page">
<img src="images/jupiter.png" alt="Image of jupiter" aria-label="Image of jupiter">
</a>
</div>
<div class="planet-info">
<h2>Jupiter</h2>
<p>
Jupiter, the largest planet in our solar system, is a gas giant characterized by its prominent
bands of clouds and the Great Red Spot, a massive storm. It has at least 79 known moons,
including Ganymede, the largest moon in the solar system. Jupiter's immense size and strong
magnetic field make it a key player in our solar system's dynamics.
</p>
</div>
</section>
<a id="mars"></a>
<section>
<div class="planet">
<a href="destinations/mars.html" aria-label="Mars page">
<img src="images/mars.png" alt="Image of mars" aria-label="Image of mars">
</a>
</div>
<div class="planet-info">
<h2>Mars</h2>
<p>
Mars, often called the "Red Planet" due to its reddish appearance, is the fourth planet from the
Sun in our solar system. It's a terrestrial planet with a thin atmosphere, and its surface
features include canyons, volcanoes, and dry river valleys, suggesting a dynamic geological
history.
</p>
</div>
</section>
<a id="earth"></a>
<section>
<div class="planet">
<a href="destinations/earth.html" aria-label="Earth page">
<img src="images/earth.png" alt="Image of earth" aria-label="Image of earth">
</a>
</div>
<div class="planet-info">
<h2>Earth</h2>
<p>
Earth is the third planet from the Sun in our solar system and the only known celestial body to
support life. It's often referred to as the "Blue Planet" because of its vast oceans. Earth has
a diverse and complex ecosystem, with a wide range of climates and environments. Home.
</p>
</div>
</section>
</article>
</main>
<footer>
<p>Kilian Boute 2023</p>
</footer>
</body>
<script>
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
let mybutton = document.getElementById("myBtn");
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</html>