Создание проекта и подготовка к верстке 0:00 Создание проекта с использованием библиотеки бутстрап 4 и компилятора коала. Использование готовых сниппетов для создания стартового шаблона.
Работа с сервисом авакот 7:44 Загрузка макета из сервиса авакот и его открытие в интерфейсе, похожем на интерфейс фотошопа. Копирование стилей и размеров объектов, а также работа с графикой и текстом.
Верстка сайта 10:02 Создание файла с цветом и его импорт в основной файл. Разметка структуры сайта и использование переменных для цветов.
Введение 11:34 В видео рассказывается о работе с файлами CSS и использовании директивы импорта для вставки файлов. Обсуждаются основные цвета и шрифты, используемые в проекте.
Создание шапки сайта 15:39 Внутри контейнера сайта будет содержаться шапка, которая по ширине равна 1170 пикселей. Внутри шапки будет верхняя навигация, левый сайт-бар и меню. Разделение шапки на две части с помощью классов "col-md" и "col-md-2".
Оформление шапки 21:05 Добавление отступов и оформление меню с помощью CSS. Использование функции "амперсант" для замены класса "top-nav" на "top-nav menu". Применение стилей для элементов "li" и "a" для создания меню. Использование "display: flex" для выравнивания элементов в одну линию. Настройка отступов и маржи для элементов "li".
Автоматическое выравнивание колонок 23:27 В документации Bootstrap можно найти определение, как сделать так, чтобы колонки автоматически подставлялись под нужную ширину. Для этого нужно изменить значение "col-md-auto" на "col-md-". Это приведет к тому, что первая колонка займет столько места, сколько занимает логотип, а вторая - столько, сколько занимает меню.
Вертикальное выравнивание элементов 25:03 В документации Bootstrap также можно найти классы для выравнивания элементов по вертикали. Для выравнивания элементов по центру используется класс "justify-content-center". Это позволяет выровнять логотип и меню по центру.
Оформление ссылок в меню 25:56 В меню ссылки оформлены без декораций и подчеркивания. Для изменения внешнего вида ссылок используется свойство "text-transform: uppercase". Также можно изменить цвет ссылок и их жирность.
Создание эффекта наведения на ссылки 28:09 Для создания эффекта наведения на ссылки используется свойство "hover". Это позволяет изменить цвет ссылок при наведении на них. Для плавного изменения свойств используется свойство "transition: all 0.2s".
Отступ сверху меню 30:10 Для создания отступа сверху меню используется свойство "margin-top". Это позволяет создать отступ в 40 пикселей сверху меню.
