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