<header class="header" style="background-image: url(img/bg_header_img_1.jpg);">
<div class="header-pannel">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="header-logo">
<a href="#"><span>Liveangle.ru</span></a>
</div>
</div>
<div class="col-md-7">
<nav class="header-mnu">
<ul class="sf-menu">
<li><a href="#">Главная</a></li>
<li>
<a href="#">Все категории <i class="fa fa-angle-right"></i></a>
<ul>
<li>
<a href="#">Животные <i class="fa fa-angle-right"></i></a>
<ul>
<li>
<a href="#">Типы животных <i class="fa fa-angle-right"></i></a>
<ul>
<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>
<li><a href="#">Хордовые</a></li>
</ul>
</li>
<li>
<a href="#">Классы животных <i class="fa fa-angle-right"></i></a>
<ul>
<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>
<li><a href="#">Земноводные</a></li>
<li><a href="#">Рыбы</a></li>
</ul>
</li>
<li>
<a href="#">Отряды животных <i class="fa fa-angle-right"></i></a>
<ul>
<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>
<li><a href="#">Хоботные</a></li>
<li><a href="#">Приматы</a></li>
</ul>
</li>
<li>
<a href="#">Семейства животных <i class="fa fa-angle-right"></i></a>
<ul>
<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>
<li><a href="#">Куньи</a></li>
<li><a href="#">Оленевые</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Растения <i class="fa fa-angle-right"></i></a>
<ul>
<li><a href="#">Деревья</a></li>
<li><a href="#">Цветы</a></li>
<li><a href="#">Дикая растительность</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Фотогалерея</a></li>
<li><a href="#">О нас</a></li>
</ul>
</nav>
</div>
<div class="col-md-3">
<div class="header-socials">
<span>Поделитесь нашей ссылкой:</span>
<a href="#"><i class="fa fa-vk"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-odnoklassniki"></i></a>
<a href="#"><i class="fa fa-rss"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="header-content">
<div class="container">
<div class="row">
<div class="col">
<div class="header-title">
<h1>Онлайн энциклопедия<br>о мире <b>животных</b> и <b>растений</b></h1>
</div>
<div class="header-search">
<p>Воспользуйтесь поиском, чтобы найти много интересного!</p>
<input type="search" class="search-line" name="search" placeholder="Например: белый медведь">
<button class="search-button"><i class="fa fa-search"></i></button>
</div>
<div class="header-scrolldown">
<a href="#categories"><i class="fa fa-angle-double-down"></i></a>
</div>
</div>
</div>
</div>
</div>
</header>.header
min-height: 750px
height: 100vh
background-size: cover
background-position: bottom
background-repeat: no-repeat
position: relative
z-index: 0
&::before
position: absolute
content: ''
top: 0
left: 0
height: 100%
width: 100%
background-color: rgba(17,17,17,.5)
.header-pannel
position: relative
background-color: #fff
min-height: 90px
box-shadow: 0 5px 0 rgba(255,255,255,.3)
color: $dark-text
font-family: $default-font
.header-logo
text-transform: uppercase
font-size: em(16px)
font-weight: 700
line-height: 90px
a
color: #707070
text-decoration: none
.header-mnu
.sf-menu
float: none
margin: 0
padding: 0
a
transition: all .25s ease
border: none
height: 90px
line-height: 35px
>li
transition: all .25s ease
background-color: #fff
>a
color: $dark-text
border: none
padding: 25px 30px 25px
.fa
font-size: 14px
margin-left: 2px
&:hover
background-color: $main-color
>a
color: #fff
ul
margin-top: 0
li
background-color: #fff
margin: 0
padding: 0
border:
bottom: 1px solid #dbdbdb
right: 1px solid #dbdbdb
left: 1px solid #dbdbdb
&:hover
>a
color: lighten($dark-text, 10%)
a
height: 50px
padding: 6px 20px 0 20px
color: $dark-text
.fa
font-size: 14px
margin-left: 2px
&:hover
background-color: #dbdbdb
color: darken($dark-text, 20%)
.header-socials
text-align: center
margin-top: 12px
span
display: block
font-size: 14px
color: $dark-text
a
color: $dark-text
display: inline-block
width: 36px
height: 36px
line-height: 36px
text-align: center
border: 1px solid $dark-text
border-radius: 50%
margin-right: 1px
transition: all .25s ease
margin: 1px 0
&:hover
color: #41abe1
border: 1px solid #41abe1
.header-content
padding: 100px 0 0 0
text-align: center
color: $light-text
.header-title
font-size: 26px
.header-search
margin-top: 40px
p
opacity: .65
margin-bottom: 10px
.search-line
width: 58%
height: 40px
padding-left: 15px
font-size: 16px
color: #373737
border: none
outline: none
position: relative
.search-button
position: absolute
text-align: center
background-color: $main-color
border: none
outline: none
cursor: pointer
height: 40px
width: 40px
.fa
color: $light-text
opacity: .7
&:hover
background-color: lighten($main-color, 5%)
.fa
opacity: 1
.header-scrolldown
margin-top: 240px
a
color: $dark-text
display: inline-block
width: 50px
height: 50px
line-height: 60px
border: 1px solid $light-text
border-radius: 50%
margin-right: 1px
transition: all .25s ease
margin: 1px 0
opacity: .35
.fa
font-size: 25px
color: $light-text
&:hover
opacity: 1