Введение и подготовка 0:00 Приветствие и начало верстки сайта с использованием Bootstrap. Создание шапки сайта без предварительного макета. Скачивание архива с необходимыми файлами.
Работа с архивом 1:00 Извлечение файлов из архива и создание нового каталога. Подключение Bootstrap и других необходимых файлов.
Создание структуры сайта 1:58 Открытие каталога в Visual Studio Code. Создание индекса HTML и подключение CSS и JavaScript файлов.
Работа с иконками и favicon 2:57 Подключение иконок и настройка favicon. Проверка работы иконки на сайте.
Подключение стилей и скриптов 3:56 Подключение собственного CSS-файла style.css. Указание заголовка и подключение JavaScript файла Bootstrap.
Создание шапки сайта 4:54 Создание контейнера с классом «container» и настройка отступов. Использование сетки Bootstrap для создания столбцов.
Работа с текстом 6:51 Применение классов «text-center» и «text-white» для центрирования и белого цвета текста.
Создание кнопок 8:48 Создание кнопки «Play» с треугольником и кнопки «Заказать» с классами «btn» и «btn-lg».
Настройка плавной прокрутки 10:42 Настройка плавной прокрутки с помощью JavaScript. Создание элемента «footer» с идентификатором для плавного перехода.
Настройка CSS-стилей 12:40 Создание переменных для цветов сайта. Настройка отступов для header и footer. Установка градиентного фона для header и footer.
Настройка градиента 14:38 Создание градиента с двумя цветами. Настройка направления градиента слева направо. Изменение цветов градиента на значения из переменных.
Создание градиентного фона 15:36 Указываем переменную для градиента от бирюзового к фиолетовому. Используем color 1 как основной цвет. Применяем специальные строки для кроссбраузерности.
Добавление фонового изображения 16:33 Добавляем фоновое изображение, указывая путь к нему. Регулируем масштаб паттерна с помощью background-size: contain.
Создание кнопки «Play» 17:29 Настраиваем кнопку: background-color, ширина, border-radius, display, justify-content. Добавляем отступы и анимацию при наведении.
Создание треугольника 19:25 Создаём треугольник с помощью border-style и border-width. Используем переменные Bootstrap для цвета. Применяем margin-right для выравнивания треугольника.
Настройка кнопки «Play» 22:24 Устанавливаем максимальную ширину кнопки и выравниваем её по центру. Меняем цвет фона при наведении.
Создание модального окна 23:22 Копируем код модального окна и удаляем ненужные элементы. Связываем кнопку с модальным окном, используя атрибуты.
Вставка видео 25:21 Вставляем видео с YouTube, используя сервис для получения адаптивного кода. Переносим стили видео в модальное окно.
Проверка адаптивности 27:18 Проверяем адаптивность шапки сайта на разных устройствах. Убеждаемся, что 12 столбцов сохраняются при изменении размера экрана.
Заключение 29:16 Подводим итоги, рекомендуем изучить документацию и потренироваться с классами. Призываем оценить видео, оставить комментарии и поделиться с друзьями.
