Верстка тренировочного макета. Часть 3 Картинки и описание.

Надеюсь две предыдущих части сайта вы уже сверстали и ждете не дождетесь, когда начнете верстать третью! И вот она - третья часть!

Традиционно, создаем основной блок с классом "work" и в нем контейнер. Дальше видим, что у нас есть два заголовка, линия под нижним заголовком, а дальше блоки с картинками и описанием.

<div class="work">
<div class="container clarfix">
<h4 class="title">Check out</h4>
<h2 class="title">Our Works</h2>
<hr></hr>
<--блоки с картинками и описанием-->>
</div>
</div>

Теперь опишем стили для блока.

 
/*общие стили для блока work*/
.work{
 display: block;
 text-align: center;
 background-color: #ebebeb;
 height:800px;
 width: 1541px;
 margin-left: -1px;
}
/*стили для заголовков*/
h2{
 padding-top: 0;
 text-align: center;
 font: 72px Georgia, sans-serif;
 font-style: bold;
 color:#4f4d6a;
 text-transform: uppercase;
 margin-top:0;
 margin-bottom: 30px;
}
h4{
 padding-top: 60px;
 text-align: center;
 font: 18px Georgia, sans-serif;
 font-style: italic;
 color:#4f4d6a;
 text-transform: uppercase;
 margin-top:0;
}
hr{
 border:none;
 background-color: white;
 height:2px;
 width:980px;
 margin-bottom: 25px;
}

Блок с картинками, который помещаем внутри контейнера основного блока "work", мы разделим на под-блоки с классом "cont", в которых разместим дивы с классами "pic", а первому и последнему диву зададим классы "first" и "end", чтобы их выделить и в последствии задать отступы слева и справа. В каждый див с классом "pic" добавим картинку.

Так же пропишем стили в сss файле. Картинки сделаем круглыми при помощи свойства border-radius и добавим цвет рамки при наведении. Обратите внимание, чтобы картинки размещались горизонтально, нужно задать блоку с картинкой позиционирование слева float: left.

/*оформление картинок*/
.pic img{
 display:block;
 text-align: none;
 margin:0;
 margin-right: 30px;
 border:20px solid;
 border-radius: 140px;
 border-color: #efefef;
 margin-bottom: 20px;
}
.pic img:hover{
 border-color: #9f9dab;
}
/*позиционируем блоки с картинками горизонтально*/
.cont{
 float: left;
}

Осталось сверстать описания к картинкам и наш блок готов! Еще чуть-чуть)
Зададим общему блоку с описанием класс "desc" и внутрь него поместим див с классом "size", чтобы задать точные размеры блока с описанием. В каждом блоке создадим заголовок и описание.

<div class="desc">
<div class="size first">
<h5 class="title"> Desire</h5>
<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>

<div class="desc">
<div class="size">
<h5 class="title"> Aspiration</h5>
<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>

<div class="desc">
<div class="size">
<h5 class="title"> Design</h5>
<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>

<div class="desc">
<div class="size">
<h5 class="title"> Lust</h5>
<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>

Стили будут следующими:

/*позиционируем горизонтально описания и задаем отступ*/
.desc{
 display:block;
 float:left;
 margin-right:25px;
}
/*размер блока с описанием*/
.size{
 width:220px;
 height:190px;
}
/*стили для заголовков*/
h5{
 text-align: left;
 font: 22px Georgia, sans-serif;
 font-style: italic;
 color:#4f4d6a;
 margin:0;
}
p{
 text-align: left;
 font: 12px Georgia, sans-serif;
 font-style: italic;
 color:#4f4d6a;
 line-height: 28px;
}

Ну и добрались до кнопочек. Внешне они такие же как и кнопки в шапке сайта, но в их размещении будут некоторые изменения.

<div class="but">
<button class="btn">See our work</button>
<button class="btn">meet the team</button>
</div>

Как вы можете заметить, в css изменились лишь классы к которым применяются те же свойства, что и к кнопкам в шапке сайта.

/*размещаем кнопки блока work */
.work button{
 float:left;
 font: 18px Georgia, sans-serif;
 color:#4f4d6a;
 font-style: italic;
 color: #FFF;
 margin-left: 530px;
}
.work .btn:last-child{
 background: #b9a6b2;
 border-top-color:#b9a6b2;
 border-left-color:#b9a6b2;
 margin-right: 0px;
 margin-left: 20px
}
.work .btn:last-child:hover {
 background: #877180;
 border-top-color:#877180;
 border-left-color:#877180;
}

Если вы сделали все правильно, должно получиться так, как на картинке.

В следующей части мы закончим верстать макет и получим готовый красивенький САЙТ! А пока желаю вам удаче в верстке этой части и жду ваших отзывов!

Верстка тренировочного макета. Часть 3 Картинки и описание.

Поделиться:

Комментарии

1 коммент.: