Практичний тур номінації Web-дизайн

Завдання практичного туру по верстці односторінкового сайту "Україна незламна!"

1. Створити односторінковий сайт "Україна незламна" з застосуванням можливостей HTML, CSS, сайт складається

а) з шапки сторінки висотою 100% екрану з фоновим зображенням та заголовком, поверх фонового зображення є горизонтальне меню з логотипом (меню зосереджене в правій частині сторінки, а логотип зліва), в нижній частині фонового зображення є стрілка для користувача, як підказка для гортання сторінки нижче.

б) темної секції "Відкритий воєнний напад рф за підтримки Білорусі на Україну"

в) світлої секції "Україна понад усе!"

г) темної секції "Дякуємо ЗСУ!"

д) світлої секції "Наше життя до війни"

е) підвалу сайту з прізвищем виконавця завдання

Контентна частина обмежена шириною 1200рх

2. На сайті використовується шрифт Open Sans, міжрядковий інтервал 1.5

3. Шапка сайту - header, блок має висоту всього екрану, фонове зображення:

Поверх фонового зображення міститься горизонтальне меню сайту

4. Меню сайту:

Моя Україна -https://www.museumsun.org/history/
Хроніка війни - https://uk.wikipedia.org/wiki/%D0%A0%D0%BE%D1%81%D1%96%D0%B9%D1%81%D1%8C%D0%BA%D0%B5_%D0%B2%D1%82%D0%BE%D1%80%D0%B3%D0%BD%D0%B5%D0%BD%D0%BD%D1%8F_%D0%B2_%D0%A3%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D1%83_(%D0%B7_2022)
Допомога армії - закрите посилання

Колір шрифта rgba(255, 255, 255, 0.7), розмір шрифта 24px, інтервал між пунктами меню 20px,

контейнер з логотипом і меню має відступ внутрішній 16px. На екранах більше 767рх - пункти меню розташовані горизонтально в правій частині екрану. При наведенні курсору миші - курсор стає типу "рука" і пункт меню змінює колір шрифта на білий, з'являється колір фону #f0ee91 навколо пункта меню - 12рх, кути фону заокруглені на 10рх, та з'являються через 0,5 секунди

5. Назва сайту "Україна незламна" на екранах більше 767рх має розмір шрифта 80рх, на малих екранах 50рх, заголовок центрований, шрифт білого кольору, має тінь

6. В нижній частині блока header по центру знаходиться стрілка білого кольору, розміром шрифта 48рх "chevron-down" з бібліотеки Font awesome

7. Темні секції мають колір фону #616161

8. Білі та сірі секції мають внутрішній відступ: 32рх 16рх

9. Розмір шрифта заголовків у секціях на екранах більше 767рх - 2em, на малих екранах - 1.8em, заголовки відповідно мають білий чи чорний колір, всі літери заголовні (встановлено в css)

10. Основний розмір шрифта в секціях 1.5em і на екранах менше 1200px - 1.2em

12. У підвалі сайту розміщені іконки білого кольору соцмереж з бібліотеки Font awesome, при наведенні курсору - змінюють колір на жовтий

13 на сайті використано відеоролик флешмобу "Дякую ЗСУ"

https://youtu.be/p9rpSrVzsl4?si=s67LyJw53weNa4b3 - відео на сайті має бути адаптивним

Текст для секцій:

ВІДКРИТИЙ ВОЄННИЙ НАПАД РФ ЗА ПІДТРИМКИ БІЛОРУСІ НА УКРАЇНУ

Напад здійснено о 5:00 24 лютого 2022 року. Вторгнення є частиною російсько-української війни, розв'язаної Росією 2014 року, участь у якій РФ намагалася заперечувати. У ЗМІ та документах російське вторгнення в Україну 2022 року розглядають як агресивну війну Росії проти України. Генеральна асамблея ООН у своїй резолюції від 2 березня 2022 року засудила російське вторгнення в Україну та назвала його агресією Російської Федерації проти України

УКРАЇНА ПОНАД УСЕ!

В історії будь-якої країни бувають складні періоди і відрізки. І сьогодні Україна та весь наш народ показує свою стійкість, силу і бажання бути вільними. Поки ЗСУ захищають нас на передовій, ми робимо все можливе, щоб зміцнити наш тил, підняти бойовий дух та згуртувати українців.

ДЯКУЄМО ЗБРОЙНИМ СИЛАМ УКРАЇНИ!

Всім, хто мужньо протистоїть ворогу дякуємо, усім нашим захисникам, кожному хто ціною свого життя, своєї сили духу, своєї зброї, дарує нам можливість жити і чекати на перемогу! Сьогодні ви тримаєте небо не лише України, а й усієї Європи. Ви – останній бастіон між темрявою і світлом. Між добром і злом. Повертайтеся живими.

Віримо ЗСУ України, нашим відважним воїнам. Низько вклоняємось і дякуємо Героям, які загинули за Україну, за наш мирний спокій сьогодні....

Дякую, тобі солдате, за життя...

За мирне небо, в нас над головою.

Ховаєшся від куль ти в укриття...

Воюєш із московською ордою...

Воюєш ти, за нас.... борониш Україну!

Від напасті московської, від зла...

Покинув матір, сина та дружину...

І нищить ворогів пішов, до тла...

Над головою люті кулі свищуть,

Десь недалеко, артилерія бомбить...

Хтось живий... а хтось не дише...

Важка для України нині мить...

Та ти не побоявся...ти пішов у бій...

Щоб мирне небо було в нас над головою!

Війна іде.... ти переможеш в ній!

За тебе, помолюся Богу...

Автор : Назар Гузій 16.11.2014р. (с)"

НАШЕ ЖИТТЯ ДО ВІЙНИ!

Наше життя розділилося на «ДО» та «ПІСЛЯ». Тільки ще вчора, 23 лютого, ми прогулювалась мирними світлими вулицями, наповненими посмішками, вечеряли в кафе, ходили у кіно, відвідували гуртки та секції не знаючи, що зранку прокинемось і наше життя повністю зміниться

....вихованці гуртків програмування Комп'ютерного центру проводили "Інтелектуальний турнір", у якому змагались у логічному мисленні, кмітливості, інтелекті! Тут вирували справжні пристрасті та командний дух!

...вихованці секцій плавання, футболу та кульової стрільби приймали участь у пізнавально-інтелектуальній грі "ОЛІМПІЙСЬКЕ ЛОТО". Змагалися, проявляли себе, з користю проводили час та насолоджувалися як активною участю, так і жаданою перемогою!

...для наймолодших плавців секцій плавання керівники гуртків плавання проводили яскраве театралізоване свято "День Нептуна". У чарівній атмосфері вихованці під час змагань демонстрували свої уміння плавати. Діти отримали незабутні емоції......

у відділі художньо-естетичного виховання вихованці ансамблю спортивного бального танцю «Олімпія» демонстрували композиції чарівного вальсу, страсного танго, запальної самби та енергійного ча-ча-ча...

На екранах більше 1200рх сайт має такий вигляд: