Техническое задание: Верстка адаптивных страниц

Основная задача

Требуется создать две адаптивные веб-страницы на основе дизайн-макета, подготовленного в Figma. Страницы должны корректно отображаться на различных устройствах и размерах экрана.

Требования к проекту

  • Количество страниц: 2 (Главная и страница "Работы" / портфолио).
  • Источник дизайна: Макет в Figma (ссылка будет предоставлена исполнителю).
  • Адаптивность: Верстка должна быть полностью адаптивной (responsive).
  • Технологический стек (приоритет): React.
  • Альтернативный вариант: Возможна реализация на чистом JavaScript (Vanilla JS).

Ожидаемый результат

Чистый, семантический, валидный HTML/CSS/JS код, полностью соответствующий предоставленному макету. Все интерактивные элементы должны быть рабочими, а верстка - кроссбраузерной.

код

Ассиметричные CSS-переходы на кнопке с hover-эффектом

Требуется реализовать CSS-переход для кнопки, где при наведении и снятии наведения применяются одинаковые свойства, но с разными параметрами transition (длительность, задержка). Псевдоэлементы :after / :before используются как основа для эффекта.