В этом уроке мы продолжим работу над нашим портфолио, добавив новые элементы и улучшив стили. Эти изменения сделают страницу более функциональной и красивой, а также помогут улучшить её структуру. Мы добавим стильный футер, чтобы завершить структуру сайта.
Теперь давайте добавим футер внизу страницы. Это стандартный элемент любого сайта, который содержит информацию о правах или другие ссылки. Мы добавим его в конце нашей страницы.
Добавьте следующий код в файл index.html под секцией "Контакты":
<footer class="footer">
<p>© 2024 Александр Иванов. Все права защищены.</p>
</footer>Что здесь происходит:
<footer class="footer"> — этот тег используется для футера сайта. Мы добавляем стандартный текст с информацией о правах.
Давайте добавим стили для нашего футера. Откройте файл styles.css и добавьте следующие стили:
/* Стили для футера */
.footer {
margin-top: 50px;
padding: 15px;
text-align: center;
background-color: #333;
color: #fff;
border-radius: 5px;
}
Что здесь происходит:
.footer — мы добавили отступ сверху и снизу, а также установили тёмный фон для футера и белый цвет текста для контраста.
text-align: center — текст выравнивается по центру футера.
Теперь откройте свою страницу в браузере и проверьте, как отображается секция "Контакты" и футер. Вы увидите, что сайт стал более завершённым и функциональным, добавив новые элементы.
Поздравляю! Теперь ваше портфолио имеет всё необходимое — контактную информацию и стильный футер. В следующем уроке мы рассмотрим, как опубликовать портфолио в интернете с помощью github pages, чтобы оно стало доступно любым пользователям