Завдання

Виконайте верстку web-сторінки на базі макета, так як показано на рисунку 5.6. Спозиціонуйте зображення, використовуючи властивість position.

Рис. 5.6. Вигляд web-сторінки в браузері

Рис. 5.7. Структура коду web-сторінки 

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку.
2. Розархівуйте в дану папку Додаткові матеріали_ПЗ5, що містить зображення, які необхідно буде розмістити на web-сторінці.
3. Відкрийте редактор коду Visual Studio Code, а в ньому — папку pr5_position.
4. У папці pr5_position створіть новий html-документ з ім’ям index.html і файл style.css, де будемо прописувати css-правила.
5. У файлі index.html cтворіть структуру коду, указану на рисунку 5.7., і підключіть відразу зовнішню таблицю стилів, файл style.css.
6. Виконайте верстку на базі макета, так як показано на рисунку 5.6.
7. Застосуйте властивості, для блоку .canvas: ширина — 800 пікселів, висота — 1000 пікселів. Колір фону — білий , а малюнок фону png (властивість background-image: url(../images/bg.png).
8. Для зображень .img-1, .img-2, .img-3 задайте властивість position, що рівна absolute. Відступ зверху — 250 пікселів. Вирівняйте зображення, щоб вони були  рівномірно розміщені по ширині так, як показано на рисунку. Для цього розрахуйте left для кожного зображення.
9. Заголовок slogan розмістіть із лівим відступом 50px, і  зверху — 150px. Позиціювання — абсолютне.
10. Заголовок second-slogan розмістіть із правим відступом 38px, і зверху — 722px. Позиціювання — абсолютне.
11. Перевірте роботу, відкривши створену web-сторінку в браузері. Запакуйте папку pr5_position в архів з ім’ям pr5_position -Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).