-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmars.html
139 lines (126 loc) · 4.45 KB
/
mars.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
<!Doctype html>
<style>
.navbar {
overflow: hidden;
background-color: white;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: plum;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: white;
}
.show {
display: block;
}
</style>
</head>
<body>
<link rel="stylesheet" href="stylesheet.css">
<div class="navbar">
<a href="index.html">Home</a>
<a href="sun-features.html">Feautures Of The Sun</a>
<a href="sources-cited.html"> Sources Cited</a>
<a href="meteors.html"> Meteors</a>
<a href="comets.html"> Comets</a>
<a href="asteroids.html"> Asteroids</a>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">All Planets
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a href="mercury.html">Mercury</a>
<a href="venus.html">Venus</a>
<a href="earth.html">Earth</a>
<a href="mars.html">Mars </a>
<a href="jupiter.html">Jupiter </a>
<a href="saturn.html">Saturn </a>
<a href="uranus.html">Uranus </a>
<a href="neptune.html">Neptune</a>
</div>
</div>
</div>
<p class="bottom">Version 1.11</p>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
</script>
<h1> Planet Booklet|Mars</h1>
<title> Planet Booklet|Mars</title>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg" alt="Mars"width="350" height="300">
<h3> Mars is the 4th planet from the sun</h3>
<h3> Mars has 2 moons</h3>
<h3> Mars has a diameter of 4,212.3 miles</h3>
<h3> Mars has a mass of 6.39 × 10^23 kg</h3>
<h3> Mars is about about -81 degrees F.</h3>
<h3> Mars is 95% carbon dioxide and less thatn 1% oxygen.</h3>
<h3> Mars is mostly made up of sillicon, oxygen, iron, and magnesium.</h3>
<h3> Mars has an average temp of -81 degrees fahrenheit.</h3>
<h3>Mars has an <b> OVAL</b> shaped orbit.</h3>
<h3> Mars has a rotation period of 1.03 dayss, and a revolution period of 1.88 years.</h3>
<h3> Mars rotates counter-clockwise on its axis.</h3>
<h3> Mars is 153.86 million miles away from Earth, and 131.13 million miles away from the sun.
</h3>
<h3> Mars has an orange color, and white on the top and bottom.</h3>
<h3> Mars has no rings.</h3>
<h3> No past or present life has been found on Mars.</h3>
<h3> Signs of water has been found on Mars.</h3>
<h3> Elon Musk plans to land on Mars.</h3>
<h3> The main moons of Mars are: Phobos, Deismos.</h3>
<h3> Phobos is the largest, and 5,826 miles away from Mars.</h3>
<h3> Deismos is the smallest.</h3>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Phobos_colour_2008.jpg"width="100" height="100" alt="Italian Trulli">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Deimos-MRO.jpg/220px-Deimos-MRO.jpg"width="100" height="100" alt="Italian Trulli">
<h1> LEFT: PHOBOS RIGHT: DEISMOS</h1>