Верстать HTML формы по дизайну в Figma (постоянно удаленно) HTML/CSS в

Привет!

Вводные:

Есть сервис popmechanic.io , с помощью которого клиенты сервиса могут установить на свой сайт быстро всплывающие формы. 

Нам нужен человек на постоянную удаленную работу для верстки таких форм для сайтов.

Нужен человек, который знает HTML/CSS и сможет по нашим требованиям верстать и добавлять новые сверстанные формы в каталог на постоянной основе с оплатой за каждую такую форму

Дизайн предоставляем мы (PSD или Figma, чаще Figma)

Правила и требования к верстке форм

Задача 1. Тестовая, оплачивается при корректном выполнении.

1. Сверстать такой шаблон на 2 шага по нашей инструкции с нужными тегами:

мобайл:

Макет в Figma: https://www.figma.com/file/GgAiiEWzjiiEGPNenm8PjFuZ/%D0%A4%D0%BE%D1%80%D0%BC%D0%BE%D1%87%D0%BA%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D1%8B%D0%B5?node-id=70%3A22

2. Внести редактируемые параметры в верстке по нашей инструкции

О настройке редактируемых параметров читайте в Правилах добавления шаблонов

Необходимые параметры для шаблона:

1) Цвета:

- фона формы

- подложки

- цвет кнопки, цвет обводки кнопки, цвет кнопки ховер мобайл

- цвет кнопки десктоп

- цвет обводки кнопки десктоп

- цвет текста кнопки мобайл

- цвет стрелки в кнопке десктоп

- цвет текста заголовка

- цвет текста подзаголовка

- цвет текста предзаголовка

- цвет крестика закрытия (отдельно десктоп и мобайл)

- цвет крестика ховер 

- цвет линии поля ввода

- цвет обводки формы

- цвет чек-бокса политики конфиденциальности

2) Тексты:

- заголовка 1 экрана

- подзаголовка 1 экрана

- предзаголовка 1 экрана

- текст заголовка экрана благодарности 

- текст подзаголовка экрана благодарности 

- текст кнопки мобайл

3) Внешний вид:

- ширина формы (десктоп и мобайл)

- высота формы (десктоп и мобайл)

- внутренние отступы формы  (десктоп и мобайл)

- ширина кнопок (десктоп и мобайл)

- высота кнопок (десктоп и мобайл)

4) Шрифты:

- шрифт формы

- размер заголовка  (десктоп и мобайл)

- размер подзаголовка  (десктоп и мобайл)
- размер предзаголовка (десктоп и мобайл)

- размер текста кнопки  (мобайл)

- размер текста политики конфиденциальности

- свой шрифт? 

- поле для ввода своего шрифта формы 

- жирность шрифта заголовка

5) Наличие элементов в форме

Показывать картинку на 1 экране?

Показывать экран комментариев?

Показывать кнопку 2 первого экрана?

Показывать кнопку на экране благодарности?

6) Политика конфиденциальности

- текст политики конфиденциальности до ссылки

- текст ссылки в политике

- url политики 

- показывать блок с политикой конфиденциальности?

7) Поля ввода

- основное поле ввода (емейл или номер телефона, 1 из вариантов)

- собирать имя?

Эти параметры вносятся сразу в нашем личном кабинете, куда дам доступ исполнителю.

Исполнителю также предоставлю примеры готовых форм, по аналогии с которыми нужно работать

При качественном выполнении проекта - исполнитель будет получать такую работу постоянно.

ЕСЛИ ПРИНИМАЕТЕ ЗАДАЧУ – ЧИТАЙТЕ ВНИМАТЕЛЬНО УСЛОВИЯ:

1. нужна не просто верстка, а верстка с нашими тегами и по нашим правилам

2. финальный результат принимается ТОЛЬКО в виде уже готового шаблона, доступного для редактирования клиентами, в шаблоне должно редактироваться все, что может быть нужно

3. при выставлении суммы оценивайте конкретную тестовую задачу

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

НАПИШИТЕ, ЕСЛИ ХОТИТЕ ПОЛУЧИТЬ ЗАДАЧУ:

1) срок выполнения тестового задания

2) во сколько вы оцениваете такую работу, учитывая добавление всех параметров, указанных выше 

3) был ли у вас подобный опыт верстки

4) сколько подобных форм вы можете верстать в течении недели?