Требуется верстка лэндинга, строго pixel perfect!!! за исключением возможных ошибок в дизайне с выравниваем.
макеты в Photoshop.
В дизайне использована 8-пиксельная сетка, которой нужно придерживаться.
То есть, фиксированные расстояния должны быть кратны 8 (с поправкой на разницу между фактически заданными и визуальными размерами).
При необходимости, можно использовать половину шага (4px) для
объектов, которые не влияют на свои дочерние объекты (например, для межстрочного расстояния в
тексте или для ширины кнопки). Обратите внимание, что в текстовых блоках (заголовки, абзацы и т.п.)
текст в сетке выравнивается по нижнему краю текста, а не верхнему.
В шапке сайта, в кнопках, инпутах, в кружке с баллами и в ячейках списка анализов текст выравнивается по центру родительского элемента.
Нужно ориентироваться на следующие параметры ширины экрана:
- до 767 px (смартфон)
- 768 – 1023 px (планшет)
- 1024 – 1279 px (малый десктоп)
- от 1280 и выше (большой десктоп)
На смартфоне и планшете сайт растягивается на ширину экран. На малом десктопе сайт зафиксирован
по ширине 968 px. На большом десктопе сайт зафиксирован по ширине 1232 px.
Картинка в шапке сайта на телефоне должна растягиваться по ширине экрана.
В шапке сайта у пунктов меню при наведении менять цвет на оранжевый (#ffaa46), подчеркивать не
надо.
При нажатии на пункт меню сайт нужно прокручивать к соответствующему разделу плавно.
Блок с табличкой (интерпретация) под исследованием на мобильной версии работает идентично
этому блоку на сайте
specificheskij-antigen-obshhijsvobodnyj_070002/?search=y , горизонтальный скролл.
Блок «Что такое ПСА?» имеет картинку врача, на экранах desktop и small этот врач зафиксирован на
экране до конца этого блока.
Карту с офисами делать НЕ надо.