Требуется выполнить верстку главной страницы из Figma с адаптивным дизайном для разрешений 1920, 1440 и 360. Необходимо минимальное использование JS, знание SVG спрайтов, а также создание отдельного CSS для первого экрана для десктопа и мобильного. Соблюдение стандартов W3C, без использования фреймворков.
Сверстать две страницы для проекта
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.
Нужно сверстать 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...
Заявки фрилансеров
Похожие заказы
- $23HTML-верстка1 исполнительЗакрыт3 года назад
Ищется специалист для верстки лендинга и его интеграции на платформе MODX. Предоставлено техническое задание. Опыт работы с MODX приветствуется.
HTML-верстка1 исполнительЗавершен3 года назадТребуется разработка сайта на HTML на основе готового макета. Необходима полная HTML-верстка с предоставлением исходного кода и всех связанных файлов. Проект ориентирован на качественную реализацию дизайна из шаблона.
HTML-верстка47 заявокЗакрыт3 года назадТребуется сверстать 4 страницы по предоставленному макету. Необходимо указать цену и сроки выполнения. Сроки могут быть увеличены, так как приоритет отдается цене.
HTML-верстка1 исполнительЗавершен3 года назадТребуется скопировать сайт иностранного производителя дронов и создать для него адаптивную версию. Необходимо выполнить HTML-верстку без натяжки на движок. Важным аспектом является наличие множества видео-вставок на сайте.
HTML-верстка1 исполнительЗавершен3 года назадТребуется выполнить HTML-верстку сайта для магазина цветов, состоящего из 6 страниц. Задача включает адаптивную верстку с корректным отображением во всех браузерах, без использования Bootstrap и других фреймворков. Техническое задание будет предоставлено после обсуждения деталей. Ожидаются адекватные сроки выполнения и цена.
HTML-верстка1 исполнительЗавершен3 года назадТребуется разработать кликабельный фон-баннер для сайта на WordPress. Важно учитывать размер изображения для оптимизации скорости загрузки сайта. Пример баннера во вложении.
HTML-верстка10 заявокЗакрыт3 года назадТребуется завершить работу над макетом, сверстанным на гридах, добавив пять адаптивов с медиа запросами. Сохранить стиль верстки и исправить ошибки, которые будут указаны в процессе. Работа срочная, срок выполнения — сутки. Код не должен быть идеальным, главное — завершить проект и сохранить простоту верстки.
HTML-верстка16 заявокЗакрыт3 года назад- $3
Требуется сверстать код для раскрывающегося блока с скрытым содержанием. Необходим только фрагмент кода, который будет работать аналогично примеру на сайте. Дедлайн - сегодня.
HTML-верстка1 исполнительЗавершен3 года назад