<div class="body">
  <header class="page-header">
    <div class="page-header__container">
      <a href="#" class="page-header__logo">
        <svg 
          class="page-header__logo-icon" 
          width="202" 
          height="147" 
          viewBox="0 0 202 147" 
          fill="none" 
          xmlns="http://www.w3.org/2000/svg"
          >
          <rect width="147" height="147" fill="#1F1E1E"/>
          <path d="M39.9655 72.439H26.6335V50.032H26.6005V49.999H21.9145V73H39.9655V72.439Z" fill="white"/>
          <path d="M43.9316 73H62.0486V72.439H48.6176V61.285H59.1116V60.691H48.6176V50.56H62.0486V49.999H43.9316V73Z" fill="white"/>
          <path d="M70.6993 73V50.56C73.5703 50.56 82.4143 51.649 83.0743 64.453V73H87.7603V49.999H83.0743V60.328C81.6553 54.19 77.1673 49.999 70.6993 49.999H66.0133V73H70.6993Z" fill="white"/>
          <path d="M97.3893 73V50.56C100.26 50.56 109.104 51.649 109.764 64.453V73H114.45V49.999H109.764V60.328C108.345 54.19 103.857 49.999 97.3893 49.999H92.7033V73H97.3893Z" fill="white"/>
          <path d="M119.393 73H124.079V49.999H119.393V73Z" fill="white"/>
          <rect x="81" y="92" width="121" height="42" fill="#BC3324"/>
          <path d="M108.922 124H109.462L112.402 115.45H120.952L124.282 124H128.752L120.652 103.09H116.122L108.922 124ZM116.422 103.75L120.772 114.94H112.582L116.422 103.75Z" fill="white"/>
          <path d="M132.644 103.09V124H136.904V116.77H141.974L146.864 123.97H151.724L146.564 116.32C149.564 115.54 151.844 113.68 151.844 109.51C151.844 104.29 148.034 102.64 143.594 102.64C138.914 102.64 137.564 106.15 136.904 110.05V103.09H132.644ZM138.074 107.47C138.884 104.53 140.984 103.33 142.844 103.18C147.314 102.76 147.494 105.61 147.494 109.51C147.494 115.84 144.134 116.26 141.254 116.26H136.904C136.904 116.26 136.784 112.12 138.074 107.47Z" fill="white"/>
          <path d="M162.084 103.6L162.114 124H166.374V103.6H174.984V103.09H153.474V103.6H162.084Z" fill="white"/>
        </svg>
      </a>
      
      <nav class="page-header__nav">
        <a href="#" class="page-header__nav-link">Мероприятия</a>
        <a href="#" class="page-header__nav-link">Блог</a>
        <a href="#" class="page-header__nav-link">О нас</a>
        <a href="#" class="page-header__nav-link">Контакты</a>
        
          <div class="page-header__nav-user">
            <a href="#" class="page-header__nav-user-link">
              Александр С.
            </a>

            <a href="#" class="page-header__nav-logout">     
              <svg class="page-header__nav-logout-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g stroke="#1f1e1e" fill="transparent">
                <path d="M10 17L15 12L10 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15 12H3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </g>
              </svg>
            </a>
          </div>
      </nav>

      <div class="page-header__right-block">
        <a href="#" class="page-header__user-btn">
          Войти
          <svg class="page-header__user-icon" width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM19.71 6.13C19.617 6.03627 19.5064 5.96188 19.3846 5.91111C19.2627 5.86034 19.132 5.8342 19 5.8342C18.868 5.8342 18.7373 5.86034 18.6154 5.91111C18.4936 5.96188 18.383 6.03627 18.29 6.13L16.29 8.13L15.67 7.5C15.577 7.40627 15.4664 7.33188 15.3446 7.28111C15.2227 7.23034 15.092 7.2042 14.96 7.2042C14.828 7.2042 14.6973 7.23034 14.5754 7.28111C14.4536 7.33188 14.343 7.40627 14.25 7.5C14.0637 7.68736 13.9592 7.94081 13.9592 8.205C13.9592 8.46919 14.0637 8.72264 14.25 8.91L15.59 10.25C15.7774 10.4363 16.0308 10.5408 16.295 10.5408C16.5592 10.5408 16.8126 10.4363 17 10.25L19.67 7.58C19.771 7.48932 19.8524 7.37904 19.9094 7.25588C19.9664 7.13272 19.9977 6.99924 20.0014 6.86359C20.0052 6.72794 19.9813 6.59294 19.9312 6.46682C19.8811 6.34071 19.8058 6.22611 19.71 6.13Z" fill="#1f1e1e"/>
            </svg>
        </a>

      <button type="button" class="page-header__nav-toggle"></button>
    </div>
    </div>
      
  </header>
