web_space/planets.html at main · ellvenro/web_space · GitHub

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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>web_space_planets</title>

  <link type="image/png" sizes="120x120" rel="icon" href="img/favicon.png">

  <link rel="stylesheet" href="css/general.css">
  <link rel="stylesheet" href="css/fonts.css">
  <link rel="stylesheet" href="css/styles_planets/header.css">
  <link rel="stylesheet" href="css/styles_planets/articleBlock1.css">
  <link rel="stylesheet" href="css/styles_planets/articleBlock2.css">
  <link rel="stylesheet" href="css/styles_planets/articleBlock2Scroll.css">
  <link rel="stylesheet" href="css/styles_planets/arrows.css">
</head>
<body>

  <!--Кнопка "Наверх"-->
  <a class="button" href="#begin"></a>

  <!--Ссылки на другие страницы-->
  <div class="links">
    <a class="link" href="spacecrafts.html">Космические аппараты</a>
    <a class="link" href="index.html">Масштабы</a>
  </div>

  <a name="begin"></a>
  <!--Начальная заставка-->
  <div class="circles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>

  <header class="active">
    <div class="back"></div>
    <div id="intro">Посмотрим, как устроена звёздная система, в которой мы живём. Какие планеты вращаются вокруг Солнца, что находится в межпланетном пространстве и другие интересные сведения о нашей Солнечной системе.</div>
    <div class="logo">
      <img src="img/planets/logo21.png" alt="Планеты Солнечной системы">
      <img src="img/planets/logo22.png" alt="Планеты Солнечной системы">
      <img src="img/planets/logo23.png" alt="Планеты Солнечной системы">
    </div>
  </header>

  <div class="long">
    <p>В состав солнечной системы входит восемь основных планет и пять карликовых, вращающихся приблизительно в одной плоскости. По своим физическим свойствам планеты делятся на земную группу и планеты-гиганты.
    <p>Рассмотрим расположение объектов от Солнца.
  </div>

  <article class="block1">
    <div class="head global"><div>Планеты земной группы</div></div>

    <!--Меркурий-->
    <div class="step"><div>Первая</div></div>
    <div class="left">
      <img src="img/planets/Mercury_MESSENGER_21december09.jpg" alt="MESSENGER, 21 декабря 2009">
      <div class="fullText">
        <div class="head">Приближенная к Солнцу</div>
        <div class="text">
            Самая жаркая и маленькая планета в солнечной системе. Меркурианский год длится по нашим меркам очень долго. На Меркурии экстремальная температура, воздуха и атмосферы на планете нет.
        </div>
      </div>
      <div class="planet">Меркурий</div>
      <div class="corner"></div>
      <div class="arrows" id="arrow1"><img src="img/planets/arrow1.png"></div>
      <div id="print1" class="print">Аппарат MESSENGER, 21 декабря 2009 года</div>
    </div>

    <!--Венера-->
    <div class="step" style="margin-top: -14vw;"><div>Вторая</div></div>
    <div class="right">
      <img src="img/planets/Venus_Mariner10_7february74.jpg" alt="Маринер-10, 7 февраля 1974">
      <div class="fullText">
        <div class="head">Вечерняя звезда</div>
        <div class="text">
          Самая горячая планета, даже в сравнении с Меркурием. Одна из главных особенностей особенность планеты – кислотные дожди из серной кислоты, которые испаряются, не долетая до поверхности.
        </div>
      </div>
      <div class="planet">Венера</div>
      <div class="corner"></div>
      <div class="arrows" id="arrow2"><img src="img/planets/arrow2.png"></div>
      <div id="print2" class="print">Аппарат Маринер-10, 7 февраля 1974 года</div>
    </div>

    <!--Земля-->
    <div class="step" style="margin-top: -10vw;"><div>Третья</div></div>
    <div class="left">
      <img src="img/planets/Earth_dscovr_21july22.jpg" alt="DSCOVR, 21 июля 2022">
      <div class="fullText">
        <div class="head">Голубая планета</div>
        <div class="text">
            Земля — наша родная планета, наиболее изученный космический объект. Это третья от Солнца планета. Пятая по размеру среди всех планет Солнечной системы. Она является также крупнейшей по диаметру, массе и плотности среди планет земной группы.
        </div>
      </div>
      <div class="planet">Земля</div>
      <div class="corner"></div>
      <div class="arrows" id="arrow3"><img src="img/planets/arrow3.png"></div>
      <div id="print3" class="print">Аппарат DSCOVR, 21 июля 2022 года</div>
    </div>

    <!--Марс-->
    <div class="step" style="margin-top: -18vw;"><div>Четвертая</div></div>
    <div class="right">
      <img src="img/planets/Mars_Mangalyan_10october14.jpg" alt="Мангальян, 10 октября 2014">
      <div class="fullText">
        <div class="head">Красная планета</div>
        <div class="text">
          Поверхность планеты имеет красноватый окрас. Это связано с содержанием в почве большого количества ржавчины. По своему строению он схож с Землёй. На марсе возникают кpупнeйшиe пылeвыe буpи.
        </div>
      </div>
      <div class="planet">Марс</div>
      <div class="corner"></div>
      <div class="arrows" id="arrow4"><img src="img/planets/arrow4.png"></div>
      <div id="print4" class="print">Аппарат Мангальян, 10 октября 2014 года</div>
    </div>
  </article>

  <!--Пояс астероидов и Церера-->
  <article class="block2">
    <!--Пояс астероидов-->
    <div class="arrows" id="arrow6"><img src="img/planets/arrow6.png"></div>
    <div class="left">
      <div class="fullText">
        <div class="head">Между Марсом и Юпитером</div>
        <div class="text">
            Область Солнечной системы, расположенная между орбитами Марса и Юпитера, являющаяся местом скопления множества астероидов.
        </div>
      </div>
      <div class="img"></div>
      <div class="planet">Пояс астероидов</div>
      <div id="print6" class="print">Пояс астероидов в представлении художника</div>
    </div>

    <!--Церера-->
    <div class="right">
      <div class="fullText">
        <div class="head">Между Марсом и Юпитером</div>
        <div class="text">
            Самый большой астероид пояса астероидов, который получил статус карликовой планеты. Из всех карликовых планет Церера является ближайшей к Солнцу.
        </div>
      </div>
      <div class="img"></div>
      <div class="planet">Церера</div>
      <div class="arrows" id="arrow7"><img src="img/planets/arrow5.png"></div>
      <div id="print7" class="print">Аппарат Dawn, 4 мая 2015 года</div>
    </div>
  </article>

  <article class="block1 dop">
    <div class="head global" style="margin: 0;right:25%; top:6vw;"><div>Планеты-гиганты</div></div>

    <!--Юпитер-->
    <div class="step" style="margin-top: 0vw;"><div>Пятая</div></div>
    <div class="right">
      <img src="img/planets/Jupiter_Juno_12february19.jpg" alt="Юнона, 12 февраля 2019">
      <div class="fullText">
        <div class="head">Газовый гигант</div>
        <div class="text">
           Самая массивная планета. Одна из отличительных черт планеты - большое красное пятно чуть ниже центра. Юпитер как и все гиганты состоит в основном из смеси газов. Газовый гигант в 2,5 раза более массивный, чем все планеты вместе взятые.
        </div>
      </div>
      <div class="planet">Юпитер</div>
      <div class="corner"></div>
      <div class="arrows" id="arrow5"><img src="img/planets/arrow5.png"></div>
      <div id="print5" class="print">Аппарат Юнона, 12 февраля 2019 года</div>
    </div>

    <!--Сатурн-->
    <div class="step" style="margin-top: -15vw;"><div>Шестая</div></div>
    <div class="left">
      <img src="img/planets/Saturn_Cassini_18july9.jpg" alt="Кассини, 18 июля 2009">
      <div class="fullText">
        <div class="head">Удивительная планета</div>
        <div class="text">
            Шестая планета по удалённости от Солнца и вторая по размерам планета в Солнечной системе. Визитная карточка Сатурна - это его кольца. Планета является наименее плотной, чем любая другая планета. Ее плотность даже ниже таковой у воды.
        </div>
      </div>
      <div class="planet">Сатурн</div>
      <div class="corner"></div>
      <div class="arrows" id="arrow1"><img src="img/planets/arrow1.png"></div>
      <div id="print1" class="print">Аппарат Кассини, 18 июля 2009 года</div>
    </div>

    <!--Уран-->
    <div class="step" style="margin-top: -10vw;"><div>Седьмая</div></div>
    <div class="right">
      <img src="img/planets/Uranus_Voyager2_january86.jpg" alt="Вояджер-2, январь 1986">
      <div class="fullText">
        <div class="head">Ледяной гигант</div>
        <div class="text">
          Самая холодная планета Солнечной системы. Самой интересной и странной особенностью является его наклон оси вращения, он немного перевернут «вниз головой», как будто лежит на боку. Имеет зелёно-голубой цвет.
        </div>
      </div>
      <div class="planet">Уран</div>
      <div class="corner"></div>
      <div class="arrows" id="arrow2"><img src="img/planets/arrow2.png"></div>
      <div id="print2" class="print" style="left: 10%;">Аппарат Вояджер-2, январь 1986 года</div>
    </div>

    <!--Нептун-->
    <div class="step" style="margin-top: -18vw;"><div>Восьмая</div></div>
    <div class="left">
      <img src="img/planets/Neptune_Voyager2_20august89.jpg" alt="Вояджер-2, 20 августа 1989">
      <div class="fullText">
        <div class="head">"Морская" планета</div>
        <div class="text">
            самая удалённая от Солнца планета в нашей системе. По аналогии с Большим красным пятном Юпитера, на нептуновской поверхности имеется своё, так называемое, Большое тёмное пятно. У него сть слабая, состоящая из отдельных фрагментов, система колец.
        </div>
      </div>
      <div class="planet">Нептун</div>
      <div class="corner"></div>
      <div class="arrows" id="arrow3"><img src="img/planets/arrow3.png"></div>
      <div id="print3" class="print">Аппарат Вояджер-2, 20 августа 1989 года</div>
    </div>
  </article>

  <!--Пояс Койпера и Эрида, Плутон (бывшая планета), Хуамеа, Макемаке и Oблaкo Oopтa-->
  <article class="block2 scroll">
    <!--Заголовок-->
    <div class="head global">Транснептуновые<br>объекты</div>
    <!--Пояс Койпера-->
    <div class="left">
      <div class="fullText">
        <div class="head">За Нептуном</div>
        <div class="text">
            Ледяной мир на окраине Солнечной системы. Это пространство, состоящее из малых объектов. Пояс расширяется за орбитой Нептуна и выглядит, как пончик.
        </div>
      </div>
      <div class="img" id="Kuiper"></div>
      <div class="planet">Пояс Койпера</div>
    </div>

    <!--Плутон-->
    <div class="left">
      <div class="fullText">
        <div class="head">Бывшая планета</div>
        <div class="text">
            Самая известная карликовая планета. на данный момент обнаружены 5 естественных спутников, самый крупный из них - Харон. Плутон вращается вместе с Хароном вокруг их общего центра масс.
        </div>
      </div>
      <div class="img" id="Pluto"></div>
      <div class="planet">Плутон</div>
    </div>

    <!--Макемаке-->
    <div class="left">
      <div class="fullText">
        <div class="head">Малоизвестная</div>
        <div class="text">
            Крупнейший объект пояса Койпера. Солнце с поверхности Макемаке выглядит просто очень яркой и крупной звездой. Примерно так же выглядит Венера с поверхности Земли.
        </div>
      </div>
      <div class="img" id="Makemake"></div>
      <div class="planet">Макемаке</div>
    </div>

    <!--Хуамеа-->
    <div class="left">
      <div class="fullText">
        <div class="head">"Плоская" планета</div>
        <div class="text">
            Самая необычная карликовая планета. Имеет два довольно крупных спутника - Хииака и Намака. Примечательна Хаумеа наличием колец.
        </div>
      </div>
      <div class="img" id="Haumea"></div>
      <div class="planet">Хуамеа</div>
    </div>

    <!--Рассеянный диск-->
    <div class="left">
      <div class="fullText">
        <div class="head">Еще дальше</div>
        <div class="text">
            Удалённый регион Солнечной системы, слабо заселённый малыми телами, в основном состоящими изо льда. Частично перекрывается с поясом Койпера, но простирается намного далее за его пределы.
        </div>
      </div>
      <div class="img" id="disk"></div>
      <div class="planet">Рассеянный диск</div>
    </div>

    <!--Эрида-->
    <div class="left">
      <div class="fullText">
        <div class="head">Последняя</div>
        <div class="text">
            Самая далекая карликовая планета. Имеет спутник - Дисномию. Часто находится так далеко от Солнца, что её атмосфера коллапсирует и замерзает, падая на землю в виде снега.
        </div>
      </div>
      <div class="img" id="Erida"></div>
      <div class="planet">Эрида</div>
    </div>

    <!--Oблaкo Oopтa-->
    <div class="left" style="margin-right: 20%;">
      <div class="fullText">
        <div class="head">Делекий мир</div>
        <div class="text">
            Сферическая область из ледяных объектов, которые существуют в самых отдаленных уголках Солнечной системы.
        </div>
      </div>
      <div class="img" id="Oort"></div>
      <div class="planet">Oблaкo Oopтa</div>
    </div>

    <div style="display: inline-block; width: 26%;"></div>
  </article>

  <!--Блоки для прозрачности-->
  <div id="front1"></div>
  <div id="front2"></div>


  <footer><a class="link" href="https://github.com/ellvenro">© 2022 ellvenro</a></footer>

  <script src="js/general.js"></script>
  <script src="js/scripts_planets/horizontallScroll.js"></script>
  <script src="js/scripts_planets/anim_main.js"></script>
  <script src="js/scripts_planets/anim_header.js"></script>
</body>
</html>