Верстка страниц под готовый шаблон темы
!!!Указывайте в заявке цену, сроки. Необходим исполнитель, который будет часто на связи и оперативно выполнит задачу. Выбранному исполнителю отправим 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 макеты после утверждения всех деталей!!!