-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
288 lines (288 loc) · 17.8 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
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
<!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>Skillbox</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header__section">
<div class="container header flex">
<div class="header__logo">
<a href="https://skillbox.ru/">
<img src="img/logo.svg" alt="Логотип Skillbox">
</a>
</div>
<div class="header__nav flex">
<nav>
<ul class="list-reset nav__list flex">
<li class="nav__item">
<a href="#main">
Главная
</a>
</li>
<li class="nav__item">
<a href="#about">
О нас
</a>
</li>
<li class="nav__item">
<a href="#teachers">
Преподаватели
</a>
</li>
<li class="nav__item">
<a href="#cources">
Курсы
</a>
</li>
</ul>
</nav>
</div>
<div class="header__burger">
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.6875 16.5625C0.6875 16.3139 0.786272 16.0754 0.962088 15.8996C1.1379 15.7238 1.37636 15.625 1.625 15.625H20.375C20.6236 15.625 20.8621 15.7238 21.0379 15.8996C21.2137 16.0754 21.3125 16.3139 21.3125 16.5625C21.3125 16.8111 21.2137 17.0496 21.0379 17.2254C20.8621 17.4012 20.6236 17.5 20.375 17.5H1.625C1.37636 17.5 1.1379 17.4012 0.962088 17.2254C0.786272 17.0496 0.6875 16.8111 0.6875 16.5625ZM0.6875 9.0625C0.6875 8.81386 0.786272 8.5754 0.962088 8.39959C1.1379 8.22377 1.37636 8.125 1.625 8.125H20.375C20.6236 8.125 20.8621 8.22377 21.0379 8.39959C21.2137 8.5754 21.3125 8.81386 21.3125 9.0625C21.3125 9.31114 21.2137 9.5496 21.0379 9.72541C20.8621 9.90123 20.6236 10 20.375 10H1.625C1.37636 10 1.1379 9.90123 0.962088 9.72541C0.786272 9.5496 0.6875 9.31114 0.6875 9.0625ZM0.6875 1.5625C0.6875 1.31386 0.786272 1.0754 0.962088 0.899588C1.1379 0.723772 1.37636 0.625 1.625 0.625H20.375C20.6236 0.625 20.8621 0.723772 21.0379 0.899588C21.2137 1.0754 21.3125 1.31386 21.3125 1.5625C21.3125 1.81114 21.2137 2.0496 21.0379 2.22541C20.8621 2.40123 20.6236 2.5 20.375 2.5H1.625C1.37636 2.5 1.1379 2.40123 0.962088 2.22541C0.786272 2.0496 0.6875 1.81114 0.6875 1.5625Z" fill="white"/>
</svg>
</div>
</div>
</header>
<section class="hero__section spaces_below" id="main">
<div class="container hero">
<div class="row">
<div class="col-12 col-sm-12 col-md-7 col-xl-6 col-xxl-5">
<div class="hero__info">
<h1 class="header-reset hero__title">
Курсы 3D моделирования
</h1>
<p class="hero__description">
Следует отметить, что существующая теория способствует повышению качества благоприятных перспектив. Не следует, однако, забывать.
</p>
<button class="btn-reset hero__btn">
Выбрать курс
</button>
</div>
</div>
<div class="col-md-5 col-xl-6 col-xxl-7">
<div class="hero__img"></div>
</div>
</div>
</div>
</section>
<section class="advantages__section spaces_below" id="about">
<div class="container advantages">
<div class="row">
<div class="col-sm-4 col-md-4 col-xl-2 col-xxl-2">
<div class="advantage__img"></div>
</div>
<div class="col-12 col-sm-8 col-md-8 col-xl-10 col-xxl-10">
<div class="advantage__info">
<h2 class="header-reset section__title">
Преимущества обучения в skillbox
</h2>
<p class="section__description">
Имеется спорная точка зрения, гласящая примерно следующее: акционеры крупнейших компаний, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут рассмотрены исключительно в разрезе маркетинговых предпосылок.
</p>
</div>
</div>
</div>
<ul class="row justify-content-between list-reset advantages__items">
<li class="col-12 col-sm-4 col-md-4 col-xl-4 col-xxl-4 content__item">
<p class="advantage__description advanatge__bg1">
Результат вашего обучения является самым важным для нас приоритетом
</p>
</li>
<li class="col-12 col-sm-4 col-md-4 col-xl-4 col-xxl-4 content__item">
<p class="advantage__description advanatge__bg2">
Лично познакомитесь с одним из своих будущих преподавателей
</p>
</li>
<li class="col-12 col-sm-4 col-md-4 col-xl-4 col-xxl-4 content__item">
<p class="advantage__description advanatge__bg3">
Значимость этих проблем очевидна, поэтому стоит всегда быть внимательным
</p>
</li>
</ul>
</div>
</section>
<section class="teachers__section spaces_below" id="teachers">
<div class="container teachers">
<h2 class="header-reset teacher__title">
Преподаватели курсов
</h2>
<ul class="row justify-content-between list-reset teachers__list">
<li class="col-12 col-sm-6 col-md-6 col-xl-3 col-xxl-3 content__item">
<div class="teacher__card">
<div class="teacher__img teacher__img1"></div>
<h3 class="header-reset teacher__name">
Владимир Петров
</h3>
<p class="teacher__description">
Лишь непосредственные участники технического прогресса неоднозначны и будут в равной степени предоставлены сами себе.
</p>
</div>
</li>
<li class="col-12 col-sm-6 col-md-6 col-xl-3 col-xxl-3 content__item">
<div class="teacher__card">
<div class="teacher__img teacher__img2"></div>
<h3 class="header-reset teacher__name">
Денис Сергеев
</h3>
<p class="teacher__description">
Безусловно, разбавленное изрядной долей эмпатии, рациональное мышление.
</p>
</div>
</li>
<li class="col-12 col-sm-6 col-md-6 col-xl-3 col-xxl-3 content__item">
<div class="teacher__card">
<div class="teacher__img teacher__img3"></div>
<h3 class="header-reset teacher__name">
Михаил Андреев
</h3>
<p class="teacher__description">
Ясность нашей позиции очевидна: высокое качество позиционных исследований напрямую зависит от вывода.
</p>
</div>
</li>
<li class="col-12 col-sm-6 col-md-6 col-xl-3 col-xxl-3 content__item">
<div class="teacher__card">
<div class="teacher__img teacher__img4"></div>
<h3 class="header-reset teacher__name">
Константин Дмитриев
</h3>
<p class="teacher__description">
Мы вынуждены отталкиваться от того, что существующая теория, в своём классическом представлении.
</p>
</div>
</li>
</ul>
</div>
</section>
<section class="courses__section" id="courses">
<div class="container courses">
<h2 class="header-reset courses__title">
Курсы
</h2>
<ul class="row justify-content-between list-reset courses__list">
<li class="col-12 col-sm-6 col-md-6 col-xl-6 col-xxl-6 flex">
<div class="course__card flex">
<div class="course__img course__img-1"></div>
<div class="course__duration">
<span>60 часов</span>
</div>
<div class="course__description">
<h3 class="header-reset course__title">
Cinema 4d для начинающих
</h3>
<p class="course__annotation">
Учитывая ключевые сценарии поведения, базовый вектор развития напрямую зависит от системы массового участия. Следует отметить, что сложившаяся структура организации напрямую зависит от стандартных подходов.
</p>
</div>
<button class="btn-reset course__btn">
Подробнее
</button>
</div>
</li>
<li class="col-12 col-sm-6 col-md-6 col-xl-6 col-xxl-6 flex">
<div class="course__card flex">
<div class="course__img course__img-2"></div>
<div class="course__description">
<h3 class="course__title">
Blender: продвинутый уровень
</h3>
<p class="course__annotation">
Но убеждённость некоторых оппонентов в значительной степени обусловливает важность форм воздействия. Внезапно, тщательные исследования конкурентов представлены.
</p>
<div class="course__duration">
<span>40 часов</span>
</div>
</div>
<button class="btn-reset course__btn">
Подробнее
</button>
</div>
</li>
<li class="col-12 col-sm-6 col-md-6 col-xl-6 col-xxl-6 flex">
<div class="course__card flex">
<div class="course__img course__img-3"></div>
<div class="course__description">
<h3 class="course__title">
Визуализация в 3ds Max
</h3>
<p class="course__annotation">
Повседневная практика показывает, что сложившаяся структура организации обеспечивает актуальность кластеризации усилий.
</p>
<div class="course__duration">
<span>80 часов</span>
</div>
</div>
<button class="btn-reset course__btn">
Подробнее
</button>
</div>
</li>
<li class="col-12 col-sm-6 col-md-6 col-xl-6 col-xxl-6 flex">
<div class="course__card flex">
<div class="course__img course__img-4"></div>
<div class="course__description">
<h3 class="course__title">
Скульптинг в ZBrush
</h3>
<p class="course__annotation">
Разнообразный и богатый опыт говорит нам, что граница обучения кадров требует определения и уточнения прогресса профессионального сообщества! В частности, постоянный количественный рост и сфера нашей активности.
</p>
<div class="course__duration">
<span>40 часов</span>
</div>
</div>
<button class="btn-reset course__btn">
Подробнее
</button>
</div>
</li>
</ul>
</div>
</section>
<footer class="footer__section">
<div class="footer__top">
<ul class="list-reset social__list">
<li class="social__item">
<a href="#">
<svg calss="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.402 21V14.034H17.735L18.084 11.326H15.402V9.598C15.402 8.814 15.62 8.279 16.744 8.279H18.178V5.857C17.4838 5.78334 16.7861 5.74762 16.088 5.75C14.021 5.75 12.606 7.012 12.606 9.33V11.326H10.268V14.034H12.606V21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H15.402Z" fill="white"/>
</svg>
</a>
</li>
<li class="social__item">
<a href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.1621 5.65593C21.3986 5.99362 20.589 6.2154 19.7601 6.31393C20.6338 5.79136 21.2878 4.96894 21.6001 3.99993C20.7801 4.48793 19.8811 4.82993 18.9441 5.01493C18.3147 4.34151 17.4804 3.89489 16.571 3.74451C15.6616 3.59413 14.728 3.74842 13.9153 4.18338C13.1026 4.61834 12.4564 5.30961 12.0772 6.14972C11.6979 6.98983 11.6068 7.93171 11.8181 8.82893C10.1552 8.74558 8.52838 8.31345 7.04334 7.56059C5.55829 6.80773 4.24818 5.75097 3.19805 4.45893C2.82634 5.09738 2.63101 5.82315 2.63205 6.56193C2.63205 8.01193 3.37005 9.29293 4.49205 10.0429C3.82806 10.022 3.17869 9.84271 2.59805 9.51993V9.57193C2.59825 10.5376 2.93242 11.4735 3.5439 12.221C4.15538 12.9684 5.00653 13.4814 5.95305 13.6729C5.33667 13.84 4.69036 13.8646 4.06305 13.7449C4.32992 14.5762 4.85006 15.3031 5.55064 15.824C6.25123 16.3449 7.09718 16.6337 7.97005 16.6499C7.10253 17.3313 6.10923 17.8349 5.04693 18.1321C3.98464 18.4293 2.87418 18.5142 1.77905 18.3819C3.69075 19.6114 5.91615 20.264 8.18905 20.2619C15.8821 20.2619 20.0891 13.8889 20.0891 8.36193C20.0891 8.18193 20.0841 7.99993 20.0761 7.82193C20.8949 7.23009 21.6017 6.49695 22.1631 5.65693L22.1621 5.65593Z" fill="white"/>
</svg>
</a>
</li>
<li class="social__item">
<a href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C14.717 2 15.056 2.01 16.122 2.06C17.187 2.11 17.912 2.277 18.55 2.525C19.21 2.779 19.766 3.123 20.322 3.678C20.8305 4.1779 21.224 4.78259 21.475 5.45C21.722 6.087 21.89 6.813 21.94 7.878C21.987 8.944 22 9.283 22 12C22 14.717 21.99 15.056 21.94 16.122C21.89 17.187 21.722 17.912 21.475 18.55C21.2247 19.2178 20.8311 19.8226 20.322 20.322C19.822 20.8303 19.2173 21.2238 18.55 21.475C17.913 21.722 17.187 21.89 16.122 21.94C15.056 21.987 14.717 22 12 22C9.283 22 8.944 21.99 7.878 21.94C6.813 21.89 6.088 21.722 5.45 21.475C4.78233 21.2245 4.17753 20.8309 3.678 20.322C3.16941 19.8222 2.77593 19.2175 2.525 18.55C2.277 17.913 2.11 17.187 2.06 16.122C2.013 15.056 2 14.717 2 12C2 9.283 2.01 8.944 2.06 7.878C2.11 6.812 2.277 6.088 2.525 5.45C2.77524 4.78218 3.1688 4.17732 3.678 3.678C4.17767 3.16923 4.78243 2.77573 5.45 2.525C6.088 2.277 6.812 2.11 7.878 2.06C8.944 2.013 9.283 2 12 2ZM12 7C10.6739 7 9.40215 7.52678 8.46447 8.46447C7.52678 9.40215 7 10.6739 7 12C7 13.3261 7.52678 14.5979 8.46447 15.5355C9.40215 16.4732 10.6739 17 12 17C13.3261 17 14.5979 16.4732 15.5355 15.5355C16.4732 14.5979 17 13.3261 17 12C17 10.6739 16.4732 9.40215 15.5355 8.46447C14.5979 7.52678 13.3261 7 12 7ZM18.5 6.75C18.5 6.41848 18.3683 6.10054 18.1339 5.86612C17.8995 5.6317 17.5815 5.5 17.25 5.5C16.9185 5.5 16.6005 5.6317 16.3661 5.86612C16.1317 6.10054 16 6.41848 16 6.75C16 7.08152 16.1317 7.39946 16.3661 7.63388C16.6005 7.8683 16.9185 8 17.25 8C17.5815 8 17.8995 7.8683 18.1339 7.63388C18.3683 7.39946 18.5 7.08152 18.5 6.75ZM12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9Z" fill="white"/>
</svg>
</a>
</li>
<li class="social__item">
<a href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.543 6.498C22 8.28 22 12 22 12C22 12 22 15.72 21.543 17.502C21.289 18.487 20.546 19.262 19.605 19.524C17.896 20 12 20 12 20C12 20 6.107 20 4.395 19.524C3.45 19.258 2.708 18.484 2.457 17.502C2 15.72 2 12 2 12C2 12 2 8.28 2.457 6.498C2.711 5.513 3.454 4.738 4.395 4.476C6.107 4 12 4 12 4C12 4 17.896 4 19.605 4.476C20.55 4.742 21.292 5.516 21.543 6.498ZM10 15.5L16 12L10 8.5V15.5Z" fill="white"/>
</svg>
</a>
</li>
</ul>
</div>
<span class="footer__title">
SKILLBOX <span class="reg">®</span> 2021
</span>
</footer>
</body>
</html>