-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
226 lines (212 loc) · 14.6 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Space</title>
</head>
<body>
<div class="headercontainer">
<div class="header-popup"></div>
<div class="header">
<div class="header-logo header-logo_moblie"><img src="img/logo.svg" alt="logo"></div>
<ul class="header-nav">
<li class="header-nav-item">
<a href="#">Главная</a></li>
<li class="header-nav-item">
<a href="#">Статьи</a></li>
<li class="header-nav-item">
<a href="#">Материалы</a></li>
<li class="header-nav-item">
<a href="#">Развлечения</a></li>
<li class="header-nav-item">
<img class="search_form_btn" src="img/search.svg" alt="search"></li>
<li class="header-nav-item" id="lastli">
<img src="img/user.svg" alt="user"> </li>
</ul>
<div class="header_toggle">
<span></span>
</div>
<ul class="header-nav_mobile">
<li class="header-nav-item mobile_item">
<a href="#">Главная</a></li>
<li class="header-nav-item header-nav-item_before mobile_item">
<a href="#">Статьи</a></li>
<li class="header-nav-item header-nav-item_before mobile_item">
<a href="#">Материалы</a></li>
<li class="header-nav-item header-nav-item_before mobile_item">
<a href="#">Развлечения</a></li>
</ul>
<img class="user_mobile" src="img/user.svg" alt="user"> </li>
<input type="text" placeholder="Поиск" class="search_form_input">
</div>
</div>
<section class="promo">
<div class="promo_content">
<h2 class="promo_item_h2">Welcome to the universe</h2>
<h1 class="promo_item_h1">SPACE</h1>
<h3 class="promo_item_h3">Здесь вы найдете много интересного</h3>
<div class="promo_item_login">
<button class="promo_login">Войти</button>
<span class="promo_login_drop">|</span>
<button class="promo_login">Зарегистрироваться</button>
</div>
<div class="promo_item_rocket"> <img src="img/rocket.svg" alt=""></div>
</div>
</section>
<section class="info">
<h1 class="info_title">Что нового?</h1>
<div class="info_item">
<div class="info_content info_content_one">
<div class="content_one"></div>
<span class="content_text">Hello, this is content box</span>
</div>
<div class="info_content info_content_two">
<div class="content_two"></div>
<span class="content_text">Hello, this is content box</span>
</div>
<div class="info_content info_content_three">
<div class="content_three"></div>
<span class="content_text">Hello, this is content box</span>
</div>
<div class="info_content info_content_four">
<div class="content_four"></div>
<span class="content_text">Hello, this is content box</span>
</div>
</div>
</section>
<section class="slider">
<h1 class="info_title">Немного о солнечной системе
</h1>
<div id="gallery">
<div class="photobox">
<div class="photo">
<div class="show" id="last">
<h1 class="slider_content">НЕПТУН</h1>
<h2 class="slider_content_inf">
Нептун, хотя и немного меньше Урана, более массивен (17 масс Земли) и поэтому более плотный. Он излучает больше внутреннего тепла, но не так много, как Юпитер или Сатурн.
</h2>
<img src="img/Group 8.svg" alt="" class="photo_pic">
</div>
<div class="show">
<h1 class="slider_content">МЕРКУРИЙ</h1>
<h2 class="slider_content_inf">
Меркурий (0,4 а.е. от Солнца) является ближайшей планетой к Солнцу и наименьшей планетой системы (0,055 массы Земли). У планеты нет спутников. Характерными деталями рельефа его поверхности,
помимо ударных кратеров, являются многочисленные лопастевидные уступы, простирающиеся на сотни километров.
</h2>
<img src="img/Group 1.svg" alt="" class="photo_pic">
</div>
<div class="show">
<h1 class="slider_content">ВЕНЕРА</h1>
<h2 class="slider_content_inf">
Венера близка по размеру к Земле (0,815 земной массы) и, как и Земля,
имеет толстую силикатную оболочку вокруг железного ядра и атмосферу (из-за этого Венеру нередко называют «сестрой» Земли).
Имеются также свидетельства её внутренней геологической активности.
</h2>
<img src="img/Group 4.svg" alt="" class="photo_pic">
</div>
<div class="show">
<h1 class="slider_content">ЗЕМЛЯ</h1>
<h2 class="slider_content_inf">Земля является крупнейшей и самой плотной из планет земной группы. У Земли наблюдается тектоника плит.
Вопрос о наличии жизни где-либо, кроме Земли, остаётся открытым. Среди планет земной группы Земля является уникальной (прежде всего, за счёт гидросферы).
</h2>
<img src="img/Group 2.svg" alt="" class="photo_pic">
</div>
<div class="show">
<h1 class="slider_content">МАРС</h1>
<h2 class="slider_content_inf">
Марс меньше Земли и Венеры (0,107 массы Земли). Он обладает атмосферой, состоящей главным образом из углекислого газа, с поверхностным давлением 6,1 мбар (0,6 % от земного).
На его поверхности есть вулканы, самый большой из которых, Олимп, превышает размерами все земные вулканы, достигая высоты 21,2 км.
</h2>
<img src="img/Group 3.svg" alt="" class="photo_pic">
</div>
<div class="show">
<h1 class="slider_content">ЮПИТЕР</h1>
<h2 class="slider_content_inf">
Юпитер обладает массой в 318 раз больше земной, и в 2,5 раза массивнее всех остальных планет, вместе взятых.
Он состоит главным образом из водорода и гелия. Высокая внутренняя температура Юпитера вызывает множество полупостоянных вихревых структур в его атмосфере, таких как полосы облаков и Большое красное пятно.
</h2>
<img src="img/Group 5.svg" alt="" class="photo_pic">
</div>
<div class="show">
<h1 class="slider_content">САТУРН</h1>
<h2 class="slider_content_inf">
Сатурн, известный своей обширной системой колец, имеет несколько схожие с Юпитером структуру атмосферы и магнитосферы.
Хотя объём Сатурна составляет 60 % юпитерианского, масса (95 масс Земли) — меньше трети юпитерианской; таким образом, Сатурн — наименее плотная планета Солнечной системы (его средняя плотность меньше плотности воды и даже бензина).
</h2>
<img src="img/Group 6.svg" alt="" class="photo_pic">
</div>
<div class="show">
<h1 class="slider_content">УРАН</h1>
<h2 class="slider_content_inf">
Уран с массой в 14 раз больше, чем у Земли, является самой лёгкой из планет-гигантов. Уникальным среди других планет его делает то,
что он вращается «лёжа на боку»: плоскость экватора Урана наклонена к плоскости его орбиты примерно на 98°.
</h2>
<img src="img/Group 7.svg" alt="" class="photo_pic">
</div>
<div class="show">
<h1 class="slider_content">НЕПТУН</h1>
<h2 class="slider_content_inf">
Нептун, хотя и немного меньше Урана, более массивен (17 масс Земли) и поэтому более плотный.
Он излучает больше внутреннего тепла, но не так много, как Юпитер или Сатурн.
</h2>
<img src="img/Group 8.svg" alt="" class="photo_pic">
</div>
<div class="show" id="first">
<h1 class="slider_content">МЕРКУРИЙ</h1>
<h2 class="slider_content_inf">
Меркурий (0,4 а.е. от Солнца) является ближайшей планетой к Солнцу и наименьшей планетой системы (0,055 массы Земли). У планеты нет спутников. Характерными деталями рельефа его поверхности,
помимо ударных кратеров, являются многочисленные лопастевидные уступы, простирающиеся на сотни километров.
</h2>
<img src="img/Group 1.svg" alt="" class="photo_pic">
</div>
</div>
</div>
<div class="buttons">
<input type="image" src="img/prev.svg" class="prev"></input>
<input type="image" src="img/next.svg" class="next"></input>
</div>
</div>
</section>
<section class="about">
<h1 class="info_title">Полезная информация</h1>
<div class="block">
<div class="block_item">
<div class="block_title">Заголовок1</div>
<div class="block_text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ex iure ducimus consequatur inventore eos ratione, odio rerum labore sunt repudiandae,
aliquam culpa distinctio quibusdam, accusantium repellendus reiciendis a voluptatem.
</div>
</div>
<div class="block_item">
<div class="block_title">Заголовок2</div>
<div class="block_text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ex iure ducimus consequatur inventore eos ratione, odio rerum labore sunt repudiandae,
aliquam culpa distinctio quibusdam, accusantium repellendus reiciendis a voluptatem.
</div>
</div>
<div class="block_item">
<div class="block_title">Заголовок3</div>
<div class="block_text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ex iure ducimus consequatur inventore eos ratione, odio rerum labore sunt repudiandae,
aliquam culpa distinctio quibusdam, accusantium repellendus reiciendis a voluptatem.
</div>
</div>
</div>
<div class="aboutframe">
<div class="aboutframe_frame">
<img src="img/ipad.png" alt="block">
</div>
<div class="aboutframe_content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit et vitae beatae fugiat tempore nemo esse, velit similique culpa doloribus.
Quasi officia a optio repudiandae obcaecati adipisci consequuntur, ipsa ea!
</div>
</div>
</section>
<footer class="footer">
</footer>
<script src="script/script.js"></script>
</body>
</html>