-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathm1.html
150 lines (140 loc) · 8.89 KB
/
m1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solar System</title>
<link rel="stylesheet" href="m2.css"> <!-- Link to your CSS file -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Include jQuery -->
<script src="https://cdn.jsdelivr.net/npm/fullpage.js"></script> <!-- FullPage.js -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- Particles.js -->
<script src="m3.js" defer></script> <!-- Include your custom JavaScript file -->
</head>
<body id="particle-js">
<header id="header" style="background: transparent; margin: 0; padding: 0;">
<div class="inner">
<!-- <h1 class="logo">Solar System</h1> -->
</div>
</header>
<div id="fullpage-wrapper" class="fullpage-wrapper js-main-slider">
<!-- Mercury section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="txt" style="margin-top: 300px;">
<h1>Mercury</h1>
<p>Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets in the Solar System. It is named after the Roman deity Mercury, the messenger of the gods.</p>
<a href="https://en.wikipedia.org/wiki/Mercury_(planet)" class="btn btn-primary" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Venus section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="txt" style="margin-top: 300px;">
<h1>Venus</h1>
<p>Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. As the second-brightest natural object in the night sky after the Moon, Venus can cast shadows and, rarely, is visible to the naked eye in broad daylight.</p>
<a href="https://en.wikipedia.org/wiki/Venus" class="btn btn-primary" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Earth section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="txt" style="margin-top: 300px;">
<h1>Earth</h1>
<p>Earth is the third planet from the Sun and the only astronomical object known to harbor life. According to radiometric dating and other sources of evidence, Earth formed over 4.5 billion years ago.</p>
<a href="https://en.wikipedia.org/wiki/Earth" class="btn btn-primary" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Mars section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="txt" style="margin-top: 300px;">
<h1>Mars</h1>
<p>Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war and is often referred to as the 'Red Planet'.</p>
<a href="https://en.wikipedia.org/wiki/Mars" class="btn btn-primary" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Jupiter section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="txt" style="margin-top: 300px;">
<h1>Jupiter</h1>
<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="https://en.wikipedia.org/wiki/Jupiter" class="btn btn-primary" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Saturn section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="txt" style="margin-top: 300px;">
<h1>Saturn</h1>
<p>Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius about nine times that of Earth. It has only one-eighth the average density of Earth; however, with its larger volume, Saturn is over 95 times more massive.</p>
<a href="https://en.wikipedia.org/wiki/Saturn" class="btn btn-primary" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Uranus section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="txt" style="margin-top: 300px;">
<h1>Uranus</h1>
<p>Uranus is the seventh planet from the Sun. It has the third-largest planetary radius and fourth-largest planetary mass in the Solar System. Uranus is similar in composition to Neptune, and both have bulk chemical compositions which differ from that of the larger gas giants Jupiter and Saturn.</p>
<a href="https://en.wikipedia.org/wiki/Uranus" class="btn btn-primary" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Neptune section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="txt" style="margin-top: 300px;">
<h1>Neptune</h1>
<p>Neptune is the eighth and farthest known planet from the Sun in the Solar System. In the Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet, and the densest giant planet. Neptune is 17 times the mass of Earth, slightly more massive than its near-twin Uranus.</p>
<a href="https://en.wikipedia.org/wiki/Neptune" class="btn btn-primary" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Pluto section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="txt" style="margin-top: 300px;">
<h1>Pluto</h1>
<p>Pluto is an icy dwarf planet in the Kuiper belt, a ring of bodies beyond the orbit of Neptune. It was the first Kuiper belt object to be discovered and is the largest known dwarf planet. Pluto was discovered by Clyde Tombaugh in 1930 as the ninth planet from the Sun.</p>
<a href="https://en.wikipedia.org/wiki/Pluto" class="btn btn-primary" target="_blank">Learn More</a>
</div>
</div>
</div>
<!-- Credits section -->
<div class="c-main-slide js-main-slide section">
<div class="inner">
<div class="credits" style="margin-top: 300px; text-align: center;">
<h1>Credits</h1>
<p>
Inspired by this <a href="https://dribbble.com/shots/9805475-Planets-landing-page" target="_blank">Dribbble Shot</a>.
This was built using <a href="https://alvarotrigo.com/fullPage/" target="_blank">fullPage.js</a>.
I used <a href="https://www.wikipedia.org/" target="_blank">Wikipedia</a> for content,
<a href="https://solarsystem.nasa.gov/">NASA</a> for images of planets, and
<a href="https://codepen.io/prathameshkoshti/pen/oNgVdXV" target="_blank">this codepen</a> for the particles in the background.
</p>
</div>
</div>
</div>
</div>
<!-- Solar system planets -->
<div id="solar-system">
<div id="sun"></div>
<div id="mercury" class="planet"></div>
<div id="venus" class="planet"></div>
<div id="earth" class="planet"></div>
<div id="mars" class="planet"></div>
<div id="jupiter" class="planet"></div>
<div id="saturn" class="planet"></div>
<div id="uranus" class="planet"></div>
<div id="neptune" class="planet"></div>
<div id="pluto" class="planet"></div>
</div>
</body>
</html>