Курсы 3-D моделирования

Описание

Сверстать десктоп-версию сайта, сделать адаптивную верстку, сделать наименование классов по методологии БЭМ, использовать 4-ю версию Bootstrap

Решение

Верстка сайта основана на HTML коде, были применены стили CSS. В основу HTML кода лежит заголовок, секции под каждый блок и футер. В основу каждого блока вложен контейнер ширину, которого он берет из файла Bootstrap. В заголовок вложен логотип и навигация. Навигация состоит из вложенного списка. Далее я определила 4 отдельных блока-секции. В каждой секции вложен контейнер. Расположение элементов я поделила на правую и левую часть. Эти 2 класса объединила в общий класс, использовав свойство flex для расположения правой и левой части горизонтально в на одной строке. Во втором блоке 2 элемента объединены в общий класс, остальная часть сделана с помощью класса row и Bootstrap. В 3 –й блок входит заголовок и карточки с описанием. Для карточек применен класс row и дополнительный класс. Последний блок также состоит из заголовка и 4 карточек с описанием и кнопкой. В футере помещены 4 иконки социальных сетей, которые расположены в центре. После футера отдельный класс для текста “Skillbox@2023”. Для того, чтобы адаптировать верстку под различные устройства, использовалось 3 media запроса: с шириной 992px, 768px b 567px.

Результат

Сайт адаптирован под различные устройства, элементы не выходят за пределы контейнера, соблюден кодстайл.

Презентация проекта