-
Notifications
You must be signed in to change notification settings - Fork 1
/
about-mars.html
133 lines (125 loc) · 6.17 KB
/
about-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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home-page</title>
<link rel = "stylesheet" href = "styles/about-mars.css">
</head>
<body>
<nav>
<a href="about-mars.html" style="text-decoration: none;">
<div class="logo">
<img src="images/logo.png" alt="Logo">
<span class="WMC">WMC</span>
</div>
</a>
<ul class="navbar-items">
<li><a href="about-mars.html">Mars</a></li>
<li><a href="past-missions.html">Past missions</a></li>
<li><a href="current-missions copy.html">Current missions</a></li>
<li><a href="#">Mangalyaan</a></li>
<li><a href="merch.html">Shop</a></li>
<li class="icon"><a href="login.html"><i class="fa-solid fa-user" style="color: white;"></i></a></li>
</ul>
</nav>
<div class="intro-section">
<div class="content">
<h4>Welcome to</h4>
<h1><span>W</span>hole <span>M</span>ars <span>C</span>atalouge</h1>
<img src="images/down-arrow.gif" onclick="scrollToSection('#main-content')">
</div>
</div>
<div id="main-content">
<div class="about-us">
<p>Welcome to our Mars-focused website, where we embark on an exciting journey to explore our next home. Get ready to dive into the wonders of Mars as we uncover its mysteries and share the knowledge that awaits us there. Let's begin our Martian adventure without delay!</p>
</div>
<div class="mars-content-left" id="start">
<div class="mars-text-left">
<h1>Celestrial Details</h1>
<p>Mars is the fourth planet and the furthest terrestrial planet from the Sun.</p>
<p>The reddish color of its surface gives it the nickname "the Red Planet". Like the other planets in the Solar System, Mars was formed <span style="color:#e77d11;">4.5 billion years</span> ago. Mars is among the brightest objects in Earth's sky, and thus has been known from the ancient times. The Romans named it for the god of war, <span style="color:#e77d11;">Mārs</span></p>
<p>Mars is both strikingly similar yet so different from <span style="color:#e77d11;">Earth</span></p>
</div>
<a href="https://en.wikipedia.org/wiki/Mars#Orbit_and_rotation" style="text-decoration: none;" target="_blank">
<div class="mars-img-right">
<img src="images/celestrial.avif">
</div>
</a>
</div>
<div class="mars-content-right">
<a href="https://en.wikipedia.org/wiki/Mars#Geography_and_features" style="text-decoration: none;" target="_blank">
<div class="mars-img-left">
<img src="images/geo.jpg">
</div>
</a>
<div class="mars-text-right">
<h1>Geology</h1>
<p>Of all the planets in the <span style="color:#e77d11;">Solar System</span>, the seasons of Mars are the most Earth-like,
</p>
<p>
due to the similar tilts of the two planets' rotational axes. The lengths of the Martian seasons are about
twice those of <span style="color:#e77d11;">Earth</span>'s because <span style="color:#e77d11;">Mars</span>'s greater distance from the Sun leads to the Martian year being about
two Earth years long.</p>
<p>Martian surface temperatures vary from lows of about <span style="color:#e77d11;">-110 °C </span>(-166 °F) to highs
of up to 35 °C (95 °F) in equatorial summer.</p>
</div>
</div>
<div class="mars-content-left">
<div class="mars-text-left">
<h1>Atmosphere</h1>
<p>
Water in its liquid form cannot exist on the surface of <span style="color:#e77d11;">Mars</span> due to low atmospheric pressure,
which is less than <span style="color:#e77d11;">1%</span> that of Earth,except at the lowest of elevations for short periods.
The two polar ice caps appear to be made largely of water.
The volume of water ice in the south polar ice cap, if melted,
would be enough to cover the entire surface of the planet with a depth of <span style="color:#e77d11;">11 metres</span> (36 ft).
</p>
</div>
<a href="https://en.wikipedia.org/wiki/Mars#Atmosphere" style="text-decoration: none;" target="_blank">
<div class="mars-img-right">
<img src="images/ato.jpg">
</div>
</a>
</div>
</div>
<div class="mars-content-right">
<a href="https://en.wikipedia.org/wiki/Mars#Natural_history" style="text-decoration: none;" target="_blank">
<div class="mars-img-left">
<img src="images/nat.jpg">
</div>
</a>
<div class="mars-text-right">
<h1>Natural History</h1>
<p>Mars has two relatively small (compared to Earth's) natural<span style="color:#e77d11;">moons</span> , Phobos
(about 22 kilometres (14 mi) in diameter) and Deimos
(about 12 kilometres (7.5 mi) in diameter),
which orbit close to the planet.</p>
<p>The origin of both moons is <span style="color:#e77d11;">unclear</span>, although a popular theory states that they
were asteroids captured into Martian orbit.
From the surface of Mars, <span style="color:#e77d11;">Phobos </span>rises in the west, sets in the east,
and rises again in just span <span style="color:#e77d11;">11 hours.</span></p>
</div>
</div>
<footer>
<div class="container">
<p>© 2023 Whole Mars Catalouge. All rights reserved.</p>
<div class="social-icons">
<a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
<a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</footer>
</body>
</html>
<script>
function scrollToSection(sectionId) {
const section = document.querySelector(sectionId);
const offset = 75;
const topOffset = section.offsetTop - offset;
window.scrollTo({ top: topOffset, behavior: "smooth" });
}
</script>
<script src="https://kit.fontawesome.com/fa21158c25.js" crossorigin="anonymous"></script>