<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();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.