Верстка тренировочного макета. Часть 2 Шапка/Header, фон, название.

Во второй части верстки header-a мы рассмотрим как задать фон, сделать на нем надписи и создадим кнопки для перехода на другие страницы сайта.
Перед началом верстки любого макета, сохраните все его элементы в нужном формате в корневой папке сайта!

1. Внутри основного блока с классом "wrapper", после блока с классом "header", создаем новый блок и задаем ему класс "home". В нем снова помещаем блок "container".
Видим, что на макете существуют три надписи, разные по размеру текста. Надпись "WE ARE" и горизонтальные линии слева и справа от нее, будут изображены уже на фоне. Надписи "Studio banx" и "a creative web & print digital agency built on method and creative juices" мы оформим с помощью тэгов "h1" и "h3".
Под надписями на макете находятся две кнопки. Мы зададим их тэгом "button" и зададим класс "btn".

 
<div class="home">
   <div class="container">
    <h1>
Studio banx</h1>
<h3>
a creative web & print digital agency built on method and creative juices</h3>
<button class="btn">See our work</button>
    <button class="btn">meet the team</button>
   </div>
</div>

Для оформления заголовков, зададим следующие стили нашим классам:

 
// общие стили для блока home
.home{
 height: 948px;
 padding-top:185px;
 margin-left:-10px;
 text-align: center;
 background: url(img/4.jpg) no-repeat;
}
// оформление заголовков
h1{
 font: 125px Georgia, sans-serif;
 font-style: bold;
 color:#4f4d6a;
 text-transform: uppercase;
 margin-top:50px;
 margin-bottom:0px;
 padding-left:0px;
}
h3{
 font-size: 18px;
 color:#4f4d6a;
 font-style: bold;
 text-transform: uppercase;
 margin-bottom:75px;
 margin-top:0px;
}

А теперь оформим кнопки.

 
// для текста внутри кнопок
.home button{
 font: 18px Georgia, sans-serif;
 color:#4f4d6a;
 font-style: italic;
 color: #FFF;
} 
// внешний вид первой кнопки
.btn{
 display: inline-block;
 background: #666481;
 padding:10px 60px;
 cursor: pointer;
 -webkit- border-radius: 50px;
     -moz-border-radius: 50px;
    -o-border-radius: 50px;
 border-radius: 50px;
 margin-right: 20px;
 border-top-color:#666481;
 border-left-color:#666481;
}
// внешний вид второй кнопки
.btn:last-child{
 background: #b9a6b2;
 border-top-color:#b9a6b2;
 border-left-color:#b9a6b2;
 margin-right: 0px;
}
// стили при наведении первую кнопку
.btn:hover {
 background: #4f4d6a;
 border-top-color:#4f4d6a;
 border-left-color:#4f4d6a;
}
// стили при наведении вторую кнопку
.btn:last-child:hover {
 background: #877180;
 border-top-color:#877180;
 border-left-color:#877180;
}

Если вы сделали все правильно и со всем разобрались, то у вас должна получиться вот такая шапка сайта.
Обязательно проверьте работают ли ссылки и применяются ли к элементам эффекты при наведении.