Адаптивная вёрстка по макету figma

10 000 руб. за проект
04 ноября 2024, 18:39 • 53 отклика • 217 просмотров
1. Общие требования
  • Тип проекта: Верстка веб-страницы по макету Figma https://www.figma.com/design/lrjLHUBCTQZt6DMOSSUJY...
  • Цель: Реализовать адаптивную и кроссбраузерную верстку.
  • Технологии: HTML5, CSS3 (Flexbox, Grid), SCSS или PostCSS для CSS-препроцессинга, JavaScript (ES6+), фреймворки и библиотеки по необходимости
2. Требования к вёрстке
  • Адаптивность: Страница должна корректно отображаться на экранах от 320px до 1920px. Использовать принцип mobile-first.
  • Кроссбраузерность: Поддержка последних версий популярных браузеров (Chrome, Firefox, Safari, Edge).
  • Pixel Perfect: Соответствие макету из Figma.
  • Оптимизация для SEO: Заголовки, альтернативные описания для изображений, семантические HTML-элементы.
3. Функциональные элементы
  1. Меню навигации:
    • Адаптивное бургер-меню на мобильных устройствах.
    • При клике на меню выполняется плавное раскрытие с анимацией.
  2. Слайдеры и карусели:
    • Использование библиотек для каруселей (например, Swiper.js).
    • Адаптация слайдера для мобильных устройств.
  3. Формы:
    • Реализация полей ввода с валидацией (например, email, номер телефона).
  4. Модальные окна:
    • Модальные окна для различных всплывающих окон.
  5. Таблицы и списки:
    • Адаптивная верстка таблиц с возможностью горизонтальной прокрутки на мобильных устройствах.
  7. Фильтрация:
    • Чекбоксы: Реализовать стилизованные чекбоксы, соответствующие макету Figma. Проверка состояния с анимацией при выборе.
    • Селекты: Использовать кастомные стилизованные выпадающие списки (селекты) с анимацией при открытии и выборе опций.
    • Инпуты: Реализовать текстовые поля для фильтрации по значению. Поля должны быть стилизованы в соответствии с макетом и включать состояние ошибки при некорректном вводе.
  8. Спойлеры:
    • Спойлеры: Реализовать спойлеры для показа/скрытия содержимого с анимацией. При раскрытии одного спойлера другие должны сворачиваться, если указано в макете (аккордеон). Плавная анимация раскрытия и закрытия с использованием CSS или JavaScript.
Поделиться