Как сделать адаптивный нижний колонтитул используя HTML и CSS

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem

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

MonsterTem.ru » Секции для сайта » Как сделать адаптивный нижний колонтитул используя HTML и CSS

Как сделать адаптивный нижний колонтитул используя HTML и CSS

17.09.2024

48 просмтотров

Всем Привет! Сегодня вы узнаете как создать адаптивный нижний колонтитул используя HTML и CSS. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это подробное руководство поможет вам создать адаптивный нижний колонтитул (footer).

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

HTML КОД:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Footer Section</title>

    <!--font awesome(for icons)-->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    />

    <!--css file-->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <footer>
      <div class="wrapper">
        <div class="box info">
          <h2 class="title">Tivotal</h2>
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque nam
            tempore ratione iure dolore repellendus? Aliquid eligendi labore
            ducimus inventore.
          </p>
          <ul class="icons">
            <li>
              <a href="#"><i class="fab fa-github"></i></a>
            </li>
            <li>
              <a href="#"><i class="fab fa-facebook-f"></i></a>
            </li>
            <li>
              <a href="#"><i class="fab fa-x-twitter"></i></a>
            </li>
            <li>
              <a href="#"><i class="fab fa-linkedin-in"></i></a>
            </li>
          </ul>
        </div>
        <div class="box links">
          <h2>Company</h2>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Our Team</a></li>
          <li><a href="#">Jobs</a></li>
          <li><a href="#">Careers</a></li>
        </div>
        <div class="box links">
          <h2>Quick Links</h2>
          <li><a href="#">Terms of Use</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Refund Policy</a></li>
          <li><a href="#">Cookies Policy</a></li>
        </div>
        <div class="box contact">
          <h2>Contact Us</h2>
          <ul>
            <li>
              <span><i class="fas fa-phone"></i></span>
              <p><a href="#"> +9123456789</a></p>
            </li>
            <li>
              <span><i class="fas fa-envelope"></i></span>
              <p><a href="#">tivotalteam@gmail.com</a></p>
            </li>
          </ul>
        </div>
      </div>
    </footer>

    <div class="copyright">
      Copyright © 2024 Tivotal. All rights reserved
    </div>
  </body>
</html>

CSS КОД:

/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  font-family: "Poppins", sans-serif;
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  align-content: end;
  justify-content: end;
  background: #e8e8e8;
  padding: 50px;
}

footer {
  position: relative;
  width: 100%;
  height: auto;
  padding: 40px 50px;
  background: #fff;
}

footer .wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 20px;
}

footer .wrapper .box {
  position: relative;
}

footer .wrapper .box h2 {
  position: relative;
  color: #333;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

footer .wrapper .box .title {
  color: #4070f4;
}

footer .wrapper .box p {
  font-size: 15px;
  color: #555;
}

footer .wrapper .box .icons {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 50px);
}

footer .wrapper .box .icons a {
  width: 36px;
  height: 36px;
  background: #333;
  border-radius: 5px;
  display: grid;
  place-items: center;
}

footer .wrapper .box .icons a i {
  font-size: 18px;
  color: #fff;
}

footer .wrapper .links a {
  font-size: 15px;
  color: #555;
  margin-bottom: 10px;
  display: inline-block;
  transition: 0.3s;
}

footer .wrapper .links a:hover,
footer .wrapper .contact li a:hover {
  color: #4070f4;
}

footer .wrapper .contact li {
  display: grid;
  grid-template-columns: 30px 1fr;
  margin-bottom: 16px;
}

footer .wrapper .contact li span {
  font-size: 18px;
  color: #555;
}

footer .wrapper .contact li a {
  color: #555;
}

.copyright {
  width: 100%;
  background: #fff;
  padding: 20px 100px 30px;
  text-align: center;
  font-size: 15px;
  color: #555;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

@media (max-width: 925px) {
  footer {
    padding: 30px;
  }

  footer .wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .copyright {
    padding: 20px 40px 30px;
  }
}

@media (max-width: 640px) {
  footer .wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

Скачать

Категории: Секции для сайта

MonsterTem.ru

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem