-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
507 lines (422 loc) · 31.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
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
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
<!DOCTYPE html>
<!--Указание языка: -->
<html lang="ru">
<head>
<!--Кодировка страницы (в HTML5): -->
<meta charset="utf-8">
<!--Настройки адаптивности страницы: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Заголовок страницы в браузере: -->
<title>Итоговое задание к курсу «Современные технологии верстки»</title>
<!--Подключение шрифтов Philosopher и Roboto: -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Roboto:ital,wght@0,400;0,500;1,400&display=swap"
rel="stylesheet">
<!--Подключение библиотеки иконок Bootstrap: -->
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"> -->
<!--Подключение шрифтов Font Awesome: -->
<!--<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--Подключение стилевых файлов: -->
<!--Файл Bootstrap со стилями адаптивной сетки из 12 колонок. Он также содержит
библиотеку сброса Reboot.css, основанную на Normalize.css. Bootstrap
использует ее для сброса стилей браузера по умолчанию и придания
веб-страницам единообразного вида: -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Файл со стилями пользователя загружается последним и может переопределить
стили любых библиотек: -->
<link rel="stylesheet" href="css/styles.css">
<!--Подключение библиотек JavaScript (Bootstrap Bundle with Popper).
Атрибут defer откладывает выполнение скрипта до тех пор, пока
вся страница не будет загружена полностью: -->
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</head>
<body>
<!--Шапка с навигационной панелью (Header with Navigation Bar) -->
<header>
<div class="header-top">
<!-- container-fluid занимает всю доступную область просмотра при любых значениях ширины экрана: -->
<div class="container-fluid">
<div class="row">
<div class="col-8">
<a href="#" target="_blank" class="header__link">Перейти на сайт образовательного
центра</a>
</div>
<div class="col-4">
<ul class="nav justify-content-end socialmenu">
<li class="nav-item socialmenu_item">
<a href="#" title="ВКонтакте" target="_blank">
<i class="fab fa-vk align-middle"></i>
</a>
</li>
<li class="nav-item socialmenu_item">
<a href="#" title="Facebook" target="_blank">
<i class="fab fa-facebook-f align-middle"></i>
</a>
</li>
<li class="nav-item socialmenu_item">
<a href="#" title="Instagram" target="_blank">
<i class="fab fa-instagram align-middle"></i>
</a>
</li>
<li class="nav-item socialmenu_item">
<a href="#" title="Twitter" target="_blank">
<i class="fab fa-twitter align-middle"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!--Навигационная панель (Navigation Bar) -->
<nav>
<ul class="nav justify-content-end header__menu">
<li class="nav-item">
<a class="nav-link" href="#about">
О КУРСЕ
</a>
</li>
<li class="nav-item">
<i class="fas fa-circle"></i>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
ПРЕПОДАВАТЕЛИ
</a>
</li>
<li class="nav-item">
<i class="fas fa-circle"></i>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">
ОТЗЫВЫ
</a>
</li>
<li class="nav-item">
<i class="fas fa-circle"></i>
</li>
<li class="nav-item">
<a class="nav-link" href="#questions">
ВОПРОСЫ
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Тег <main> предназначен для основного содержимого документа (основной контент). Контент внутри
элемента должен быть уникальным для всего документа и не должен содержать элементы, которые
повторяются в различных документах (боковые панели, навигационные ссылки, информация об авторских
правах, логотип сайта, формы поиска и тому подобное). Допускается использование элемента только
один раз в одном документе. -->
<main>
<!--Главный раздел (Main Section) -->
<section id="main" class="text-end">
<!-- container-fluid занимает всю доступную область просмотра при любых значениях ширины экрана: -->
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="main__header">Дизайн и верстка полиграфической продукции<br>в ADOBE
ILLUSTRATOR
</h1>
<p>Повышение квалификации, 35 ак. часов</p>
<button class="rounded-pill main__btn">Записаться на курс</button>
</div>
</div>
</div>
</section>
<!-- О курсе (About Section) -->
<section id="about">
<!-- container-fluid занимает всю доступную область просмотра при любых значениях ширины экрана: -->
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h2 class="section__header">
О КУРСЕ
</h2>
<div class="about__description">
<p class="about__description_mb">На курсе Вы научитесь работать
с компьютерной программой Adobe Illustrator, выполняя реальные проекты
с первого дня обучения. Понимание теории в основном происходит через практику.
Шаг за шагом, в течение обучения, Вы создадите свое портфолио,
позволяющее начать работать сразу после окончания курса.
</p>
<p class="about__description_spacing mb-0">Очное обучение проходит по расписанию
в вечерние часы (18.30–21.50) 1-2 раза в неделю.
</p>
<p class="text-center">
Дистанционное обучение — по индивидуальному календарному плану.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-4 text-center about__info">
<img class="about__info_image" src="images/icon-diploma.png" width="110" height="99"
alt="Выдаваемый документ">
<h3 class="about__info_header">Выдаваемый документ</h3>
<p class="about__info_details">Удостоверение о повышении<br>квалификации</p>
</div>
<div class="col-4 text-center about__info">
<img class="about__info_image" src="images/icon-graduate_cap.png" width="90" height="119"
alt="Форма обучения">
<h3 class="about__info_header">Форма обучения</h3>
<p class="about__info_details">Очная<br>Дистанционная</p>
</div>
<div class="col-4 text-center about__info">
<img class="about__info_image" src="images/icon-cash.png" width="90" height="90"
alt="Стоимость обучения">
<h3 class="about__info_header">Стоимость обучения</h3>
<p class="about__info_details">Очная форма: 10 000 р.<br>Дистанционная форма:
7 000 р.<br>Возможность поэтапной оплаты</p>
</div>
</div>
</div>
</section>
<!-- Преимущества (Features Section) -->
<section id="features">
<!-- container-fluid занимает всю доступную область просмотра при любых значениях ширины экрана: -->
<div class="container-fluid">
<div class="row">
<div class="col-12 d-flex flex-column align-items-center">
<h2 class="section__header">
ПРЕИМУЩЕСТВА
</h2>
<!-- Выравнивание можно добавить и здесь: d-flex flex-column flex-wrap align-content-center -->
<ul class="features__list">
<li><i class="far fa-check-circle features__list-bullet"></i>Обучение в престижном ВУЗе</li>
<li><i class="far fa-check-circle features__list-bullet"></i>Гибкие условия оплаты</li>
<li><i class="far fa-check-circle features__list-bullet"></i>Возможность тестового периода
обучения</li>
<li><i class="far fa-check-circle features__list-bullet"></i>Индивидуальный график</li>
<li><i class="far fa-check-circle features__list-bullet"></i>Портфолио по окончании курса
</li>
<li><i class="far fa-check-circle features__list-bullet"></i>Практикующие преподаватели</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Вопросы и ответы (Questions Section) -->
<section id="questions">
<!-- container-fluid занимает всю доступную область просмотра при любых значениях ширины экрана: -->
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h2 class="section__header">
ВОПРОСЫ
</h2>
<div class="accordion accordion-flush" id="questions__accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false"
aria-controls="flush-collapseOne">
Могу ли я оплатить не всю сумму сразу, а платить
в течение всего срока обучения? И как происходит оплата?
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#questions__accordion">
<div class="accordion-body">Да, конечно! У нас предусмотрена поэтапная оплата
обучения. Вы можете разбить сумму на 2-8 частей. График платежей
будет указан при заключении договора. Стоимость курса при этом остается
постоянной на весь срок обучения. Реквизиты счета будут указаны
в договоре на обучение.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false"
aria-controls="flush-collapseTwo">
Отличается ли диплом при прохождении курса в очной форме
и в режиме экстерната?
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#questions__accordion">
<div class="accordion-body">Нет, дипломы не отличаются на основании
приказа Министерства образования и науки Российской Федерации
от 9 января 2014 г. N 2 г. Москва
«Об утверждении Порядка применения организациями, осуществляющими
образовательную деятельность, электронного обучения, дистанционных
образовательных технологий при реализации образовательных программ».
Посмотреть, как выглядит диплом, можно перейдя по ссылке
<a href="https://design.ifmo.ru/diploms/?is_page=prof_new" target="_blank"
class="questions__link">https://design.ifmo.ru/diploms/?is_page=prof_new</a>.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false"
aria-controls="flush-collapseThree">
Когда начинается дистанционное обучение?
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#questions__accordion">
<div class="accordion-body">Дистанционное обучение по любому курсу является
индивидуальным — вы и преподаватель. Поэтому начать
обучение можно в любое удобное для Вас время! Вас подключат к системе
дистанционного обучения сразу после заключения договора и оплаты первого
этапа. Возможно предоставление тестового доступа.</div>
</div>
</div>
</div>
<div class="questions__knowmore text-center">Не нашли ответа на свой вопрос?</div>
<div class="text-center"><a href="#" target="_blank" class="questions__asklink ">Спросить
здесь</a>
</div>
</div>
</div>
</div>
</section>
<!-- Отзывы (Reviews Section) -->
<section id="reviews">
<!-- container-fluid занимает всю доступную область просмотра при любых значениях ширины экрана: -->
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h2 class="section__header">
ОТЗЫВЫ
</h2>
<div id="reviews__carousel_controls" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active container-fluid reviews__item text-center">
<p class="reviews__item_content">
«Будучи мамой двух детей, я выбрала дистанционную форму обучения
по курсу „Дизайн и верстка полиграфической продукции“
и училась ежедневно, пока дети были в школе. Обучение заняло
у меня чуть больше 6 месяцев. Очень понравилась практическая
направленность обучения — ты с первого дня творишь! Сначала
простые объекты, а потом целые брендбуки. Здорово, что есть видео-поддержка
одного из самых сложных курсов — CorelDraw. Очень благодарна
Александру Викторовичу за оперативность, справедливую критику и очень
полезные советы. Я считаю его своим наставником и даже закончив курс,
иногда прошу его оценить мои работы, но уже не учебные,
а настоящие. Меня очень увлек фриланс. Он позволяет совмещать работу
и семейные хлопоты, позволяет развиваться и самореализоваться. Одним
словом — СПАСИБО!»
</p>
<img class="reviews__item_photo" src="images/voroncova.jpg" width="110" height="110"
alt="Ольга Воронцова">
<p class="reviews__item_person">
Ольга Воронцова<br>выпуск 2015
</p>
</div>
<div class="carousel-item container-fluid reviews__item text-center">
<p class="reviews__item_content">
«Я только что закончила курс по специальности „Дизайн
и верстка полиграфической продукции“ — сейчас я жду,
пока оформят официальный документ. Понятные и подробные лекции, развернутая
обратная связь, достаточно строгий приём работ — всё это не для
того, чтобы ученики „поучились“, но для того, чтобы научились.
Дипломная работа показала, как всё связано, в процессе её написания
я не раз обращалась к лекциям курса. Практические работы
интересные и полезные — после них ты действительно можешь
что-то сделать. И сделать хорошо. Курс „Дизайн и верстка
полиграфической продукции“ дал мне не только знания для освоения
новой специальности, но и уверенность в том, что всё получится.
Спасибо составителям курса и преподавателям: Александру Викторовичу
Флёрову, Юлии Безбах и Дарье Поляковой.»
</p>
<!-- Image source: https://design.itmo.ru/courses/illustrator/?page=#reviewPage -->
<img class="reviews__item_photo" src="images/policarpova.jpg" width="110"
height="110" alt="Татьяна Поликарпова">
<p class="reviews__item_person">
Татьяна Поликарпова<br>выпуск 2020
</p>
</div>
</div>
<!-- Кнопка, прокручивающая карусель влево: -->
<button class="carousel-control-prev align-items-start" type="button"
data-bs-target="#reviews__carousel_controls" data-bs-slide="prev">
<i class="fas fa-angle-left reviews__carousel_icon"></i>
</button>
<!-- Кнопка, прокручивающая карусель вправо: -->
<button class="carousel-control-next align-items-start" type="button"
data-bs-target="#reviews__carousel_controls" data-bs-slide="next">
<i class="fas fa-angle-right reviews__carousel_icon"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Контакты (Contacts Section) -->
<section id="contacts">
<!-- container-fluid занимает всю доступную область просмотра при любых значениях ширины экрана: -->
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h2 class="section__header">
СВЯЗАТЬСЯ С НАМИ
</h2>
<div class="contacts__site d-flex flex-row flex-wrap justify-content-between">
Образовательный центр
<img class="contacts_image" src="images/arrow.svg" width="251" height="45"
alt="Перейти на основной сайт">
<a class="contacts__site_link" href="#" target="_blank">Перейти на основной сайт</a>
</div>
<div class="contacts__social text-center">
<h3 class="contacts__social__title">Мы в соц. сетях:</h3>
<ul class="nav justify-content-center socialmenu">
<li class="nav-item socialmenu_item">
<a href="#" title="ВКонтакте" target="_blank">
<i class="fab fa-vk align-middle"></i>
</a>
</li>
<li class="nav-item socialmenu_item">
<a href="#" title="Facebook" target="_blank">
<i class="fab fa-facebook-f align-middle"></i>
</a>
</li>
<li class="nav-item socialmenu_item">
<a href="#" title="Instagram" target="_blank">
<i class="fab fa-instagram align-middle"></i>
</a>
</li>
<li class="nav-item socialmenu_item">
<a href="#" title="Twitter" target="_blank">
<i class="fab fa-twitter align-middle"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<!--Подвал (Footer) -->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<p class="footer__copyright">© 2018 Образовательный центр</p>
<p class="footer__copyright footer__copyright_mb">Любое использование материалов допускается только
при соблюдении правил перепечатки и при наличии гиперссылки</p>
<a href="#" target="_blank" class="footer__link">Политика организации в отношении обработки
персональных данных</a>
</div>
</div>
</div>
</footer>
</body>
</html>