• Страница 1 из 1
  • 1
Нижняя часть сайта в адаптивной форме
Kosten
Вторник, 12 Ноября 2019, 21:28 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Это стильный колонтитул, созданный в соответствии с вашим сайтом. Он использует загрузчик 4 и шрифт потрясающий CSS для стиля, он разделен на 4 столбца и под каждым столбцом, у вас есть ссылки для быстрых ссылок. Проверьте столбец найти нас, который отображает информацию о контактах, таких как телефон и электронная почта.

Другое, это быстрые ссылки со ссылками на страницы на форуме, и у вас есть ссылки на ссылки, которые ведут на их страницы на веб-сайте или в социальных сетях. Кроме того, страница навигации также отображается в нижнем колонтитуле. Иконки авторских прав и социальных сетей идеально расположены в середине нижней части страницы.

Стильный колонтитул на HTML + CSS



На страницах в HEAD

Код
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

HTML

Код
<!--footer starts from here-->
<footer class="footer">
<div class="container bottom_border">
<div class="row">
<div class=" col-sm-4 col-md col-sm-4  col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Find us</h5>
<!--headin5_amrc-->
<p class="mb10">Lorem Ipsum - просто фиктивный текст в полиграфии и вёрстке. Lorem Ipsum был стандартным манекенщиком в отрасли с 1500-х годов</p>
<p><i class="fa fa-location-arrow"></i> 9878/25 sec 9 rohini 35 </p>
<p><i class="fa fa-phone"></i>  +91-9999878398  </p>
<p><i class="fa fa fa-envelope"></i> info@example.com   </p>

</div>

<div class=" col-sm-4 col-md  col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="http://webenlance.com">Image Rectoucing</a></li>
<li><a href="http://webenlance.com">Clipping Path</a></li>
<li><a href="http://webenlance.com">Hollow Man Montage</a></li>
<li><a href="http://webenlance.com">Ebay & Amazon</a></li>
<li><a href="http://webenlance.com">Hair Masking/Clipping</a></li>
<li><a href="http://webenlance.com">Image Cropping</a></li>
</ul>
<!--footer_ul_amrc ends here-->
</div>

<div class=" col-sm-4 col-md  col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="http://zornet.ru/forum/">Remove Background</a></li>
<li><a href="http://zornet.ru/forum/">Shadows & Mirror Reflection</a></li>
<li><a href="http://zornet.ru/forum/">Logo Design</a></li>
<li><a href="http://zornet.ru/forum/">Vectorization</a></li>
<li><a href="http://zornet.ru/forum/">Hair Masking/Clipping</a></li>
<li><a href="http://zornet.ru/forum/">Image Cropping</a></li>
</ul>
<!--footer_ul_amrc ends here-->
</div>

<div class=" col-sm-4 col-md  col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Follow us</h5>
<!--headin5_amrc ends here-->

<ul class="footer_ul2_amrc">
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p>Lorem Ipsum is simply dummy text of the printing...<a href="#">http://zornet.ru/forum/123-8415-1</a></p></li>
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p>Lorem Ipsum is simply dummy text of the printing...<a href="#">http://zornet.ru/forum/123-8415-1</a></p></li>
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p>Lorem Ipsum is simply dummy text of the printing...<a href="#">http://zornet.ru/forum/123-8415-1</a></p></li>
</ul>
<!--footer_ul2_amrc ends here-->
</div>
</div>
</div>

<div class="container">
<ul class="foote_bottom_ul_amrc">
<li><a href="http://zornet.ru/forum/">Home</a></li>
<li><a href="http://zornet.ru/forum/">About</a></li>
<li><a href="http://zornet.ru/forum/">Services</a></li>
<li><a href="http://zornet.ru/forum/">Pricing</a></li>
<li><a href="http://zornet.ru/forum/">Blog</a></li>
<li><a href="http://zornet.ru/forum/">Contact</a></li>
</ul>
<!--foote_bottom_ul_amrc ends here-->
<p class="text-center">Copyright @2017 | Designed With by <a href="#">Your Company Name</a></p>

<ul class="social_footer_ul">
<li><a href="http://zornet.ru/forum/"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="http://zornet.ru/forum/"><i class="fab fa-twitter"></i></a></li>
<li><a href="http://zornet.ru/forum/"><i class="fab fa-linkedin"></i></a></li>
<li><a href="http://zornet.ru/forum/"><i class="fab fa-instagram"></i></a></li>
</ul>
<!--social_footer_ul ends here-->
</div>

</footer>

CSS

Код
/*footer*/
.col_white_amrc { color:#FFF;}
footer { width:100%; background-color:#263238; min-height:250px; padding:10px 0px 25px 0px ;}
.pt2 { padding-top:40px ; margin-bottom:20px ;}
footer p { font-size:13px; color:#CCC; padding-bottom:0px; margin-bottom:8px;}
.mb10 { padding-bottom:15px ;}
.footer_ul_amrc { margin:0px ; list-style-type:none ; font-size:14px; padding:0px 0px 10px 0px ; }
.footer_ul_amrc li {padding:0px 0px 5px 0px;}
.footer_ul_amrc li a{ color:#CCC;}
.footer_ul_amrc li a:hover{ color:#fff; text-decoration:none;}
.fleft { float:left;}
.padding-right { padding-right:10px; }

.footer_ul2_amrc {margin:0px; list-style-type:none; padding:0px;}
.footer_ul2_amrc li p { display:table; }
.footer_ul2_amrc li a:hover { text-decoration:none;}
.footer_ul2_amrc li i { margin-top:5px;}

.bottom_border { border-bottom:1px solid #323f45; padding-bottom:20px;}
.foote_bottom_ul_amrc {
    list-style-type:none;
    padding:0px;
    display:table;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}
.foote_bottom_ul_amrc li { display:inline;}
.foote_bottom_ul_amrc li a { color:#999; margin:0 12px;}

.social_footer_ul { display:table; margin:15px auto 0 auto; list-style-type:none;  }
.social_footer_ul li { padding-left:20px; padding-top:10px; float:left; }
.social_footer_ul li a { color:#CCC; border:1px solid #CCC; padding:8px;border-radius:50%;}
.social_footer_ul li i {  width:20px; height:20px; text-align:center;}

Это пример реализации верхней панели навигации и раздела нижнего колонтитула для веб-сайта с CSS и HTML. Библиотека Bootstrap и таблицы стилей начальной загрузки были импортированы в код с использованием элементов сетки для разделения и организации отображаемых разделов.

Демонстрация
Прикрепления: 8066131.png (51.2 Kb) · astun.zip (4.8 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: