Оцените верстку LP

[Kirill M]

Здравствуйте, товарищи.

Оцените пожалуйста верстку одностраничного сайта. http://malahov-web.ru/demo/eco_stochnie_vodi/

Основные вопросы:

1. Общее по коду html - семантика, структура

2. В раздел "Прайс-лист"  изображение человека сейчас сделано отдельной картинкой .png -  это плохой вариант она весит очень много. Но соединить его с общим серым фоном в один jpeg в данном случае затруднительно потому фон раздела -  повторяющийся узор. Как Вы решаете такую задачу?

3. Классы обычно делаю по логике Блок-элемент ( и иногда модификатор). Хотя в верстке небольших сайтов чаще применяют "чистый код"  на наследовании.

Если заглянете в  css-код могу сказать только что запись в несколько строк видится удобнее чем каждое правило с новой.

 

[DivMan]

А что это за точка по середине экрана? 

[Джулия]

В 25.05.2016 в 18:41, Kirill M сказал:

Здравствуйте, товарищи.

Оцените пожалуйста верстку одностраничного сайта. http://malahov-web.ru/demo/eco_stochnie_vodi/

Основные вопросы:

1. Общее по коду html - семантика, структура

2. В раздел "Прайс-лист"  изображение человека сейчас сделано отдельной картинкой .png -  это плохой вариант она весит очень много. Но соединить его с общим серым фоном в один jpeg в данном случае затруднительно потому фон раздела -  повторяющийся узор. Как Вы решаете такую задачу?

3. Классы обычно делаю по логике Блок-элемент ( и иногда модификатор). Хотя в верстке небольших сайтов чаще применяют "чистый код"  на наследовании.

Если заглянете в  css-код могу сказать только что запись в несколько строк видится удобнее чем каждое правило с новой.

 

надпись - Выезд специалиста для отбора проб - на следующий день в удобное для вас время -  делайте без <br/>(вообще,плохая практика перевода строки),задайте этому блоку просто ширину 460px.
немного не поняла зачем блоку с заголовками .section__title(например, Кому необходимы анализы сточных вод?) и блоку .whoneed  {float:left}?

тоже самое по блоку .we_do__list и .we_do__result - зачем float:left? Там надо списку и блоку прописать display: inline-block;

у вас достаточно часто встречается float:left у блоков,только не понятно зачем они везде..

у блока .section-price_bottom да и в других лучше не прописывать конкретную высоту,а делать паддинги сверху и снизу

.you_get_item-quickness .you_get_item__image поменяйте {    background-position: -159px -280px;} - если -160px виден край следующей иконки спрайта. А в самом спрайте .you_get_item__image{background-repeat: no-repeat} прописывайте везде no-repeat.

по иконкам - лучше использовать .png или .svg(лучше всего,не теряется качество), .jpeg - для фоток.

по поводу изображения парня с ноутом - только так,вырезая его и позиционируя на страницу