Вид материаловМенюКатегорииИнформерКнопки
Наш чат 1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

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

Добавлено 20-04-2018 в 09:04

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

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

Установка



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

Код
<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');

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


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

Комментарии

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

Оставить комментарий

Добавлять комментарии могут только зарегистрированные пользователи.

Регистрация Вход
Комментарии
pa patali2k

Спасибо большое!

06-06-2025 в 05:58 материал
waak

на все страницы вывести можно скриптом через запрос на персональную страницу пользователя а на странице со списком закладок я вывел так

Код
У вас $NUM_ENTRIES$ заклад<?if($NUM_ENTRIES$%10=0||$NUM_ENTRIES$%10>4||$NUM_ENTRIES$%100>10&&$NUM_ENTRIES$%100<15)?>ок<?else?><?if($NUM_ENTRIES$%10=1)?>ка<?else?>ки<?endif?><?endif?>

05-06-2025 в 22:07 материал
pa patali2k

Добрый день! Waak подскажи как вы сделали У вас N закладок, у меня выходит 1-5 например, так если можете подскажите как вывести кол.во закладок пользователя например в мини профиль, чтоб кол.во закладок показывало на любой странице

04-06-2025 в 16:51 материал
pa patali2k

Добрый день!
Сегодня снова попробовал установить скрипт и он снова не заработал, все перерыл, изменял, убирал и никак не заводился.
Решение: В общих настройках сайта нужно переключить Версия библиотеки jQuery: на jquery-1.12.4.min.js
В общем теперь просьба, не могли бы переписать скрипт закладок под jquery-3.6.0.min.js qv

19-05-2025 в 17:16 материал
waak

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

13-04-2025 в 17:56 материал
pa patali2k

Добрый вечер, не работает, при нажатии на кнопку "в закладки" всплывает маленькая окно загрузка и так и стоит грузит бесконечно

13-04-2025 в 01:45 материал
ch chirianovconstantin

Спасибо буду ждать

18-02-2025 в 23:03 материал
waak

Здравствуйте сейчас нет времени на это но чуть позже сделаю выложу на сайт

16-02-2025 в 18:32 материал
ch chirianovconstantin

здавствуите помогите зделать скрипт под модуля бог

15-02-2025 в 23:13 материал
waak

Пожалуйста, вам спасибо что заходите на сайт

10-02-2025 в 12:32 материал
sa sardor

Спасибо огромное

06-02-2025 в 13:34 материал
Fr Frag

Прикольно работает

15-11-2024 в 01:20 материал

Услуга от адмиистратора

Вы можите заказать установку от администратара ( waak ) этого материала или любого другога с нашего сайта на ваш сайт или доработку под ваши нужды!

от 150рзаказать