Сверстать админку из figma/pixso в html + tailwind

Цена договорная
22 июля 2024, 20:42 • 0 откликов • 10 просмотров
Техническое задание на верстку приложения из Figma в HTML + Tailwind Общие требования:
  1. Адаптивность: Только десктоп.
  2. Кроссбраузерность: Обеспечить корректное отображение в последних версиях браузеров (Chrome, Firefox, Safari, Edge).
  3. Компонентность: Использование компонентного подхода с использованием Tailwind CSS для создания переиспользуемых стилей.
Структура проекта:
  1. HTML: Структура страниц и компонентов согласно макету в Figma.
  2. Tailwind CSS: Использование утилитарных классов для стилизации элементов.
  3. Статические файлы: Все необходимые изображения, иконки и шрифты должны быть включены в проект.
Макеты и страницы:
  1. Главная страница:

    • Заголовок, подзаголовок, кнопки CTA.
    • Превью продуктов/услуг.
    • Отзывы клиентов.
    • Контактная информация и форма обратной связи.
  2. Страница продукта/услуги:

    • Детальное описание продукта/услуги.
    • Галерея изображений.
    • Спецификации и характеристики.
    • Блок с ценой и кнопкой "Купить/Заказать".
  3. О нас:

    • Информация о компании.
    • Команда.
    • История и достижения.
  4. Блог/Новости:

    • Список статей с кратким превью.
    • Полный текст статьи.
  5. Контакты:

    • Форма обратной связи.
    • Карта с указанием местоположения.
    • Контактная информация (телефон, email, адрес).
Структура кода:
  1. Файловая структура:

    • /index.html
    • /about.html
    • /product.html
    • /blog.html
    • /contact.html
    • /assets/ - директория для статических файлов (изображения, шрифты, иконки)
    • /css/ - директория для дополнительных стилей (если необходимо)
    • /js/ - директория для скриптов (если необходимо)
  2. HTML:

    • Использование семантических тегов (<header>, <footer>, <section>, <article>, <nav>, <main> и т.д.).
    • Подключение Tailwind CSS через CDN или локально.
  3. Tailwind CSS:

    • Использование утилитарных классов для стилизации.
    • Настройка конфигурационного файла Tailwind (tailwind.config.js) для кастомизации темы и добавления собственных стилей, если необходимо.
Поделиться