Верстка каталога ИМ по psd макетам

Здравствуйте.

Требуется сверстать каталога товаров с не совсем стандартными фильтрами, + есть особенности работы.

ТЗ и полноразмерные изображения макетов для точной оценки кандидатам по итогам общения.

PSD макеты - выбранному исполнителю.

----

Общая информация с примерами конкурентов с очень похожим функционалом:

есть psd макеты каталога:

(под 3 разрешения, контент у нас тянется по всей ширине, есть примеры других готовых страниц) 

- корень каталога (отдельная верстка, разделы / подразделы, ничего сложного)

- список товаров + фильтры (выпадающие, с разными улучшениями) 

фильтры по функционалу будут похожи на

https://www.homeme.ru/cat/pryamye-divany/ - см фильтр, раскрывающиеся пункты

https://www.cosmorelax.ru/catalog/stulya/ - см фильтр, раскрывающиеся пункты

- всплывающее окно всех фильтров

https://vladimir.inmyroom.ru/products/gostinaya/my... - см. фильтры, сортировку и кнопку "все фильтры", которая подымает модальное окно справа с полным списком фильтров.

- список товаров в виде сетки и в построчном режиме вывода (в общей верстке, см пример на 

https://hoff.ru/catalog/promo/divany-krovati/?side... - если в desktop режиме выбрать вывод построчный, потом сменить через консоль разработчика на планшетный вариант - верстка перестроятся в сетку. а нас будет аналогично

- всплывающие окна помощника выбора товара

---

Дизайн вводится на сайте по частям.

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

Есть пара отверстанных и интегрированных страниц на сайте, где можно посмотреть как работает адаптив.

Очень внимательно относимся к ресурсам, которые подключаются к проекту (js / css), не хотим получить тонну лишних библиотек на 500Кб лишнего кода.

У нас уже есть кусок сетки бутстрапа (самое важное для колонок) + сетка бутстрапа на flexbox, которая использована для главной.

Планируется, что вы воспользуетесь ими.

Ваша задача: взять имеющийся html шаблон (заготовку) и кроссбраузерно отверстать контент адаптивного каталога интегрировав это в серединку шаблона, между шапкой и футером. 

Ваши стили должны быть в отдельном css файле (возм. в нескольких). Они подключаются после нашего. Используйте свои стили поверх наших, а не делайте комбо сборки (если тут вопросы - могу пояснить в чем проблема).

Если вам нужно изменить файлы стилей, которые уже существуют - нужно будет создать файл custom.css и переопределить нужные вам стили - он просто подключается после нашего. Но на практике, это вообще вряд ли должно произойти.

В папке будет jQuery, соотв. функции пишем использую его (не надо его игнорировать и писать свои функции вида toggle_class (да, у нас такое было, пачка своих функций и игнор jQuery).

Можно делать:

.catalog * { box-sizing: border-box; }

нельзя делать (это ломает модальные окна, о которых вы можете не знать):

* { …. }

figure { …. }

a { …. }

----------------

Поддержка по caniuse >= 95%.

IE11 поддерживаем, допускаются незначительные упрощения, но все должно корректно работать (см. главную страницу на IE11)

iOS >= 9.3.5 (mobile safari >= 9) (в худшем случае - добавится немного префиксов)

-----

В целом все просто, но немного нестандартные условия. Все будет описано в ТЗ.

Если вас это не отпугнуло, пожалуйста, присылайте примеры сверстанных вами каталогов. Не надо слать лендинги, интересуют адаптивные каталоги в портфолио.

К проекту будет подробное ТЗ, + желательно, чтобы была возможность устно проговорить все нюансы, расширив вам экран по скайпу. Это дико экономит время и исключает недопонимания.

Если вы не общаетесь устно - не откликайтесь (!).

К вашему отклику допишите 394m2wE2