• Страница 1 из 1
  • 1
Разработка адаптивного (Footer) низ сайта
Kosten
Понедельник, 11 Ноября 2019, 21:46 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Темный низ сайта в адаптивном стиле для тематического сайта, что подойдет под разную тематику интернет ресурса, который выполнен с помощью CSS. Для любого дизайна, чтобы быть красивым, то здесь безусловно нужно использовать пространство, которое является наиболее важным наряду с идеальным сочетанием иконок и шрифтов. Это стильный пример нижнего колонтитула, или просто низ сайта в темном оттенке цвета с богатым внешним видом и ощущением, как в любых яблочных продуктах.

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

Так реально смотрится футер с установкой на сайт:



Установочный процесс:

В HEAD на странице

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

HTML

Код
<footer class="container-fluid bg-grey py-5">
<div class="container">
   <div class="row">
      <div class="col-md-6">
         <div class="row">
            <div class="col-md-6 ">
               <div class="logo-part">
                  <img src="https://i.ibb.co/sHZz13b/logo.png" class="w-50 logo-footer" >
                  <p>7637 Laurel Dr. King Of Prussia, PA 19406</p>
                  <p>Use this tool as test data for an automated system or find your next pen</p>
               </div>
            </div>
            <div class="col-md-6 px-4">
               <h6> About Company</h6>
               <p>But horizontal lines can only be a full pixel high.</p>
               <a href="#" class="btn-footer"> More Info </a><br>
               <a href="#" class="btn-footer"> Contact Us</a>
            </div>
         </div>
      </div>
      <div class="col-md-6">
         <div class="row">
            <div class="col-md-6 px-4">
               <h6> Help us</h6>
               <div class="row ">
                  <div class="col-md-6">
                     <ul>
                        <li> <a href="#"> Home</a> </li>
                        <li> <a href="#"> About</a> </li>
                        <li> <a href="#"> Service</a> </li>
                        <li> <a href="#"> Team</a> </li>
                        <li> <a href="#"> Help</a> </li>
                        <li> <a href="#"> Contact</a> </li>
                     </ul>
                  </div>
                  <div class="col-md-6 px-4">
                     <ul>
                        <li> <a href="#"> Cab Faciliy</a> </li>
                        <li> <a href="#"> Fax</a> </li>
                        <li> <a href="#"> Terms</a> </li>
                        <li> <a href="#"> Policy</a> </li>
                        <li> <a href="#"> Refunds</a> </li>
                        <li> <a href="#"> Paypal</a> </li>
                     </ul>
                  </div>
               </div>
            </div>
            <div class="col-md-6 ">
               <h6> Newsletter</h6>
               <div class="social">
                  <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
               </div>
               <form class="form-footer my-3">
                  <input type="text"  placeholder="search here...." name="search">
                  <input type="button" value="Go" >
               </form>
               <p>That's technology limitation of LCD monitors</p>
            </div>
         </div>
      </div>
   </div>
</div>
</div>    

CSS

Код
body {
        font-family: 'Signika', sans-serif;
     }
     .bg-grey {
        background: #292929;
     }
     .logo-footer {
        margin-bottom: 40px;
     }
     footer {
            color: grey;
     }
     footer p, a {
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
}
footer h6 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 40px;
    position: relative;
}
footer h6:after {
    position: absolute;
    content: "";
    background: grey;
    width: 12%;
    height: 1px;
    left: 0;
    bottom: -20px;
}
     .btn-footer {
                 color: grey;
              
                text-decoration: none;
                border: 1px solid;
                border-radius: 43px;
                font-size: 13px;
                padding: 7px 30px;
                line-height: 47px;
     }
     .btn-footer:hover {
                
                text-decoration: none;
               
     }
    .form-footer input[type="text"] {
        border: none;
    border-radius: 16px 0 0 16px;
    outline: none;
    padding-left: 10px;
    
}
::placeholder {
    font-size: 10px;
    padding-left: 10px;
    font-style: italic;
}
.form-footer input[type="button"] {
    border: none;
    background:#232323;
        margin-left: -5px;
    color: #fff;
    outline: none;
    border-radius: 0 16px 16px 0;
    padding: 2px 12px;
}
     .social .fa {
    color: grey;
    font-size: 22px;
    padding: 10px 15px;
    background: #3c3c3c;
}
     footer ul li {
    list-style: none;
    display: block;
}
  footer ul  {
   padding-left: 0;
}
footer ul  li a{
  text-decoration: none;
  color: grey;
  text-decoration:none;
}
a:hover {
    text-decoration: none;
    color: #f5f5f5 !important;
    
}
.logo-part {
    border-right: 1px solid grey;
    height: 100%;
    }

Такой конструкции недостаточно, если она не используется в устройствах с меньшим экраном. Здесь дизайн корректируется поверх другого, когда вы находитесь на экранах меньшего размера.

Демонстрация
Прикрепления: 2067970.jpg (28.6 Kb) · Comics.zip (4.9 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: