<div class="header">
<div class="header__logo">
<div class="logo"></div>
</div>
<div class="header__aside">
<div class="location">
<select>
<option>Малиновского</option>
</select>
</div>
<div class="catalog-button">
<button>Каталог</button>
</div>
</div>
<div class="header__main">
<div class="header__menu">
<div class="phone">8-800-550-19-80</div>
<ul class="top-menu">
<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>
<li><a href="#">Корзина</a></li>
</ul>
</div>
<div class="header__search">
<form class="search">
<input type="search" placeholder="Что ищете?">
</form>
</div>
</div>
</div>
.header {
font-size: 14px;
padding: 20px 5px;
display: flex;
&__logo {}
&__aside {
padding: 0 10px;
}
&__main {
flex-grow: 1;
}
&__menu {
display: flex;
}
}
.logo {
width: 50px;
height: 50px;
background: red;
}
.top-menu {
margin: 0;
display: flex;
list-style: none;
padding: 0;
flex-grow: 1;
justify-content: space-between;
}
.search {
input {
display: block;
width: 100%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.