-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
237 lines (211 loc) · 9.49 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" class="">
<script src="https://unpkg.com/scrollreveal"></script>
<title>Universe</title>
</head>
<body>
<div class="hero">
<div class="navbar">
<div class="logo">
<img src="./assets-pg0/eco (1).svg" alt="Galactic-logo">
<p class="name">Galactic.io</p>
</div>
<ul id="menu">
<li><a href="#Mercury">Mercury</a></li>
<li><a href="#Venus">Venus</a></li>
<li><a href="#Earth">Earth</a></li>
<li><a href="#Mars">Mars</a></li>
<li><a href="#Jupiter">Jupiter</a></li>
<li><a href="#Saturn">Saturn</a></li>
<li><a href="#Uranus">Uranus</a></li>
<li><a href="#Neptune">Neptune</a></li>
</ul>
<div class="navbar-info">
<p>2023 solarsystemdesign</p>
</div>
</div>
<div class="hero-content">
<h1 class="animation1">Let's Get To Know Our Solar System Galaxy</h1>
<p>Embark on a cosmic journey across the ethereal expanse of the solar system Galaxy and follow the orchestration of the cosmos and the planets weaving stories of their timeless existence.
</p>
<div class="learn-btn">
<button>Learn More</button>
</div>
</div>
</div>
<!-- ####### SUN ####### -->
<div class="sun">
<!-- <img src="./assests-pg2/Ellipse 1.svg" alt="" class="ellipse"> -->
<img src="./assests-pg2/Layer 2 (9).svg" alt="sun-img" class="sun-img">
<div class="info-frame frame1">
<h1 class="frame-head">.Sun</h1>
<p class="frame-para">The Sun is a huge, glowing ball of hot plasma at the centre of our solar system and provides the vital energy needed for life on Earth. This energy radiates outward in the form of light and heat, providing warmth and light to the entire solar system.</p>
<div class="frame2">
<div class="card">
<img src="./common-asset/donut_large.svg" alt="circle" class="image-donut">
<div class="frame3">
<h1>Diameter</h1>
<p>870,000 Miles</p>
</div>
</div>
<div class="card">
<img src="./common-asset/Group 3.svg" alt="thermometer" class="image-thermo">
<div class="frame3">
<h1>Temperature</h1>
<p>5,500 Celcius</p>
</div>
</div>
</div>
</div>
</div>
<!-- ########### MERCURY ############## -->
<div class="mercury">
<div class="bg-mercury">
<img src="./assests-pg3/Group 4.svg" alt="" class="mercury-img">
</div>
<div class="frame4 info-frame">
<h1 class="frame-head">1.Mercury</h1>
<p class="frame-para">Mercury is the closest planet to the Sun and is known for its extreme temperatures and barren, rocky surface. It is one of the four terrestrial planets in our solar system, characterized by their solid, rocky composition.</p>
<div class="info">
<div class="card">
<img src="./common-asset/donut_large.svg" alt="" class="image-donut">
<div class="frame3">
<h1>Diameter</h1>
<p>3,032 Miles</p>
</div>
</div>
<div class="card">
<img src="./common-asset/Group 3.svg" alt="thermometer" class="image-thermo">
<div class="frame3">
<h1>Day time Temperature</h1>
<p>430 Celsius</p>
</div>
</div>
<div class="card">
<img src="./common-asset/Group 3.svg" alt="thermometer" class="image-thermo">
<div class="frame3">
<h1>Night time Temperature</h1>
<p>-180 Celsius</p>
</div>
</div>
</div>
</div>
</div>
<!-- ######## VENUS ########### -->
<div class="venus">
<div class="frame5 info-frame">
<h1 class="frame-head">2.Venus</h1>
<p class="frame-para">Venus is often referred to as Earth's "sister planet" due to its similar size and composition, but it stands out with its extremely inhospitable environment</p>
<div class="info">
<div class="card">
<img src="./common-asset/donut_large.svg" alt="" class="image-donut">
<div class="frame3">
<h1>Diameter</h1>
<p>7,521 Miles</p>
</div>
</div>
<div class="card">
<img src="./common-asset/Group 3.svg" alt="thermometer" class="image-thermo">
<div class="frame3">
<h1>Temperature</h1>
<p>475 Celsius</p>
</div>
</div>
</div>
</div>
<img src="./assests-pg4/Group 6.svg" alt="" class="venus-img">
</div>
<!-- #### EARTH ####### -->
<div class="earth">
<div class="frame6 infor-frame">
<div class="partition">
<h1 class="frame-head">3.Earth</h1>
<p class="frame-para">Earth is the third planet from the Sun and the only known planet to support life. Earth is the only planet known to harbor life. It's a diverse and dynamic world with a wide range of ecosystems, climates, and geological features.</p>
</div>
<div class="info">
<div class="card">
<img src="./common-asset/donut_large.svg" alt="" class="image-donut">
<div class="frame3">
<h1>Diameter</h1>
<p>7,918 Miles</p>
</div>
</div>
</div>
</div>
<div class="moon_sec">
<div class="extra_info">
<h2>Moon Planet</h2>
<p class="frame-para">Earth has one natural satellite, the Moon, which plays a role in stabilizing the planet's rotation and tides. The Moon's gravitational pull causes ocean tides to rise and fall.</p>
</div>
<img src="./assests-pg5/Vector.svg" alt="" class="arrow">
</div>
<img src="./assests-pg5/Layer 2 (11).svg" alt="" class="earth-img">
</div>
<!-- ####### MARS ###### -->
<div class="mars">
<div class="frame7 info-frame">
<div class="partition">
<h1 class="frame-head">4.Mars</h1>
<p class="frame-para">Mars, often referred to as the "Red Planet," is the fourth planet from the Sun and has captivated human imagination for centuries with its reddish appearance and potential for hosting life.</p>
</div>
</div>
<div class="info">
<div class="card">
<img src="./common-asset/donut_large.svg" alt="" class="image-donut">
<div class="frame3">
<h1>Diameter</h1>
<p>4,212 Miles</p>
</div>
</div>
<div class="card">
<img src="./common-asset/Group 3.svg" alt="thermometer" class="image-thermo">
<div class="frame3">
<h1>Day time Temperature</h1>
<p>20 Celsius</p>
</div>
</div>
<div class="card">
<img src="./common-asset/Group 3.svg" alt="thermometer" class="image-thermo">
<div class="frame3">
<h1>Night time Temperature</h1>
<p>-73 Celsius</p>
</div>
</div>
</div>
<div class="mars_moon_sec">
<div class="extra_info">
<h2>Martian Moons</h2>
<p class="frame-para">Mars has two small moons, Phobos and Deimos, which are irregularly shaped and thought to be captured asteroids.</p>
</div>
<img src="./assests-pg6/Vector (4).svg" alt="arrow">
</div>
<img src="./assests-pg6/Group 9 (1).svg" alt="mars" class="mars-img">
</div>
<div class="footer">
<div class="footer_content">
<h2>Join The Education Community</h2>
<p>Join the Education Community today and be part of a movement that's transforming minds and shaping tomorrows.</p>
<div class="form">
<input type="email" placeholder="Enter your email">
<button type="submit">Subscribe</button>
</div>
</div>
</div>
<!-- <div class="footer">
<div class="footer_content">
<h2>Join The Education Comunity</h2>
<p>Join the Education Community today and be part of a movement that's transforming minds and shaping tomorrows.</p>
<div class="form">
<input type="email" placeholder="Enter your email">
<button type="submit">Subscribe</button>
</div>
</div>
</div> -->
</body>
</html>
</body>
</html> -->