Houter

Лэндинг о недвижимости.

Установка

1. npm i - Установка пакетов
2. gulp - Запуск сборки и localhost:3000

О процессе

• Фон между секциями
  • проблема он был сделан градиентом по всей длине макета. background не может быть больше родителя, а ставить для фона - не семантично.
  • решение собрал градиенты в один .svg и задать фон всему body. На мобильном пришлось убрать совсем. Можно было задать внутренний отступы для секций, где этот фон выше их начала, добавить отрицательные внешние отступы и позиционировать фон, но я бы обсудил это с дизайнером макета - разговор бы занял 5 минут, но возможно это помогло бы нам обоим. Мне точно - экономия времени ~пол-часа и более гармоничный код в стилях.
• Youtube видео с кастомной кнопкой
  • проблема "ленивая загрузка" с подменным блоком не работает на мобильном (даже если у iframe &mute=1). Стандартный iframe на мобильном не соответствует макету.
  • решение Пришлось применить сторонний плагин.
• Фон секции с подпиской
  • проблема Не понял, почему в Figma секция "Subscribe" была сделана не единым изображением. Это увеличивает количество запросов к серверу без особого смысла.
  • решение объединил группу в макете и экспортировал как одну картинку. На проекте задал бы вопрос дизайнеру - скорее всего он не имел ввиду, что это нужно верстать отдельными элементами, просто не объединил слои.
• Сложные градиенты
  • проблема хочется делать их в стилях, но не вышло экспортировать.
  • решение достал .svg файлом