arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана вёрстка секции «Преимущества»: секция с классами, контейнер с двумя блоками по 50% (текст слева, изображение справа), Flex с вертикальным направлением для текстового блока, блок-лист с 4 пунктами с иконками рядом, кнопка с выравниванием по левому краю. Двухколоночный блок через Flex 50/50 — основа большинства секций «о нас» и «преимущества». Левый блок — вертикальный Flex с заголовком, списком и кнопкой. Правый — Image с фиксированной высотой. Иконки в списке добавляются через виджет Image с фиксированным размером рядом с текстом. Урок для начинающих, кто верстает первые блоки лендинга. Понимание Flex в Taptop нужно как база — двухколоночная раскладка полностью строится на Flex.

Как создать блок о преимуществах

Нужен блок преимуществ — текст слева, картинка справа. Понятный макет, но в вёрстке вопросы: как поделить пространство 50/50? Как добавить иконки рядом с каждым пунктом списка?
Двухколоночный блок через flex 50/50: левый блок — вертикальный flex с заголовком, списком и кнопкой, правый — Image с фиксированной высотой. Иконки добавляются в каждый элемент блок-листа через обёртку div + Image рядом с текстом. Для новичков, которые верстают лендинг. После просмотра создаёшь блок преимуществ с иконками по стандартному паттерну.
Тайминги видео
00:00 — Контейнер с двумя блоками 50/50 01:30 — Заголовок и блок-лист с иконками 03:00 — Кнопка и финальная расстановка

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока