Верстка страниц под готовый шаблон темы

!!!Указывайте в заявке цену, сроки. Необходим исполнитель, который будет часто на связи и оперативно выполнит задачу. Выбранному исполнителю отправим psd макеты после утверждения всех деталей!!!

Сайт по грузоперевозкам будет доработан на шаблоне https://www.templatemonster.com/demo/53388.html (бутстрап сетка)

Необходимо сделать верстку:

1.       Посадочная страница

2.       Главная страница

3.       Страница тарифов

4.       Попап-окна

Главная страница и посадочная перекликаются в блоках, а страница Тарифы имеет дизайн как страница в слайдере на посадочной

или главной + пагинация+ текст +блок о грузчиках + блоки с главной или посадочной.

Необходимо заверстать с расчетом на кроссбраузерность и адаптив: чтоб на любом расширении экрана и браузера верстка смотрелась корректно.

Учитывать все стили темы(подключить все css стили с темы), чтоб при натяжке верстки, Ваши стили не поломались.

Прикрепляю jpg файлы для оценки цены/сроков. Дизайна под мобильную версию нет, только описание особенностей ниже. А так – «свободное падение» от бутстрапа :)

Psd файлы дизайна и исходники темы будут высланы после утверждении исполнителя.

Особенности отображения на мобильной версии:

Шапка

1.      Отобразить только первые 2 мобильных номера http://joxi.ru/krDOqWnsEKNxKA

2.      Меню можно адаптировать как в темеhttp://joxi.ru/gmvqYDQFLqYnnr

Посадочная страница (эта страница верстается первой и по результатам верстки будет известно будем ли мы продолжать работу с выбранным исполнителем)

1.      Это картинка, на которой текст,который находится поверх (чтоб можно было задавать из админки) Скрываем текст

описания http://joxi.ru/KAxzYD6fMZ7bNm. Заказать – ссылка, которая открывает попап-окно (которое тоже необходимо

сверстать).

2.      Слайдер http://joxi.ru/RmzqYDdF0Yodvr который автоматически прокручивает слайды раз в 5 секунд. Так же есть кнопки навигации

(кружочки слева). «Заказать» и «Перейти к тарифам» – ссылки. http://joxi.ru/nAyqYDWFYgoV9A правая часть падает под левую

3.      Блоки адаптируются друг под другомhttp://joxi.ru/bmoWYeMtx3Bk1m

4.      http://joxi.ru/1A5zZ0DfnDevdr тоже адаптируются посредством бутстрапа . Рассчитать – ссылка, что открывает попап-окно 2. Имя и телефон - обязательные поля. 

5.      http://joxi.ru/Y2LXeONh970OK2 слайдер,в котором присутствует картинка, заголовок, описание. 1,2,3,4,5  - навигация в слайдере. При нажатии на другую цифру, меняются данные блоки: http://joxi.ru/4AkpzDNIyoOYkr

6.      http://joxi.ru/Dr863pQs4oedn2 Заказать- ссылка

7.       http://joxi.ru/E2pdeDGF97WwM2 email - ссылка с mailto. Иконки соц кнопок– ссылки.

8.      СЕО текст http://joxi.ru/MAj1zD8I4jewQ2 Стилидля него должны быть прописаны отдельно для таких тегов: H2, H3, ul, ol, p. При нажатии на кнопку (стрелочка вниз) плавно разворачивается весь текст в СЕО блоке. При этом весь текст должен считываться браузером и не быть скрытым от поисковиков. При раскрытии стрелочка меняет направление и при нажатии, плавно скрывает раскрытый текст.

9.      http://joxi.ru/4AkpzDNIyoOEqr картинка- ссылка

Главная страница

1.      Картинка, на которой есть текст(два блока отдельно наверстано) и форма обратной связи. При экране

скрывается текст и остается только форма http://joxi.ru/52akn93u4EMYpr

2.      При наведении на блок http://joxi.ru/1A5bVxasnbJqor ,исчезает черная плашка с надписью. Данные блоки адаптируются – падая друг под друга.

3.      Все остальные блоки http://joxi.ru/xAeGVDOIpXZbRmтакие как на посадочной.

Тарифы (файл не прикреплен, но имеет вид http://joxi.ru/eAOqvYNtxk7vqm )

1.      http://joxi.ru/DmBXvL0uw4jdPA  H1 и хлебные крошки

2.      Все элементы в 6 блоках должныбыть отдельно наверстаны. Это НЕ одна сплошная картинка. http://joxi.ru/V2VnjLgSxkakp2

3.      После 6 элементов – пагинация

4.      http://joxi.ru/D2PjvY0hpJYJMr так жевесь блок – не картинка. Текст отдельно верстается.

5.      Все остальные блоки http://joxi.ru/xAeGVDOIpXZbRmтакие как на посадочной.

Попап-окно 1

1.      Возникает при нажатии на кнопку заказать на посадочной http://joxi.ru/l2ZvpRQuw7aRe2 или любых других http://joxi.ru/Y2LjvYEh9E8Mqr.Попап-окно появляется плавно и находится по центру экрана (по горизонтали и

вертикали), при этом затемняется весь фон сайта.

2.      Есть валидация по двум полям: имя и номер телефона (они должны быть заполнены – иначе выдаваться ошибка)

3.      При нажатии на крестик попап-окно плавно закрывается, а при нажатии «Заказать» и правильной валидации данное

попап-окно закрывается и открывается попап-окно2 http://joxi.ru/ZrJVvY0f9nNb7r

Попап-окно 2

1.      Возникает после нажатия «Заказать»на Попап-окно 1. Появляется и центрируется как предыдущее.

2.      Крестик – закрывает. Кнопка «Вернуться на главную» – ссылка, которая закрывает Попап-окно2 и переводит пользователя на главную.

!!!Указывайте в заявке цену, сроки. Необходим исполнитель, который будет часто на связи и оперативно выполнит задачу. Выбранному исполнителю отправим psd макеты после утверждения всех деталей!!!