« Footer (Низ сайта) для вашего сайта на Bootstrap 4 »

Описание материала:

Это пример шаблона для footer (нижней части сайта), разработанный с использованием HTML, CSS и платформы Bootstrap 4. Концепция списков использовалась с компонентами UL и LI. Элемент UL был использован с дочерними элементами LI для упорядоченного отображения деталей. Нижний колонтитул имеет цвет шрифта белый. Элементам списка назначается цвет шрифта #bfffff, который изменяется на белый, при наведении курсора. Цвет фона нижней части, нижнего колонтитула установлен #3d6277 цвет с отступом 2em. Шаг нижнего колонтитула имеет цвет фона #2d4958.

Установка:

Подключаем Bootstrap 4:

Код
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css'>


HTML код:
Код
<footer class="mainfooter" role="contentinfo">
<div class="footer-top p-y-2">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="footer-title text-xs-center">
<h4 class="p-b-1">Контакты</h4>
</div>
</div>
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Social</div>
</div>
</div>
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Social</div>
</div>
</div>
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Social</div>
</div>
</div>
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Social</div>
</div>
</div>
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Social</div>
</div>
</div>
<div class="col-md-2">
<div class="card card-primary">
<div class="card-header">Social</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="footer-pad">
<h4>Адрес</h4>
<address>
<ul class="list-unstyled">
<li>Санкт-Петербург<br>Московский пр.<br>Бизнес центр<br>Гатчинский<br></li>
<li>Тел.: +79991234567</li>
</ul>
</address>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-pad">
<h4>Наши сервисы</h4>
<ul class="list-unstyled">
<li><a href="#"></a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-pad">
<h4>Информация</h4>
<ul class="list-unstyled">
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-pad">
<h4>Популярное</h4>
<ul class="list-unstyled">
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p class="text-xs-center">© 2020г. «uFive.Ru». Все права защищены.</p>
</div>
</div>
</div>
</div>
</footer>


CSS код:
Код
footer{
  color: white;
}
footer a{
  color: #bfffff;
}
footer a:hover{
  color: white;
}

.footer-bottom{
  background: #3d6277;
  padding: 2em;
}
.footer-top{
  background: #2d4958;  
}
.footer-middle{
  background: #3d6277;
  padding-top: 2em;
  color: white;
}

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: YaVi | Категория: Меню и навигация | Просмотров: 378
Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
Войдите:
avatar