Верстка каталога ИМ по 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) (в худшем случае - добавится немного префиксов)
-----
В целом все просто, просто немного нестандартные условия. Все будет описано в ТЗ.
Если вас это не отпугнуло, пожалуйста, присылайте примеры сверстанных вами каталогов. Не надо слать лендинги, интересуют адаптивные каталоги в портфолио.
К проекту будет подробное ТЗ, + желательно, чтобы была возможность устно проговорить все нюансы, расширив вам экран по скайпу. Это дико экономит время и исключает недопонимания.
Если вы не общаетесь устно - не откликайтесь (!).
К вашему отклику допишите 394m2wE