Розробка сайту за допомогою стандартних інструментів створення та фреймворку Django на мові програмування Python»  за спеціальністю 126 «Інформаційні системи та технології

Охрименко, Дмитро Ігорович
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/6916
Назва:	Розробка сайту за допомогою стандартних інструментів створення та фреймворку Django на мові програмування Python» за спеціальністю 126 «Інформаційні системи та технології
Автори:	Ланських , Євген Володимирович Охрименко, Дмитро Ігорович
Ключові слова:	фреймворк;Django;Python;веб-проєкт;сайт;розробка
Дата публікації:	14-чер-2022
Короткий огляд (реферат):	Більшість людей, з кожним днем, кількість яких збільшуються, задумуються над створення свого особистого сайту. Виходячи з цього, було вирішено створити сайт, на якому надається допомога по створенню дизайну сайта. Актуальність полягає в тому, що ця сфера розвивається досить стрімко та набирає велику аудиторію. Чим раніше розпочати з цим розбиратися, тим краще. Також можна звернути увагу на збільшення вакансій в сфері розробки дизайну, а в більшості розробки самих сайтів. Метою кваліфікаційної роботи являється розробка сайту за допомогою стандартних інструментів створення та фреймворку Django на мові програмування Python. Для реалізації поставленої мети слід вирішити наступні завдання: • проаналізувати особливості роботи сайтів надання послуг розробки сайтів; • провести аналіз та огляд існуючих сайтів (зовнішній вигляд, структура, актуальні інструменти розробки); • переглянувши варіанти, зробити висновок, актуальності та зручності розробки; • реалізувати сайт.
URI (Уніфікований ідентифікатор ресурсу):	https://er.chdtu.edu.ua/handle/ChSTU/6916
Розташовується у зібраннях:	126 Інформаційні системи та технології (Web-технології, web-дизайн)
Файли цього матеріалу:
Файл	Опис	Розмір	Формат
РЕП_БАК_Охріменко_WEBС-2011.pdf Restricted Access		1.93 MB	Adobe PDF	Переглянути/Відкрити Запит копії
Показати повний опис матеріалу Перегляд статистики
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
 2
 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛГІЙ І СИСТЕМ 
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ 
 
КВАЛІФІКАЦІЙНА РОБОТА БАКАЛАВРА 
 
на тему: «Розробка сайту за допомогою стандартних інструментів 
створення та фреймворку Django на мові програмування Python»  
за спеціальністю 126 «Інформаційні системи та технології» 
 
Виконавець роботи: студент групи WEBС-2011 Охрименко Дмитро Ігорович 
 
Кваліфікаційну роботу 
захищено на засіданні ЕК 
з оцінкою           ___________   «___» червень 2022 р. 
 
Науковий керівник         ___________          д.т.н., доцент Ланських Є.В. 
             (підпис)  (науковий ступінь, вчене звання, прізвище та ініціали) 
 
Голова комісії                   ___________          ____________________________ 
             (підпис)  (науковий ступінь, вчене звання, прізвище та ініціали) 
 
Засвідчую, що у цій дипломній роботі немає 
запозичень з праць інших авторів 
без відповідних посилань  
 
Студент _____________ 
     (підпис) 
 
Черкаси – 2022 року 
 
 
 
 
 
ЗМІСТ 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ ТА СКОРОЧЕНЬ………………………3 
ВСТУП……………………………………………………………………………4 
1. ОСНОВНІ ЕТАПИ РОБОТИ НАД ВЕБ-ПРОЕКТОМ……………………..5 
1.1. Ідея та структура сайту………………………………………………..5 
1.2. Дослідження……………………………………………………………5 
1.3. Ескіз сайту або прототипування……………………………………...7 
1.4. Зміст…………………………………………………………………….8 
1.5. Дизайн…………………………………………………………………..9 
1.6. Реалізація……………………………………………………………...11 
1.7. Підсумок………………………………………………………………12 
2. Django………………………………………………………………………...14 
2.1. Що таке Django……………………………………………………….14 
2.2. Поява…………………………………………………………………..16 
2.3. Як працює Django…………………………………………………….16 
2.4. Структура Django……………………………………………………..18 
2.5. Встановлення Django…………………………………………………19 
2.6. Налаштування проекту на Django………………………………..….20 
2.7. Коли використовують і не використовують Django………………..21 
3. Представлення розробленого сайту………………………………………...25 
3.1. Структура та прототипування………………………………………..23 
3.2. Зовнішня складова сайту……………………………………………..32 
3.3. Компіляція проекту…………………….……………………………..32 
3.4. Тестування сайту……………………………………………………...33 
ВИСНОВКИ……………………………………………………………………...35 
ДОДАТКИ………………………………………………………………………..36 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ……………………………………….77 
 3 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  3 
 
ПЕРЕЛІК  УМОВНИХ  ПОЗНАЧЕНЬ  ТА СКОРОЧЕНЬ 
HTML – стандартна мова розмітки для розробки веб-сторінок. 
CSS – каскадні таблиці стилів. 
JavaScript – динамічна, об'єктно-орієнтована прототипна мова 
програмування. 
Django – високорівневий відкритий Python-фреймворк (програмний 
каркас) для розробки веб-систем. 
CMS – інформаційна система або комп'ютерна програма для 
забезпечення та організації спільного процесу створення, редагування та 
керування контентом. 
HTTP – протокол який призначений для надсилання та отримання 
запитів. 
URL –  це адреса, за якою знаходиться інтернет сторінка на якій 
знаходиться певний контент. 
 
 4 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  4 
 
ВСТУП 
Більшість людей, з кожним днем, кількість яких збільшуються, 
задумуються над створення свого особистого сайту. Виходячи з цього, було 
вирішено створити сайт, на якому надається допомога по створенню дизайну 
сайта. 
Актуальність полягає в тому, що ця сфера розвивається досить стрімко 
та набирає велику аудиторію. Чим раніше розпочати з цим розбиратися, тим 
краще. Також можна звернути увагу на збільшення вакансій в сфері розробки 
дизайну, а в більшості розробки самих сайтів. 
Метою кваліфікаційної роботи являється розробка сайту за допомогою 
стандартних інструментів створення та фреймворку Django на мові 
програмування Python. 
Для реалізації поставленої мети слід вирішити наступні завдання: 
 проаналізувати особливості роботи сайтів надання послуг 
розробки сайтів; 
 провести аналіз та огляд існуючих сайтів (зовнішній вигляд, 
структура, актуальні інструменти розробки); 
 переглянувши варіанти, зробити висновок, актуальності та 
зручності розробки; 
 реалізувати сайт. 
  
 5 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  5 
 
1. ОСНОВНІ ЕТАПИ РОБОТИ НАД ВЕБ-ПРОЕКТОМ 
1.1. Ідея та структура сайту 
Перш ніж братися за розробку повноцінного веб-проекту, потрібно 
продумати саму її ідею та структуру . 
В першу чергу потрібно звернути увагу, що саме буде розроблятися. У 
моєму випадку це сайт з надання послуг створення дизайну веб-орієнтованих 
систем. Відразу ж можна зрозуміти, що такий сайт повинен містити в собі певний 
перелік послуг, які надаються та контактну інформацію для зручного звернення 
в майбутньому. Потрібно більш детально звернути увагу як саме краще подати 
ті самі послуги та саму інформацію. Виходячи з цього, буде не достатньо 
невеликої кількості картинок з підписами. Це повинно складатися з детальним 
пояснення тої послуги, яка надається, щоб користувач мав повну картину того як 
саме відбувається створення того чи іншого дизайну. Тому зосереджується увага 
на більш детальному поясненні послуг.  
Велика кількість анімацій, прикрас і спецефектів, здавалося б збільшать 
зацікавленість, але як показує практика, користувачі просто забувають для чого 
взагалі вони відвідали сайт і таким чином відволічуться від головної суті, яку 
повинен передавати сайт, а саме надання послуг зі створення дизайну. 
Для зручності я використовував звичайний текстовий редактор, в якому 
записував свою структуру сайту у вигляді списку.  
 Це досить зручно і в майбутньому зіграє свою ключову роль, а саме при 
дослідженні інших веб-ресурсів зі спільною тематикою. 
1.2. Дослідження 
Дослідження — це процес перетворення із неструктурованої так би 
мовити ідеї в певний ланцюг дій, які матимуть передбачуваний результат в 
майбутньому. 
Визначившись з ідеєю сайту та його структурою, було переглянуто сайти 
схожої тематики з метою їх аналізу для запозичення хороших рішень. В першу 
чергу оцінювались не зовнішній вигляд, а їх зміст. До уваги приділялося те як 
 6 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  6 
 
саме і з чого складається меню сайту, що було винесено на головну сторінку, які 
розділи були розташовані на сайті, що на них пишуть і як. 
Якщо подивитися на людей з великим досвідом роботи в веб-дизайні, 
можна спостерігати що вони регулярно переглядають нові сайти, стежать за 
тенденціями, знаходять натхнення в роботах колег. Деякі люди думають, що 
надихнутися — це скопіювати сайт повністю і видати його за свою роботу. Та це 
не так. Для того щоб і справді зробити щось своє, потрібно просто дивитися, як 
виглядає сучасний інтернет взагалі, що зараз модно і класно, і на практиці 
створювати щось своє. 
 
Рисунок 1.1 – Приклад сайту 
 
Рисунок 1.2 – Приклад сайту 
 7 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  7 
 
Потрібно прислуховуватись до себе і знати, що саме вам подобається. Це 
може бути будь що. Наприклад: вдалі фотографії, гарна друкарня чи поєднання 
кольорів. Для кращого розуміння можна переглянути роботи інших авторів. 
Одні із провідних ресурсів для перегляду прикладів: 
1. Httpster.net 
2. Awwwards.com 
3. Siteinspire.com 
4. Onepagelove.com 
Якщо підійти до питання теоретично, можна сказати, що кожне рішення 
має бути підтверджено даними чи дослідженнями. Але не варто захоплюватись. 
Вартість досліджень має бути меншою, ніж вартості впровадження, 
інакше краще проводити «перевірку боєм» — ставити експерименти на 
реальних користувачах. 
Після того, як було проведено дослідження можна переходити до 
наступного етапу. А саме до етапу створення ескізу або прототипування сайту. 
1.3. Ескіз сайту або прототипування 
Для того щоб почати етап прототипування, достатньо взяти аркуш 
паперу, два фломастери: чорний і якийсь іншого кольору для контрасту, після 
чого намалювати схему, що за чим йтиметься. Прототип повинен вміщати в собі 
головні елементи які будуть розташовуватись на сторінках сайту.  
Для малювання прототипу, використовувався базовий набір стандартних 
елементів, які включаються в прототип. Загалом текст зображувався прямими 
лініями, заголовок має трохи товщі ніж в звичайному тексті. Картинки 
зображував у вигляді прямокутника з перекресленими лініями, а елементи за 
допомогою яких відбувається  взаємодія,  як маленькі кнопочки. "Шапка" у 
вигляді смужки зверху. 
Сам прототип намагався малювати акуратно, так як буде легше 
застосовувати його при створенні дизайну.  
 8 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  8 
 
 
Рисунок 1.3 – Приклад прототипу 
Перед початком створення дизайну потрібно подумати над контентом, 
який буде використовуватись. 
1.4. Зміст 
Перш ніж  був створений дизайн, потрібно подбати про контент, тому що 
без нього доведеться все переробляти. Спочатку було зібрано всі матеріали, які 
в майбутньому можливо швидко використати при створенні зовнішнього 
вигляду сторінок. 
Бажано було також написати у текстовому редакторі все що могло б 
стосуватися тематики сайту. Так як і на початку, робота з текстом зручна в 
текстовому редакторі та набагато швидше відбувається редагування тексту, що 
в майбутньому допоможе робити дизайн набагато легше з готовим текстом. 
Під час написання текстів, я користувався наступною схемою: 
 9 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  9 
 
 Написання короткого текст про себе, свою галузь. Це має бути одна 
фраза, яка чітко та ємно формулює, чим саме займаються на том чи 
іншому сайті.  
 Написати трохи розгорнутий текст. Пояснити, чим я займаюсь. 
Формулювання тексту повинно бути схожим, ніби то , якщо б я 
розповідав про це все своєму приятелю за чашкою кави – 
максимально зрозумілою мовою. 
 Описуються переваги. Розповісти, за допомогою чого продукт 
вирішує проблему клієнта, завдяки подробицям. 
 Подумати над заголовками. Гарним прийомом можна рахувати 
формальні заголовки типу "Команда", "Контакти" і т. п. поміняти 
на емоційні. Наприклад, замість "Новини" написати "Будь в курсі", 
замість "Контакти" - "Скажіть привіт". 
Також при написанні текстів потрібно дотримуйтесь інформаційного 
стилю. Писати коротко і тільки важливе. Великого тексті тільки погіршать 
ситуацію. За основу можна використовувати принцип зворотної піраміди – 
спочатку розповісти про головне, потім додати деталі. Тут добре працює зв'язка 
заголовок та опис. Заголовок повинен привернути увагу та передати суть, опис 
– розширити та доповнити повідомлення. 
Коли було завершена робота з формуванням змісту, можна розпочати 
створювати дизайн. 
1.5. Дизайн 
На етапі дизайну поєднуються всі попередні етапи. Прототипи 
обертаються в унікальний візуальний стиль і підхід до комунікації, 
наповнюються контентом, і продукт набуває свого фінального вигляду. 
Усі роботи починаються з головної сторінки – вона є ключовою. Спочатку 
відбуваються роздуми, як виглядатиме головна сторінка, потім знайдене 
візуальне рішення повторюється на внутрішні сторінки. 
 10 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  10 
 
Обкладинка (перший екран) заслуговує на особливу увагу. Якщо там 
якісна фотографія та небанальний, чіпляючий заголовок, то перше враження 
буде вдалим. 
 
