Как сверстать footer в данном случае?

Question

Здесь меня интересует навигация. Я вижу, что текст в ней не ограничен, при этом отступ от заголовков (Navigation и т.п.) одинаковый в 160px. Вообще, весь footer я бы верстал так:

Создам footer__body и дам ему отступы сверху и снизу.
Сделаю блок div.class="footer__nav" и поместил бы туда навигацию, включая mobile vpn,
Переключатель языка и copyright я положу в один блок и через position: absolute прибью к right: 0; bottom: 0;

Вопрос заключается, как я уже сказал в навигации, как её лучше сделать + адаптивно?

Answer 1

Используйте flex. Он покрывает 99% кейсов с версткой. Под БЭМ сами перепишите, если нужно.

.row {
  display: flex;
  flex-wrap: wrap;
}

.row.end {
  align-items: flex-end;
}

.row.between {
  justify-content: space-between;
}

.col {
  margin: 1rem;
  min-width: 160px;
}

.col.grow {
  flex-grow: 2;
}

footer nav h5 {
  text-transform: uppercase;
}

footer nav ul {
  padding: 0;
}

footer nav li {
  list-style: none;
  padding: 0;
}

.text-right {
  text-align: right;
}

<footer>
  <nav>
    <div class="row">
      <div class="col">
        <h5>Navigation</h5>
        <ul>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Pricing</a></li>
        </ul>
      </div>

      <div class="col">
        <h5>About us</h5>
        <ul>
          <li><a href="#">What is a VPN</a></li>
          <li><a href="#">What is a VPN</a></li>
          <li><a href="#">What is a VPN</a></li>
        </ul>
      </div>

      <div class="col">
        <h5>Follow us</h5>
        <ul>
          <li><a href="#">Instagram</a></li>
          <li><a href="#">Instagram</a></li>
          <li><a href="#">Instagram</a></li>
        </ul>
      </div>
      <div class="col">
        <h5>Earn money</h5>
        <ul>
          <li><a href="#">YouTube</a></li>
          <li><a href="#">YouTube</a></li>
          <li><a href="#">YouTube</a></li>
        </ul>
      </div>
    </div>

    <div class="row end">
      <div class="col grow">
        <h5>Mobile VPN</h5>
        <ul class="row">
          <li><a href="#">[appstore]</a></li>
          <li><a href="#">[google play]</a></li>
        </ul>
      </div>
      <div class="col">
        <div class="row text-right">
          <select>
             <option selected>English</option>
             <option>Русский</option>
          </select>
          <span>&copy; 2008&ndash;2020 VPN.com</span>
        </div>
      </div>
    </div>
  </nav>
</footer>

БЛОГ НА HUSL

Как сверстать footer в данном случае?

Ответы (1 шт):