Repository navigation
Expand file tree
/
Copy pathIndex.html
More file actions
332 lines (316 loc) · 21.3 KB
/
Copy pathIndex.html
File metadata and controls
332 lines (316 loc) · 21.3 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
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
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skillbox</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/media.css">
<link rel="icon" type="image/x-icon" href="./img/favicon.svg">
</head>
<body class="page">
<header class="header">
<div class="container header__container flex">
<a class="header__logo" href="#">
<img class="header__logo-img" src="img/header-logo.svg" alt="Логотип">
</a>
<nav class="nav flex">
<ul class="nav__list list-reset flex">
<li class="nav__item">
<a class="nav__link" href="#home">Главная</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#about-us">О нас</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#teachers">Преподаватели</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#courses">Курсы</a>
</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<!-- <div class="container hero__container">
<div class="row">
<div class="col-xl-5 col-md-6 col-sm-8 col-12 hero__left">
<h1 class="hero__title">Курсы 3D моделирования</h1>
<p class="hero__descr">Следует отметить, что существующая теория способствует повышению качества
благоприятных перспектив. Не следует, однако, забывать.</p>
<button class="btn hero__btn">Выбрать курс</button>
</div>
<div class="col-xl-7 col-md-6">
<div class="hero__right"></div>
</div>
</div>
</div> -->
<div class="container hero__container">
<div class="hero__wrapper">
<h1 class="hero__title">Курсы 3D моделирования</h1>
<p class="hero__descr">Следует отметить, что существующая теория способствует повышению качества
благоприятных перспектив. Не следует, однако, забывать.</p>
<button class="btn hero__btn">Выбрать курс</button>
</div>
</div>
</section>
<section class="about-us">
<div class="container about-us__container">
<div class="row about-us__group">
<div class="col-xl-2 col-md-4 col-sm-4 about-us__left"></div>
<div class="col-xl-7 col-md-8 col-sm-8 about-us__right">
<h1 class="about-us__title">Преимущества обучения в skillbox</h1>
<p class="about-us__descr">Имеется спорная точка зрения, гласящая примерно следующее: акционеры крупнейших
компаний, которые представляют собой яркий пример континентально-европейского типа политической культуры,
будут рассмотрены исключительно в разрезе маркетинговых предпосылок.</p>
</div>
</div>
<ul class="row about-us__list list-reset">
<li class="col-xl-4 col-md-4 col-sm-4 about-us__item about-us__item-img1">
<p class="about-us__item-descr">
Результат вашего обучения является самым важным для нас приоритетом
</p>
</li>
<li class="col-xl-4 col-md-4 col-sm-4 about-us__item about-us__item-img2">
<p class="about-us__item-descr">
Лично познакомитесь с одним из своих будущих преподавателей
</p>
</li>
<li class="col-xl-4 col-md-4 col-sm-4 about-us__item about-us__item-img3">
<p class="about-us__item-descr">
Значимость этих проблем очевидна, поэтому стоит всегда быть внимательным
</p>
</li>
</ul>
</div>
</section>
<section class="teachers">
<div class="container teachers__container">
<div class="row">
<div class="col-xl-5 col-md-8 col-sm-11 col-12">
<h2 class="teachers__title">Преподаватели курсов</h2>
</div>
</div>
<ul class="row teachers__list list-reset">
<li class="col-xl-3 col-md-6 col-sm-6 col-12 teachers__item">
<picture>
<source class="card__img" srcset="/img/t-1.png" media="(min-width: 1200px)">
<source class="card__img" srcset="/img/t-1_768.png" media="(min-width: 768px)">
<source class="card__img" srcset="/img/t-1_576.png" media="(min-width: 576px)">
<source class="card__img" srcset="/img/t-1_320.png" media="(min-width: 320px)">
<img class="card__img" src="/img/t-1.png" alt="Владимир Петров">
</picture>
<h3 class="teachers__item-title">
Владимир Петров
</h3>
<p class="teachers__item-descr">
Лишь непосредственные участники технического прогресса неоднозначны и будут в равной степени предоставлены
сами себе.
</p>
</li>
<li class="col-xl-3 col-md-6 col-sm-6 col-12 teachers__item">
<picture>
<source class="card__img" srcset="/img/t-2.png" media="(min-width: 1200px)">
<source class="card__img" srcset="/img/t-2_768.png" media="(min-width: 768px)">
<source class="card__img" srcset="/img/t-2_576.png" media="(min-width: 576px)">
<source class="card__img" srcset="/img/t-2_320.png" media="(min-width: 320px)">
<img class="card__img" src="/img/t-2.png" alt="Владимир Петров">
</picture>
<h3 class="teachers__item-title">
Денис Сергеев
</h3>
<p class="teachers__item-descr">
Безусловно, разбавленное изрядной долей эмпатии, рациональное мышление.
</p>
</li>
<li class="col-xl-3 col-md-6 col-sm-6 col-12 teachers__item">
<picture>
<source class="card__img" srcset="/img/t-3.png" media="(min-width: 1200px)">
<source class="card__img" srcset="/img/t-3_768.png" media="(min-width: 768px)">
<source class="card__img" srcset="/img/t-3_576.png" media="(min-width: 576px)">
<source class="card__img" srcset="/img/t-3_320.png" media="(min-width: 320px)">
<img class="card__img" src="/img/t-3.png" alt="Владимир Петров">
</picture>
<h3 class="teachers__item-title">
Михаил Андреев
</h3>
<p class="teachers__item-descr">
Ясность нашей позиции очевидна: высокое качество позиционных исследований напрямую зависит от вывода.
</p>
</li>
<li class="col-xl-3 col-md-6 col-sm-6 col-12 teachers__item">
<picture>
<source class="card__img" srcset="/img/t-4.png" media="(min-width: 1200px)">
<source class="card__img" srcset="/img/t-4_768.png" media="(min-width: 768px)">
<source class="card__img" srcset="/img/t-4_576.png" media="(min-width: 576px)">
<source class="card__img" srcset="/img/t-4_320.png" media="(min-width: 320px)">
<img class="card__img" src="/img/t-4.png" alt="Владимир Петров">
</picture>
<h3 class="teachers__item-title">
Константин Дмитриев
</h3>
<p class="teachers__item-descr">
Мы вынуждены отталкиваться от того, что существующая теория, в своём классическом представлении.
</p>
</li>
</ul>
</div>
</section>
<section class="course">
<div class="container course__container">
<h2 class="course__title">Курсы</h2>
<ul class="row course__list list-reset">
<li class="col-xl-6 col-md-6 col-sm-6 col-12 course__grow">
<div class="course__content-group course__item-img1">
<div>
<h3 class="course__item-title">Cinema 4d для начинающих</h3>
<p class="course__item-descr">Учитывая ключевые сценарии поведения, базовый вектор развития напрямую зависит от системы массового участия. Следует отметить, что сложившаяся структура организации напрямую зависит от стандартных подходов.</p>
</div>
<button class="btn btn-reset course__btn">Подробнее</button>
</div>
<span class="span__text">60 часов</span>
</li>
<li class="col-xl-6 col-md-6 col-sm-6 col-12 course__grow">
<div class="course__content-group course__item-img2">
<div>
<h3 class="course__item-title">Blender: продвинутый уровень</h3>
<p class="course__item-descr">Но убеждённость некоторых оппонентов в значительной степени обусловливает важность форм воздействия. Внезапно, тщательные исследования конкурентов представлены.</p>
</div>
<button class="btn btn-reset course__btn">Подробнее</button>
</div>
<span class="span__text">60 часов</span>
</li>
<li class="col-xl-6 col-md-6 col-sm-6 col-12 course__grow">
<div class="course__content-group course__item-img3">
<div>
<h3 class="course__item-title">Визуализация в 3ds Max</h3>
<p class="course__item-descr">Повседневная практика показывает, что сложившаяся структура организации обеспечивает актуальность кластеризации усилий.</p>
</div>
<button class="btn btn-reset course__btn">Подробнее</button>
</div>
<span class="span__text">60 часов</span>
</li>
<li class="col-xl-6 col-md-6 col-sm-6 col-12 course__grow">
<div class="course__content-group course__item-img4">
<div>
<h3 class="course__item-title">Скульптинг в ZBrush</h3>
<p class="course__item-descr">Разнообразный и богатый опыт говорит нам, что граница обучения кадров требует определения и уточнения прогресса профессионального сообщества! В частности, постоянный количественный рост и сфера нашей активности.</p>
</div>
<button class="btn btn-reset course__btn">Подробнее</button>
</div>
<span class="span__text">60 часов</span>
</li>
<!-- <li class="col-xl-6 col-md-6 col-sm-6 col-12 course__grow">
<div class="course__item course__item-img1"></div>
<div class="course__content-group">
<span class="span__text">60 часов</span>
<h3 class="course__item-title">Cinema 4d для начинающих</h3>
<p class="course__item-descr">Учитывая ключевые сценарии поведения, базовый вектор развития напрямую
зависит
от системы массового участия. Следует отметить, что сложившаяся структура организации напрямую зависит
от
стандартных подходов.</p>
<button class="btn btn-reset course__btn">Подробнее</button>
</div>
</li>
<li class="col-xl-6 col-md-6 col-sm-6 col-12 course__grow">
<div class="course__item course__item-img2"></div>
<div class="course__content-group">
<span class="span__text">40 часов</span>
<h3 class="course__item-title">Blender: продвинутый уровень</h3>
<p class="course__item-descr">Но убеждённость некоторых оппонентов в значительной степени обусловливает
важность форм воздействия. Внезапно, тщательные исследования конкурентов представлены.</p>
<button class="btn btn-reset course__btn">Подробнее</button>
</div>
</li>
<li class="col-xl-6 col-md-6 col-sm-6 col-12 course__grow">
<div class="course__item course__item-img3"></div>
<div class="course__content-group">
<span class="span__text">40 часов</span>
<h3 class="course__item-title">Визуализация в 3ds Max</h3>
<p class="course__item-descr">Повседневная практика показывает, что сложившаяся структура организации
обеспечивает актуальность кластеризации усилий.</p>
<button class="btn btn-reset course__btn">Подробнее</button>
</div>
</li>
<li class="col-xl-6 col-md-6 col-sm-6 col-12 course__grow">
<div class="course__item course__item-img4"></div>
<div class="course__content-group">
<span class="span__text">80 часов</span>
<h3 class="course__item-title">Скульптинг в ZBrush</h3>
<p class="course__item-descr">Разнообразный и богатый опыт говорит нам, что граница обучения кадров
требует
определения и уточнения прогресса профессионального сообщества! В частности, постоянный количественный
рост и сфера нашей активности.</p>
<button class="btn btn-reset course__btn">Подробнее</button>
</div>
</li> -->
</ul>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__top">
<div class="row">
<ul class="list-reset footer-list">
<li class="footer-list__item">
<a href="#" class="footer-list__link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_51_12)">
<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" />
</g>
</svg>
</a>
</li>
<li class="footer-list__item">
<a href="#" class="footer-list__link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_51_15)">
<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" />
</g>
</svg>
</a>
</li>
<li class="footer-list__item">
<a href="#" class="footer-list__link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_51_18)">
<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" />
</g>
</svg>
</a>
</li>
<li class="footer-list__item">
<a href="#" class="footer-list__link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_51_21)">
<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" />
</g>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="footer__bottom">
<div class="row">
<span class="footer__text">
SKILLBOX <span class="footer__reg">®</span> 2023
</span>
</div>
</div>
</footer>
</body>
</html>