Создание сайта визитки с нуля до публикации!

Урок 6. Добавление новых элементов и стилей на страницу

В этом уроке мы добавим новые элементы на страницу портфолио и улучшим стили, чтобы сделать её ещё более привлекательной и функциональной.
Содержание

В этом уроке мы продолжим работу над нашим портфолио, добавив новые элементы и улучшив стили. Эти изменения сделают страницу более функциональной и красивой, а также помогут улучшить её структуру. Мы добавим стильный футер, чтобы завершить структуру сайта.

Добавляем футер

Теперь давайте добавим футер внизу страницы. Это стандартный элемент любого сайта, который содержит информацию о правах или другие ссылки. Мы добавим его в конце нашей страницы.

Добавьте следующий код в файл 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, чтобы оно стало доступно любым пользователям

Предыдущий урок
Следующий урок
Главная
Курсы
Блог
Меню