Адаптивная верстка (натяжка на WordPress? )

Требуется сверстать приложенный дизайн.

ВНИМАНИЕ: В ДАЛЬНЕЙШЕМ ТРЕБУЕТСЯ НАТЯНУТЬ ВЕРСТКУ НА ВОРДПРЕСС, ПОЭТОМУ ИСПОЛНИТЕЛИ, КОТОРЫЕ В СОСТОЯНИИ ПРЕДЛОЖИТЬ ОБЕ УСЛУГИ СРАЗУ, БУДУТ ИМЕТЬ ПРИОРИТЕТ!

ТЗ ВЕРСТКА:

1. Верстка "резиновая" и трехступенчатая, версия для ПК применяется для ширины экрана 992 и выше, версия для планшета применяется для разрешения 991 и ниже до 768, версия для телефона: 767 и ниже

2. Тело сайта всегда занимает 100% ширины экрана.

3. Версия для ПК структурно состоит из четырех столбцов, каждый по 25% ширины окна браузера, для планшета из 2-х по 50% и для смартфона из 1-го.

4. Хедер сайта (белая полоса с меню) всегда виден вверху окна браузера в версии для ПК и планшета.

5. Сайт состоит из прямоугольных "окошек", для удобства объяснения будет использован также термин "блок", который обозначает пространство равное группе из 12-ти базовых окошек, 4 в ширину и 3 в высоту. На главной странице у нас два блока: первый - это слайдер, второй - это ряд из 4-х квадратов, карта, и все, что слева от карты. На странице второго типа 1 блок из трех строк. На странице четвертого типа 2 блока, первый: галерея и карта с названием, второй: описание, форма заказа и список привилегий. На пятой, наверное, понятно и без объяснений.

6. Слайдер. Присутствует только на главной странице и только в версии для ПК и планшетов. Состоит из меню, которое находится в левой четверти на фоне черно-белого снимка и собственно слайдера, на котором название раздела и кружочки-индикаторы слайдов. Соответствующий раздел меню при этом подчеркнут. Прокрутка слайдера происходит автоматически. При переходе, следующий слайд едет сверху, сдвигая нижний, одновременно с ним двигается вниз подчеркивание под пунктом меню слева. Индикатор слайда меняется на следующий. Очень желательно, чтобы для эффектов использовался CSS3.

7. Окошки - при наведении на окошко из центра до его краев разъезжается белая рамка (пример такого эффекта здесь: http://www.relaisblu.com/ ). При этом все, что внутри рамки немного затемняет фото, чтобы текст лучше читался. Название окошка съезжает чуть вверх, в нижней половине окошка появляется кнопка.

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

9. Соотношение сторон базового окошка 4:3 вне зависимоти от размеров экрана, таким образом соотношение сторон блока 16:9.

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

11. В галерее (страница четвертого типа) миниатюры должны быть такие же по пропорциям, как и окошки 4:3, не так, как сейчас в дизайне.

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

13. на странице пятого типа в версии для телефона, от коллажа остаются только три удлиненных элемента, каждый в соотношении 12:3.

14. Шрифты из гугл-библиотеки: Roboto: latin, latin-ext, cyrillic и font awesome для иконок соцсетей.

15. Нажатие на номер телефона приводит к совершению звонка, а на адрес - к открытию почтовой программы.

ТЗ ПО ВОРДПРЕССУ в личку или в следующем проекте.