-
Notifications
You must be signed in to change notification settings - Fork 0
/
OurPlanet.html
244 lines (212 loc) · 9.02 KB
/
OurPlanet.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>All the planets in our solar system</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<!--Script for Ajax-->
<script src="js/WeatherScript.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--modernizr below-->
<script src="js/modernizr.custom.05819.js"></script>
<script src="js/script.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="OurPlanet">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1><a href="#" id="logo">Our Planets</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="OurPlanet.html">Our Planets</a></li>
<li><a href="KnowThis.html">Know This</a></li>
<li><a href="Myths.html">Myths</a></li>
<li><a href="Facts.html">Facts</a></li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div style="background-color:honeydew" id="main" class="wrapper style1">
<div class="container">
<div class="row">
<!-- Sidebar -->
<div id="sidebar" class="4u sidebar">
<section>
<header class="major">
<h2 style="color:Red"><b>Did you know?</b></h2>
<p>Nasa recently landed their perseverence rover on Mars surface and has already sent some
incredible pictures and videos to the Earth station. Check out <a
href="https://www.nasa.gov/press-release/nasa-s-mars-perseverance-rover-provides-front-row-seat-to-landing-first-audio">this</a>
website for more information</p>
</header>
<div class="row half">
</div>
</section>
<div id="content">
<!-- insert the page content here -->
<form novalidate="novalidate">
<div id="errorText"></div>
<div id="numErrorText"></div>
<h2>Our magazine</h2>
<h1>Get our magazine whenever you want. Fill in the form below to get our magazine.</h1>
<fieldset id="userInput">
<div>
<label for="nameinput">Name</label>
<input type="text" id="nameinput" name="name" required="required" />
</div>
<div>
<label for="cityinput">City</label>
<input type="text" id="cityinput" name="city" required="required" />
</div>
<div>
<label for="emailinput">Email</label>
<input type="email" id="emailinput" name="email" required="required" />
</div>
<br />
<div>
<label for="phoneinput">Phone</label>
<input type="number" id="phoneinput" name="phone" required="required" />
</div>
</fieldset>
<br />
<fieldset id="userChoice">
<div>
<label>Frequency</label>
<select id="frequency" name="frequency" required="required">
<option value="">Choose</option>
<option value="weekly">Weekly</option>
<option value="bi-Weekly">Bi-Weekly</option>
<option value="monthly">Monthly</option>
</select>
</div>
<br />
<div>
<label>Allow text message</label>
<input type="checkbox" id="allowText" name="phoneText" value="allowText" />
</div>
<br />
<div>
<label>Any request?</label>
<textarea id="request" name="request" rows="2" cols="50"
placeholder="Type your requests here..."></textarea>
</div>
</fieldset>
<br />
<fieldset id="submitbutton">
<input type="submit" id="submitBtn" value="Submit" onclick="result()" />
</fieldset>
</form>
</div>
<hr />
<br />
<div>
<form id="form-weather">
<label><b>Weather Checking</b></label>
<input type="text" id="weatherCity" name="weather" placeholder="Ex. Detroit"
required="required" />
<br />
<input type="submit" value="Go" />
</form>
<div>
<p id="city-name"></p>
<p id="city-weather"></p>
<p id="city-temp"></p>
<p>
Powered by
<a href="https://openweathermap.org/">OpenWeatherMap</a>
</p>
</div>
</div>
</div>
<!-- Content -->
<div class="8u skel-cell-important">
<section>
<header class="major">
<h2>Planets in our solar system</h2>
</header>
<div class="row">
<a href="#" class="image feature"><img src="images/Earth.jpg" alt="Earth" width="250"
height="250" title="Earth"></a>
<p>Earth, our home planet, is a world unlike any other. The third planet from the sun, Earth
is the only place in the known universe confirmed to host life. With a radius of 3,959
miles, Earth is the fifth largest planet in our solar system, and it's the only one
known for sure to have liquid water on its surface</p>
<a href="#" class="image feature"><img src="images/Jupiter.jpg" alt="JPTR" width="250"
height="250" title="Jupiter"></a>
<p>Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas
giant with a mass one-thousandth that of the Sun, but two and a half times that of all
the other planets in the Solar System combined</p>
<a href="#" class="image feature"><img src="images/Mars.jpg" alt="RedPlanet" width="250"
height="250" title="Mars"></a>
<p>Mars is a terrestrial planet with a thin atmosphere, with surface features reminiscent of
the impact craters of the Moon and the valleys, deserts and polar ice caps of Earth.
Mars has two moons, Phobos and Deimos, which are small and irregularly shaped.</p>
<a href="#" class="image feature"><img src="images/mercury.jpg" alt="Mrcry" width="250"
height="250" title="Mercury"></a>
<p>Mercury is the smallest planet in our solar system. It's just a little bigger than
Earth's moon. ... Along with Venus, Earth, and Mars, Mercury is one of the rocky
planets. It has a solid surface that is covered with craters.</p>
<a href="#" class="image feature"><img src="images/Neptune.jpg" alt="Neptn" width="250"
height="250" title="Neptune"></a>
<p>Neptune is the eighth and farthest-known Solar planet from the Sun. In the Solar System,
it is the fourth-largest planet by diameter, the third-most-massive planet, and the
densest giant planet. It is 17 times the mass of Earth, slightly more massive than its
near-twin Uranus.</p>
<a href="#" class="image feature"><img src="images/saturn.jpg" alt="RingPlanet" width="250"
height="250" title="Saturn"></a>
<p>Saturn is a gas giant made up mostly of hydrogen and helium. Saturn's volume is greater
than 760 Earths, and it is the second most massive planet in the solar system, about 95
times Earth's mass. The Ringed Planet is the least dense of all the planets, and is the
only one less dense than water.</p>
<a href="#" class="image feature"><img src="images/Uranus.jpg" alt="BlueGiant" width="250"
height="250" title="Uranus"></a>
<p>Uranus is made of water, methane, and ammonia fluids above a small rocky center. Its
atmosphere is made of hydrogen and helium like Jupiter and Saturn, but it also has
methane. Like Venus, Uranus rotates in the opposite direction as most other planets. And
unlike any other planet, Uranus rotates on its side</p>
<a href="#" class="image feature"><img src="images/venus.jpg" alt="Vns" width="250"
height="250" title="Venus"></a>
<p>Venus is one of the four terrestrial planets in the Solar System, meaning that it is a
rocky body like Earth. It is similar to Earth in size and mass, and is often described
as Earth's "sister" or "twin".</p>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<!-- Copyright -->
<div class="copyright">
Design: <a href="http://templated.co">©TEMPLATED</a> Editor:
<a href="mailto:[email protected]">Sabbir Ahmed</a>
<br />
<p style="text-align: center;">
<a href="http://validator.w3.org/check?uri=referer" title="HTML5 Validation">HTML5 Validation</a>
</p>
<p>
This site is for educational purpose only. No commercial value.
</p>
</div>
</div>
</div>
</body>
</html>