Рисунок 1.4 – Приклад першого екрану 
Фотографія є важливим компонентом, без неї нічого не вийде. Нема 
фотографій, можна вважати, що немає сайту. Рукостискання бізнесменів та 
усміхнені домогосподарки  - це застарілі та не актуалні фоти на сьогоднішній 
день. Краще сфотографувати самому, ніж шукати готові картинки на запит 
«успішний підприємець». Також можна найняти фотографа чи ілюстратора. 
Відомі ілюстратори та фотографи коштують дорого, але на ринку багато щодо 
недорогих професіоналів, вони із задоволенням попрацюють, і одразу з'явиться 
гарне наповнення для сайту. 
Одним із трендів сучасного Інтернету — «плоский» дизайн, частиною 
якого є флет-ілюстрація. Ілюстрація чудово справляється з двома функціями: 
вона інформативна (інформацію зручно і легко сприймати) і прикрашає проект, 
задає йому стиль. 
Малюючи меню, потрібно переконатися, що воно візуально хороше: не 
надто велике, не перевантажує всю сторінку. Пунктів меню не повинно бути 
багато, краще не більше 5. Назви робіть краще робити короткими.  
 11 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  11 
 
 
Рисунок 1.5 – Правильність розташування меню та логотипу 
Логотип має бути горизонтальним. Вертикальні логотипи в Інтернеті 
працюють погано. Як правило, логотип розташований у меню, а воно не 
повинно займати багато місця на екрані. Якщо логотипу немає, то просто можна 
використати назву проекту якимось системним шрифтом, типу Proxima або 
Futura. Наразі це не так важливо, як загальне враження від сайту. Краще буде 
подумати про фотографії та загальний стиль. 
Обов'язково підключається фірмовий шрифт, що впливає на комунікацію. 
Зараз все тримається на контенті, тому сам шрифт і дасть фірмовий стиль. У 
кожного шрифту є характер, тому підібрався такий шрифт, який відповідає 
змісту. 
Як правило, для сайту цілком достатньо одного шрифту. 
Після того, як було оформлено всі блоки, потрібно подивитися, щоб сайт 
виглядав приємно та акуратно. Вирівняно відступи, зроблено заголовки 
одноманітними, а також перевірено, що розмір шрифту в тексті скрізь 
однаковий. Досить важливо, щоб на сайті було достатньо вільного простору. 
 
1.6. Реалізація 
Після того, як макет був намальований, його потрібно перетворити 
безпосередньо на сайт, а саме  —  перейти до технічної реалізації. 
 
 12 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  12 
 
В моєму випадку використовуються стандартні інструменти для 
створення веб сторінок за допомогою мови розмітки HTML, а потім 
оформлення за допомогою коду  каскадних таблиць стилів CSS. Також було 
використано фреймворк Django на мові Python. 
Для подальшої верстки знадобиться  текстовий редактор в 
якомувідбувається написання коду. При створенні вебсторінок використовують 
такі редактори: 
1. Visual Studio Code 
2. Notepad++ 
3. Sublime Text 
4. WebStorm 
Для того щоб розпочати роботу з Django, потрібно завантажити 
середовище розробки на мові Python. Найпопулярнішою можна вважати 
PyCharm.  
1.7. Підсумок 
У даному розділі детально пояснюється, як саме проходив процес розробки 
веб-сторінок. Також хочу нагадати коротенько, з яких етапів складається 
процес розробки:  
Ідея та структура. 
 Визначається основна суть та завдання. Аналізується сфера відносно якої 
буде розробка. Записується структура у вигляді списку, розділення на розділи 
за потреби. 
Дослідження.  
Перегляд сайтів аналогів. Відбувається розглянення та надихання 
прикладами просто хороших сайтів, для можливого застосування прийомів в 
майбутньому. 
  
 13 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  13 
 
Прототип.  
Зображується послідовність блоків на папері. Прототип має простий 
вигляд, який передає тільки загальну ідею. Використовується базовий набір 
стандартних елементів. 
Зміст.  
Включає в себе пошук лаконічних елементів контенту та продумування 
простого, але лаконічний текст. Дотримується інформаційний стиль в 
оформленні тексту. 
Дизайн.  
Робота над дизайном розпочинається із головної сторінки, далі 
повторюється візуальне рішення на решту сторінок. Приділяється окрема увага 
обкладинці та фотографіям. Подумується навігація. Підбирається фірмовий 
шрифт. 
Реалізація.  
За допомогою редакторів коду реалізується наповнення контентом веб-
сторінок.  
Відповідно технічного завдання, більш детальне використання та розробка 
за допомогою фреймворку Django розкривається у наступному розділі. 
  
 14 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  14 
 
2. Django 
2.1. Що таке Django 
Django - це високорівневий Python веб-фреймворк, за до помогою якого 
моливо швидко створити безпечні та підтримувані веб-сайти. Його плюсом 
можна назвати, що він доступний в безкоштовній формі, код якого доступний у 
відкритому доступі. Також він має зростаючу та активну частину ком’юніті, 
зрозумілу документацію та безліч варіантів як безкоштовної, так і платної 
підтримки. 
 
Рисунок 2.1 – Логотип фреймворку Django 
Django допомагає при написанні програмному забезпечяенні, яке включає 
в собі: 
Повнота 
Фреймворк Django спроектований за принципом "Все включено". 
Розробник може за його допомогою створити веб-програму без сторонніх 
компонентів. Це корисно для програмістів-початківців, тому що їм не 
доводиться відволікатися на пошук додаткових інструментів для вирішення 
типових завдань. 
Різносторонність 
Django підходить для розробки веб-сайтів та програм будь-якого типу: 
систем управління контентом, новинних або інформаційних ресурсів, 
відеохостингів, соціальних мереж і т.д. Він може працювати з будь-якими 
типами файлів, різними базами даних, середовищем клієнта. Якщо в 
«коробковій» версії фреймворку немає компонента для реалізації конкретного 
продукту, його можна отримати з джерел. 
 15 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  15 
 
Надійність 
Django підтримується та розвивається Django Software Foundation, а 
також спільнотою сторонніх розробників. Фреймворк оновлюється та 
вдосконалюється, перевіряється на помилки. Створені програми стабільні та 
містять менше багів у порівнянні з розробленими на інших фреймворках, CRM 
або написаними з нуля. 
Масштабування 
Архітектура Django будується на незалежності складників. Будь-який 
компонент можна замінити або модифікувати, не торкаючись інших. 
Можливості Django дозволяють як розробляти програми, так і розширювати їх 
зі збільшенням трафіку та навантаження. 
Зручність у супроводі 
Django дозволяє повторно використовувати код, групувати пов'язані 
функції окремі модулі. Це полегшує, скорочує та спрощує структуру програми. 
Якщо проект змінився розробником, він зможе швидко розібратися в 
архітектурі ПЗ і забезпечити якісну підтримку. 
Безпечність 
Django має вбудовані інструменти захисту від поширених атак хакерів. 
Також він дозволяє ефективно розподіляти доступ до даних серед користувачів 
різного рівня. Це підвищує безпеку продукту та стабільність його роботи. 
Переносимість 
Мова програмування Django — Python, адаптована до всіх поширених 
платформ. Розроблені на фреймворку програми однаково добре працюють на 
Windows, Mac OS X і Linux-based операційних системах, а також їх версіях. 
Django підтримують веб-хостинги з підходящою інфраструктурою та 
документацією. 
  
 16 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  16 
 
Відкритість 
Django — відкрите ПЗ, тому будь-хто може використовувати його для 
створення програми або сайту, в тому числі для комерційного використання. 
Гнучкість 
"Джанго" - "помірно гнучкий" фреймворк. Він надає кілька інструментів 
для вирішення одного завдання та 1–2 підходи до їх використання. Тобто 
розробник може вибирати між різними опціями і одночасно не губитися в 
їхньому різноманітті. 
2.2. Поява 
Django створили в 2003-2005 роках веб-програмісти онлайн-версії 
Lawrence Journal-World Адріан Головаті та Саймон Віллісон. Фреймворк 
названо на честь французького гітариста-віртуоза Джанго Рейнхардта (Рана 
Ренара). Перша версія опублікована у 2005 році. З того часу фреймворк 
оновлюється 1-2 рази на рік. З 2008 року підтримкою та розвитком займається 
організація Django Software Foundation. 
2.3. Як працює Django? 
Як і будь-який інший фреймворк, "Джанго" - це програмна платформа 
(каркас), на який розробник "навішує" додаткові компоненти програми, 
наприклад: 
 інтерфейс користувача; 
 скрипти (сценарії) роботи елементів програми/сайту; 
 програмні бібліотеки; 
 мультимедійний контент (фото, відео, аудіо); 
 модулі безпеки; 
 бази даних тощо. 
Фреймворк відповідає за основні аспекти роботи товару. А модулі, що 
підключаються (змінні), — за специфічні функції конкретної програми. 
Використання фреймворків дозволяє: 
 прискорити розробку; 
 17 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  17 
 
 спростити підтримку; 
 уникнути помилок у роботі програми. 
Спосіб організації коду "Модель-представлення-контролер" (MVC) 
 Модель - бізнес-логіка, тобто сукупності методів, правил та 
обмежень роботи з даними. 
 Подання — це компонент, який відображає дані, залежно від зміни 
моделі. 
 Контролер - програмний посередник, що обробляє дії користувача 
і повідомляє моделі, як вона повинна змінитися. 
 модель, як і раніше, відповідає за роботу з даними (доступ, обробку, 
перевірку тощо); 
 шаблони визначають, як відображатиметься інформація; 
 уявлення описує, які саме дані показуватимуться користувачеві. 
Принцип повторює концепцію MVC, тому Django відноситься до MVC-
сумісних платформ. 
Концепція DRY (Don't repeat yourself - "Не повторюйся") 
Для реалізації аналогічних або схожих завдань використовуються одні й 
ті самі елементи коду, а не пишуться щоразу нові. Завдяки цьому відсутнє 
дублювання, що ускладнює та збільшує розмір програми, та спрощуються 
розробка та підтримка програмного продукту. 
Використання незалежних (відчужуваних та підключених) компонентів 
Розробник може модифікувати конкретний модуль без внесення змін до 
інших. У цьому підсумковий програмний продукт залишиться функціональним. 
 18 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  18 
 
2.4. Структура Django 
Базова структура фреймворку включає такі компоненти: 
 URL-маршрутизатори, що перенаправляють HTTP-запит від 
браузера або будь-якого іншого веб-клієнта в уявлення; 
 уявлення, яке обробляє запит, звертається до моделі та повідомляє 
їй, які саме дані з БД потрібно задіяти, щоб задовольнити запит; 
 модель (менеджер бази даних, ORM), що «витягує» потрібну 
інформацію з БД та передає її уявленню; 
 HTML-шаблони, які використовуються уявленням для 
демонстрації користувачеві отриманих від моделі даних. 
 
Рисунок 2.2 – Принципова схема Django 
До структури Django входять вузькоспеціалізовані модулі та функції, у 
тому числі: 
 веб-сервер для розробки та тестування продукту; 
 вбудований диспетчер обмінюватись подіями між компонентами 
програми за допомогою встановлених сигналів; 
 система інтернаціоналізації, що адаптує Django до різних мовних та 
культурних регіонів; 
 19 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  19 
 
 вбудовані модулі аутентифікації та авторизації, а також функція 
підключення аналогічних зовнішніх блоків; 
 фільтри для додаткової обробки запитів (кешування, стиснення, 
перенаправлення тощо); 
 інтерфейс адміністратора для додавання, редагування, видалення 
вмісту програми/сайту; 
 інтерфейс внутрішньої платформи тестування Python; 
 інструменти коментування; 
 модуль захисту від міжсайтових скриптів, злому паролю та інших 
поширених типів мережевих атак. 
2.5. Встановлення Django 
Процес відрізняється в залежності від версії фреймворку, а також 
апаратної платформи та встановленої операційної системи. Розглянемо 
рекомендований спосіб встановлення Django на персональний комп'ютер під 
керуванням Windows. 
Підготовка 
Оскільки Django написано мовою Python, спочатку потрібно встановити 
інтерпретатор. Це програма, яка розпізнає вихідний код скрипта та переводить 
його в машинний код (байткод), який виконується операційною системою. Крім 
інтерпретатора, потрібно встановити pip — менеджер пакетів. Часто ця 
програма завантажується разом із Python, але краще перевірити її наявність, 
вбивши в командний рядок команду pip -v. Якщо менеджер встановлено, 
термінал покаже її версію, якщо ні — вкаже, що pip не є внутрішньою чи 
зовнішньою командою, яку виконує програма або пакетний файл. У такому разі 
його потрібно завантажити вручну. 
Встановлення віртуального середовища 
Цей етап не є обов'язковим, але спрощує програмісту роботу з Django. За 
допомогою віртуального середовища можна запускати кілька програм на 
Python незалежно один від одного. Наприклад, якщо раніше був розроблений 
 20 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  20 
 
один проект на старій версії Django, то при появі оновленого фреймворку 
можна створити другий проект, не торкаючись першого. Це дозволить 
користуватися всіма перевагами нової версії "Джанго", не витрачаючи час на 
оновлення попередньої. Для використання віртуального середовища його 
потрібно попередньо активувати за допомогою файлу activate.bat. Це потрібно 
робити щоразу під час роботи з проектом на Django. Після закінчення роботи 
віртуальне середовище необхідно деактивувати за допомогою файлу 
deactivate.bat. 
Встановлення Django 
Після встановлення та активації віртуального середовища можна 
встановити фреймворк. Для цього необхідно ввести в консоль команду pip 
install Django. Система сама знайде, завантажить та встановить свіжу версію 
фреймворку для конкретної програмної та апаратної платформи. 
2.6. Налаштування проекту на Django 
Щоб створити проект на Django, потрібно попередньо встановити 
спеціальну директорію на жорсткому диску, наприклад C:\django. Далі 
необхідно перейти в командному рядку до цього каталогу, використовуючи 
команду cd. 
Після встановлення Django у папці віртуального середовища з'являється 
скрипт django-admin.py, а в ОС Windows - файл django-admin.exe, що 
виконується. На Windows їх можна знайти у підкаталозі Scripts. Скрипт django-
admin включає декілька команд для керування проектом. Наприклад, для 
створення використовується директива startproject. Далі робота з проектом 
будується за наступним алгоритмом: 
 активується заздалегідь встановлене віртуальне середовище. Для 
зручності роботи необхідно присвоїти їй ім'я; 
 за допомогою команди django-admin startproject запускається сам 
проект, а поточній папці з'являється його підкаталог. 
  
 21 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  21 
 
Проект включає такі елементи: 
 manage.py - виконує різні команди, зокрема запускає програму; 
 __init__.py - стандартний для Python файл, що надає папці, в якій 
він розміщується, властивості модуля; 
 settings.py - відповідає за налаштування проекту; 
 urls.py - включає шаблони URL-адрес, чим задає систему 
маршрутизації; 
 wsgi.py — містить параметри конфігурації Web Server Gateway 
Interface (WSGI), які застосовуються при розгортанні проекту. 
Щоб запустити виконання проекту, потрібно перейти в консолі до його 
папки та задіяти команду python manage.py runserver. Після цього в командному 
рядку відобразиться адреса, на якій буде розміщений проект, як правило, 
http://127.0.0.1:8000/. Якщо ввести його в пошуковий рядок будь-якого 
браузера, відкриється вміст за промовчанням. По суті, це вже працюючий 
проект зі стандартним базовим контентом. Подальша робота полягатиме в тому, 
щоб замінити вміст на свій веб-додаток. 
2.7. Коли використовують і не використовують Django 
«Джанго» розробили програмісти сайтів новин. Це значною мірою 
визначило специфіку архітектури. Фреймворк ідеально підходить для 
створення інформаційних порталів, онлайн версій друкованих журналів або 
інших цифрових ЗМІ. Сьогодні за його допомогою розробляються соціальні 
мережі, відеохостинги, музичні сервіси, пошукові системи тощо. Веб-
фреймворк Django використовується у сайтах: 
 Instagram; 
 YouTube; 
 The Guardian; 
 Pinterest; 
 сайт NASA; 
 Mozilla; 
 22 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  22 
 
 The Washington Times; 
 Disqus і т.д. 
Використовувати Django можна, якщо: 
 пред'явлені високі вимоги до стабільності програми та її захисту 
від атак хакерів; 
 передбачається можливе нарощування чи скорочення проекту; 
 у проекті планується використовувати різноманітні бази даних; 
 є обмеження щодо часу розгортання, а також фінансового 
забезпечення; 
 планується застосовувати у проекті передові IT-технології 
(наприклад, нейромережі); 
 проект розробляється та підтримується різними фахівцями 
(групами розробників); 
 недостатньо досвіду для розробки веб-додатків та сайтів з нуля; 
 потрібна підтримка ORM, щоб не працювати безпосередньо із 
запитами до баз даних. 
Вибрати інші варіанти краще: 
 при реалізації проекту зі складною та розгалуженою 
структурою, широким функціоналом (але можна 
використовувати Django для розробки його окремих частин); 
 написання простого додатка з мінімальним функціоналом, що 
не діє бази даних; 
 реалізації проекту зі специфічною архітектурою та 
функціоналом, що вимагає написання коду з нуля; 
 відсутність базових знань та досвіду роботи з Python. 
Django є одним з найбільш затребуваних фреймворків на Python. 
Застосування у проектах провідних компаній підтверджує його зручність, 
універсальність та надійність. 
 23 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  23 
 
3. ПРЕДСТАВЛЕННЯ РОЗРОБЛЕНОГО САЙТУ 
3.1. Структура  та прототипування 
Струтура розробленого сайту заданого в технічному завданні має таку 
структуру: 
1. Головний екран: 
a) «Шапка». 
b) Оферна конструкція. 
c) Послуги. 
d) Зворотній зв’язок. 
e) Контактна інформація. 
f) «Підвал» 
2. Послуга «Інтернет магазин» 
a) «Шапка». 
b) Оферна конструкція з короткою інформацією. 
c) Послуги. 
d) Зворотній зв’язок. 
e) Контактна інформація. 
f) «Підвал» 
3. Послуга «Корпоративні сайти» 
a) «Шапка». 
b) Оферна конструкція з короткою інформацією. 
c) Послуги. 
d) Зворотній зв’язок. 
e) Контактна інформація. 
f) «Підвал» 
4. Послуга «Landing page» 
a) «Шапка». 
b) Оферна конструкція з короткою інформацією. 
c) Послуги. 
 24 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  24 
 
