« Адаптивный Footer (низ сайта) темно-серого цвета, на чистом CSS »

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

Начнем с того, что такое Footer? Это низ сайта используемый в любом дизайне, без него сайт потеряет всю свою красоту. Да, согласен, они бывают и менее заметны, но в нашем случае, это низ темно-серого цвета с четырьмя колонками, в каждой из них своя информация или категория ссылок.

Подробнее о колонках: Первая колонка это название сайта, либо логотип его, под ним краткое описание, а еще ниже находится копирайт и год создания. Вторая состоит из двух меню, в которых находятся ссылки на страницы сайта и его небольшую информацию, например карта форума. Третья, ссылки на социальные сети (ВКонтакте, Facebook, Instagram и Twitter). А в четвертой расположилась новостная рассылка, где пользователь может ввести свой email и быть в курсе всех важных событий.

Если вы хоть немного понимаете в CSS (Cascading Style Sheets), то запросто сможете изменить его под себя, поменять цвет, изменить ширину (на нашем примере ширина 1200px). А так же в HTML (HyperText Markup Language) коде заменить ссылки и всю информацию под свой сайт.

Установка:

Подключаем Bootstrap, ставим код в Head:

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


HTML код:
Код
<!----------- Footer ------------>
<footer class="footer-bs">
<div class="row">
   
<div class="col-md-3 footer-brand animated fadeInLeft">
<h2>uFive.Ru</h2>
<p>Всемирную паутину образуют миллионы веб-серверов сети Интернет, расположенных по всему миру. Веб-сервер — компьютерная программа, запускаемая на подключённом к сети компьютере и использующая протокол HTTP для передачи данных.</p>
<p>© 2014-2020 «uFive.Ru».</p>
</div>
   
<div class="col-md-4 footer-nav animated fadeInUp">
<h4>Меню</h4>
<div class="col-md-6">
<ul class="pages">
<li><a href="#">Все для uCoz</a></li>
<li><a href="#">PSD Исходники</a></li>
<li><a href="#">CSS Элементы</a></li>
<li><a href="#">Разное</a></li>
<li><a href="#">Форум</a></li>
</ul>
</div>
<div class="col-md-6">
<ul class="list">
<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-2 footer-social animated fadeInDown">
<h4>Соц.сети</h4>
<ul>
<li><a href="#">ВКонтакте</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
   
<div class="col-md-3 footer-ns animated fadeInRight">
<h4>Новостная рассылка</h4>
<p>Подпишитесь на нашу новостную рассылку, чтоб не пропустить ничего важного!</p>
<p>
<div class="input-group">
<input type="text" class="form-control" placeholder="Введите email...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-envelope"></span></button>
</span>
</div>
</p>
</div>

</div>
</footer>
</div>
<!-- Footer -->


CSS код:
Код
.footer-bs {
  background-color: #3c3d41;
  padding: 60px 40px;
  color: rgba(255,255,255,1.00);
  border-bottom-right-radius: 6px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 6px;
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.footer-bs .footer-brand, .footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { padding:10px 25px; }
.footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { border-color: transparent; }
.footer-bs .footer-brand h2 { margin:0px 0px 10px; }
.footer-bs .footer-brand p { font-size:12px; color:rgba(255,255,255,0.70); }

.footer-bs .footer-nav ul.pages { list-style:none; padding:0px; }
.footer-bs .footer-nav ul.pages li { padding:5px 0px;}
.footer-bs .footer-nav ul.pages a { color:rgba(255,255,255,1.00); font-weight:bold; text-transform:uppercase; }
.footer-bs .footer-nav ul.pages a:hover { color:rgba(255,255,255,0.80); text-decoration:none; }
.footer-bs .footer-nav h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom:10px;
}

.footer-bs .footer-nav ul.list { list-style:none; padding:0px; }
.footer-bs .footer-nav ul.list li { padding:5px 0px;}
.footer-bs .footer-nav ul.list a { color:rgba(255,255,255,0.80); }
.footer-bs .footer-nav ul.list a:hover { color:rgba(255,255,255,0.60); text-decoration:none; }

.footer-bs .footer-social ul { list-style:none; padding:0px; }
.footer-bs .footer-social h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.footer-bs .footer-social li { padding:5px 4px;}
.footer-bs .footer-social a { color:rgba(255,255,255,1.00);}
.footer-bs .footer-social a:hover { color:rgba(255,255,255,0.80); text-decoration:none; }

.footer-bs .footer-ns h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom:10px;
}
.footer-bs .footer-ns p { font-size:12px; color:rgba(255,255,255,0.70); }

@media (min-width: 768px) {
  .footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { border-left:solid 1px rgba(255,255,255,0.10); }
}


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

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

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

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


Добавил: YaVi | Категория: Меню и навигация | Просмотров: 103


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

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

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