Верстка тренировочного макета Часть 4 Три колонки, футер

Я снова здесь! Прошу прощения, за свое долгое отсутствие и хочу немного объясниться. В моих планах было публиковать по 3-4 поста в неделю на разные темы, а так же писать посты о своих проектах на данный момент. Но... так как через неделю заканчивается производственная практика, которая по плану на 4м курсе... я была по уши в заданиях и мое время уходило куда-то не туда. Я решила опомниться и сделать четвертую часть урока по верстке тренировочного макета, а еще придумала тему нового поста!
Пожалуй, начнем!
Следующим по плану у нас идет заголовок и три колонки, внизу каждой из которых расположена кнопка.
Поместим все в блок с классом "more", в котором расположим три контейнера, для будущих трех колонок. В каждом контейнере будет блок с описанием и блок для кнопки. Еще не забудьте про заголовок блока "more", который будет в первом контейнере.


Html разметка готова, осталось только добавить текст описаний и сами кнопки.
Пример:

<div class="descr size-more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eros ligula, lacinia quis euismod in, dignissim at neque. Aliquam quis consectetur magna.</p>
</div>

<div class="but">
        <button class="btn2">View More</button>
</div>

Перейдем к стилям.

/*Общие стили для блока*/
.more{
 display:block;
 height:308px;
 text-align: left;

}
/*стили для заголовка*/
h6{
 text-align: left;
 font: 24px Georgia, sans-serif;
 font-style: italic;
 color:#4f4d6a;
 margin-top: 60px;
 margin-left: 295px;
 margin-bottom: 20px;
}
/*стили для текста описания*/
.more p{
 text-align: left;
 font: 12px Georgia, sans-serif;
 font-style: italic;
 color:#4f4d6a;
 line-height: 28px;
}
/*размеры блока с описанием*/
.size-more{
 display:block;
 width: 300px;
 height: 100px;
 margin-left: 295px;
}
/*оформление кнопок*/
.more button{
 float: left;
 font: 12px Georgia, sans-serif;
 color:#4f4d6a;
 font-style: bold;
 font-style: italic;
 color: #FFF;
}
.btn2{
 display: inline-block;
 background: #4f4d6a;
 padding:5px 15px;
 cursor: pointer;
 -webkit- border-radius: 50px;
     -moz-border-radius: 50px;
    -o-border-radius: 50px;
 margin-right: 20px;
 border-top-color:#4f4d6a;
 border-left-color:#4f4d6a;
}
.but .btn2{
 margin-left: 295px;
 margin-top: 25px;
}
.btn2:hover {
 background-color: #39384b;
 border-top-color:#4f4d6a;
 border-left-color:#4f4d6a;
}
/*задаем позициониование и размеры для контейнеров*/
.container2 {
 float:left;
 width: 27%;
 margin-top: -111px;
 margin-left: -70px;
}
.container3 {
 float:left;
 width: 27%;
 margin-top: -111px;
 margin-left: -75px;
}

На очереди последняя часть любого макета  - футер (подвал сайта).
Как видите, футер состоит из двух колонок. Подобное мы только что делали для трех колонок.
Поместим футер в блок с классом "info". В него поместим два контейнера c описаниями.

<div class="info">
        <div class="container">
              <div class="desc size3">
              </div>
        </div>

        <div class="container4">
              <div class="desc size3">
              </div>
        <div>
<div>

В блоки с описанием поместим заголовки и сам текст. И если вы хотите подписать свой сайт, то строку копирайта тоже поместите в контейнер первой колонки

<div class="desc size3">
   <h6 class="title">What makes us so awesome</h6>
 <p>Nulla ut eleifend diam. In feugiat, lacus vitae porttitor lacinia, metus lectus interdum elit, at consectetur orci dolor et metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada.</p>
 <p class="copy">Copyright - By ....</p>
</div>


<div class="desc size4">
<h6 class="title">Contact Us</h6>
<p>Nulla ut eleifend diam. In feugiat, lacus vitae porttitor lacinia, metus lectus interdum elit, at consectetur orci dolor et metus. Vestibulum ante ipsum primis in faucibus orci </p>
</div>

Стили:

 
/*общие стили для блока*/
.info{
 display:block;
 height:308px;
 text-align: left;
 background-color: #505050;
}
/*стили для заголовка*/
.info .container h6{
 text-align: left;
 font: 24px Georgia, sans-serif;
 font-style: italic;
 color:#4f4d6a;
 margin-top: 50px;
 margin-left: 295px;
 margin-bottom: 20px;
 color: white;
}
/*стили для текста описания*/
.info .container p{
 text-align: left;
 font: 12px Georgia, sans-serif;
 color:#4f4d6a;
 line-height: 28px;
 color: white;
 margin-left: 295px;
 margin-bottom: 50px;
}
/*размер и позиционирование контейнера*/
.container4 {
 float:left;
 width: 50%;
 margin-top: -200px;
 margin-left: 680px;
}
/*размер блока с описанием*/
.size3{
 width:850px;
 height:200px;
}
/*размер блока с описанием*/
.size4{
 width:620px;
 height:200px;
}
/*стили для строки копирайта*/
.copy p{
 text-align: left;
 font: 12px Georgia, sans-serif;
 color:#4f4d6a;
 line-height: 28px;
 color: white;
 margin-left: 295px;
 margin-bottom: 80px;
}

Вот и все.. макет мы сверстали. Надеюсь у вас все получилось! Ждите новых постов и новых тем. (постараюсь выложить что-то новое очень скоро)