Верстка figma шаблона с использованием bootstrap 5

Figma шаблон:
https://www.figma.com/community/file/993910904620677970/travel-website-landing-page?searchSessionId=lt11zgxl-jairvf1kutb

Сверстанный файл:
https://disk.yandex.ru/d/mEb7JEhbFyEUnQ

00:00:00 Выбираем шаблон для верстки
00:01:07 Создаем проект
00:01:58 Общий подход к верстке
00:02:16 Навигация. Создаем bootstrap навигацию
00:02:40 Figma. Использование Alt и двойного клика в figma
00:03:45 Figma. Замена шрифта в figma
00:04:45 Навигация. Копируем текст навигации
00:08:30 Навигация. Копируем логотип
00:10:30 Навигация. Создаем файл main.css и делаем отступы
00:14:38 Figma. Копируем css-стиль с элемента в figma
00:16:20 Секция 1. Загоняем текст и расположение блоков
00:19:38 Секция 1. Оборачиваем в контейнер
00:20:14 Секция 1. Устанавливаем имена классов для блоков
00:20:55 Секция 1. Копируем css-стили
00:21:28 Секция 1. Добавляем шрифты Poppins и Volkhov
00:23:40 Секция 1. Настраиваем глобальный шрифт для body
00:24:27 Секция 1. Стилизуем кнопочки
00:27:48 Подключаем bootstrap-icons
00:29:30 Секция 1. Ставим отступы между элементами
00:31:14 Секция 1. Подключаем фоновые картинки
00:32:58 Секция 1. Подключаем картинку девушки
00:36:49 Секция 2. Загоняем текст, картинки и расположение блоков
00:43:07 Секция 1. Делаем подчеркивание слова
00:44:54 Секция 2. Копируем стили
00:48:35 Секция 2. Верстаем плашку
00:50:45 Секция 2. Эффект наведения на плашку
00:56:05 Секция 2. Красный квадрат у активной плашки
01:00:24 Секция 2. Заливаем весь слайд одним цветом
01:03:05 Секция 3. Загоняем текст и расположение блоков
01:07:26 Figma. Скачиваем оригиналы картинок с помощью плагина
01:08:20 Секция 3. Подключаем картинки
01:09:22 Секция 3. Копируем стили
01:12:20 Секция 3. Верстаем плашки
01:13:20 Секция 3. Делаем выплывающий блок с информацией
01:18:20 Секция 3. Доверстываем блок с информацией
01:21:20 Секция 3. Добавляем отступы

Видео Верстка figma шаблона с использованием bootstrap 5 канала Михаил Каташевцев