Блок с ответами на вопросы (faq) правильная реализация на webflow. Бесплатный курс. Урок №16

#webflow #вебфлоу Покажу как сделать блок ответов на вопросы, вариант на всю ширину страницы и в 2 колонки, а так же как добавить к блоку альтернативный контент. При этом верстка будет правильной и блок будет закрываться при клике за пределами открытого вопроса. Пропишем плавную анимацию как открытия ответа на вопрос, так и плавного его закрытия. Покажу как буквально самому можно сверстать произвольную “иллюстрацию“ для блока с помощью доступных в webflow инструментов. Так же, попутно покажу как разнообразить восприятие текста, за счет внедрения прямо в него эмодзи. И в качестве бонуса покажу как сверстать прогресс бар (линию которая заполняется) с отображением процентного состояния. ••••••••••••••••••••••••••••••• — Материалы с данного видео — Полезные штуки для webflow — Индивидуальное обучение ••••••••••••••••••••••••••••••• БЕСПЛАТНЫЕ курсы по webflow: 👉 • Базовый (для новичка) 👉 • Портфолио для фрилансера (уровень средний) 👉 • Портфолио для студии (уровень сложный) 👉 • Делаем сложный сайт (уровень профи) ••••••••••••••••••••••••••••••• Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас — тогда я способен вам помочь! Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас. ••••••••••••••••••••••••••••••• Моя почта — artstrangers@ Телеграм @artstranger ••••••••••••••••••••••••••••••• 👉 • Портфолио — 👉 • Инстаграм — 👉 • Бесплатные плюшки — 👉 • Материалы для уроков — 👉 • Индивидуальное обучение — ••••••••••••••••••••••••••••••• Таймкоды: 00:00 Старт 01:42 Делаем основу для блока ответов на вопросы (вариант на всю ширину страницы) 13:26 Как помешать контент внутрь 18:25 Прописываем анимацию открывания 24:07 Делаем множество блоков на основе первого и разные анимации открытия 39:20 Меняем структуру блока (делаем в 2 столбца) с картинкой и заголовком слева 43:22 Делаем “иллюстрацию“ средствами вебфлоу 49:40 Вопросы в две колонки, когда справа альтернативный контент или блок 53:09 Как добавлять эмодзи в текст 53:52 Верстаем и дизайним прогресс бар (бегущую строку) 58:05 Другая вариация бегущей строки с правильной анимацией 01:04:00 Выводы