Салют, друзья! 🤘
⠀
Открываем седьмой урок бесплатного курса по Taptop.
⠀
На этот раз собираем блок FAQ. Урок получился объёмный, поэтому разбили его на 6 частей.
⠀
Внутри будет две зоны: аккордеон с вопросами и ответами, а ниже карточка UI-kit, которая появляется при скролле.
⠀
Сначала собираем основу раздела: сетку, декоративные линии, боковые колонки с буквами ГКВ и центральную часть под контент.
⠀
Дальше разбираем два подхода к аккордеону: сначала нативный виджет Accordion в Taptop, потом более гибкий вариант через div-структуру и CMS-коллекцию.
⠀
Отдельно настраиваем кастомный скрипт, чтобы аккордеон открывался плавно, стрелки работали аккуратно, а лишние элементы закрывались автоматически.
⠀
Во второй части блока собираем карточку UI-kit: верстаем изображение, текст, кнопку, добавляем маску и небольшой параллакс при скролле.
⠀
В финале адаптируем блок под планшет и мобильную версию, правим z-index, overlay-плашку и добавляем no-break скрипт, чтобы предлоги не висели в конце строки.
⠀
Новый урок уже доступен в боте: @Izum_Study_bot
⠀
Смотрите, пробуйте повторить и пишите в закрытую группу, если что-то непонятно или хочется обсудить ❤️