Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги: ,

Категории

Рубрики

SEO-продвижение сайта в ТОП поисковых систем. Рост позиций в первый месяц. Закажите услугу в Lion Digital. Ваш надежный партнер в интернет-маркетинге.

от 25000 

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Написание постов, ведение соц сетей Ваших компаний. Формирование имиджа и контента.

от 22900 

Как сделать footer html css

Чтобы создать Footer на HTML и CSS, нужно создать элемент footer на HTML и применить стили на CSS.

HTML:

<footer>
  <div class="container">
    <p>Все права защищены &copy; 2021</p>
    <ul>
      <li><a href="#">Политика конфиденциальности</a></li>
      <li><a href="#">Условия использования</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </div>
</footer>

CSS:

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  font-size: 16px;
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

ul li + li {
  margin-left: 20px;
}

a {
  color: #fff;
  text-decoration: none;
}

Этот код создает Footer с заданным фоновым цветом, цветом текста и отступом с помощью свойств background-color, color и padding. Футер изначально имеет отцентрированный текст внутри через text-align и задает шрифт с помощью font-size. Далее был задан класс «container» для создания области контейнера, который устанавливает ширину необходимого размера с помощью max-width. Также свойства margin: 0 auto и display:flex помогают выровнять содержимое по центру. Внутри контейнера находятся ссылки на страницы политики конфиденциальности, условия использования и контакты, которые созданы с помощью списка ul и стилей CSS.

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

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.