d) Зворотній зв’язок. 
e) Контактна інформація. 
f) «Підвал» 
5. Підтримка 
Структура сайту складається з 3-х прототипів. 
 
Рисунок 3.1 – Прототип  сторінки «Головна сторінка» 
 
Рисунок 3.2 – Прототип сторінок з послугами 
 25 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  25 
 
 
 
Рисунок 3.3 – Прототип  сторінки «Підтримка» 
3.2. Зовнішня складова сайту 
Перший екран на Рис. 3.4 нас зустрічає меню оферною конструкцією.  
 
Рисунок 3.4 – Перший екран 
В «шапці» знаходиться меню на Рис. 3.5, яке включає в себе такі пункти: 
1. Розробка 
1.1. Інтернет магазин 
1.2. Корпоративні сайти 
1.3. Landing page 
2. Контакти 
3. Підтримка 
 26 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  26 
 
 
Рисунок 3.5 – Меню в «шапці» сайту 
 
  
Рисунок 3.6 – Кнопки офера 
Кнопка «Замовити» перенаправляє користувача до форми, де він може 
замовити сам дизайн. Кнопка «Ціни» переносять до списку доступних товарів. 
Це можливо спостерігати на Рис. 3.6. 
 Далі нас зустрічає другий екран сайту з самими послугами  та цінами на 
їх виконання. Вся інформація про кожну послугу написана в карточці з 
можливістю детального перегляду всієї інформації про товар. 
 
 
Рисунок 3.7 – Екран «Послуги»  
 27 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  27 
 
Кожна карточка товару має ефект при наведенні. Це можна спостерігати 
на Рис. 3.8. 
 
Рисунок 3.8 – Стани карточок товарів 
Наступний екран сама форма зв’язку, завдяки якій проводиться зворотній 
зв’язок з користувачем. 
 
Рисунок 3.9 – Форма зворотнього зв’язку 
За цією формою відбувається вся робота з клієнтом. У разі не вірного 
вводу даних виводиться помилка про те, що користувач невірно ввів свої данні. 
Далі з’явиться підсказки і запевне користувача у неправильному вводі даних. Це 
продимостроване на Рис. 3.10. 
 28 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  28 
 
 
Рисунок 3.10 – Невірне введення даних 
 
Рисунок 3.11 – Певні дані не були введені 
На останному екрані Рис. 3.12 сторінки знаходиться вся контактна 
інформація, яка включає в себе: 
1. Адресу електронної пошти 
2. Номер телефону 
3. Соціальні мережі: 
3.1. Instagram 
 29 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  29 
 
3.2. Facebook 
3.3. Behance 
3.4. Pinterest 
4. Кнопку на повернення до форми зв’язку 
 
Рисунок 3.12 – Контактна інформація 
 
Рисунок 3.13 – Перший екран «Інтернет магазин» 
На Рис. 3.13 зображено коротку інформацію про те, що таке інтернет 
магазин, приблизну ціну розробки та функціональну кнопку, яка направляє нас 
до форми замовлення. Форми замовлення розміщені на кожній із таких сторінок. 
Наступний екран на Рис. 3.14. надає корисну інформацію про те, які саме 
завдання вирішує даний сайт. 
 30 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  30 
 
 
Рисунок 3.14 – Другий екран «Інтернет магазин» 
 
Рисунок 3.15 – Третій екран «Інтернет магазин» 
На Рис. 3.15 зображено, як саме проходить етап створення дизайну для 
інтернет магазину. 
 
Рисунок 3.16 – Перший екран «Корпоративний сайт» 
 
Рисунок 3.17 – Другий екран  «Корпоративний сайт» 
 31 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  31 
 
 
Рисунок 3.18 – Третій екран «Корпоративний сайт» 
 
Рисунок 3.19 – Перший екран «Landing page» 
 
Рисунок 3.20 –  Другий екран  «Landing page» 
 
Рисунок 3.21 – Третій екран «Landing page» 
 32 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  32 
 
 
Рисунок 3.22 – Екран «Підтримка» 
3.3. Компіляція проекту 
Для користування веб-сайтом, слід скомпілювати програмний код в 
середовищі для розробки(в даному випадку використовувалася PyCharm 2022.1). 
У терміналі PyСharm потрібно прописати «python manage.py runserver», для 
запуску сервера. Після успішного запуску сервера, в терміналі буде надане 
посилання «http://127.0.0.1:8000/». Перейшовши за цим посиланню, користувач 
потрапляє на головну сторінку. 
3.4. Тестування сайту 
Для того щоб дізнатися, на скільки розроблений сайт добре працює, 
застосовується тестування. 
Види тестувань які застосовуються для сайтів: 
 функціональне тестування; 
 тестування юзабіліті (перевірка зручності користування); 
 тестування сумісності (конфігураційне тестування); 
 тест на продуктивність; 
 перевірка безпеки. 
 33 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  33 
 
На мою думку спало, що саме функціональне тестування буде 
правильним рішенням. А головним критерієм була простота структури сайту.  
Тестування зображено в Таблиці 1 для проведення тестування на 
функціональною частиною розробленого сайту. 
Сценарій тестування: 
1. Компілювання проекту. 
2. Перехід за посиланням «http://127.0.0.1:8000/». 
3. Перехід на головну сторінку. 
4. Перевірка на працездатність кнопок. 
5. Перевірка форми. 
6. Перевірка працездатності сайтів товарів. 
Таблиця 3.1 – Функціональне тестування 
№ Опис Очікувані результати 
п/п 
1. Компілювання Компілювання проходить без помилок з 
проекту можливістю запуску в будь-якому браузері 
2. Перехід за посиланням Сайт відкривається на головній сторінці 
«http://127.0.0.1:8000/» 
3. Перехід на головну Сторінка відображає весь контент на сайті 
сторінку 
4. Перевірка на Кнопки «Замовити», «Ціни», «Відправити 
працездатність кнопок запит» працють відповідно їх функціоналу 
5. 1. Рядки вводу працюють коректно 
Перевірка форми 2. При вводі неправильної чи взагалі не 
внесених даних виводить помилку 
 
  
 34 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  34 
 
 
Продовження таблиці 3.1 –  Функціональне тестування 
  3. Виводиться помилка при неправильних 
введених даних 
6. 1. Сторінка сайту «Інтернет магазин» 
працює коректно. 
2. Сторінка сайту «Корпоративні сайти» 
Перевірка працює коректно. 
працездатності сайтів 
товарів 3. Сторінка сайту «Landing page» працює 
 
коректно. 
4. Сторінка сайту «Підтримка» працює 
коректно. 
 
  
 35 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  35 
 
ВИСНОВКИ 
В результаті виконання кваліфікаційної роботи було розроблено сайт 
за допомогою стандартних інструментів створення та фреймворку Django на 
мові програмування Python, який у повному обсязі відповідає технічному 
завданню . 
Перший розділ кваліфікаційної роботи включає в себе етапи при 
створенні сайту. У другому розділі більш детально пояснюється робота з 
фреймворком Django який застосовувався. 
На методичних і технологічних засадах проаналізовано як саме потрібно 
створювати сайт. 
Розроблений сайт має зрозумілий і простий користувальницький 
інтерфейс, що забезпечить схвалення його з боку користувачів. Реалізований 
сайт дозволяє переглянути головну сторінку на якій розташовується основна 
інформація про сайт, список послуг, форма зворотнього зв'язку иа контактна 
інформація. Також є 3 сторінки з більш детальною інформацією про кожну із 
послуг та сторінка для зв'язку з підтримкою. 
 Сайт за допомогою стандартних інструментів створення та фреймворку 
Django на мові програмування Python відповідає усім вимогам, пред’явленим 
в технічному завданні до кваліфікаційної роботи. 
  
 36 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  36 
 
ДОДАТКИ 
Додаток А 
HTML та CSS  сторінки «Головна»: 
HTML: 
<!DOCTYPE html> 
<html style="font-size: 16px;" lang="uk-UA"> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
    <meta charset="utf-8"> 
    <meta name="keywords" content="Sample Headline"> 
    <meta name="description" content=""> 
    <title>Розробка</title> 
    <link rel="stylesheet" href="nicepage.css" media="screen"> 
<link rel="stylesheet" href="Розробка.css" media="screen"> 
    <script class="u-script" type="text/javascript" 
src="jquery.js" defer=""></script> 
    <script class="u-script" type="text/javascript" 
src="nicepage.js" defer=""></script> 
    <meta name="generator" content="Nicepage 4.11.3, 
nicepage.com"> 
    <link id="u-theme-google-font" rel="stylesheet" 
href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,
300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,40
0i,500,500i,600,600i,700,700i,800,800i"> 
    <script type="application/ld+json">{ 
  "@context": "http://schema.org", 
  "@type": "Organization", 
  "name": "Site1", 
  "logo": "images/Frame2.png" 
}</script> 
    <meta name="theme-color" content="#478ac9"> 
    <meta property="og:title" content="Розробка"> 
    <meta property="og:description" content=""> 
    <meta property="og:type" content="website"> 
  </head> 
  <body class="u-body u-xl-mode"><header class="u-black u-clearfix 
u-header u-header" id="sec-f0be"><div class="u-clearfix u-sheet u-
sheet-1"> 
        <a href="Розробка.html" data-page-id="88286402" class="u-
image u-logo u-image-1" data-image-width="150" data-image-
height="100" title="Головна"> 
          <img src="images/Frame2.png" class="u-logo-image u-logo-
image-1"> 
        </a> 
        <nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1"> 
 37 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  37 
 
          <div class="menu-collapse" style="font-size: 1rem; 
letter-spacing: 0px; font-weight: 700; text-transform: 
uppercase;"> 
            <a class="u-button-style u-custom-active-border-color 
u-custom-border u-custom-border-color u-custom-borders u-custom-
hover-border-color u-custom-left-right-menu-spacing u-custom-
padding-bottom u-custom-text-active-color u-custom-text-color u-
custom-text-hover-color u-custom-top-bottom-menu-spacing u-nav-
link u-text-active-palette-1-base u-text-hover-palette-2-base" 
href="#"> 
              <svg class="u-svg-link" viewBox="0 0 24 24"><use 
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-
hamburger"></use></svg> 
              <svg class="u-svg-content" version="1.1" id="menu-
