форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
20-04-2018 в 09:04 535

Нижняя часть сайта в тёмном стили


Нижняя часть сайта в тёмном стили
Всем привет! сегодня хочу предложить вам старую свою работу которая уже давно ждёт свою очередь что бы её опубликовали на сайте и вы могли примерить её на свой сайт

Нижняя часть сайта ( Футер ) выполнен в тёмном стиле и адаптирован под разные разрешения

Установка



Скопируйте код ниже и вставьте его в нижнюю часть сайта

Код
<div class="footer_bc">
  <div class="foot_min_bc">
  <div class="foot_min_nam_bc">НАЗВАНИЕ РАЗДЕЛА</div>
  <ul>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Главная</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Шаблоны для сайта</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Скрипты</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Музыка</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Форум</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Картинки</a></li>
  </ul>
  </div>

  <div class="foot_min_bc">
  <div class="foot_min_nam_bc">НАЗВАНИЕ РАЗДЕЛА</div>
  <ul>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Плеера</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Видео</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Вид материалов</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Комментарии</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Группы</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Привет</a></li>
  </ul>
  </div>

  <div class="foot_min_bc">
  <div class="foot_min_nam_bc">НАЗВАНИЕ РАЗДЕЛА</div>
  <ul>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Друзья</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Реклама</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Одноклассники</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Шкаф</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Стул</a></li>
  <li><a href=""><i class="fa fa-circle" aria-hidden="true"></i>Телевизор</a></li>
  </ul>
  </div>

  <div class="foot_min_bc">
  <div class="foot_min_nam_bc">НАЗВАНИЕ РАЗДЕЛА</div>
  <ul class="soc_siti">
  <li class="foot_vk"><a href=""><i class="fa fa-vk" aria-hidden="true"></i> </a></li>
  <li class="foot_yu"><a href=""><i class="fa fa-youtube-play" aria-hidden="true"></i> </a></li>
  <li class="foot_tv"><a href=""><i class="fa fa-twitter" aria-hidden="true"></i> </a></li>
  <li class="foot_gugl"><a href=""><i class="fa fa-google-plus" aria-hidden="true"></i> </a></li>
  <div id="clr"></div>
  </ul>

  <div class="foot_usss">
  <?if($GROUP_ID$='0')?>  
<a href="$LOGIN_LINK$"> вход</a>
<a href="$REGISTER_LINK$"> регистрация</a>
<?else?>
<a href="$LOGOUT_LINK$"> выход</a>
<a href="/index/8"> Профиль</a>
<?endif?>
  <div id="clr"></div>
  </div>

  <dir class="dop_foot_m">
  <a href="" title="рекомендуемый возраст: не менее 16 лет!"><span>16+</span></a>
  <a href="" title="Внимание игровой мир может быть изменен или дополнен"><i class="fa fa-cog" aria-hidden="true"></i></a>
  <div id="clr"></div>
  </dir>
  </div>

  <div id="clr"></div>
  <div class="foot_text">
  Александр Сергеевич Пушкин – символ русской поэзии, это величайший поэт не только России, но и мира. Стихи Пушкина и произведения в прозе включены в школьную программу, по ним ставят спектакли и снимают фильмы. Без Пушкина не было бы русской литературы – такой великой, как она есть. Диапазон тем, раскрытых в творчестве великого поэта, поражает: сказки, наполненные яркими образами, стихи для детей, острые эпиграммы, необыкновенно лиричные стихи о любви, стихи о верной дружбе, о любви к родине, к матери. Стихи Пушкина читаются легко, а строки проникают прямо в душу и делают ее лучше и богаче.
  </div>
</div>
<div class="footer_dop_glav">
$POWERED_BY$  
</div>
Теперь подключим стили в таблицу стилей в самый конец

Код

.footer_bc {
  background: #313131;
  padding: 30px;
  border-top: 5px solid #4A76A8;
}

.foot_min_bc {
  width: 25%;
  float: left;
  padding: 0 30px;
}

.foot_min_nam_bc {
  font-size: 16px;
  color: #FFF;
  padding: 10px 20px 30px;
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px #4A76A8, 0 0 35px #4A76A8, 0 0 40px #4A76A8, 0 0 50px #4A76A8, 0 0 75px #4A76A8;
  border-bottom: 2px solid #4A76A8;
  margin: 0 0 20px;
}

.foot_min_bc ul li a {
  display: block;
  padding: 6px 20px;
  color: #BBBBBB;
  font-size: 13px;
}
.foot_min_bc ul li a i{
  color: #4A76A8;
  margin-right: 10px;
}
.foot_min_bc ul li a:hover {
  color: #FFF;
  background: #272727;
}
.foot_min_bc ul li a:hover i{color: #64A0E4}

.soc_siti li {
  float: left;
  width: 25%;
  text-align: center;
}
.soc_siti li a {
  text-align: center;
  font-size: 11px!important;
}
.soc_siti .foot_vk a i {color: #507299!important;font-size: 24px;margin: 4px auto!important;}
.foot_yu a i {color: #E62117!important;font-size: 24px;margin: 4px auto!important;}
.foot_tv a i {color: #48AAE6!important;font-size: 24px;margin: 4px auto!important;}
.foot_gugl a i {color: #DB4437!important;font-size: 24px;margin: 4px auto!important;}
.foot_usss a {
  padding: 8px 20px;
  border: 1px solid #4A76A8;
  border-radius: 5px;
  display: block;
  float: left;
  font-size: 12px;
  color: #4A76A8;
  margin: 10px;
}
.foot_usss a:hover {
  background: #4A76A8;
  color: #FFF;
}
.dop_foot_m a {
  background: #272727;
  width: 40px;
  height: 40px;
  display: block;
  float: left;
  border-radius: 50%;
  margin: 10px 5px;
  text-align: center;
  line-height: 40px;
}
.dop_foot_m a:hover {
  background: #000;
  color: #FFF;
}

#clr {
clear: both;
}

.foot_min_bc ul {
list-style: none;
padding: 0;
}
.foot_text {
  padding: 20px 0 0;
  color: #7D7D7D;
  font-size: 11px;
  border-top: 1px solid #5C5C5C;
  margin: 20px 0;
}
.footer_dop_glav {
  padding: 20px;
  font-size: 12px;
  color: #7D7D7D;
  background: #272727;
}
.footer_dop_glav a {color: #767575;}
.foot_usss, .dop_foot_m {
  display: table;
  margin: 0 auto;
}
@media screen and (max-width: 1000px){  
.foot_min_bc {width: 50%;}  
}  
@media screen and (max-width: 700px){  
.foot_min_bc {width: 100%;}  
}  
Так же в коде есть одна шрифтовая иконка в виде шестерёнки от сайта font-awesome если она вам не нужна удалите её а если нужна то придётся подключить шрифтовые иконки к своему сайту для этого просто добавьте в самый верх вашей таблицы стилей вот такую строчку

Код
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css');

Сохраните и готово!


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


6

Комментарии

Dimas 19-02-2019 в 13:12
Почему-то данный скрипт на моем сайта привязывает все к левой стороне
waak 19-02-2019 в 16:06
Создайте тему на форуме где укажите ссылку на сайт что бы можно было увидеть проблему и помочь вам её исправить
AaNke 20-04-2018 в 10:05
Очень красивый низ сайта, мне понравился очень, да еще и удобный и адаптивный.
waak 20-04-2018 в 10:28
Это хорошо что нравится! значит время потраченное на него не зря
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

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

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru