Имея структуру HTML для нижнего колонтитула, у нас есть все, что нам нужно, чтобы начать стилизовать и сделать нижний колонтитул похожим на то, что мы разработали в Photoshop.
Мы создаем новый файл SCSS только для нижнего колонтитула, потому что имеет смысл сохранить модульную структуру, и это то, что мы делаем для всего остального. Мы @импортируем его в основную таблицу стилей внизу.
Мы затемняем нижний колонтитул, используя небольшой фон RGBa. Sass помогает нам немного , потому что вы можете сделать это в Sass , который является супер круто: rgba(black, 0.5); Мы используем тень вставки, чтобы создать эффект полки.
Мы проталкиваем контент от краев с помощью левого и правого отступов. Сразу же нам нужно настроить количество этого отступа в зависимости от текущей точки останова.
Во многом мы стилизуем нижний колонтитул. Он просто немного темнее, чтобы он выглядел на уровень ниже.