hamburger" viewBox="0 0 16 16" x="0px" y="0px" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg"><g><rect y="1" width="16" 
height="2"></rect><rect y="7" width="16" height="2"></rect><rect 
y="13" width="16" height="2"></rect> 
</g></svg> 
            </a> 
          </div> 
          <div class="u-custom-menu u-nav-container"> 
            <ul class="u-nav u-spacing-2 u-unstyled u-nav-1"><li 
class="u-nav-item"><a class="u-border-2 u-border-active-grey-90 u-
border-hover-grey-50 u-button-style u-nav-link u-text-active-white 
u-text-hover-palette-1-base" href="Розробка.html" style="padding: 
10px 20px;">Розробка</a><div class="u-nav-popup"><ul class="u-h-
spacing-20 u-nav u-unstyled u-v-spacing-10"><li class="u-nav-
item"><a class="u-button-style u-nav-link u-white" href="Інтернет-
магазин.html">Інтернет магазин</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-
white" href="Корпоративний-сайт.html">Корпоративні сайти</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-
white" href="Landing-page.html">Landing page</a> 
</li></ul> 
</div> 
</li><li class="u-nav-item"><a class="u-border-2 u-border-active-
grey-90 u-border-hover-grey-50 u-button-style u-nav-link u-text-
active-white u-text-hover-palette-1-base" href="Landing-
page.html#sec-e78a" data-page-id="79438839" style="padding: 10px 
20px;">Контакты</a> 
</li><li class="u-nav-item"><a class="u-border-2 u-border-active-
grey-90 u-border-hover-grey-50 u-button-style u-nav-link u-text-
active-white u-text-hover-palette-1-base" href="Підтримка.html" 
style="padding: 10px 20px;">Підтримка</a> 
</li></ul> 
          </div> 
          <div class="u-custom-menu u-nav-container-collapse"> 
            <div class="u-black u-container-style u-inner-
container-layout u-opacity u-opacity-95 u-sidenav"> 
 38 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  38 
 
              <div class="u-inner-container-layout u-sidenav-
overflow"> 
                <div class="u-menu-close"></div> 
                <ul class="u-align-center u-nav u-popupmenu-items 
u-unstyled u-nav-3"><li class="u-nav-item"><a class="u-button-
style u-nav-link" href="Розробка.html">Розробка</a><div class="u-
nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled u-v-spacing-
10"><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Інтернет-магазин.html">Інтернет магазин</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Корпоративний-сайт.html">Корпоративні сайти</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Landing-page.html">Landing page</a> 
</li></ul> 
</div> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Landing-page.html#sec-e78a" data-page-
id="79438839">Контакты</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Підтримка.html">Підтримка</a> 
</li></ul> 
              </div> 
            </div> 
            <div class="u-black u-menu-overlay u-opacity u-
opacity-70"></div> 
          </div> 
        </nav> 
      </div></header> 
    <section class="u-black u-clearfix u-section-1" id="sec-f16d"> 
      <div class="u-clearfix u-gutter-10 u-layout-wrap u-layout-
wrap-1"> 
        <div class="u-layout" style=""> 
          <div class="u-layout-row" style=""> 
            <div class="u-container-style u-layout-cell u-left-
cell u-size-30 u-size-xs-60 u-layout-cell-1" src=""> 
              <div class="u-container-layout u-container-layout-
1"> 
                <h2 class="u-align-center u-text u-text-
1">Створюємо дизайн<br>для Ваших потреб 
                </h2> 
                <a href="#" class="u-border-2 u-border-white u-btn 
u-button-style u-hover-feature u-hover-palette-4-light-2 u-black 
u-btn-1">Ціни</a> 
                <a href="Розробка.html#carousel_e10d" data-page-
id="88286402" class="u-border-none u-btn u-button-style u-hover-
feature u-hover-palette-4-light-2 u-white u-btn-2">Замовити</a> 
              </div> 
            </div> 
            <div class="u-align-center u-container-style u-image 
u-layout-cell u-right-cell u-size-30 u-size-xs-60 u-image-1" 
src="" data-image-width="725" data-image-height="600"> 
 39 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  39 
 
              <div class="u-container-layout u-valign-middle u-
container-layout-2" src=""></div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </section> 
    <section class="u-clearfix u-section-2" id="sec-e586"> 
      <div class="u-clearfix u-sheet u-valign-middle u-sheet-1"> 
        <h3 class="u-text u-text-default u-text-1">Послуги</h3> 
        <div class="u-align-left u-border-grey-75 u-container-
style u-group u-hover-feature u-white u-group-1" data-image-
width="887" data-image-height="638"> 
          <div class="u-container-layout u-container-layout-1"> 
            <h4 class="u-custom-font u-text u-text-default u-text-
font u-text-2">Інтернет магазин</h4> 
            <p class="u-text u-text-3"> Робимо роботу інтернет-
магазину простою і швидкою завдяки спеціальним інструментам.</p> 
            <div class="u-align-center u-clearfix u-group-elements 
u-group-elements-1"> 
              <p class="u-align-left u-text u-text-4"> 
                <a class="u-active-none u-border-none u-btn u-
button-link u-button-style u-hover-feature u-hover-none u-text-
black u-text-hover-white u-none u-btn-1" href="Інтернет-
магазин.html" data-page-id="74862838"> Дізнатися більше&nbsp;
&nbsp;</a> 
              </p> 
              <p class="u-text u-text-5"> від 400$&nbsp;</p> 
              <img class="u-image u-image-default u-preserve-
proportions u-image-1" src="images/Arrow1.png" alt="" data-image-
width="37" data-image-height="16"> 
            </div> 
          </div> 
        </div> 
        <div class="u-border-grey-75 u-container-style u-group u-
hover-feature u-white u-group-2" data-image-width="887" data-
image-height="638"> 
          <div class="u-container-layout u-container-layout-2"> 
            <h4 class="u-custom-font u-text u-text-default u-text-
font u-text-6"> Landing page</h4> 
            <p class="u-text u-text-7"> Створюємо лендінги, що 
продають, з дизайном, що запам'ятовується і максимальної 
конверсією</p> 
            <div class="u-align-center u-clearfix u-group-elements 
u-group-elements-2"> 
              <p class="u-align-left u-text u-text-8"> 
                <a class="u-active-none u-border-none u-btn u-
button-link u-button-style u-hover-feature u-hover-none u-text-
body-color u-text-hover-white u-none u-btn-2" href="Landing-
page.html" data-page-id="79438839"> Дізнатися більше&nbsp;
&nbsp;</a> 
              </p> 
 40 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  40 
 
              <p class="u-text u-text-9"> від 120$&nbsp;</p> 
              <img class="u-image u-image-default u-preserve-
proportions u-image-2" src="images/Arrow1.png" alt="" data-image-
width="37" data-image-height="16"> 
            </div> 
          </div> 
        </div> 
        <div class="u-border-2 u-border-grey-75 u-container-style 
u-group u-hover-feature u-white u-group-3" data-image-width="887" 
data-image-height="638"> 
          <div class="u-container-layout u-container-layout-3"> 
            <h4 class="u-custom-font u-text u-text-default u-text-
font u-text-10"> Корпоративні сайти</h4> 
            <p class="u-text u-text-11"> Розробляємо корпоративні 
проекти різної складності і масштабу</p> 
            <div class="u-align-center u-clearfix u-group-elements 
u-group-elements-3"> 
              <p class="u-align-left u-text u-text-12"> 
                <a class="u-active-none u-border-none u-btn u-
button-link u-button-style u-hover-feature u-hover-none u-text-
body-color u-text-hover-white u-none u-btn-3" href="Корпоративний-
сайт.html" data-page-id="2705029622"> Дізнатися більше&nbsp;
&nbsp;</a> 
              </p> 
              <p class="u-text u-text-13"> від 340$&nbsp;</p> 
              <p class="u-text u-text-14"> від 340$&nbsp;</p> 
              <img class="u-image u-image-default u-preserve-
proportions u-image-3" src="images/Arrow1.png" alt="" data-image-
width="37" data-image-height="16"> 
            </div> 
          </div> 
        </div> 
        <a href="Розробка.html#carousel_e10d" data-page-
id="88286402" class="u-border-2 u-border-grey-75 u-btn u-button-
style u-hover-black u-hover-feature u-text-hover-white u-white u-
btn-4">Відправити запит</a> 
      </div>  
    </section> 
    <section class="u-black u-clearfix u-section-3" 
id="carousel_e10d"> 
      <div class="u-clearfix u-sheet u-sheet-1"> 
        <h3 class="u-text u-text-default u-text-1">Є питання?</h3> 
        <p class="u-text u-text-default u-text-2"> Давайте 
обговоримо ваші завдання. Зв'яжіться сьогодні!</p> 
        <div class="u-clearfix u-layout-wrap u-layout-wrap-1"> 
          <div class="u-layout"> 
            <div class="u-layout-row"> 
              <div class="u-container-style u-image u-layout-cell 
u-left-cell u-size-32-lg u-size-32-xl u-size-60-md u-size-60-sm u-
size-60-xs u-image-1" data-image-width="725" data-image-
height="640"> 
 41 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  41 
 
                <div class="u-container-layout u-container-layout-
1"></div> 
              </div> 
              <div class="u-align-left u-black u-container-style 
u-layout-cell u-right-cell u-size-28-lg u-size-28-xl u-size-60-md 
u-size-60-sm u-size-60-xs u-layout-cell-2"> 
                <div class="u-border-2 u-border-white u-container-
layout u-container-layout-2"> 
                  <div class="u-form u-form-1"> 
                    <form action="#" method="POST" class="u-
clearfix u-form-spacing-25 u-form-vertical u-inner-form" 
source="email" name="form" style="padding: 10px;"> 
                      <div class="u-form-group u-form-name u-form-
group-1"> 
                        <label for="name-ced0" class="u-
label">Ім'я</label> 
                        <input type="text" placeholder="Введіть 
Ваше ім'я" id="name-ced0" name="name" class="u-black u-border-1 u-
border-no-left u-border-no-right u-border-no-top u-border-white u-
input u-input-rectangle u-input-1" required="" maxlength="50"> 
                      </div> 
                      <div class="u-form-group u-form-phone u-
form-group-2"> 
                        <label for="phone-dbda" class="u-
label">Телефон</label> 
                        <input type="tel" pattern="[\(\-]?([0-
9]{3})[\)\-]?[\/\s]?([0-9\-]{3,9})" placeholder="Телефон у форматі 
(0хх) ххх-хххх" id="phone-dbda" name="phone" class="u-black u-
border-1 u-border-no-left u-border-no-right u-border-no-top u-
border-white u-input u-input-rectangle u-input-2" required="" 
maxlength="50"> 
                      </div> 
                      <div class="u-form-email u-form-group u-
form-group-3"> 
                        <label for="email-a917" class="u-label">E-
mail</label> 
                        <input type="email" placeholder="Введіть 
Вашу email адресу" id="email-a917" name="email" class="u-black u-
border-1 u-border-no-left u-border-no-right u-border-no-top u-
border-white u-input u-input-rectangle u-input-3" required="" 
maxlength="50"> 
                      </div> 
                      <div class="u-form-group u-form-select u-
form-group-4"> 
                        <label for="select-633c" class="u-
label">Выбрать</label> 
                        <div class="u-form-select-wrapper"> 
                          <select id="select-633c" name="select" 
class="u-black u-border-1 u-border-no-left u-border-no-right u-
border-no-top u-border-white u-input u-input-rectangle u-input-4" 
required="required"> 
 42 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  42 
 
                            <option value="Інтернет 
магазин">Інтернет магазин</option> 
                            <option value="Корпоративний 
сайт">Корпоративний сайт</option> 
                            <option value="Landing page">Landing 
page</option> 
                          </select> 
                          <svg xmlns="http://www.w3.org/2000/svg" 
width="14" height="12" version="1" class="u-caret"><path 
fill="currentColor" d="M4 8L0 4h8z"></path></svg> 
                        </div> 
                      </div> 
                      <div class="u-align-center u-form-group u-
form-submit"> 
                        <a href="#" class="u-black u-border-2 u-
border-white u-btn u-btn-submit u-button-style u-hover-palette-4-
light-2 u-text-hover-black u-text-white u-btn-1">Відправити 
запит<br> 
                        </a> 
                        <input type="submit" value="submit" 
class="u-form-control-hidden"> 
                      </div> 
                      <div class="u-form-send-message u-form-send-
success"> Спасибо! Ваше сообщение отправлено. </div> 
                      <div class="u-form-send-error u-form-send-
message"> Отправка не удалась. Пожалуйста, исправьте ошибки и 
попробуйте еще раз. </div> 
                      <input type="hidden" value="" 
name="recaptchaResponse"> 
                    </form> 
                  </div> 
                </div> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </section> 
    <section class="u-clearfix u-image u-section-4" id="sec-e78a" 
data-image-width="1480" data-image-height="801"> 
      <div class="u-clearfix u-sheet u-valign-middle u-sheet-1"> 
        <div class="u-clearfix u-group-elements u-group-elements-
1"> 
          <h2 class="u-text u-text-default u-text-white u-text-
1">Хочете зробити щось велике? <br>Дозвольте допомогти вам.<br> 
          </h2> 
          <p class="u-text u-text-white u-text-2"> Чи готові? 
Зв'яжіться сьогодні.</p> 
          <div class="u-clearfix u-group-elements u-group-
elements-2"> 
            <p class="u-text u-text-white u-text-3">Почати 
розмову</p> 
 43 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  43 
 
            <p class="u-text u-text-white u-text-
4">[email protected]</p> 
          </div> 
          <div class="u-clearfix u-group-elements u-group-
elements-3"> 
            <p class="u-text u-text-white u-text-5">Номер 
телефону</p> 
            <p class="u-text u-text-white u-text-6">+38(0хх) хх хх 
ххх</p> 
          </div> 
        </div> 
        <p class="u-text u-text-default u-text-white u-text-7">Ми 
в соцмережах&nbsp;</p> 
        <a href="#" class="u-border-2 u-btn u-button-style u-
hover-feature u-hover-palette-4-light-2 u-text-hover-black u-
border-black u-white u-btn-1">Відправити запит</a> 
        <p class="u-text u-text-default u-text-white u-text-8"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-2" href="https://instagram.com">Instagram&nbsp;</a> 
        </p> 
        <p class="u-text u-text-default u-text-white u-text-9"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-3" href="https://Facebook.com">Facebook&nbsp;</a> 
        </p> 
        <p class="u-text u-text-default u-text-white u-text-10"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-4" href="https://Behance.net"> Behance&nbsp;</a> 
        </p> 
        <p class="u-text u-text-default u-text-white u-text-11"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-5" href="https://Pinterest.com"> Pinterest&nbsp;</a> 
        </p> 
      </div>    
    </section>    
    <footer class="u-align-center u-clearfix u-footer u-grey-80 u-
footer" id="sec-2ac7"><div class="u-clearfix u-sheet u-sheet-1"> 
        <a href="Розробка.html" data-page-id="88286402" class="u-
image u-logo u-image-1" data-image-width="150" data-image-
height="100" title="Головна"> 
          <img src="images/Frame2.png" class="u-logo-image u-logo-
image-1"> 
        </a> 
        <p class="u-small-text u-text u-text-variant u-text-1"> 
Всі права захищені. Часткове або повне копіювання інформації сайту 
можливо тільки з дозволу</p> 
      </div> 
 </footer> 
  </body> 
 44 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  44 
 
</html> 
CSS: 
.u-section-1 { 
  background-image: none; 
} 
.u-section-1 .u-sheet-1 { 
  min-height: 875px; 
} 
.u-section-1 .u-text-1 { 
  font-size: 2.25rem; 
  font-weight: 700; 
  margin: 89px auto 0 0; 
} 
.u-section-1 .u-text-2 { 
  font-size: 1.25rem; 
  margin: 18px auto 0 0; 
} 
.u-section-1 .u-layout-wrap-1 { 
  width: 1287px; 
  margin: 40px auto 60px -147px; 
} 
.u-section-1 .u-image-1 { 
  min-height: 564px; 
  background-image: url("images/10053496-eddf-be8a-1c79-
9613479ff0f4.png"); 
  background-position: 50% 50%; 
} 
.u-section-1 .u-container-layout-1 { 
  padding: 0; 
} 
.u-section-1 .u-layout-cell-2 { 
  min-height: 564px; 
} 
.u-section-1 .u-container-layout-2 { 
  padding: 22px 24px 30px; 
} 
.u-section-1 .u-form-1 { 
  height: 374px; 
  margin: 71px -2px 0 16px; 
} 
.u-section-1 .u-form-group-1 { 
  margin-left: 0; 
} 
.u-section-1 .u-input-1 { 
  background-image: none; 
} 
.u-section-1 .u-form-group-2 { 
  margin-left: 0; 
} 
.u-section-1 .u-input-2 { 
  background-image: none; 
 45 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  45 
 
} 
.u-section-1 .u-form-group-3 { 
  margin-left: 0; 
} 
.u-section-1 .u-input-3 { 
  background-image: none; 
} 
.u-section-1 .u-btn-1 { 
  width: 80%; 
  font-size: 1rem; 
  background-image: none; 
  border-style: solid; 
  padding: 10px 30px; 
} 
@media (max-width: 1199px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 776px; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 940px; 
    margin-left: 0; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 412px; 
  } 
  .u-section-1 .u-layout-cell-2 { 
    min-height: 412px; 
  } 
  .u-section-1 .u-form-1 { 
    width: 379px; 
    margin-right: 0; 
    margin-left: 0; 
  } 
} 
@media (max-width: 991px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 1078px; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 720px; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 592px; 
  } 
  .u-section-1 .u-layout-cell-2 { 
    min-height: 100px; 
  } 
} 
@media (max-width: 767px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 912px; 
  } 
 46 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  46 
 
  .u-section-1 .u-layout-wrap-1 { 
    width: 540px; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 444px; 
  } 
  .u-section-1 .u-container-layout-2 { 
    padding-left: 30px; 
    padding-right: 30px; 
  } 
} 
@media (max-width: 575px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 727px; 
  } 
  .u-section-1 .u-text-1 { 
    font-size: 1.5rem; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 340px; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 280px; 
  } 
  .u-section-1 .u-form-1 { 
    width: 320px; 
  } 
} .u-section-2 { 
  background-image: url("images/Group19.svg"); 
  background-position: 50% 50%; 
} 
.u-section-2 .u-sheet-1 { 
  min-height: 453px; 
} 
.u-section-2 .u-group-elements-1 { 
  width: 602px; 
  min-height: 333px; 
  margin: 60px auto 0 0; 
} 
.u-section-2 .u-text-1 { 
  font-weight: 700; 
  letter-spacing: 3px; 
  line-height: 1.1; 
  margin: 0 auto 0 0; 
} 
.u-section-2 .u-text-2 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 23px 274px 0 0; 
} 
.u-section-2 .u-group-elements-2 { 
  width: 259px; 
 47 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  47 
 
  min-height: 77px; 
  margin: 23px auto 0 0; 
} 
.u-section-2 .u-text-3 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 0 72px 0 0; 
} 
.u-section-2 .u-text-4 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 13px 0 0; 
} 
.u-section-2 .u-group-elements-3 { 
  width: 259px; 
  min-height: 77px; 
  margin: 23px auto 0 0; 
} 
.u-section-2 .u-text-5 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 0 72px 0 0; 
} 
.u-section-2 .u-text-6 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 13px 0 0; 
} 
.u-section-2 .u-text-7 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: -197px 424px 0 auto; 
} 
.u-section-2 .u-btn-1 { 
  font-size: 1.25rem; 
  font-weight: 600; 
  border-style: solid; 
  transition-duration: 0.5s; 
  margin: 94px 339px 0 auto; 
  padding: 17px 49px 18px; 
} 
.u-section-2 .u-text-8 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: -155px 507px 0 auto; 
} 
.u-section-2 .u-btn-2 { 
  background-image: none; 
  padding: 0; 
} 
.u-section-2 .u-text-9 { 
  font-weight: 700; 
 48 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  48 
 
  font-size: 1.25rem; 
  margin: 10px auto 0 525px; 
} 
.u-section-2 .u-btn-3 { 
  background-image: none; 
  padding: 0; 
} 
.u-section-2 .u-text-10 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: -74px 368px 0 auto; 
} 
.u-section-2 .u-btn-4 { 
  background-image: none; 
  padding: 0; 
} 
.u-section-2 .u-text-11 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 10px 360px 141px auto; 
} 
.u-section-2 .u-btn-5 { 
  background-image: none; 
  padding: 0; 
} 
@media (max-width: 1199px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 374px; 
  } 
  .u-section-2 .u-group-elements-1 { 
    height: auto; 
  } 
  .u-section-2 .u-group-elements-2 { 
    height: auto; 
  } 
 
  .u-section-2 .u-group-elements-3 { 
    height: auto; 
  } 
  .u-section-2 .u-text-7 { 
    width: 192px; 
    margin-right: 350px; 
  } 
  .u-section-2 .u-btn-1 { 
    margin-right: 139px; 
  } 
  .u-section-2 .u-text-8 { 
    width: 192px; 
    margin-right: 418px; 
    margin-left: 345px; 
  } 
  .u-section-2 .u-text-9 { 
 49 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  49 
 
    width: 192px; 
    margin-left: 404px; 
  } 
  .u-section-2 .u-text-10 { 
    width: 192px; 
    margin-right: 303px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 297px; 
    margin-bottom: 60px; 
  } 
} 
@media (max-width: 991px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 286px; 
  } 
  .u-section-2 .u-text-7 { 
    margin-right: 268px; 
  } 
  .u-section-2 .u-btn-1 { 
    margin-right: 0; 
  } 
  .u-section-2 .u-text-8 { 
    margin-right: 320px; 
    margin-left: 230px; 
  } 
  .u-section-2 .u-text-9 { 
    margin-left: 298px; 
  } 
  .u-section-2 .u-text-10 { 
    margin-right: 232px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 227px; 
  } 
} 
@media (max-width: 767px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 215px; 
  } 
  .u-section-2 .u-group-elements-1 { 
    width: 540px; 
  } 
  .u-section-2 .u-text-7 { 
    margin-right: 201px; 
  } 
  .u-section-2 .u-text-8 { 
    margin-right: 240px; 
    margin-left: 137px; 
  } 
  .u-section-2 .u-text-9 { 
    margin-left: 212px; 
 50 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  50 
 
  } 
  .u-section-2 .u-text-10 { 
    margin-right: 174px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 170px; 
  } 
} 
@media (max-width: 575px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 135px; 
  } 
  .u-section-2 .u-group-elements-1 { 
    width: 340px; 
  } 
  .u-section-2 .u-text-7 { 
    margin-right: 127px; 
  } 
  .u-section-2 .u-text-8 { 
    margin-right: 151px; 
    margin-left: 33px; 
  } 
  .u-section-2 .u-text-9 { 
    margin-left: 116px; 
  } 
  .u-section-2 .u-text-10 { 
    margin-right: 110px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 107px; 
  } 
} 
.u-section-2 .u-btn-1, 
.u-section-2 .u-btn-1:before, 
.u-section-2 .u-btn-1 > .u-container-layout:before { 
  transition-property: fill, color, background-color, stroke-
width, border-style, border-width, border-top-width, border-left-
width, border-right-width, border-bottom-width, custom-border, 
borders, box-shadow, text-shadow, opacity, border-radius, stroke, 
border-color, font-size, font-style, font-weight, text-decoration, 
letter-spacing, transform, background-image, background-size, 
background-position; 
} 
HTML та CSS  сторінки «Корпоративний сайт»: 
HTML: 
<!DOCTYPE html> 
<html style="font-size: 16px;" lang="uk-UA"> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
 51 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  51 
 
    <meta charset="utf-8"> 
    <meta name="keywords" content="Sample Headline"> 
    <meta name="description" content=""> 
    <title>Корпоративний сайт</title> 
    <link rel="stylesheet" href="nicepage.css" media="screen"> 
<link rel="stylesheet" href="Корпоративний-сайт.css" 
media="screen"> 
    <script class="u-script" type="text/javascript" 
src="jquery.js" defer=""></script> 
    <script class="u-script" type="text/javascript" 
src="nicepage.js" defer=""></script> 
    <meta name="generator" content="Nicepage 4.11.3, 
nicepage.com"> 
    <link id="u-theme-google-font" rel="stylesheet" 
href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,
300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,40
0i,500,500i,600,600i,700,700i,800,800i"> 
     <script type="application/ld+json">{ 
  "@context": "http://schema.org", 
  "@type": "Organization", 
  "name": "Site1", 
  "logo": "images/Frame2.png" 
}</script> 
    <meta name="theme-color" content="#478ac9"> 
    <meta property="og:title" content="Корпоративний сайт"> 
    <meta property="og:description" content=""> 
    <meta property="og:type" content="website"> 
  </head> 
  <body class="u-body u-xl-mode"><header class="u-black u-clearfix 
u-header u-header" id="sec-f0be"><div class="u-clearfix u-sheet u-
sheet-1"> 
        <a href="Розробка.html" data-page-id="88286402" class="u-
image u-logo u-image-1" data-image-width="150" data-image-
height="100" title="Головна"> 
          <img src="images/Frame2.png" class="u-logo-image u-logo-
image-1"> 
        </a> 
        <nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1"> 
          <div class="menu-collapse" style="font-size: 1rem; 
letter-spacing: 0px; font-weight: 700; text-transform: 
uppercase;"> 
            <a class="u-button-style u-custom-active-border-color 
u-custom-border u-custom-border-color u-custom-borders u-custom-
hover-border-color u-custom-left-right-menu-spacing u-custom-
padding-bottom u-custom-text-active-color u-custom-text-color u-
custom-text-hover-color u-custom-top-bottom-menu-spacing u-nav-
link u-text-active-palette-1-base u-text-hover-palette-2-base" 
href="#"> 
              <svg class="u-svg-link" viewBox="0 0 24 24"><use 
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-
hamburger"></use></svg> 
 52 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  52 
 
              <svg class="u-svg-content" version="1.1" id="menu-
hamburger" viewBox="0 0 16 16" x="0px" y="0px" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg"><g><rect y="1" width="16" 
height="2"></rect><rect y="7" width="16" height="2"></rect><rect 
y="13" width="16" height="2"></rect> 
</g></svg> 
            </a> 
          </div> 
          <div class="u-custom-menu u-nav-container"> 
            <ul class="u-nav u-spacing-2 u-unstyled u-nav-1"><li 
class="u-nav-item"><a class="u-border-2 u-border-active-grey-90 u-
border-hover-grey-50 u-button-style u-nav-link u-text-active-white 
u-text-hover-palette-1-base" href="Розробка.html" style="padding: 
10px 20px;">Розробка</a><div class="u-nav-popup"><ul class="u-h-
spacing-20 u-nav u-unstyled u-v-spacing-10"><li class="u-nav-
item"><a class="u-button-style u-nav-link u-white" href="Інтернет-
магазин.html">Інтернет магазин</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-
white" href="Корпоративний-сайт.html">Корпоративні сайти</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-
white" href="Landing-page.html">Landing page</a> 
</li></ul> 
</div> 
</li><li class="u-nav-item"><a class="u-border-2 u-border-active-
grey-90 u-border-hover-grey-50 u-button-style u-nav-link u-text-
active-white u-text-hover-palette-1-base" href="Landing-
page.html#sec-e78a" data-page-id="79438839" style="padding: 10px 
20px;">Контакты</a> 
</li><li class="u-nav-item"><a class="u-border-2 u-border-active-
grey-90 u-border-hover-grey-50 u-button-style u-nav-link u-text-
active-white u-text-hover-palette-1-base" href="Підтримка.html" 
style="padding: 10px 20px;">Підтримка</a> 
</li></ul> 
          </div> 
          <div class="u-custom-menu u-nav-container-collapse"> 
            <div class="u-black u-container-style u-inner-
container-layout u-opacity u-opacity-95 u-sidenav"> 
              <div class="u-inner-container-layout u-sidenav-
overflow"> 
                <div class="u-menu-close"></div> 
                <ul class="u-align-center u-nav u-popupmenu-items 
u-unstyled u-nav-3"><li class="u-nav-item"><a class="u-button-
style u-nav-link" href="Розробка.html">Розробка</a><div class="u-
nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled u-v-spacing-
10"><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Інтернет-магазин.html">Інтернет магазин</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Корпоративний-сайт.html">Корпоративні сайти</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Landing-page.html">Landing page</a> 
</li></ul> 
 53 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  53 
 
