Как сверстать подобный header?

Question

[Андрей]

Как сверстать подобное?
Хотя бы левую часть

Answer 1

[TjLink]

HTML

<nav>
  <div class="left_side">
    <div class="logo">Лого</div>
    <div>
      <p>USDD</p>
      <p>Bla bla bla</p>
    </div>
  </div>
  <div class="right_side">
    <div>
      <button>Кнопка</button>
    </div>
    <div>Твиттер</div>
    <div>Телега</div>
    <div>Дискорд</div>
    <div>Смена языка</div>
  </div>
</nav>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
  border: 1px solid black;
}
.right_side{
  display: flex;
}
.left_side{
  display: flex;
  align-items: center;
}
.right_side > div {
  margin-right: 15px;
}
.logo{
  margin-right: 15px;
}

С остальным поиграйся сам.
Добавь иконки, картинки и так далее

Comments

[Андрей]

Спасибо!

[Pavel_20]

а сам тег header где?) и столько дивов без классов смущает как-то...

[TjLink]

Pavel_20, нельзя же всё сразу преподносить на блюдечке с голубой каемочкой.
Пускай человек сам разберётся. SEO, HTML, CSS и так далее...
А то если всё рассказать и носом тыкнуть, толку ноль от это будет.

[Pavel_20]

TjLink, есть в этом доля правды конечно, но зачем оборачивавть в nav вместо header и вводить в заблуждение этим людей не совсем понятно..

[TjLink]

Pavel_20, не спорю. Да, нужно сделать так header -> nav.
Ведь header не всегда говорит от том, что там есть навигация, может там просто кнопка какая-то или поисковое поле.
Если в шапке нет навигации, то можно просто header