« Адаптивный низ сайта(Footer) в тёмном исполнение, на чистом CSS »

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

Это еще один низ(footer) для сайта, созданного с использованием HTML, CSS и среды Bootstrap 4. Значки и изображения импортируются в код с их URL-адресами. Концепция списков была использована с компонентами ul и li. Элемент ul был использован с дочерними элементами li для упорядоченного отображения деталей. Форма нижнего колонтитула имеет стили фона #222, цвета шрифта #aaa и padding-top 10px. Заголовки получают набор стилей цвета #f9ac1f, межбуквенный интервал 1px и поля 30px 0 20px. Иконки социальных сетей имеют стили - непрозрачность как 0,7, радиус границы как 50%, чтобы получить форму круга, и переход как все 0.3s замедления. Значки принимают значение непрозрачности 1 при наведении курсора. В разделе об авторских правах нижнего колонтитула задан цвет фона #333, а размер шрифта - 15 пикселей. Цвет шрифта раздела об авторских правах установлен как #f9ac1f.

Установка:

Подключаем Bootstrap и Font-Awesome:

Код
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>


HTML код:
Код
<footer>

<div class="container">
<div class="row">

<div class="col-lg-4 col-md-6">
<h3>Меню сайта</h3>
<ul class="list-unstyled three-column">
<li><a href="#">Главная</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">Карта сайта</a></li>
<li><a href="#">Форум</a></li>
<li><a href="http://ufive.ru/">Шаблоны</a></li>
<li><a href="#">Карта фоурма</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Информеры</a></li>
<li><a href="#">RSS</a></li>
</ul>
<ul class="list-unstyled socila-list">
<li><img src="/img/fb.png" alt="" /></li>
<li><img src="/img/t.png" alt="" /></li>
<li><img src="/img/i.png" alt="" /></li>
<li><img src="/img/in.png" alt="" /></li>
<li><img src="/img/d.png" alt="" /></li>
</ul>
</div>
   
<div class="col-lg-4 col-md-6">
<h3>Последние материалы</h3>
<div class="media">
<a href="#" class="pull-left">
<img src="/img/64x64.jpg" alt="" class="media-object" />
</a>
<div class="media-body">
<h4 class="media-heading">uFive</h4>
<p>Бесплатное, для web разработчиков и не только.</p>
</div>
</div>
<div class="media">
<a href="#" class="pull-left">
<img src="/img/64x64.jpg" alt="" class="media-object" />
</a>
<div class="media-body">
<h4 class="media-heading">ZorNet</h4>
<p>Интересные решения для вебмастера в создание и продвижение сайтов.</p>
</div>
</div>
<div class="media">
<a href="#" class="pull-left">
<img src="/img/64x64.jpg" alt="" class="media-object" />
</a>
<div class="media-body">
<h4 class="media-heading">uCoz</h4>
<p>Бесплатная система управления сайтом и хостинг для сайтов.</p>
</div>
</div>
</div>
   
<div class="col-lg-4">
<h3>Наши работы</h3>
<img class="img-thumbnail" src="/img/150x100.jpg" alt="" />
<img class="img-thumbnail" src="/img/150x100.jpg" alt="" />
<img class="img-thumbnail" src="/img/150x100.jpg" alt="" />
<img class="img-thumbnail" src="/img/150x100.jpg" alt="" />
</div>

</div>
</div>

<div class="copyright text-center">
Copyright © 2020 <span>uFive.Ru</span>
</div>

</footer>


CSS код:
Код
footer {
  background: #222;
  color: #aaa;
  padding-top: 10px;
}

footer a {
  color: #aaa;
}

footer a:hover {
  color: #fff;
}

footer h3 {
  color: #f9ac1f;
  letter-spacing: 1px;
  margin: 30px 0 20px;
}

footer .three-column {
  overflow: hidden;
}

footer .three-column li{
  width: 33.3333%;
  float: left;
  padding: 5px 0;
}

footer .socila-list {
  overflow: hidden;
  margin: 20px 0 10px;
}

footer .socila-list li {
  float: left;
  margin-right: 3px;
  opacity: 0.7;
  overflow: hidden;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

footer .socila-list li:hover {
  opacity: 1;
}

footer .img-thumbnail {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #444;
  margin-bottom: 5px;
}

footer .copyright {
  padding: 15px 0;
  background: #333;
  margin-top: 20px;
  font-size: 15px;
}

footer .copyright span {
  color: #f9ac1f;
}


Скачать ( Размер архива 108.0 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

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

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

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

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


Добавил: YaVi | Категория: Меню и навигация | Просмотров: 46 | Загрузок: 1


Поделиться в соц. сетях:

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

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