</div> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Landing-page.html#sec-e78a" data-page-
id="79438839">Контакты</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Підтримка.html">Підтримка</a> 
</li></ul> 
              </div> 
            </div> 
            <div class="u-black u-menu-overlay u-opacity u-
opacity-70"></div> 
          </div> 
        </nav> 
      </div></header> 
    <section class="u-clearfix u-white u-section-1" id="sec-f16d"> 
      <div class="u-clearfix u-sheet u-sheet-1"> 
        <div class="u-clearfix u-gutter-10 u-layout-wrap u-layout-
wrap-1"> 
          <div class="u-layout" style=""> 
            <div class="u-layout-row" style=""> 
              <div class="u-align-left u-container-style u-layout-
cell u-left-cell u-size-30 u-size-xs-60 u-layout-cell-1" src=""> 
                <div class="u-container-layout u-container-layout-
1"></div> 
              </div> 
              <div class="u-container-style u-image u-layout-cell 
u-right-cell u-size-30 u-size-xs-60 u-image-1" src="" data-image-
width="887" data-image-height="638"> 
                <div class="u-container-layout u-container-layout-
2" src=""> 
                  <h2 class="u-text u-text-1"> Створення та 
розробка корпоративного сайта</h2> 
                  <a href="Інтернет-магазин.html#carousel_e10d" 
data-page-id="74862838" class="u-black u-border-none u-btn u-
button-style u-btn-1">Замовити</a> 
                  <h2 class="u-text u-text-2"> Вартість від 
340$</h2> 
                </div> 
              </div> 
            </div> 
          </div> 
        </div> 
        <p class="u-text u-text-3"> Завдання корпоративного сайту 
- правильна подача інформації про компанію, її послуги і товари. 
Такий тип сайту дозволить поліпшити імідж, впізнаваність і 
комунікацію між користувачами і компанією. <br> 
        </p> 
      </div> 
    </section> 
    <section class="u-clearfix u-section-2" id="sec-c526"> 
      <div class="u-clearfix u-sheet u-sheet-1"> 
 54 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  54 
 
        <img class="u-image u-image-default u-image-1" 
src="images/Group30.png" alt="" data-image-width="1172" data-
image-height="630"> 
      </div> 
    </section> 
    <section class="u-black u-clearfix u-section-3" 
id="carousel_e10d"> 
      <div class="u-clearfix u-sheet u-sheet-1"> 
        <h3 class="u-text u-text-default u-text-1">Послуги</h3> 
        <p class="u-text u-text-default u-text-2"> Давайте 
обговоримо ваші завдання. Зв'яжіться сьогодні!</p> 
        <div class="u-clearfix u-layout-wrap u-layout-wrap-1"> 
          <div class="u-layout"> 
            <div class="u-layout-row"> 
              <div class="u-container-style u-image u-layout-cell 
u-left-cell u-size-32-lg u-size-32-xl u-size-60-md u-size-60-sm u-
size-60-xs u-image-1" data-image-width="725" data-image-
height="640"> 
                <div class="u-container-layout u-container-layout-
1"></div> 
              </div> 
              <div class="u-align-left u-black u-container-style 
u-layout-cell u-right-cell u-size-28-lg u-size-28-xl u-size-60-md 
u-size-60-sm u-size-60-xs u-layout-cell-2"> 
                <div class="u-border-2 u-border-white u-container-
layout u-container-layout-2"> 
                  <div class="u-form u-form-1"> 
                    <form action="#" method="POST" class="u-
clearfix u-form-spacing-25 u-form-vertical u-inner-form" 
source="email" name="form" style="padding: 10px;"> 
                      <div class="u-form-group u-form-name u-form-
group-1"> 
                        <label for="name-ced0" class="u-
label">Ім'я</label> 
                        <input type="text" placeholder="Введіть 
Ваше ім'я" id="name-ced0" name="name" class="u-border-1 u-border-
no-left u-border-no-right u-border-no-top u-border-white u-input 
u-input-rectangle" required=""> 
                      </div> 
                      <div class="u-form-group u-form-phone u-
form-group-2"> 
                        <label for="phone-dbda" class="u-
label">Телефон</label> 
                        <input type="tel" 
pattern="\+?\d{0,3}[\s\(\-]?([0-9]{2,3})[\s\)\-]?([\s\-]?)([0-
9]{3})[\s\-]?([0-9]{2})[\s\-]?([0-9]{2})" placeholder="Телефон у 
форматі +38(0хх) хх хх ххх" id="phone-dbda" name="phone" class="u-
border-1 u-border-no-left u-border-no-right u-border-no-top u-
border-white u-input u-input-rectangle" required=""> 
                      </div> 
                      <div class="u-form-email u-form-group u-
form-group-3"> 
 55 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  55 
 
                        <label for="email-a917" class="u-label">E-
mail</label> 
                        <input type="email" placeholder="Введіть 
Вашу email адресу" id="email-a917" name="email" class="u-border-1 
u-border-no-left u-border-no-right u-border-no-top u-border-white 
u-input u-input-rectangle" required=""> 
                      </div> 
                      <div class="u-form-group u-form-select u-
form-group-4"> 
                        <label for="select-633c" class="u-
label">Выбрать</label> 
                        <div class="u-form-select-wrapper"> 
                          <select id="select-633c" name="select" 
class="u-border-1 u-border-no-left u-border-no-right u-border-no-
top u-border-white u-input u-input-rectangle" required="required"> 
                            <option value="Інтернет 
магазин">Інтернет магазин</option> 
                            <option value="Корпоративний 
сайт">Корпоративний сайт</option> 
                            <option value="Landing page">Landing 
page</option> 
                            <option value="Бізнес сайт">Бізнес 
сайт</option> 
                            <option value="Сайт візитка">Сайт 
візитка</option> 
                            <option value="Редизайн 
сайту">Редизайн сайту</option> 
                          </select> 
                          <svg xmlns="http://www.w3.org/2000/svg" 
width="14" height="12" version="1" class="u-caret"><path 
fill="currentColor" d="M4 8L0 4h8z"></path></svg> 
                        </div> 
                      </div> 
                      <div class="u-align-center u-form-group u-
form-submit"> 
                        <a href="#" class="u-black u-border-2 u-
border-white u-btn u-btn-submit u-button-style u-text-white u-btn-
1">Відправити запит<br> 
                        </a> 
                        <input type="submit" value="submit" 
class="u-form-control-hidden"> 
                      </div> 
                      <div class="u-form-send-message u-form-send-
success">Дякуємо за Ваш запит! Чекайте на відповідь.</div> 
                      <div class="u-form-send-error u-form-send-
message">Відправлення не вдалося. Будь ласка, виправте помилки та 
спробуйте ще раз.</div> 
                      <input type="hidden" value="" 
name="recaptchaResponse"> 
                    </form> 
                  </div> 
                </div> 
 56 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  56 
 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </section> 
    <section class="u-clearfix u-image u-section-4" id="sec-e78a" 
data-image-width="1480" data-image-height="801"> 
      <div class="u-clearfix u-sheet u-sheet-1"> 
        <div class="u-clearfix u-group-elements u-group-elements-
1"> 
          <h2 class="u-text u-text-default u-text-white u-text-
1">Хочете зробити щось велике? <br>Дозвольте допомогти вам.<br> 
          </h2> 
          <p class="u-text u-text-white u-text-2"> Чи готові? 
Зв'яжіться сьогодні.</p> 
          <div class="u-clearfix u-group-elements u-group-
elements-2"> 
            <p class="u-text u-text-white u-text-3">Почати 
розмову</p> 
            <p class="u-text u-text-white u-text-
4">[email protected]</p> 
          </div> 
          <div class="u-clearfix u-group-elements u-group-
elements-3"> 
            <p class="u-text u-text-white u-text-5">Номер 
телефону</p> 
            <p class="u-text u-text-white u-text-6">+38(0хх) хх хх 
ххх</p> 
          </div> 
        </div> 
        <p class="u-text u-text-default u-text-white u-text-7">Ми 
в соцмережах&nbsp;</p> 
        <a href="Корпоративний-сайт.html#carousel_e10d" data-page-
id="2705029622" class="u-border-2 u-border-grey-75 u-btn u-button-
style u-white u-btn-1">Відправити запит</a> 
        <p class="u-text u-text-default u-text-white u-text-8"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-white u-btn-2" 
href="https://instagram.com">Instagram&nbsp;</a> 
        </p> 
        <p class="u-text u-text-default u-text-white u-text-9"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-3" href="https://Facebook.com">Facebook&nbsp;</a> 
        </p> 
        <p class="u-text u-text-default u-text-white u-text-10"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-4" href="https://behance.net"> Behance&nbsp;</a> 
        </p> 
        <p class="u-text u-text-default u-text-white u-text-11"> 
 57 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  57 
 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-5" href="https://pinterest.com"> Pinterest&nbsp;</a> 
        </p> 
      </div> 
    </section> 
    <footer class="u-align-center u-clearfix u-footer u-grey-80 u-
footer" id="sec-2ac7"><div class="u-clearfix u-sheet u-sheet-1"> 
        <a href="Розробка.html" data-page-id="88286402" class="u-
image u-logo u-image-1" data-image-width="150" data-image-
height="100" title="Головна"> 
          <img src="images/Frame2.png" class="u-logo-image u-logo-
image-1"> 
        </a> 
        <p class="u-small-text u-text u-text-variant u-text-1"> 
Всі права захищені. Часткове або повне копіювання інформації сайту 
можливо тільки з дозволу</p> 
      </div> 
 </footer> 
  </body> 
</html> 
CSS: 
.u-section-1 { 
  background-image: none; 
} 
.u-section-1 .u-sheet-1 { 
  min-height: 875px; 
} 
.u-section-1 .u-text-1 { 
  font-size: 2.25rem; 
  font-weight: 700; 
  margin: 89px auto 0 0; 
} 
.u-section-1 .u-text-2 { 
  font-size: 1.25rem; 
  margin: 18px auto 0 0; 
} 
.u-section-1 .u-layout-wrap-1 { 
  width: 1287px; 
  margin: 40px auto 60px -147px; 
} 
.u-section-1 .u-image-1 { 
  min-height: 564px; 
  background-image: url("images/10053496-eddf-be8a-1c79-
9613479ff0f4.png"); 
  background-position: 50% 50%; 
} 
.u-section-1 .u-container-layout-1 { 
  padding: 0; 
} 
.u-section-1 .u-layout-cell-2 { 
 58 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  58 
 
  min-height: 564px; 
} 
.u-section-1 .u-container-layout-2 { 
  padding: 22px 24px 30px; 
} 
.u-section-1 .u-form-1 { 
  height: 374px; 
  margin: 71px -2px 0 16px; 
} 
.u-section-1 .u-form-group-1 { 
  margin-left: 0; 
} 
.u-section-1 .u-input-1 { 
  background-image: none; 
} 
 
.u-section-1 .u-form-group-2 { 
  margin-left: 0; 
} 
.u-section-1 .u-input-2 { 
  background-image: none; 
} 
.u-section-1 .u-form-group-3 { 
  margin-left: 0; 
} 
.u-section-1 .u-input-3 { 
  background-image: none; 
} 
.u-section-1 .u-btn-1 { 
  width: 80%; 
  font-size: 1rem; 
  background-image: none; 
  border-style: solid; 
  padding: 10px 30px; 
} 
 
@media (max-width: 1199px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 776px; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 940px; 
    margin-left: 0; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 412px; 
  } 
  .u-section-1 .u-layout-cell-2 { 
    min-height: 412px; 
  } 
  .u-section-1 .u-form-1 { 
    width: 379px; 
 59 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  59 
 
    margin-right: 0; 
    margin-left: 0; 
  } 
} 
@media (max-width: 991px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 1078px; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 720px; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 592px; 
  } 
  .u-section-1 .u-layout-cell-2 { 
    min-height: 100px; 
  } 
} 
@media (max-width: 767px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 912px; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 540px; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 444px; 
  } 
  .u-section-1 .u-container-layout-2 { 
    padding-left: 30px; 
    padding-right: 30px; 
  } 
} 
@media (max-width: 575px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 727px; 
  } 
  .u-section-1 .u-text-1 { 
    font-size: 1.5rem; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 340px; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 280px; 
  } 
  .u-section-1 .u-form-1 { 
    width: 320px; 
  } 
} .u-section-2 { 
  background-image: url("images/Group19.svg"); 
  background-position: 50% 50%; 
 60 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  60 
 
} 
.u-section-2 .u-sheet-1 { 
  min-height: 453px; 
} 
.u-section-2 .u-group-elements-1 { 
  width: 602px; 
  min-height: 333px; 
  margin: 60px auto 0 0; 
} 
.u-section-2 .u-text-1 { 
  font-weight: 700; 
  letter-spacing: 3px; 
  line-height: 1.1; 
  margin: 0 auto 0 0; 
} 
.u-section-2 .u-text-2 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 23px 274px 0 0; 
} 
.u-section-2 .u-group-elements-2 { 
  width: 259px; 
  min-height: 77px; 
  margin: 23px auto 0 0; 
} 
.u-section-2 .u-text-3 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 0 72px 0 0; 
} 
.u-section-2 .u-text-4 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 13px 0 0; 
} 
.u-section-2 .u-group-elements-3 { 
  width: 259px; 
  min-height: 77px; 
  margin: 23px auto 0 0; 
} 
.u-section-2 .u-text-5 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 0 72px 0 0; 
} 
.u-section-2 .u-text-6 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 13px 0 0; 
} 
.u-section-2 .u-text-7 { 
  font-weight: 700; 
 61 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  61 
 
  font-size: 1.25rem; 
  margin: -197px 424px 0 auto; 
} 
.u-section-2 .u-btn-1 { 
  font-size: 1.25rem; 
  font-weight: 600; 
  border-style: solid; 
  transition-duration: 0.5s; 
  margin: 94px 339px 0 auto; 
  padding: 17px 49px 18px; 
} 
.u-section-2 .u-text-8 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: -155px 507px 0 auto; 
} 
.u-section-2 .u-btn-2 { 
  background-image: none; 
  padding: 0; 
} 
.u-section-2 .u-text-9 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 10px auto 0 525px; 
} 
.u-section-2 .u-btn-3 { 
  background-image: none; 
  padding: 0; 
} 
.u-section-2 .u-text-10 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: -74px 368px 0 auto; 
} 
.u-section-2 .u-btn-4 { 
  background-image: none; 
  padding: 0; 
} 
.u-section-2 .u-text-11 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 10px 360px 141px auto; 
} 
.u-section-2 .u-btn-5 { 
  background-image: none; 
  padding: 0; 
} 
@media (max-width: 1199px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 374px; 
  } 
  .u-section-2 .u-group-elements-1 { 
 62 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  62 
 
    height: auto; 
  } 
  .u-section-2 .u-group-elements-2 { 
    height: auto; 
  } 
  .u-section-2 .u-group-elements-3 { 
    height: auto; 
  } 
  .u-section-2 .u-text-7 { 
    width: 192px; 
    margin-right: 350px; 
  } 
  .u-section-2 .u-btn-1 { 
    margin-right: 139px; 
  } 
  .u-section-2 .u-text-8 { 
    width: 192px; 
    margin-right: 418px; 
    margin-left: 345px; 
  } 
  .u-section-2 .u-text-9 { 
    width: 192px; 
    margin-left: 404px; 
  } 
  .u-section-2 .u-text-10 { 
    width: 192px; 
    margin-right: 303px; 
  } 
 .u-section-2 .u-text-11 { 
    margin-right: 297px; 
    margin-bottom: 60px; 
  } 
} 
@media (max-width: 991px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 286px; 
  } 
  .u-section-2 .u-text-7 { 
    margin-right: 268px; 
  } 
  .u-section-2 .u-btn-1 { 
    margin-right: 0; 
  } 
  .u-section-2 .u-text-8 { 
    margin-right: 320px; 
    margin-left: 230px; 
  } 
  .u-section-2 .u-text-9 { 
    margin-left: 298px; 
  } 
  .u-section-2 .u-text-10 { 
    margin-right: 232px; 
 63 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  63 
 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 227px; 
  } 
} 
@media (max-width: 767px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 215px; 
  } 
  .u-section-2 .u-group-elements-1 { 
    width: 540px; 
  } 
  .u-section-2 .u-text-7 { 
    margin-right: 201px; 
  } 
  .u-section-2 .u-text-8 { 
    margin-right: 240px; 
    margin-left: 137px; 
  } 
  .u-section-2 .u-text-9 { 
    margin-left: 212px; 
  } 
  .u-section-2 .u-text-10 { 
    margin-right: 174px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 170px; 
  } 
} 
@media (max-width: 575px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 135px; 
  } 
  .u-section-2 .u-group-elements-1 { 
    width: 340px; 
  } 
  .u-section-2 .u-text-7 { 
    margin-right: 127px; 
  } 
  .u-section-2 .u-text-8 { 
    margin-right: 151px; 
    margin-left: 33px; 
  } 
  .u-section-2 .u-text-9 { 
    margin-left: 116px; 
  } 
  .u-section-2 .u-text-10 { 
    margin-right: 110px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 107px; 
  } 
 64 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  64 
 
} 
.u-section-2 .u-btn-1, 
.u-section-2 .u-btn-1:before, 
.u-section-2 .u-btn-1 > .u-container-layout:before { 
  transition-property: fill, color, background-color, stroke-
width, border-style, border-width, border-top-width, border-left-
width, border-right-width, border-bottom-width, custom-border, 
borders, box-shadow, text-shadow, opacity, border-radius, stroke, 
border-color, font-size, font-style, font-weight, text-decoration, 
letter-spacing, transform, background-image, background-size, 
background-position; 
} 
HTML та CSS  сторінки «Підтримка»: 
HTML: 
<!DOCTYPE html> 
<html style="font-size: 16px;" lang="uk-UA"> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-
scale=1.0"> 
    <meta charset="utf-8"> 
    <meta name="keywords" content="Sample Headline"> 
    <meta name="description" content=""> 
    <title>Підтримка</title> 
    <link rel="stylesheet" href="nicepage.css" media="screen"> 
