<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>
      </nav>

      <div class="page-header__right-block">
        <a href="#" class="btn page-header__user-btn">
          Войти
        </a>
      </div>
    </div>
      
  </header>
</div>
html,
body {
  width: 100%; 
  margin: 0;
  padding: 0;
}

.btn {
  display: inline-block;
  box-sizing: border-box;
  padding: 15px 40px;
  border: 1px solid #1F1E1E;
  background-color: transparent;
  outline: none;
  color: #1F1E1E;
  font-family: "Open Sans", sans-serif;
  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;
}

.btn:hover {
  background-color: #1F1E1E;
  color: #ffffff;
}

.body {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 1920px;
  min-height: 100vh;
  padding-top: 147px;
  color: #1F1E1E;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.375;
}

.page-header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 147px;
  background-color: rgba(222, 222, 222, 0.98);
  z-index: 100;
}

@supports (backdrop-filter: blur(20px)) {
  .page-header {
    background-color: rgba(222, 222, 222, 0.5);
    backdrop-filter: blur(20px);
  }
}

.page-header__container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1414px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

.page-header__logo {
  flex-shrink: 0;
  width: 202px;
  height: 147px;
  font-size: 0;
  text-decoration: none;
}

.page-header__logo-icon {
  width: 100%;
  height: 100%;
}

.page-header__nav {
  display: flex;
  align-items: baseline;
  margin: 0 auto;
}

.page-header__nav-link {
  margin: 0 25px;
  color: #1F1E1E;

  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-decoration: none;
  transition: color 0.2s;
}

.page-header__nav-link:hover {
  color: #BC3324;
}

.page-header__right-block {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 202px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.