ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой адаптивный дизайн футера в CSS

Простой адаптивный дизайн футера в CSS

Простой по конструкции адаптивный стиль нижнего колонтитула, который выполнен с помощью HTML и CSS, где низ для сайта подойдет на любую тематику. Ведь сам каркас его содержит только, то что требуется, где идет место под описание и социальные кнопки с красивым эффектом при наведении. А также по сторонам можно разместить ссылки, где считаю, что изначальная стилистика по дизайну создана больше для одностраничного сайта. Но также есть множество ресурсов, которым достаточна одна форма, и здесь данный низ будет отличной заменой. В статье с материалом собираемся сделать адаптивный нижний колонтитул с использованием HTML и CSS в простой стилистике.

Так как низ разделен на 2 части, где есть основная или главная, где мы наблюдаем основу, и в самом низу выставлен по линейке немного темнее оттенок, где визуально смотрится в 3D, где такой вид будет замечательно смотреться на светлом или на темном формате. Ведь вы уже сами можете поставить ту гамму цвета, что полностью соответствует интернет площадки. Данный колонтитул изначально закрепляется внизу, где данный вид на прямую относится в основе портала. Хоть по умолчанию он должен находится внизу страницы, независимо от глубины прокрутки. Где можно наблюдать на всех представленных страниц, но есть исключение, это созданные страницы, где вы также можете выставить, ведь здесь все на чистом CSS, и корректно смотрится на мобильных экранах.

Так выглядит при установочном процессе:

Адаптивный дизайн нижнего колонтитула с использованием HTML + CSS

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

Шрифтовые иконки:

Код

HTML

Код

<footer>
  <div class="vadakin-stulina">
  <h3>ZorNet.Ru — сайт вебмастера</h3>
  <p>Интересные решения для вебмастера в создание и продвижение сайтов,
используя HTML и CSS с оригинальным способом графического дизайна.</p>
  <ul class="lotesules">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
  <li><a href="#"><i class="fa fa-youtube"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
  </ul>
  </div>
  <div class="evelope_logmasa">
  <p>copyright ©2021 <a href="#">ключевая фраза</a> </p>
  <div class="devela-copmes">
  <ul class="f-menu">
  <li><a href="">Главная</a></li>
  <li><a href="">Блоги</a></li>
  <li><a href="">Статьи</a></li>
  <li><a href="">Контакты</a></li>
  </ul>
  </div>
  </div>

  </footer>

CSS

Код

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: #fcfcfc;
  font-family: sans-serif;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #161414;
  height: auto;
  width: 100vw;
  padding-top: 40px;
  color: #8f8c8c;
}
.vadakin-stulina{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.vadakin-stulina h3 {
  font-size: 1.8rem;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 2rem;
}
.vadakin-stulina p {
  max-width: 498px;
  margin: 8px auto;
  line-height: 30px;
  font-size: 15px;
  color: #a6abb3;
}
.lotesules {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 3rem 0;
}
.lotesules li {
  margin: 0 8px;
}

.lotesules a{
  text-decoration: none;
  color: #fff;
  border: 1.1px solid white;
  padding: 5px 5px 5px 7px;
  border-radius: 100%;
}
.lotesules a{
  text-decoration: none;
  color: #efe3e3;
  border: 1.1px solid white;
  padding: 5px;
  border-radius: 50%;
}
.lotesules a i{
  font-size: 1.1rem;
  width: 20px;

  transition: color .4s ease;

}
.lotesules a:hover i{
  color: aqua;
}

.evelope_logmasa {
  background: #121111;
  width: 100vw;
  padding: 24px;
  padding-bottom: 42px;
  text-align: center;
}
.evelope_logmasa p{
float: left;
  font-size: 14px;
  word-spacing: 2px;
  text-transform: capitalize;
}
.evelope_logmasa p a {
  color: #627b85;
  font-size: 14px;
  text-decoration: none;
}
.evelope_logmasa span{
  text-transform: uppercase;
  opacity: .4;
  font-weight: 200;
}
.devela-copmes {
  float: right;

}
.devela-copmes ul{
  display: flex;
}
.devela-copmes ul li{
padding-right: 10px;
display: block;
}
.devela-copmes ul li a {
  color: #a3a6ab;
  text-decoration: none;
  font-size: 14px;
}
.devela-copmes ul li a:hover {
  color: #138983;
}

@media (max-width:500px) {
.devela-copmes ul{
  display: flex;
  margin-top: 10px;
  margin-bottom: 20px;
}
}

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

Он располагается под основной секцией или корпусом, где тег footer определяет нижний колонтитул для документа или раздела, или просто написать кратко по вашей тематике и подключить ссылки под главные разделы, где привлечем еще к навигации по сайту.

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

08 Июля 2022 Загрузок: 2 Просмотров: 874 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0