<link rel="stylesheet" href="Підтримка.css" media="screen"> 
    <script class="u-script" type="text/javascript" 
src="jquery.js" defer=""></script> 
    <script class="u-script" type="text/javascript" 
src="nicepage.js" defer=""></script> 
    <meta name="generator" content="Nicepage 4.11.3, 
nicepage.com"> 
    <link id="u-theme-google-font" rel="stylesheet" 
href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,
300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,40
0i,500,500i,600,600i,700,700i,800,800i"> 
     <script type="application/ld+json">{ 
  "@context": "http://schema.org", 
  "@type": "Organization", 
  "name": "Site1", 
  "logo": "images/Frame2.png" 
}</script> 
    <meta name="theme-color" content="#478ac9"> 
    <meta property="og:title" content="Підтримка"> 
    <meta property="og:description" content=""> 
    <meta property="og:type" content="website"> 
  </head> 
  <body class="u-body u-xl-mode"><header class="u-black u-clearfix 
u-header u-header" id="sec-f0be"><div class="u-clearfix u-sheet u-
sheet-1"> 
 65 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  65 
 
        <a href="Розробка.html" data-page-id="88286402" class="u-
image u-logo u-image-1" data-image-width="150" data-image-
height="100" title="Головна"> 
          <img src="images/Frame2.png" class="u-logo-image u-logo-
image-1"> 
        </a> 
        <nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1"> 
          <div class="menu-collapse" style="font-size: 1rem; 
letter-spacing: 0px; font-weight: 700; text-transform: 
uppercase;"> 
            <a class="u-button-style u-custom-active-border-color 
u-custom-border u-custom-border-color u-custom-borders u-custom-
hover-border-color u-custom-left-right-menu-spacing u-custom-
padding-bottom u-custom-text-active-color u-custom-text-color u-
custom-text-hover-color u-custom-top-bottom-menu-spacing u-nav-
link u-text-active-palette-1-base u-text-hover-palette-2-base" 
href="#"> 
              <svg class="u-svg-link" viewBox="0 0 24 24"><use 
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-
hamburger"></use></svg> 
              <svg class="u-svg-content" version="1.1" id="menu-
hamburger" viewBox="0 0 16 16" x="0px" y="0px" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg"><g><rect y="1" width="16" 
height="2"></rect><rect y="7" width="16" height="2"></rect><rect 
y="13" width="16" height="2"></rect> 
</g></svg> 
            </a> 
          </div> 
          <div class="u-custom-menu u-nav-container"> 
            <ul class="u-nav u-spacing-2 u-unstyled u-nav-1"><li 
class="u-nav-item"><a class="u-border-2 u-border-active-grey-90 u-
border-hover-grey-50 u-button-style u-nav-link u-text-active-white 
u-text-hover-palette-1-base" href="Розробка.html" style="padding: 
10px 20px;">Розробка</a><div class="u-nav-popup"><ul class="u-h-
spacing-20 u-nav u-unstyled u-v-spacing-10"><li class="u-nav-
item"><a class="u-button-style u-nav-link u-white" href="Інтернет-
магазин.html">Інтернет магазин</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-
white" href="Корпоративний-сайт.html">Корпоративні сайти</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-
white" href="Landing-page.html">Landing page</a> 
</li></ul> 
</div> 
</li><li class="u-nav-item"><a class="u-border-2 u-border-active-
grey-90 u-border-hover-grey-50 u-button-style u-nav-link u-text-
active-white u-text-hover-palette-1-base" href="Landing-
page.html#sec-e78a" data-page-id="79438839" style="padding: 10px 
20px;">Контакты</a> 
</li><li class="u-nav-item"><a class="u-border-2 u-border-active-
grey-90 u-border-hover-grey-50 u-button-style u-nav-link u-text-
 66 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  66 
 
active-white u-text-hover-palette-1-base" href="Підтримка.html" 
style="padding: 10px 20px;">Підтримка</a> 
</li></ul> 
          </div> 
          <div class="u-custom-menu u-nav-container-collapse"> 
            <div class="u-black u-container-style u-inner-
container-layout u-opacity u-opacity-95 u-sidenav"> 
              <div class="u-inner-container-layout u-sidenav-
overflow"> 
                <div class="u-menu-close"></div> 
                <ul class="u-align-center u-nav u-popupmenu-items 
u-unstyled u-nav-3"><li class="u-nav-item"><a class="u-button-
style u-nav-link" href="Розробка.html">Розробка</a><div class="u-
nav-popup"><ul class="u-h-spacing-20 u-nav u-unstyled u-v-spacing-
10"><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Інтернет-магазин.html">Інтернет магазин</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Корпоративний-сайт.html">Корпоративні сайти</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Landing-page.html">Landing page</a> 
</li></ul> 
</div> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Landing-page.html#sec-e78a" data-page-
id="79438839">Контакты</a> 
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" 
href="Підтримка.html">Підтримка</a> 
</li></ul> 
              </div> 
            </div> 
            <div class="u-black u-menu-overlay u-opacity u-
opacity-70"></div> 
          </div> 
        </nav> 
      </div></header> 
    <section class="u-black u-clearfix u-section-1" 
id="carousel_e10d"> 
      <div class="u-clearfix u-sheet u-sheet-1"> 
        <h3 class="u-text u-text-default u-text-1">Є питання?</h3> 
        <p class="u-text u-text-default u-text-2"> Давайте 
обговоримо ваші завдання. Зв'яжіться сьогодні!</p> 
        <div class="u-clearfix u-layout-wrap u-layout-wrap-1"> 
          <div class="u-layout"> 
            <div class="u-layout-row"> 
              <div class="u-container-style u-image u-layout-cell 
u-left-cell u-size-32-lg u-size-32-xl u-size-60-md u-size-60-sm u-
size-60-xs u-image-1" data-image-width="725" data-image-
height="640"> 
                <div class="u-container-layout u-container-layout-
1"></div> 
              </div> 
 67 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  67 
 
              <div class="u-align-left u-black u-container-style 
u-layout-cell u-right-cell u-size-28-lg u-size-28-xl u-size-60-md 
u-size-60-sm u-size-60-xs u-layout-cell-2"> 
                <div class="u-border-2 u-border-white u-container-
layout u-container-layout-2"> 
                  <div class="u-form u-form-1"> 
                    <form action="#" method="POST" class="u-
clearfix u-form-spacing-25 u-form-vertical u-inner-form" 
source="email" name="form" style="padding: 10px;"> 
                      <div class="u-form-group u-form-name u-form-
group-1"> 
                        <label for="name-ced0" class="u-
label">Ім'я</label> 
                        <input type="text" placeholder="Введіть 
Ваше ім'я" id="name-ced0" name="name" class="u-black u-border-1 u-
border-no-left u-border-no-right u-border-no-top u-border-white u-
input u-input-rectangle u-input-1" required="" maxlength="50"> 
                      </div> 
                      <div class="u-form-group u-form-phone u-
form-group-2"> 
                        <label for="phone-dbda" class="u-
label">Телефон</label> 
                        <input type="tel" pattern="[\(\-]?([0-
9]{3})[\)\-]?[\/\s]?([0-9\-]{3,9})" placeholder="Телефон у форматі 
(0хх) ххх-хххх" id="phone-dbda" name="phone" class="u-black u-
border-1 u-border-no-left u-border-no-right u-border-no-top u-
border-white u-input u-input-rectangle u-input-2" required="" 
maxlength="50"> 
                      </div> 
                      <div class="u-form-email u-form-group u-
form-group-3"> 
                        <label for="email-a917" class="u-label">E-
mail</label> 
                        <input type="email" placeholder="Введіть 
Вашу email адресу" id="email-a917" name="email" class="u-black u-
border-1 u-border-no-left u-border-no-right u-border-no-top u-
border-white u-input u-input-rectangle u-input-3" required="" 
maxlength="50"> 
                      </div> 
                      <div class="u-align-center u-form-group u-
form-submit"> 
                        <a href="#" class="u-black u-border-2 u-
border-white u-btn u-btn-submit u-button-style u-hover-palette-4-
light-2 u-text-hover-black u-text-white u-btn-1">Відправити 
запит<br> 
                        </a> 
                        <input type="submit" value="submit" 
class="u-form-control-hidden"> 
                      </div> 
                      <div class="u-form-send-message u-form-send-
success"> Спасибо! Ваше сообщение отправлено. </div> 
 68 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  68 
 
                      <div class="u-form-send-error u-form-send-
message"> Отправка не удалась. Пожалуйста, исправьте ошибки и 
попробуйте еще раз. </div> 
                      <input type="hidden" value="" 
name="recaptchaResponse"> 
                    </form> 
                  </div> 
                </div> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </section> 
    <section class="u-clearfix u-image u-section-2" id="sec-e78a" 
data-image-width="1480" data-image-height="801"> 
      <div class="u-clearfix u-sheet u-valign-middle u-sheet-1"> 
        <div class="u-clearfix u-group-elements u-group-elements-
1"> 
          <h2 class="u-text u-text-default u-text-white u-text-
1">Хочете зробити щось велике? <br>Дозвольте допомогти вам.<br> 
          </h2> 
          <p class="u-text u-text-white u-text-2"> Чи готові? 
Зв'яжіться сьогодні.</p> 
          <div class="u-clearfix u-group-elements u-group-
elements-2"> 
            <p class="u-text u-text-white u-text-3">Почати 
розмову</p> 
            <p class="u-text u-text-white u-text-
4">[email protected]</p> 
          </div> 
          <div class="u-clearfix u-group-elements u-group-
elements-3"> 
            <p class="u-text u-text-white u-text-5">Номер 
телефону</p> 
            <p class="u-text u-text-white u-text-6">+38(0хх) хх хх 
ххх</p> 
          </div> 
        </div> 
        <p class="u-text u-text-default u-text-white u-text-7">Ми 
в соцмережах&nbsp;</p> 
        <a href="#" class="u-border-2 u-btn u-button-style u-
hover-feature u-hover-palette-4-light-2 u-text-hover-black u-
border-black u-white u-btn-1">Відправити запит</a> 
        <p class="u-text u-text-default u-text-white u-text-8"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-2" href="https://instagram.com">Instagram&nbsp;</a> 
        </p> 
        <p class="u-text u-text-default u-text-white u-text-9"> 
 69 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  69 
 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-3" href="https://Facebook.com">Facebook&nbsp;</a> 
        </p> 
        <p class="u-text u-text-default u-text-white u-text-10"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-4" href="https://Behance.net"> Behance&nbsp;</a> 
        </p> 
        <p class="u-text u-text-default u-text-white u-text-11"> 
          <a class="u-active-none u-border-none u-btn u-button-
