<div class="wrapper">
<div class="nav">
<div class="content">
<div class="nav_top">
<div class="nav_adres">Новокузнечный переулок 4/1</div>
<div class="nav_nomer">8 (812) 123-45-67</div>
</div>
<div class="nav_menu">
<ul class="menu">
<li><a href="#">Каталог</a></li>
<li><a href="#">Доставка</a></li>
<li><a href="#">Коллекции</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div class="nav_btm">
<div class="btm_karta"><a href="#"><span>винная карта</span></a></div>
<div class="btm_deg"><a href="#"><span>дегустация</span></a></div>
</div>
</div>
</div>
.wrapper {
height: 100%;
}
.nav {
height: 900px;
background: linear-gradient(180deg, #282828 0%, rgba(40, 40, 40, 0) 100%), url(..//img/header/01.png);
}
.content {
display: block;
width: 1110px;
margin: 0 auto;
height: 100%;
}
.nav_top {
display: flex;
justify-content: space-between;
padding: 10px 0 0 0;
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 13px;
line-height: 150%;
color: #FFFFFF;
}
.nav_adres {
}
.nav_nomer {
}
.nav_menu {
padding: 30px 0 0 0;
width: 1110px;
height: 51px;
}
.menu {
display: flex;
justify-content: space-around;
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 150%;
text-align: center;
color: #FFFFFF;
border: 1px solid #FFFFFF;
border-right: none;
border-left: none;
height: 51px;
align-items: center;
}
.menu li{
border: 1px solid #FFFFFF;
border-top: none;
border-bottom: none;
width: 300px;
}
.menu li:nth-child(1){
border-left: none;
}
.menu li:nth-child(4){
border-right: none;
}
a:hover{
color: #FF0000;
transition: 1s;
}
.nav_btm {
display: flex;
justify-content: center;
align-self: flex-end;
font-family: Montserrat;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #FFFFFF;
}
.btm{
}
.btm_karta {
display: flex;
align-content:flex-end;
margin: 0 15px;
justify-content: center;
align-items: center;
width: 200px;
height: 50px;
background: #998431;
}
.btm_deg {
display: flex;
align-items: center;
justify-content: center;
margin: auto 15px;
width: 180px;
height: 50px;
background: #998431;
}
Простой
