- посилання на популярні матеріали;
- карта сайту;
- дані про компанію / власника веб-ресурсу;
- контакти;
- копірайт.
Зазвичай інформація та посилання в футері наскрізні, тобто відображаються відразу на всіх сторінках сайту.
Підвал вебсторінки в проекті "Україна незлама" створено по принципу створення карток на flexbox.
В html-коді веб-сторінки додано секцію section class="footer". Щоб обмежити ширину контентної частини підвалу до 1200рх, відповідно вкладено раніше стилізований блок .content.
Також раніше був стилізований блок .dark-container як флекс-контейнер з поведінкою флекс-елементів, тому цим блоком можна скористатись для організації флекс-контейнера вмісту підвалу. Цей флекс-контейнер буде містити 3 флекс-елементи з інформацією про авторство створення веб-сторінки, контакти в соцмережах, цим блокам буде присвоєно клас .col-3.
У флекс-елементах .col-3 розміщуюься параграфи <p> та іконки соцмереж шрифта fontawesome, який був підключений до веб-сторінки раніше.
Код підвалу веб-сторінки має вигляд:
Стилізація секції підвалу, яка має клас .footer полягає в визначені кольору фону цього блоку, кольору шрифта, та верхнього і нижнього внутрішнього відступу всередині блоку, які будуть визначати як розмістятться флекс-елементи в ньому:
Для параграфів <p>, що розміщуються всередині флес-елементів .col-3, потрібно лише перевизначити верхній та зовнішній відступи та розмістити текст по центру:
Для параграфа, який містить назву "Гурток Web-дизайну" створено клас p.footer__name, щоб додати у стилізації більший розмір шрифта, збільшити нижній зовнішній відступ:
Назва "Гурток Web-дизайну" - це гіперпосилання, що веде на сторінку гуртка сайту Вінницького міського палацу дітей та юнацтва, і це гіперпосиланя потрібно стилізувати:
При наведенні на іконки соцмереж курсором миші змінюється їх колір з білого на жовтий, тому стилізація для гіперпосилання при наведенні a:hover буде виглядати наступним чином:
Залишається тільки адаптувати підвал під малі розміри екранів