Требуется верстка лэндинга, строго pixel perfect!!! за исключением возможных ошибок в дизайне с выравниваем.

макеты в Photoshop.

В дизайне использована 8-пиксельная сетка, которой нужно придерживаться.

То есть, фиксированные расстояния должны быть кратны 8 (с поправкой на разницу между фактически заданными и визуальными размерами).

При необходимости, можно использовать половину шага (4px) для
объектов, которые не влияют на свои дочерние объекты (например, для межстрочного расстояния в
тексте или для ширины кнопки). Обратите внимание, что в текстовых блоках (заголовки, абзацы и т.п.)
текст в сетке выравнивается по нижнему краю текста, а не верхнему.

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

Нужно ориентироваться на следующие параметры ширины экрана:
- до 767 px (смартфон)
- 768 – 1023 px (планшет)
- 1024 – 1279 px (малый десктоп)
- от 1280 и выше (большой десктоп)

На смартфоне и планшете сайт растягивается на ширину экран. На малом десктопе сайт зафиксирован
по ширине 968 px. На большом десктопе сайт зафиксирован по ширине 1232 px.

Картинка в шапке сайта на телефоне должна растягиваться по ширине экрана.
В шапке сайта у пунктов меню при наведении менять цвет на оранжевый (#ffaa46),подчеркивать не
надо.

При нажатии на пункт меню сайт нужно прокручивать к соответствующему разделу плавно.

Блок с табличкой (интерпретация) под исследованием на мобильной версии работает идентично
этому блоку на сайте www.cmd-online.ru/analizy...
specificheskij-antigen-obshhijsvobodnyj_070002/?search=y , горизонтальный скролл.

Блок «Что такое ПСА?» имеет картинку врача, на экранах desktop и small этот врач зафиксирован на
экране до конца этого блока.

Карту с офисами делать НЕ надо.

Опубликовано 2 года назад