<div class="container">
    <div class="header__top">
      <dialog>
        <button autofocus>X</button>
        <div>
        <a href="#">
          <img src="img/logo.svg" alt="loft hous">
        </a>
        <nav class="header__nav">
            <ul class="nav__list">
              <li><a href="#">О комплексе</a></li>
              <li><a href="#">Район</a></li>
              <li><a href="#">Каталог квартир</a></li>
              <li><a href="#">Ипотека</a></li>
              <li><a href="#">Контакты</a></li>
            </ul>
        </nav>

        <div class="header__nav-btn">
          <button class="nav__icon-btn ">
            <span class="span"></span>
            <span class="span"></span>
            <span class="span"></span>
            <span class="span"></span>
          </button>
        </div>
        </div>
      </dialog>
    </div>
    <div class="header__title">
        <h1 class="header__title-h1">
          Жилой комплекс <br>в историческом центре
          <a href="#benefits" class="">
            <img src="img/mouse.svg" alt="" class="header__title-icon">
          </a>
        </h1>
    </div>
    <div class="header__footer">
        <a href="#section-map" class="info info-map">Наб. реки Фонтанки 10-15</a>
        <a href="tel:+78121234567" class="info info--tel">8 (812) 123-45-67</a>
    </div>
</div>
body {
  min-height: 100vh;
  background: linear-gradient(
      180deg,
      #242b33 11.98%,
      rgba(45, 52, 60, 0.38) 51.04%,
      #242b33 92.19%
    ),
    url("/img/loftHous.jpg");
}

.container {
  width: 1140px;
  padding: 0 15px;
  margin: 0 auto;
}
.header__top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

dialog {
  background-color: black;
  outline: 1px solid white;
  width: 70%;
  height: 80%;
  margin: auto;
  z-index: 1;

}
dialog > button { float: right;}
dialog > div {
  display: flex;
  flex-direction: column;
  justify-content: start;
  row-gap: 30px;
}
::backdrop {
  background-color: green;
  opacity: 0.25;
}

.header__nav {
  display: block;
 
  .nav__list {
    display: grid;
    row-gap: 30px;
    justify-items: center;
  }
}
.nav {
  font-size: 14px;
}
.nav__list {
  display: flex;
  gap: 0 40px;
}
.header__nav-btn {
  display: none;
}
.nav__icon-btn {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  background-color: inherit;
  border: none;
  /* display: none; */
}
.span {
  width: 40px;
  height: 2px;
  background-color: #fff;
}
.nav__icon-btn-big {
  position: absolute;
  width: 34px;
  height: 34px;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  background: #000000;
 
  background-color: #fff;
  right: 15px;
  top: 15px;
}
.header__title {
  position: relative;
  /* margin-bottom: 50px; */
}
.header__title-h1 {
  padding-bottom: 121px;
  text-align: center;
  font-size: 48px;
  font-family: var(--font-accent);
  color: var(--accent);
  font-weight: 700;
}
.header__title-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}

.header__footer {
  display: flex;
  justify-content: center;
  gap: 0 90px;
  padding-bottom: 74px;
  margin-right: 80px;
}
const dialog = document.querySelector("dialog");
const closeButton = document.querySelector("dialog > button");
  dialog.showModal();

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.