Это блок определённой высоты, который разбит на несколько частей, в данном случае их три.
Логотип с лева это обычная ссылка где в css подключена сама картинка яблока.
Меню по середине это либо таблица либо flexbox
Кнопки поиска с и корзины с права это тоже ссылки.
Вот как примерно будет выглядеть это в html
<div class="head_line">
<div class="container">
<a href="#" class="logo"></a>
<menu>
<a href="#">Mac</a>
<a href="#">iPad</a>
<a href="#">iPhone</a>
<a href="#">Watch</a>
<a href="#">TV</a>
<a href="#">Music</a>
<a href="#">Поддержка</a>
</menu>
<a href="#" class="search"></a>
<a href="#" class="cart"></a>
</div>
</div>
Остальное задаётся стилями.
SelenIT - сори не заметил про радиальный, о том в чём нету смысла в 2016 я промолчу...
npofopr - самоуверенно!
html, body{
width: 100%;
height: 100%;
background: radial-gradient(#55ddff, #0081b5) ;
}
Hasiev - Градиенты пишутся вот так: а ещё правильней использовать less с набором собственных миксинов.
background-color:#55ddff;
background-image:-webkit-linear-gradient(top, #55ddff, #0081b5);
background-image:-moz-linear-gradient(top, #55ddff, #0081b5);
background-image:-o-linear-gradient(top, #55ddff, #0081b5);
background-image:linear-gradient(to bottom, #55ddff, #0081b5);
Нужна будет помощь в наставлениях пиши...
alejandro13 - чё придираешься? человек учится.
ErUnDAK - поправь свою строку на вот это и всё у тебя получится:
<div style="position:absolute;z-index:1;bottom:10px;left:10px"><h3>Каплан Владислав(с), 2017</h3></div> <!-- вот здесь и ошибка как-раз! -->
А вообще alejandro13 прав, говоря про код из прошлого. Если хочешь реально делать хорошо напиши, я помогу наставлениями.