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

Привет!

Вводные:

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

Нам нужно помощь с каталогом таких форм для сайтов.

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

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

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

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

Сверстать и добавить в каталог форм такой шаблон:

Ссылка:

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=86%3A1

Протестировать его отображение на тестовом сайте и внести такие редактируемые параметры:

1) Цвета:

фона формы (если выключено изображение), цвет кнопки, цвет кнопки ховер, цвет текст кнопки и галочки, цвет текста заголовка, цвет текста полей ввода, цвет фона полей ввода, обводки полей ввода и чек-бокса, цвет фона крестика закрытия, цвет самого крестика, цвет плашки (если выключено изображение)

2) Тексты:

заголовка, текст заголовка экрана благодарности, текст кнопки 1, 2 экрана, текст полей ввода, текст политики конфиденциальности, текст экрана благодарности

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

ширина формы, высота формы, внутренние отступы формы, внутренние отступы формы(моб), высота плашки формы, показывать фоновое изображение формы?, показывать фоновое изображение плашки?, уровень затемнения фоновой картинки формы, уровень затемнения фоновой картинки плашки, скругление углов формы

4) Шрифты:

шрифт формы, размер заголовка, размер заголовка (моб), размер текста полей ввода, текста кнопок, текста политики конфиденциальности
5) Наличие элементов в форме

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

показывать поле емейл?

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

галочка политики конфиденциальности предзаполнена?

6) Картинки

url верхней картинки

ширина верхней картинки

ширина верхней картинки (моб)

расположение по вертикали и моб

расположение по горизонтали и моб отдельно

url фоновой картинки формы

url фоновой картинки плашки

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

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

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

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

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

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

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

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