-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·91 lines (89 loc) · 2.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Antonio:wght@500&family=Spartan:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/favicon-32x32.png"
/>
<link rel="stylesheet" href="index.css" />
<title>Frontend Mentor | Planets fact site</title>
<nav class="nav-bar">
<h3>The Planets</h3>
<ul class="planet-menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</nav>
</head>
<body>
<div class="planets-page">
<div class="planet-img">
<img src="./assets/planet-mercury.svg" alt="" class="planet-img-2" />
</div>
<div class="planet-stats">
<h1 class="planet-name">Mercury</h1>
<p class="page-content">
Mercury is the smallest planet in the Solar System and the closest to
the Sun. Its orbit around the Sun takes 87.97 Earth days, the shortest
of all the Sun's planets. Mercury is one of four terrestrial planets
in the Solar System, and is a rocky body like Earth.
</p>
<div class="wikipedia-link">
<p class="link-source">Source :</p>
<a
href="https://en.wikipedia.org/wiki/Mercury_(planet)"
class="link-source-2"
>Wikipedia</a
>
</div>
<button class="overview-btn">
<p class="button-numbers">01</p>
<p>Overview</p>
</button>
<button class="structure-btn">
<p class="button-numbers">02</p>
<p>Internal Structure</p>
</button>
<button class="surface-btn">
<p class="button-numbers">03</p>
<p>Surface Geology</p>
</button>
</div>
</div>
<footer>
<div>
<h4 class="rotation-time">Rotation Time</h4>
<h2>58.6 Days</h2>
</div>
<div>
<h4 class="revolution-time">Revolution Time</h4>
<h2>87.97 Days</h2>
</div>
<div>
<h4 class="radius">Radius</h4>
<h2>2,439.7 KM</h2>
</div>
<div>
<h4 class="temp">Average Temp.</h4>
<h2>430°c</h2>
</div>
</footer>
<script type="text/javascript" src="planets.js"></script>
</body>
</html>