</div>
html,
body {
  width: 100%; 
  margin: 0;
  padding: 0;
}

@bw1660: ~"(max-width: 1659px)";
@bw1340: ~"(max-width: 1339px)";
@bw1020: ~"(max-width: 1019px)";
@bw768: ~"(max-width: 767px)";

@white: #ffffff;
@black: #1f1e1e;
@red: #bc3324;
@red_dark: #a51505;
@gray: #dedede;
@font1: "Open Sans", sans-serif;

.container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1414px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  @media @bw1340 {
    padding-left: 30px;
    padding-right: 30px;
  }
  @media @bw768 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: @black;
  font-family: @font1;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.375;
  overflow-x: hidden;
  padding-top: 147px;
  @media @bw1660 {
    padding-top: 111px;
  }

  @media @bw768 {
    padding-top: 70px;
  }
}

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 147px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;

  @media @bw1660 {
    height: 111px;
  }

  @media @bw768 {
    height: 70px;
  }

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: fade(@gray, 98%);
    @supports (backdrop-filter: blur(20px)) {
      background-color: fade(@gray, 70%);
      backdrop-filter: blur(20px);
    }
  }

  &__container {
    .container;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
  }
  &__logo {
    position: relative;
    flex-shrink: 0;
    width: 202px;
    height: 147px;
    font-size: 0;
    text-decoration: none;
    z-index: 1;
    @media @bw1660 {
      width: 152px;
      height: 111px;
    }
    @media @bw768 {
      width: 96px;
      height: 70px;
    }
  }
  &__logo-icon {
    width: 100%;
    height: 100%;
  }
  &__nav {
    box-sizing: border-box;
    display: flex;
    align-items: baseline;
    margin: 0 auto;
    @media @bw1020 {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      flex-direction: column;
      align-items: flex-start;
      padding: 211px 30px 30px;
      background-color: fade(@gray, 98%);
      transition: transform 0.4s;
      transform: translateX(-100%);
      overflow-x: hidden;
      overflow-y: auto;
      @supports (backdrop-filter: blur(20px)) {
        background-color: fade(@gray, 70%);
        backdrop-filter: blur(20px);
      }
    }
    @media @bw768 {
      padding: 150px 20px 30px;
    }
  }
  &__nav-link,
  &__nav-user-link {
    color: @black;
    text-decoration: none;
    &:hover {
      color: @red_dark;
    }
  }
  &__nav-link {
    margin: 0 25px;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    text-decoration: none;
    transition: color 0.2s;
    @media @bw1020 {
      margin: 0 0 40px;
      font-size: 16px;
      line-height: 22px;
    }
  }
  &__nav-user {
    display: none;
    @media @bw1020 {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
  }
  &__nav-user-link {
    margin-right: 25px;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
  }
  &__nav-logout {
    width: 24px;
    height: 24px;
    font-size: 0;
  }
  &__right-block {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 202px;
    z-index: 1;
    @media @bw1660 {
      width: 152px;
    }
    @media @bw1020 {
      width: auto;
      margin-left: auto;
    }
  }
  &__user-btn {
    max-width: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding: 15px 40px;
    border: 1px solid @black;
    background-color: transparent;
    outline: none;
    color: @black;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    overflow: hidden;
    cursor: pointer;
    @media @bw1020 {
      display: flex;
      width: 40px;
      height: 40px;
      padding: 0;
      border: none;
      background: none;
      color: @black;
      font-size: 0;
    }
    &:hover {
      background-color: @black;
      color: @white;
      @media @bw1020 {
        background: none;
        color: @red;
      }
    }
  }
  &__user-icon {
    display: none;
    @media @bw1020 {
      display: block;
      margin: auto;
    }
  }
  &__nav-toggle {
    display: none;
    @media @bw1020 {
      display: block;
      position: relative;
      right: -11px;
      margin-left: 18px;
      width: 40px;
      height: 40px;
      border: none;
      background: none;
      cursor: pointer;
    }
    @media @bw768 {
      margin-left: 5px;
    }
    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 19px;
      left: 11px;
      width: 18px;
      height: 2px;
      border-radius: 2px;
      background-color: @black;
    }
    &::before {
      top: 13px;
      box-shadow: 0 6px 0 @black;
    }
    &::after {
      top: 25px;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.