» »

Адаптивный низ сайта (Footer) для uCoz

Адаптивный низ сайта (Footer) для uCoz

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

И надо подчеркнуть, что когда устанавливать будите шрифты, то уже новые стили нужно прописать, что представлю ниже, которые ставятся или рядом с каркасом HTML, также можно установить стили вверх сайта. Будут на нем 2 раздела, где вы можете поставить информер или вписать свою информацию для сайта, то подойдет и под статистику. Вообще как поняли, что можно поставить любой оператор, который бы выводил ту или иную интересующие для пользователя или гостей сайта информацию. В самом низу будет идти другой цвет, который настраивается в ручную, под основной, что как уже было сказано, выставляется изображением.

Здесь вашему вниманию будут представлены снимки под адаптивность.

Так по умолчанию, как зайдете на ресурс.

Подвал - низ для сайта

Это уже где-то ближе к планшету по размерам.

Footer для сайта uCoz

Здесь уже видим под телефон или смартфон.

Мобильный низ сайта для юкоз сайта

Приступаем к установке:

Первое что делаем ставим обновленные шрифтовые стили вверх или в низ интернет ресурса.

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Вниз сайта ставим код:

Код
<footer>  
<div class="h-container">  
<div class="h-footer-tab">  
<div class="h-footer-1">  
<div class="hf-logo">ZORNET.RU</div>  
<div class="hf-desc">  
<p>На сайте zornet.ru вы найдете скрипты и шаблоны для конструктора uCoz</p>  
</div>  
<div class="hf-desc1">  
<a href="Лента.html">Карта сайта html</a> | <?if($RSS_LINK$)?><a href="$RSS_LINK$">RSS лента</a><?endif?> | $POWERED_BY$  
  <ul class="social-buttons">  
<li><a href="vk.com" class="social-buttons__vk"><i class="fa fa-vk"></i></a></li>  
<li><a href="ok.ru" class="social-buttons__ok"><i class="fa fa-odnoklassniki"></i></a></li>  
<li><a href="facebook.com" class="social-buttons__fb"><i class="fa fa-facebook"></i></a></li>  
<li><a href="twitter.com" class="social-buttons__twitter"><i class="fa fa-twitter"></i></a></li>  
<li><a href="plus.google.com" class="social-buttons__google"><i class="fa fa-google-plus"></i></a></li>  
</ul>  
</div>  
</div>  
  <div class="h-footer-2">  
  <div class="hf-title">Связь с админом</div>  
  <div class="hf-content">  
  <ul>  
  <li><a href="http://zornet.ru/index/0-3"><i class="fa fa-angle-right" aria-hidden="true"></i> Через почту E-mail</a></li>  
  <li><a href="#"></a></li>  
  <li><a href="http://zornet.ru/index/8"><i class="fa fa-angle-right" aria-hidden="true"></i> Написать Админу</a></li>  
  </ul>  
  </div>  
  </div>  
<div class="h-footer-2">  
  <div class="hf-title">Вебмастеру uCoz</div>  
  <div class="hf-content">  
  <ul>  
  <li><a href="http://zornet.ru/load/81"><i class="fa fa-angle-right" aria-hidden="true"></i> Скрипты для сайта uCoz</a></li>  
<li><a href="http://zornet.ru/load/142"><i class="fa fa-angle-right" aria-hidden="true"></i> Шаблоны для сайта uCoz</a></li>  
  </ul>  
  </div>  
  </div>  

</div>  
</div>  
<div class="hf-bottom"><div class="h-container">© 2017 Zornet.Ru - сайт по системе uCoz, где представлены скрипты и шаблоны на портал uCoz <img src="http://zornet.ru/Aben/ABGEA/Rin/retunga/flag.gif" border="0" alt="" /></div></div>  
</footer>

CSS:

Код
.social-buttons {  
  margin-right: 40px;  
margin: 9px 0px;  
}  

.social-buttons li {  
  display: inline-block;  
  margin-right: 5px;  
}  

.social-buttons li:last-child {  
  margin: 0;  
}  

.social-buttons a {  
  border-radius: 50%;  
  color: #fff;  
  display: inline-block;  
  height: 29px;  
  line-height: 29px;  
  text-align: center;  
  width: 29px;  
}  

.social-buttons a:hover {  
  background-color: #fff;  
}  

.social-buttons__vk {  
  background-color: #45688e;  
}  

.social-buttons__vk:hover {  
  color: #45688e !important;  
}  

.social-buttons__ok {  
  background-color: #f2720c;  
}  

.social-buttons__ok:hover {  
  color: #f2720c !important;  
}  

.social-buttons__fb {  
  background-color: #3a5795;  
}  

.social-buttons__fb:hover {  
  color: #3a5795 !important;  
}  

.social-buttons__twitter {  
  background-color: #55acee;  
}  

.social-buttons__twitter:hover {  
  color: #55acee !important;  
}  

.social-buttons__google {  
  background-color: #d73d32;  
}  

.social-buttons__google:hover {  
  color: #d73d32 !important;  
}  
   
.h-container {width:1150px;margin:0px auto;}  
footer {background: url(http://zornet.ru/Aben/ABGEA/Rin/retunga/1.jpg) repeat fixed center center / cover;color:#fff}  
footer a {color:rgba(255,255,255,0.6);text-decoration:none}  
footer a:hover {color:rgba(255,255,255,0.8)}  
.h-footer-tab {display:table;width:100%;padding:45px 0px}  
.h-footer-1, .h-footer-2 {display:table-cell;vertical-align:top;padding-right:30px}  
.h-footer-2 {width:20%;}  
.h-footer-2:hover .hf-title {border-color:#ff9985}  
.hf-title {padding:14px 0px;padding-bottom:20px;border-top:2px solid rgb(95,100,113);font-size:18px}  
.hf-content ul, .hf-content li {padding:0px;margin:0px}  
.hf-content li {list-style-type:none;margin-bottom:10px}  
.hf-logo {text-shadow: 2px 4px 3px rgba(0,0,0,0.3);font-size:18px;color:rgb(207, 217, 255);font-weight:bold;cursor:default}  
.hf-desc {font-size:13px;color:rgb(178,180,180);padding:15px 0px}  
.hf-bottom {opacity: 0.6;background:#03090c;padding:20px 0px}  
@media only screen and (max-width: 1180px) {  
.h-container {width:auto;padding:0px 20px;}  
}  
@media only screen and (max-width: 960px) {  
.h-footer-tab, .h-footer-1, .h-footer-2 {display:block;width:auto}  
.h-footer-2 {margin-top:30px}  
}

Если вы решили настроить кнопки шрифтовые, это размер и другое, то в этой статье как делать подробно описано.
26.08.2017 Просмотров: 412 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Kosten
Kosten 26.08.2017 14:131
0
Думаю адаптированный материал, это любой и низ сайта по мне тем более нужен для создание ресурса. Но когда его можно формировать как тебе нужно, то этот футер отлично подойдет.
Critic©
Critic© 26.08.2017 21:502
0
Но он не чем не отличается от этого, что на сайте установлен, и здесь уже встречал такой низ материала. В чем только отличие это адаптивность и можно поставить такой красивый цвет, чтоб он не полностью темный был. Но все равно нужно подбирать темные цвета, что здесь видно есть светлые очертание и они как то не очень. А большой плюс в том что наверно 99% сайтов с разной тематикой и его можно поставить на светлые.
Kosten
Kosten 26.08.2017 22:023
0
Во первых когда такой дизайн был на сайте, то он был не адаптивный под мобильные аппараты, что по тематике, здесь полностью согласен, что на многие темы его можно за пилить.
Critic©
Critic© 27.08.2017 22:274
0
Рекомендовал знакомой поставить, так она по аниме картинку туда поставила, хоть некоторые слова и не видать, но черт красиво смотрится.
Kosten
Kosten 27.08.2017 22:325
0
Но а почему бы и нет, вообще можно функций убрать а в самом низу оставить только нужную, там ссылку от конструктора, а ширина позволяет поставить различные иллюстраций на его.
avatar