Создание блоков и контента 0:01 Создание блоков и контента для сайта с использованием джева скрипта. Обсуждение использования классов для стилизации и семантики.
Реализация табов и контента 4:41 Создание табов и контента с использованием классов и атрибутов. Обсуждение использования батонов для навигации и семантики.
Создание контента с видео и кнопкой 12:10 Создание блоков для контента с видео и кнопкой. Обсуждение использования классов и атрибутов для стилизации и семантики.
Создание макета 14:30 Обсуждается создание макета с использованием разных типов контента и их расположение. Рассматриваются варианты расположения контента и их влияние на верстку.
Работа с текстом и шрифтом 23:50 Обсуждаются нюансы работы с текстом и шрифтом, включая использование разных шрифтов и их применение в разных частях макета. Рассматривается использование разных классов для разных типов контента и их применение в верстке.
Работа с градиентом на тексте 29:19 Обсуждается создание градиента на тексте и его применение в верстке. Рассматриваются свойства, которые используются для создания градиента, и их применение в разных браузерах.
Создание табов 31:05 Создание табов во вкладке "табс". Разделение табов на две части с помощью "грядов дисплей грит" и "эмплейт колумс".
Стилизация табов 35:34 Стилизация табов с помощью "дисплей флекс дирекшн". Установка расстояния между табами и их цвета.
Стилизация контента 40:00 Создание тапс-контент-атома с помощью "дисплей-грид". Застеливание видео внутри контента с помощью "дисплей-грид". Установка размеров и распределение контента.
Создание дизайна 43:06 Создание дизайна с использованием различных элементов, таких как видео, текст и изображения. Настройка параметров для каждого элемента, включая цвет, размер и отступы.
Распределение контента 45:03 Распределение контента по двум колонкам, с использованием различных размеров и отступов. Настройка текста и его размера, а также проверка отступов и размеров.
Реализация анимации 52:33 Реализация анимации при переключении между элементами, используя классы и позиции. Настройка минимальной высоты блока для обеспечения корректного отображения. Добавление логики для переключения между элементами и добавления анимации.
Создание этапов и добавление контента 55:46 Создание этапов с помощью функции "stage" и добавление контента с помощью функции "content". При клике на кнопку, этап убирается, а у всех остальных добавляется. Находим все кнопки с помощью функции "document.querySelectorAll(". Находим контент с помощью функции "document.querySelectorAll(". Отслеживаем события клика на кнопку с помощью функции "addEventListener".
Добавление анимации 1:06:02 Добавляем анимацию с помощью функции "transition". Обновляем страницу и видим, как контент меняется по фейду. Добавляем анимацию для всех кнопок с помощью функции "transition".
Создание структуры для игр 1:08:46 Создание секции "гейм" и контейнера "скшн тайтл гейм". Создание структуры "геймс иннер" с классами "гейм-айтом", "гейм-атом" и "гейм-деск". Создание "гейм-деск" с "гейм-айтом" и "гейм-атом". Создание "гейм-айтом" с "гейм-деск", "гейм-айтом" и "гейм-линком".
Реализация структуры 1:17:32 Создание структуры с "гейм-айтом" и "гейм-атом". Реализация "гейм-айтом" с "гейм-деск", "гейм-айтом" и "гейм-линком". Реализация "гейм-деск" с "гейм-айтом" и "гейм-текстом". Реализация "гейм-айтом" с "гейм-деск", "гейм-айтом" и "гейм-текстом".
Завершение структуры 1:23:22 Завершение структуры с "гейм-деск", "гейм-айтом" и "гейм-текстом". Реализация "гейм-деск" с "гейм-айтом" и "гейм-текстом". Реализация "гейм-айтом" с "гейм-деск", "гейм-айтом" и "гейм-текстом".
Создание гейм-декор текста 1:25:10 Создание текста с помощью маджин-бота и настройка его параметров. Установка шрифта, размера, паддингов и бордера.
Создание гейм-атома 1:30:33 Настройка бордера и паддингов для атома. Добавление картинки и настройка ее параметров.
Создание ссылки 1:33:13 Настройка ссылки с помощью маджин-бота. Установка размера, отступа и шрифта для текста.
Тестирование и завершение 1:35:46 Проверка работы гейм-декор текста и гейм-атома. Создание секции и тестирование ее работы.
