<header>
  <div class="conteiner">
    <div class="head_cap cap">
      <div class="head head_left block_1">
        <img src="/img/логотип - Роман Голущенко 1.png" alt="">
        <h1>Строй недорого</h1>
        <p>Строительные материалы</p>

      </div>

      <div class="head head_mid block_2">
        <h2>+7 (923) 111-99-01</h2>
        <p>Новосибирск, ул. Красина, 74</p>
      </div>

      <div class="head head_right block_2_2">
        <input type="text" placeholder="Заказать звонок">
        <img src="/img/Vector.png" style="width: 30px; height: 30px;" alt="">
      </div>
    </div>
  </div>
</header>
<div id="menu" class="menu_cap">
  <button id="toggle" type="button" class="toggle">Toggle Menu</button>
  <nav class="menu_cap_inner">
    <a href="">Главная</a>
    <a href="">О компании</a>
    <a href="">Каталог</a>
    <a href="">Доставка и оплата</a>
    <a href="">Акции</a>
    <a href="">Отзывы</a>
    <a href="">Контакты</a>
  </nav>
</div>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body,
p,
h1,
h2,
h3 {
  margin: 0;
  padding: 0;
}
header {
  color: white;
  background: url(https://picsum.photos/id/1011/2000/480) no-repeat;
  background-size: cover;
  font-family: "Oswald";
}
header .conteiner {
  max-width: 1280px;
  margin: auto;
  padding: 0 1rem;
}
.head_cap {
  display: flex;
  justify-content: space-between;
  padding: 3.75rem 0;
}
.head_cap > div {
  flex: 1 0 33.3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.head_cap > .head_right {
  flex-direction: row;
  align-items: center;
  justify-content: end;
}
.head_cap > .head_mid {
  align-items: center;
}
.block_1 > h1 {
  font-size: 41px; /* try not to use px*/
  font-weight: 300;
}
.block_1 > p {
  font-size: 15px; /* try not to use px*/
}
.block_2 > h2,
.block_2 > p {
  font-weight: 200;
  letter-spacing: 2px; /* try not to use px*/
}

.block_2_2 > img {
  margin-left: 2rem;
}
.block_2_2 > input {
  width: 204px;
  height: 60px;
  border-radius: 5px;
  text-align: center;
}

.menu_cap {
  background: linear-gradient(180deg, #003471 0%, #212121 191.67%);
  padding: 1rem;
  min-height: 50px;
}
.menu_cap_inner {
  display: flex;
  max-width: 1280px;
  margin: auto;
  align-items: center;
  justify-content: space-between;
}
.menu_cap a {
  color: white;
  font-weight: 200;
}
.toggle {
  color: #fff;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  display: none;
  cursor: pointer;
}

@media screen and (max-width: 899px) {
  .head_cap {
    display: grid;
    grid-template-areas:
      "head1 head2"
      "head1 head3";
    row-gap: 1rem;
  }
  .head_left {
    grid-area: head1;
  }
  .head_mid {
    grid-area: head2;
  }
  .head_right {
    grid-area: head3;
  }
}

@media screen and (max-width: 600px) {
  .head_cap {
    display: block;
    padding: 0.3rem;
  }
  header .head_cap > div,
  .head_cap > div.head_right {
    align-items: center;
    justify-content: center;
    margin: 1rem;
  }
  .menu_cap_inner {
    display: none;
  }
  .toggle {
    display: block;
  }
  .open .menu_cap_inner {
    display: block;
  }
  .open .menu_cap_inner a {
    display: block;
    border-bottom: 1px solid #fff;
    padding: 0.5rem 1rem;
  }
  #menu {
    position: relative;
  }
  .menu_cap_inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: linear-gradient(180deg, #003471 0%, #212121 191.67%);
  }
}
(function (d) {
  "use strict";

  var myToggle = d.getElementById("toggle");
  var menu = d.getElementById("menu");

  myToggle.addEventListener(
    "click",
    function () {
      menu.classList.toggle("open");
    },
    false
  );
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.