Дизайн сайта, верстка на тильде и адаптация под смартфон – №1145890

Нужно сверстать 2 страницы по дизайну.



1. Страница категорий

2. Страница товаров



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

Все стили нужно делать в отдельном файле niche.css. Этот файл нужно подключить к проекту.

Все классы должны быть названы с префиксом "niche-" чтобы не было конфликтов с другими элементами на других страницах.

ВАЖНО: код фильтра должен быть один. Нельзя делать отдельно фильтр для десктопа и отдельно для мобайла. В html это должен быть 1 блок.



Страница категорий уже сверстана "на скорую руку", расположена по адресу mypulse.ru/test

Нужно сделать верстку чтобы она соответствовала макету.



---



Дизайн в фигме:

ссылка...



Комментарии по макетам:



- Категории на десктопе

ссылка...

Фильтр постоянно открыт и не сворачивается



- Категории на планшете

ссылка...

Фильтр постоянно открыт и не сворачивается

Первая колонка в таблице зафиксирована, а остальные колонки можно было свайпать влево/вправо.

Количество столбцов в таблице будет добавляться.



- Категории на мобайле (фильтр открыт)

ссылка...

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



- Категории на мобайле (фильтр закрыт)

ссылка...

Фильтр можно открыть кликнув на розовую иконку фильтра фильтра с нижнем правом углу экрана. Кнопка фильтра статичная (position: absolute) и не двигается при скроле страницы.

Первая колонка в таблице зафиксирована, а остальные колонки можно было свайпать влево/вправо.

Количество столбцов в таблице будет добавляться.



- Товары на десктопе

ссылка...

Просто таблица



- Товары на планшете

ссылка...

Первая колонка в таблице зафиксирована, а остальные колонки можно было свайпать влево/вправо.

Количество столбцов в таблице будет добавляться.



- Товары на мобайле

ссылка...

Первая колонка в таблице зафиксирована, а остальные колонки можно было свайпать влево/вправо.

Количество столбцов в таблице будет добавляться.



---



На проекте уже используется эта тема:

demos.creative-tim.com/ma...



Максимум элементов нужно взять из темы, например такие как:

- Таблица demos.creative-tim.com/ma...

- Пагинация demos.creative-tim.com/ma...

- Чекбоксы demos.creative-tim.com/ma...

- Слайдер demos.creative-tim.com/ma...

- Таймлайн demos.creative-tim.com/ma... Свернуть

Верстка главной страницы, 1920, 1440, 360

Минимум js кода, знание SVG спрайтов без использования js. отдельный css для первого экрана для десктопа и мобильного.

W3C, без фреймфорков, навыки работы с SVG Свернуть