Реверстка на друпале

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

При верстке страниц сайта должна быть применена технология адаптивной верстки. Сайт должен быть сверстан под следующие разрешения экранов:

• Смартфоны с шириной экрана 480px и меньше

• От ландшафтного экрана телефона до портретного планшета с шириной экрана 767px и меньше,

• От портретного планшета до ландшафтного экрана и настольных дисплеев с шириной экрана 768px и больше,

• Для стандартных настольных дисплеев с шириной экрана 980px и больше,

• Для больших дисплеев с шириной экрана 1200px и больше.

Совместимость со следующими основными включая мобильные IOS и андроид.

• Chrome (Mac, Windows, iOS, и Android)

• Safari (Mac и iOS)

• Firefox (Mac, Windows)

• Internet Explorer (8+)

• Opera (Mac, Windows)

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

Верстка должна быть Pixel Perfect. Требование обязательное, но в то же время ситуации разные бывают, особенно в части шрифтов, поэтому иногда допускаются незначительные расхождения (все расхождения должны быть утверждены с Заказчиком).

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

Семантическая верстка - подразумевает полное соответствие назначения элемента страницы и тега, с помощью которого этот элемент свёрстан. Вот несколько примеров:

• Контакты компании должны располагаться в теге address, а не в div-e.

• Картинки могут быть свёрстаны тегом img только в том случае, если она являются информационными и несут смысловую нагрузку. Во всех остальных случаях делать картинки нужно с помощью CSS-свойства background-image.

• Все ненумерованные списки (в том числе — навигация) должны быть сделаны с помощью тегов ul и li.

• Нумерованные списки — это обязательно ol и li

• Определения в тексте выделяются тегом dfn

• Списки определений — это dl, dt, dd

• Для аббревиатур необходимо использовать тег abbr

• Блоки цитат должны быть заключены в blockquote

• Заголовки первого, второго, третего, четвертого, пятого и шестого уровней — h1, h2, h2, h4, h5 и h6 соответственно.

• Таблицы должны использоваться только для вывода табличных данных.

• Читаемость при отсутствии картинок. Для этого нужно прописывать для блоков не только background-image, но и background-color так, чтобы при отсутствии изображения текст был достаточно контрастен по отношению к фону.

• Человекопонятный код. Разбивайте код на блоки, называйте классы и идентификаторы понятно и логично, комментируйте отдельные элементы