Бесплатно зарегистрируйся и получай уведомления о новых проектах по работе

Поделиться:

Заверстать адаптивно несколько страниц и форм + JS

f
Заказчик
Отзывы фрилансеров: + 116 0 - 1
Зарегистрирован на сайте 10 лет и 4 месяца
Бюджет: 15 000 ₽/проект
233.61 $ — 212.24 €
Исполнитель определен: Назар Линовецкий [scriptroom]
Здравствуйте!

Указывайте цену и срок. Без этого предложения не рассматриваются.

Нужно заверстать пачку страниц + несколько не самых простых форм с валидацией, переключением и т.д.
preview тут: https://yadi.sk/d/4irJX8du3GABkG
Подробное ТЗ ниже. Бюджет на верстку предварительный, предлагайте свою цену и срок.
Для адаптива макеты тоже есть и адаптив тут не сложный.

Спасибо!

Вот ТЗ:


папка 01.main


01) Главная страница
В шапке слайдер изображений. Картинки меняются ч/з прозрачность.
При уменьшении окна браузера – поля картинки слева/справа уменьшаются.
Так же обратите внимание, картинки разные в зависимости от ширины экрана. Дизайнер специально скарировал картинки под основные ключевые размеры.

02) 
Под инпутом стрелочка в круге. По клике на нее, раскрывается доп. блок. Вот этот блок тут и показан.

03) тут просто др. картинка в шапке. Ее нужно в слайдер.

04) Тут показано затемнение для всплывающих форм.

05) Тут показано поведение основных элементов интерфейса.

06_01 -> 07_02) Это форма регистрации из нескольких шагов, которая открывается по клику на ссылук в вверхем правом углу.

06_01) Первый шаг формы в первоначальном состоянии.
Обратите внимание, пока все обязательные поля не заполнены – кнопка "далее не активна".

06_02) Это заполненное состояние первого шага.
Обратите внимание: вначале заголовок инпута находится в самом инпуте:
web-format.net/upload/gya...
а когда начали запонлять, отображается уже над инпутом слева
web-format.net/upload/gya...
Анимировать процесс перемещения заголовка не требуется.
Такое поведение, у всех инпутов на сайте.
По мере заполнения, оранжевые звездочки пропадают.
Основная оранжевая становится серой когда все поля заполнены.
Кнопка далее становится активной.

07_01_new, 07_01_new_, 07_02_new )
После нажатия кнопки "далее" содержимое формы меняется, это сл. шаг.
Внизу есть выпадающий список "Роль пользователя". Тут должны быть значения:
Физическое лицо или Юридическое лицо.
В зависимости от выбора, меняется содержимое полей в правой колонке. По умолчанию, правой колонки нет.

Тут так же, по мере заполнения формы, кнопка регистрация становится активной

08_01 -> 08_05) Это форма авторизации, которая открывается при нажатии на ссылку в правом углу.
Тут уж все очевидно, описывать не буду.

09_01 -> 10_01_01) 
Это форма оплаты, которая открывается если в инпут на главной странице внести значение и поискать или нажать одну из 4 иконок под заголовком "оплата услуг".

09_01, 09_02, 09_02_) тут все должно быть понятно

10_01) 
Тут особенности такие:
Сумма к зачислению, это инпут.
Размер комиссии – не инпут и меняется в зависимости от выбора в левой колонке.
Итого к оплате – тоже инпут, который если заполнить, значение в инпуте "сумма к зачислению" уменьшается на размер комисии.
Галочка "я согласен оплатить коммисию ххх", должна быть активна что бы стала активной кнопка "оплатить"

10_01_, 10_01_01,  10_01_01_) Тут показаны особенности поведения содержимого в левой колонке.


11_01) тут просто заголовок другой и вместо инпута, кнопка "скачать чек"
11_02) а тут просто заголовок другой


папка  02.cabinet

11_03, 11_04,12,13) тут ничего особо интересного нет и вроде все очевидно.

14_new) тут большие цифры, это инпуты, почему какие-то серые а какие-то синие – уточняется.
15) тут большие цифры это не инпуты, а просто текст.


16_01_new – > 16_05_new) это все одна страница автоплатежей и их настройки.

17 и 18) это страницы редакитрования профиля

20) Страница мои карты.
Их выводится по две в строку + кнопка добавить карту.
По нажатию на кнопку "добавить карту" или икноку редактирования у существующей карты, раскрывается список добавления/редактирования.

папка 03.footer
тут обычные текстовые страницы, там все очевидно, описывать не буду.

Разделы:
Опубликован:
17.04.2017 | 10:09

Теги: верстальщик удаленно, сверстать сайт, сделать верстку, требуется верстальщик, сверстать страницу, ищу верстальщика