arrow-left
Вернуться к продуктам
Кратко о видео
В уроке разобрана вёрстка блока услуг с карточками: секция с классами, контейнер с заголовком и подзаголовком, блок-лист с 4 элементами, каждая карточка — Link Block с Image на абсолютном позиционировании (изображение на весь фон), текстовые элементы поверх. Стилизация карточек через классы. Блок-лист задаёт количество айтемов через дополнительные стили — добавляешь нужное число. Image на весь Link Block: абсолютное позиционирование с нулевыми отступами и 100% шириной и высотой. У родительского Link Block обязательно overflow: hidden для обрезания изображения по размеру карточки. Урок для начинающих верстальщиков — блок услуг один из базовых блоков большинства лендингов. Понимание абсолютного позиционирования поможет быстрее разобраться с Image-фоном карточки.

Как создать блок услуг

Нужен блок с карточками услуг: четыре в ряд, у каждой фоновое изображение и текст поверх. Какой виджет использовать? Как добавить картинку на весь фон карточки?
Блок услуг строится на блок-листе: количество элементов задаётся в дополнительных стилях, новые позиции добавляются кнопкой плюс. Фоновое изображение — Image с абсолютным позиционированием внутри Link Block с relative. Для новичков. После просмотра создаёшь блок с карточками услуг, где каждая карточка кликабельна и имеет фоновое изображение.
Тайминги видео
00:00 — Секция и контейнер: классы и отступы 01:30 — Заголовок блока услуг 02:30 — Блок-лист: 4 карточки-ссылки 04:30 — Image на абсолютном позиционировании 06:00 — Финальная стилизация и текст

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

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