link u-button-style u-hover-none u-none u-text-body-alt-color u-
btn-5" href="https://Pinterest.com"> Pinterest&nbsp;</a> 
        </p> 
      </div> 
       
    </section> 
    <footer class="u-align-center u-clearfix u-footer u-grey-80 u-
footer" id="sec-2ac7"><div class="u-clearfix u-sheet u-sheet-1"> 
        <a href="Розробка.html" data-page-id="88286402" class="u-
image u-logo u-image-1" data-image-width="150" data-image-
height="100" title="Головна"> 
          <img src="images/Frame2.png" class="u-logo-image u-logo-
image-1"> 
        </a> 
        <p class="u-small-text u-text u-text-variant u-text-1"> 
Всі права захищені. Часткове або повне копіювання інформації сайту 
можливо тільки з дозволу</p> 
      </div></footer> 
    <section class="u-backlink u-clearfix u-grey-80"> 
      <a class="u-link" href="https://nicepage.com/website-
templates" target="_blank"> 
        <span>Free Website Templates</span> 
      </a> 
      <p class="u-text"> 
        <span>created with</span> 
      </p> 
      <a class="u-link" href="https://nicepage.studio" 
target="_blank"> 
        <span>Best Free Website Builder</span> 
      </a>.  
    </section> 
  </body> 
</html> 
CSS: 
.u-section-1 { 
  background-image: none; 
} 
.u-section-1 .u-sheet-1 { 
  min-height: 875px; 
} 
 70 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  70 
 
.u-section-1 .u-text-1 { 
  font-size: 2.25rem; 
  font-weight: 700; 
  margin: 89px auto 0 0; 
} 
.u-section-1 .u-text-2 { 
  font-size: 1.25rem; 
  margin: 18px auto 0 0; 
} 
.u-section-1 .u-layout-wrap-1 { 
  width: 1287px; 
  margin: 40px auto 60px -147px; 
} 
.u-section-1 .u-image-1 { 
  min-height: 564px; 
  background-image: url("images/10053496-eddf-be8a-1c79-
9613479ff0f4.png"); 
  background-position: 50% 50%; 
} 
.u-section-1 .u-container-layout-1 { 
  padding: 0; 
} 
.u-section-1 .u-layout-cell-2 { 
  min-height: 564px; 
} 
.u-section-1 .u-container-layout-2 { 
  padding: 22px 24px 30px; 
} 
.u-section-1 .u-form-1 { 
  height: 374px; 
  margin: 71px -2px 0 16px; 
} 
.u-section-1 .u-form-group-1 { 
  margin-left: 0; 
} 
.u-section-1 .u-input-1 { 
  background-image: none; 
} 
.u-section-1 .u-form-group-2 { 
  margin-left: 0; 
} 
.u-section-1 .u-input-2 { 
  background-image: none; 
} 
.u-section-1 .u-form-group-3 { 
  margin-left: 0; 
} 
.u-section-1 .u-input-3 { 
  background-image: none; 
} 
.u-section-1 .u-btn-1 { 
  width: 80%; 
 71 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  71 
 
  font-size: 1rem; 
  background-image: none; 
  border-style: solid; 
  padding: 10px 30px; 
} 
@media (max-width: 1199px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 776px; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 940px; 
    margin-left: 0; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 412px; 
  } 
  .u-section-1 .u-layout-cell-2 { 
    min-height: 412px; 
  } 
  .u-section-1 .u-form-1 { 
    width: 379px; 
    margin-right: 0; 
    margin-left: 0; 
  } 
} 
@media (max-width: 991px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 1078px; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 720px; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 592px; 
  } 
  .u-section-1 .u-layout-cell-2 { 
    min-height: 100px; 
  } 
} 
@media (max-width: 767px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 912px; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 540px; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 444px; 
  } 
  .u-section-1 .u-container-layout-2 { 
    padding-left: 30px; 
    padding-right: 30px; 
 72 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  72 
 
  } 
} 
@media (max-width: 575px) { 
  .u-section-1 .u-sheet-1 { 
    min-height: 727px; 
  } 
  .u-section-1 .u-text-1 { 
    font-size: 1.5rem; 
  } 
  .u-section-1 .u-layout-wrap-1 { 
    width: 340px; 
  } 
  .u-section-1 .u-image-1 { 
    min-height: 280px; 
  } 
  .u-section-1 .u-form-1 { 
    width: 320px; 
  } 
} .u-section-2 { 
  background-image: url("images/Group19.svg"); 
  background-position: 50% 50%; 
} 
.u-section-2 .u-sheet-1 { 
  min-height: 453px; 
} 
.u-section-2 .u-group-elements-1 { 
  width: 602px; 
  min-height: 333px; 
  margin: 60px auto 0 0; 
} 
.u-section-2 .u-text-1 { 
  font-weight: 700; 
  letter-spacing: 3px; 
  line-height: 1.1; 
  margin: 0 auto 0 0; 
} 
.u-section-2 .u-text-2 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 23px 274px 0 0; 
} 
.u-section-2 .u-group-elements-2 { 
  width: 259px; 
  min-height: 77px; 
  margin: 23px auto 0 0; 
} 
.u-section-2 .u-text-3 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 0 72px 0 0; 
} 
.u-section-2 .u-text-4 { 
 73 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  73 
 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 13px 0 0; 
} 
.u-section-2 .u-group-elements-3 { 
  width: 259px; 
  min-height: 77px; 
  margin: 23px auto 0 0; 
} 
.u-section-2 .u-text-5 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 0 72px 0 0; 
} 
.u-section-2 .u-text-6 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 13px 0 0; 
} 
.u-section-2 .u-text-7 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: -197px 424px 0 auto; 
} 
.u-section-2 .u-btn-1 { 
  font-size: 1.25rem; 
  font-weight: 600; 
  border-style: solid; 
  transition-duration: 0.5s; 
  margin: 94px 339px 0 auto; 
  padding: 17px 49px 18px; 
} 
.u-section-2 .u-text-8 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: -155px 507px 0 auto; 
} 
.u-section-2 .u-btn-2 { 
  background-image: none; 
  padding: 0; 
} 
.u-section-2 .u-text-9 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 10px auto 0 525px; 
} 
.u-section-2 .u-btn-3 { 
  background-image: none; 
  padding: 0; 
} 
.u-section-2 .u-text-10 { 
  font-weight: 700; 
 74 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  74 
 
  font-size: 1.25rem; 
  margin: -74px 368px 0 auto; 
} 
.u-section-2 .u-btn-4 { 
  background-image: none; 
  padding: 0; 
} 
.u-section-2 .u-text-11 { 
  font-weight: 700; 
  font-size: 1.25rem; 
  margin: 10px 360px 141px auto; 
} 
.u-section-2 .u-btn-5 { 
  background-image: none; 
  padding: 0; 
} 
@media (max-width: 1199px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 374px; 
  } 
  .u-section-2 .u-group-elements-1 { 
    height: auto; 
  } 
  .u-section-2 .u-group-elements-2 { 
    height: auto; 
  } 
  .u-section-2 .u-group-elements-3 { 
    height: auto; 
  } 
  .u-section-2 .u-text-7 { 
    width: 192px; 
    margin-right: 350px; 
  } 
  .u-section-2 .u-btn-1 { 
    margin-right: 139px; 
  } 
  .u-section-2 .u-text-8 { 
    width: 192px; 
    margin-right: 418px; 
    margin-left: 345px; 
  } 
  .u-section-2 .u-text-9 { 
    width: 192px; 
    margin-left: 404px; 
  } 
  .u-section-2 .u-text-10 { 
    width: 192px; 
    margin-right: 303px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 297px; 
    margin-bottom: 60px; 
 75 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  75 
 
  } 
} 
@media (max-width: 991px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 286px; 
  } 
  .u-section-2 .u-text-7 { 
    margin-right: 268px; 
  } 
  .u-section-2 .u-btn-1 { 
    margin-right: 0; 
  } 
  .u-section-2 .u-text-8 { 
    margin-right: 320px; 
    margin-left: 230px; 
  } 
  .u-section-2 .u-text-9 { 
    margin-left: 298px; 
  } 
  .u-section-2 .u-text-10 { 
    margin-right: 232px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 227px; 
  } 
} 
@media (max-width: 767px) { 
  .u-section-2 .u-sheet-1 { 
    min-height: 215px; 
  } 
  .u-section-2 .u-group-elements-1 { 
    width: 540px; 
  } 
  .u-section-2 .u-text-7 { 
    margin-right: 201px; 
  } 
  .u-section-2 .u-text-8 { 
    margin-right: 240px; 
    margin-left: 137px; 
  } 
  .u-section-2 .u-text-9 { 
    margin-left: 212px; 
  } 
  .u-section-2 .u-text-10 { 
    margin-right: 174px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 170px; 
  } 
} 
@media (max-width: 575px) { 
  .u-section-2 .u-sheet-1 { 
 76 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  76 
 
    min-height: 135px; 
  } 
  .u-section-2 .u-group-elements-1 { 
    width: 340px; 
  } 
  .u-section-2 .u-text-7 { 
    margin-right: 127px; 
  } 
  .u-section-2 .u-text-8 { 
    margin-right: 151px; 
    margin-left: 33px; 
  } 
  .u-section-2 .u-text-9 { 
    margin-left: 116px; 
  } 
  .u-section-2 .u-text-10 { 
    margin-right: 110px; 
  } 
  .u-section-2 .u-text-11 { 
    margin-right: 107px; 
  } 
} 
.u-section-2 .u-btn-1, 
.u-section-2 .u-btn-1:before, 
.u-section-2 .u-btn-1 > .u-container-layout:before { 
  transition-property: fill, color, background-color, stroke-
width, border-style, border-width, border-top-width, border-left-
width, border-right-width, border-bottom-width, custom-border, 
borders, box-shadow, text-shadow, opacity, border-radius, stroke, 
border-color, font-size, font-style, font-weight, text-decoration, 
letter-spacing, transform, background-image, background-size, 
background-position; 
} 
  
 77 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  77 
 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1. Хоган Б., HTML5 и CSS3. Веб-разработка по стандартам нового 
поколения - Спб.: Издательский дом "Питер", 9 нояб. 2011 г. - 272 с. 
2. Дронов, В. Django 2.1. Практика создания веб-сайтов на Python— Спб.: 
БВХ-Петербург, 2019. - 672 с. 
3. Биссекс, П. Django. Разработка веб-приложений на Python / П. Биссекс, 
Дж. Форсье: пер. з англ. - М.: Символ-Плюс, 2014. – 540 с.Петлюшкин 
А.В., HTML в Web-дизайне. – СПб.: БВХ-Петербург, 2004. – 400 с.: ил. 
4. Vincent, W. Django for Beginners: Build websites with Python and Django - 
Boston : Amazon, 2018. - 344 p 
5. Довідник. Матеріал з developer.mozilla.org – Режим доступу: 
https://developer.mozilla.org/ru/docs/Learn/Serverside/Django/Introduction  
6. Довідник. Матеріал з habr.com - Режим доступу: 
https://habr.com/ru/post/75131/  
7. Pinkham, A. Django Unleashed / 1st Edition. - Texas: Sams Publishing, 
2015. - 835 p. 
8. Итан Маркотт Отзывчивый веб-сайт / Итан Маркотт – М:Манн, Иванов 
и Фербер, 2012. – С. 176 
9. Киссейн, Э. Основы контентной стратегии / Эрин Киссейн – М:Манн, 
Иванов и Фербер. 2012 – С. 128 
10. Довідник. Матеріал з nus.org.ua - Режим доступу: 
https://nus.org.ua/articles/30-instrumentv-dlya-dystantsijnogo-
navchannyadobirka-nush/  
11. Стратегія і основні кроки при розробці web-сайту. – Режим доступу: 
http://ruszura.in.ua/neobhidno-znaty/stratehiya-i-osnovni-kroky-pry-
rozrobtsiweb-sajta.html 
12. Довідник. Матеріал з developer.mozilla.org  - Режим доступу: 
https://developer.mozilla.org/ru/docs/Learn/Serverside/Django/Introduction  
 78 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  78 
 
13. Довідник. Матеріал з ukraine.com. ua. - Режим доступу: 
https://www.ukraine.com.ua/uk/blog/seo-optimization/chto-takoe-url-adres-
sajta.html 
14. Е.В. Мальчук. HTML и CSS. Самоучитель-М. :Издательский дом 
“Вильямс”, 2008.-416 с. 
15. Design Patterns, Elements of Reusable Object-Oriented Software / 
E.Gamma, R. Helm, R. Johnson, J. Vlissides. — Boston: Addison–Wesley, 
1994. — 395 с. 
16. Steve Krug, Don't Make Me Think: A Common Sense Approach to Web 
Usability — Berkeley, CA, 2006 — 395 с. 
17. Довідник. Матеріал з djangoproject.com - Режим доступу: 
https://docs.djangoproject.com/en/4.0/ 
18. Довідник. Матеріал з javascript.info - Режим доступу: 
https://javascript.info 
19. Довідник. Матеріал з css-tricks.com- Режим доступу:  
https://css-tricks.com/complete-guide-to-css-functions/ 
20. Довідник. Матеріал з tutorialspoint.com - Режим доступу: 
https://www.tutorialspoint.com/html/ 
21. Довідник. Матеріал з metanit.com- Режим доступу: 
https://metanit.com/web/html5/ 
22. Довідник. Матеріал з metanit.com- Режим доступу:  
https://metanit.com/python/ 
23. Довідник. Матеріал з metanit.com- Режим доступу:  
https://metanit.com/python/django/ 
24. Довідник. Матеріал з habr.com- Режим доступу:   
habr.com/post/240463/ 
25. Довідник. Матеріал з znannya.org- Режим доступу:  
http://www.znannya.org/?view=concept:361 
 79 
  Арк 
ЧДТУ.222074.004 ПЗ  
Вим.      Арк.         № докум                 Підп          Дата  79
Репозиторій ЧДТУ
