-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
307 lines (304 loc) · 19.1 KB
/
index.html
File metadata and controls
307 lines (304 loc) · 19.1 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
<!DOCTYPE html>
<html lang="ru">
<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>Grids</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap-grid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<main>
<!--header-->
<header class="header">
<div class="container">
<div class="header__contain flex">
<div class="burger btn-reset">
<span class="burger__line"></span>
<span class="burger__line"></span>
<span class="burger__line"></span>
</div>
<a class="header__logo" href="#">
<img class="logo__pic" src="img/skillbox-logo.png" alt="логотип">
</a>
<div class="right flex">
<nav class="header__nav">
<ul class="header__list flex list-reset">
<li class="header__list--item">
<a class="header__link" href="glavnaya"> Главная </a>
</li>
<li class="header__list--item">
<a class="header__link" href="o-nas"> О нас </a>
</li>
<li class="header__list--item">
<a class="header__link" href="prepodavateli"> Преподаватели </a>
</li>
<li class="header__list--item">
<a class="header__link" href="kursy"> Курсы </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!--hero-->
<section class="section-hero">
<div class="container">
<div class="row">
<div class="section-hero__content col-lg-5 col-sm-7 col-12">
<h2 class="section-hero__title"> Курсы 3D моделирования </h2>
<p class="section-hero__text animate__animated animate__bounce">
Следует отметить, что существующая теория способствует повышению качества благоприятных перспектив. Не
следует, однако, забывать.
</p>
<button class="section-hero__btn btn-reset"> Выбрать курс </button>
</div>
<div class="section-hero__picture col-lg-7 col-sm-5 justify-content-center"></div>
</div>
</div>
</section>
<!--about-->
<section class="section-about">
<div class="container flex">
<div class="row section-about__wrap col-12">
<div class="about-wrapper flex">
<picture class="section-about__img">
<source media="(max-width: 576px)" srcset="img/576about.svg">
<source media="(max-width: 768px)" srcset="img/768about.svg">
<img class="about-texture" src="img/576about.svg" alt="Описание">
</picture>
<div class="section-about__wrapper flex">
<div class="section-about__text col-lg-12 col-sm-12 col-12">
<h2 class="section-about__top--title"> Преимущества обучения в skillbox </h2>
<p class="section-about__top--text">
Имеется спорная точка зрения, гласящая примерно следующее: акционеры крупнейших компаний, которые
представляют собой яркий пример континентально-европейского типа политической культуры, будут
рассмотрены исключительно в разрезе маркетинговых предпосылок.
</p>
</div>
</div>
</div>
<ul class="row about-list list-reset flex">
<li class="section-about__bottom--left flex col-lg-4 col-md-4">
<picture class="section-about__image">
<source media="(max-width: 576px)" srcset="img/eye-circle.svg">
<img class="section-about__icon" src="img/eye-circle.svg" alt="Иконка1">
</picture>
<p class="text__description">
Результат вашего обучения является самым важным для нас приоритетом
</p>
</li>
<li class="section-about__bottom--center flex col-lg-4 col-md-4">
<picture class="section-about__image">
<source media="(max-width: 992px)" srcset="img/eye-circle2.svg">
<img class="section-about__icon" src="img/eye-circle2.svg" alt="Иконка2">
</picture>
<div class="section-about__text">
<p class="text__description">
Лично познакомитесь с одним из своих будущих преподавателей
</p>
</div>
</li>
<li class="section-about__bottom--right flex col-lg-4 col-md-4">
<picture class="section-about__image">
<source media="(max-width: 1500px)" srcset="img/fingers.svg">
<img class="section-about__icon" src="img/fingers.svg" alt="Иконка3">
</picture>
<p class="text__description">
Значимость этих проблем очевидна, поэтому стоит всегда быть внимательным
</p>
</li>
</ul>
</div>
</div>
</section>
<!--teachers-->
<section class="section-teachers">
<div class="container">
<h2 class="section-teachers__title"> Преподаватели курсов </h2>
<ul class="row section-teachers__list flex list-reset">
<li class="section-teachers__list--item1 col-lg-3 col-md-6 col-sm-6">
<div class="section-teachers__card--1"></div>
<h3 class="section-teachers__list--title"> Владимир Петров </h3>
<p class="section-teachers__list--text">
Лишь непосредственные участники технического прогресса неоднозначны и будут в равной степени
предоставлены
сами себе.
</p>
</li>
<li class="section-teachers__list--item2 col-lg-3 col-md-6 col-sm-6">
<div class="section-teachers__card--2"></div>
<h3 class="section-teachers__list--title"> Денис Сергеев </h3>
<p class="section-teachers__list--text">
Безусловно, разбавленное изрядной долей эмпатии, рациональное мышление.
</p>
</li>
<li class="section-teachers__list--item3 col-lg-3 col-md-6 col-sm-6">
<div class="section-teachers__card--3"></div>
<h3 class="section-teachers__list--title"> Михаил Андреев </h3>
<p class="section-teachers__list--text">
Ясность нашей позиции очевидна: высокое качество позиционных исследований напрямую зависит от вывода.
</p>
</li>
<li class="section-teachers__list--item4 col-lg-3 col-md-6 col-sm-6">
<div class="section-teachers__card--4"></div>
<h3 class="section-teachers__list--title"> Константин Дмитриев </h3>
<p class="section-teachers__list--text">
Мы вынуждены отталкиваться от того, что существующая теория, в своём классическом представлении.
</p>
</li>
</ul>
</div>
</section>
<!--courses-->
<section class="section-courses">
<div class="container">
<h2 class="section-courses__title"> Курсы </h2>
<div class="courses__cards">
<ul class="row courses__list flex">
<li class="section-courses__card1 cards-col col-lg-6 col-sm-6">
<div class="card flex">
<div class="courses__image1"></div>
<div class="section-courses__time flex">
<img class="section-courses__time--icon" src="img/time.svg" alt="время обучения"><span
class="section-courses__time--text"> 60 часов </span>
</div>
<div class="courses__content">
<div class="card-wrapper">
<h3 class="section-courses__card--title">
Cinema 4d для начинающих
</h3>
<p class="section-courses__card--text">
Учитывая ключевые сценарии поведения, базовый вектор развития напрямую зависит от системы
массового
участия. Следует отметить, что сложившаяся структура организации напрямую зависит от стандартных
подходов.
</p>
</div>
<button class="section-courses__btn btn-reset"> Подробнее </button>
</div>
</div>
</li>
<li class="section-courses__card2 cards-col col-lg-6 col-sm-6">
<div class="card flex">
<div class="courses__image2"></div>
<div class="section-courses__time flex">
<img class="section-courses__time--icon" src="img/time.svg" alt="время обучения"><span
class="section-courses__time--text"> 40 часов </span>
</div>
<div class="courses__content">
<div class="card-wrapper">
<h3 class="section-courses__card--title">
Blender: продвинутый уровень
</h3>
<p class="section-courses__card--text2">
Но убеждённость некоторых оппонентов в значительной степени обусловливает важность форм
воздействия.
Внезапно, тщательные исследования конкурентов представлены.
</p>
</div>
<button class="section-courses__btn btn-reset"> Подробнее </button>
</div>
</div>
</li>
<li class="section-courses__card3 cards-col col-lg-6 col-sm-6">
<div class="card flex">
<div class="courses__image3"></div>
<div class="section-courses__time flex">
<img class="section-courses__time--icon" src="img/time.svg" alt="время обучения"><span
class="section-courses__time--text"> 40 часов </span>
</div>
<div class="courses__content">
<div class="card-wrapper">
<h3 class="section-courses__card--title">
Визуализация в 3ds Max
</h3>
<p class="section-courses__card--text3">
Повседневная практика показывает, что сложившаяся структура организации обеспечивает актуальность
кластеризации усилий.
</p>
</div>
<button class="section-courses__btn btn-reset"> Подробнее </button>
</div>
</div>
</li>
<li class="section-courses__card4 cards-col col-lg-6 col-sm-6">
<div class="card flex">
<div class="courses__image4"></div>
<div class="section-courses__time flex">
<img class="section-courses__time--icon" src="img/time.svg" alt="время обучения"><span
class="section-courses__time--text"> 80 часов </span>
</div>
<div class="courses__content">
<div class="card-wrapper">
<h3 class="section-courses__card--title">
Скульптинг в ZBrush
</h3>
<p class="section-courses__card--text">
Разнообразный и богатый опыт говорит нам, что граница обучения кадров требует определения и
уточнения
прогресса профессионального сообщества! В частности, постоянный количественный рост и сфера нашей
активности.
</p>
</div>
<button class="section-courses__btn btn-reset"> Подробнее </button>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<!--footer-->
<section class="section-footer">
<div class="container footer__container flex">
<div class="section-footer__social">
<a class="section-footer__social--link" href="#">
<svg class="section-footer__social--icon-fb" 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.402V21Z"
fill="white" />
</svg>
</a>
<a class="section-footer__social--link" href="#">
<svg class="section-footer__social--icon-twitter" 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>
<a class="section-footer__social--link" href="#">
<svg class="section-footer__social--icon-instagram" 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>
<a class="section-footer__social--link" href="#">
<svg class="section-footer__social--icon-youtube" 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>
</div>
</div>
<div class="section-footer__text">
<h3 class="section-footer__title">
SKILLBOX <span class="logo__copy">®</span> 2021
</h3>
</div>
</section>
</main>
<script src="js/index.js"></script>
</body>
</html>