sergmi / positioning Goto Github PK

Общие замечания:

• Размер блоков, цвет, шрифт нужно привыкать отображать как в макете
• Макет в этом задании шириной 1020px, весь контент лучше обернуть дивом и отцентрировать его применив margin: 0 auto;
• Макет лучше разбивать на логические блоки, в этом макете у нас 3 блока, можно было сделать примерно так:

<div class="social_block">
    <elem></elem>
</div>

<div class="central_block">
    <elem></elem>
</div>

<div class="contacts">
    <elem></elem>
</div>

Круглый блок с соц иконками:

• Круглому блоку с соц иконками не нужно применять позиционирование, а просто разместить его первым в html разметке
• соц иконки должны быть ссылками и лучше всего было выделить в unordered list:

<ul>
  <li><a href="https://twitter.com" class="soc socP"></a></li>
  ....
</ul>

Центральный блок:

• Как я уже сказал нужна обертка, и позиционируешь этот блок применив для него margin: 0 auto;
• Можно было обойтись без z-index, расположив элементы в обратном порядке
  http://www.css-tricks.ru/Articles/Details/zIndex - раздел "Естественное расположение элементов"

Блок с контактами:

• Прозрачность блоку задавать через свойство: background-color: rgba(0,0,0,0.7); тогда прозрачность применяется только к родительскому блоку
• Контакную информацию также лучше было бы не верстать параграфом, а выделить ее в description list - dl
• Контактную информацию на почту и телефон, лучше делать через ссылки:

<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+375123456678">+375 123 456 678</a>

Это презентации наших преподавателей на тренинге, много полезной инфы:

• http://anastasia-tayanovskaya.github.io/css-recipes/
• http://slides.com/maria_putyrskaya/semantics#/