-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
209 lines (172 loc) · 9.73 KB
/
index.html
File metadata and controls
209 lines (172 loc) · 9.73 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solar System</title>
<link rel="shortcut icon" href="images/sun.png" type="image/png">
<link rel="stylesheet" href="css/main.css">
<script src="js/app.js" defer></script>
</head>
<body>
<div class="container">
<section class="gallery">
<div class="frame">
<div class="frame__content">
<h2>Solar System</h2>
</div>
</div>
<div class="frame">
<div class="frame__content">
<div class="frame-media frame-media_middle" style="background-image: url(images/12.PNG)"></div>
</div>
</div>
<div class="frame frame_bg">
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-right">
<h3>Sun</h3>
<p>The Sun is the star at the center of the Solar System. It is a nearly perfect ball of hot plasma, heated to incandescence by nuclear fusion reactions in its core. The Sun radiates this energy mainly as light, ultraviolet, and infrared radiation, and is the most important source of energy for life on Earth.</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame-media frame-media_left" style="border-radius: 50%" controls autoplay muted loop id="videoId">
<source src="images/sun.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-left">
<h3>Mercury</h3>
<p>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. It is named after the Roman god Mercurius (Mercury), god of commerce, messenger of the gods, and mediator between gods and mortals, corresponding to the Greek god Hermes.</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame-media frame-media_right" style="border-radius: 50%" controls autoplay muted loop id="videoId">
<source src="images/mercury.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-right">
<h3>Venus</h3>
<p>Venus is the second planet from the Sun. It is sometimes called Earth's "sister" or "twin" planet as it is almost as large and has a similar composition. As an interior planet to Earth, Venus (like Mercury) appears in Earth's sky never far from the Sun, either as morning star or evening star. Aside from the Sun and Moon, Venus is the brightest natural object in Earth's sky, capable of casting visible shadows on Earth at dark conditions and being visible to the naked eye in broad daylight.</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame-media frame-media_left" style="border-radius: 50%" controls autoplay muted loop id="videoId">
<source src="images/venus.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-left">
<h3>Earth</h3>
<p>Earth is the third planet from the Sun and the only astronomical object known to harbor life. While large volumes of water can be found throughout the Solar System, only Earth sustains liquid surface water. About 71% of Earth's surface is made up of the ocean, dwarfing Earth's polar ice, lakes, and rivers. The remaining 29% of Earth's surface is land, consisting of continents and islands. Earth's surface layer is formed of several slowly moving tectonic plates, interacting to produce mountain ranges, volcanoes, and earthquakes. Earth's liquid outer core generates the magnetic field that shapes Earth's magnetosphere, deflecting destructive solar winds.</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame-media frame-media_right" style="border-radius: 50%" controls autoplay muted loop id="videoId">
<source src="images/earth.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-right">
<h3>Mars</h3>
<p>Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being larger than only Mercury. In the English language, Mars is named for the Roman god of war. Mars is a terrestrial planet with a thin atmosphere (less than 1% that of Earth's), and has a crust primarily composed of elements similar to Earth's crust, as well as a core made of iron and nickel. Mars has surface features such as impact craters, valleys, dunes, and polar ice caps. It has two small and irregularly shaped moons: Phobos and Deimos.</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame-media frame-media_left" style="border-radius: 50%" controls autoplay muted loop id="videoId">
<source src="images/mars.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-left">
<h3>Jupiter</h3>
<p>Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined, but slightly less than one-thousandth the mass of the Sun. Jupiter is the third brightest natural object in the Earth's night sky after the Moon and Venus, and it has been observed since prehistoric times. It was named after the Roman god Jupiter, the king of the gods.</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame-media frame-media_right" style="border-radius: 50%" controls autoplay muted loop id="videoId">
<source src="images/jupiter.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-right">
<h3>Saturn</h3>
<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 of about nine and a half 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>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame-media frame-media_left" style="border-radius: 50%" controls autoplay muted loop id="videoId">
<source src="images/saturn.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-left">
<h3>Uranus</h3>
<p>Uranus is the seventh planet from the Sun. Its name is a reference to the Greek god of the sky, Uranus, who, according to Greek mythology, was the great-grandfather of Ares (Mars), grandfather of Zeus (Jupiter) and father of Cronus (Saturn). 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. For this reason, scientists often classify Uranus and Neptune as "ice giants" to distinguish them from the other giant planets.</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame-media frame-media_right" style="border-radius: 50%" controls autoplay muted loop id="videoId">
<source src="images/uranus.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content text-right">
<h3>Neptune</h3>
<p>Neptune is the eighth planet from the Sun and the farthest known solar planet. In the Solar System, it is the fourth-largest planet by diameter, the third-most-massive planet, and the densest giant planet. It is 17 times the mass of Earth, and slightly more massive than its near-twin Uranus. Neptune is denser and physically smaller than Uranus because its greater mass causes more gravitational compression of its atmosphere. It is referred to as one of the solar system's two ice giant planets (the other one being Uranus). Being composed primarily of gases and liquids, it has no well-defined "solid surface".</p>
</div>
</div>
<div class="frame frame_bg">
<div class="frame__content">
<video class="frame-media frame-media_left" style="border-radius: 50%" controls autoplay muted loop id="videoId">
<source src="images/neptune.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="frame"></div>
<div class="frame"></div>
<div class="frame">
<div class="frame__content">© TMJ Prod.</div>
</div>
</section>
</div>
<img class="soundbutton paused" src="images/sound.gif" alt="Alt">
<audio class="audio" src="media/ambient.mp3" loop></audio>
</body>
</html>