Верстка footer из четырех колонок с картой проезда

У footer подвал сайта див с классом my-footer.

Весь foter положим в класс main-footer, он представляет из себя контейнер container с классом row.

Весь подвал будет разбит на четыре колонки bootstrap сетки.

Будет два класса для отображения на больших мониторах col-lg-2 и для маленьких col-sm-6.

Внутри каждого дива с данным классом будет колонка column-footer.

Можно написать слово и посмотреть как отобразится в браузере.

Начнем размещать содержание в каждой колонке footer.

1. Размещаем логотип пишем тег img с классом logo-footer. Вторым будет описание тег p. Третьим внизу будут социальные сети с иконками.
2. Оформим меню menu-footer с иконками font awesome. У первого li класс будет active.
3. Третья колонка список тег p с классом addr-footer и сбоку иконка. Будет адрес , время работы и телефон. Шрифт Телефона сделаем крупнее, поэтому поместив в тег span с классом tel-footer.
4. Колонка с картой map-footer.

Код index.html

Настройка карты для сайта

• Перейдем в конструктор ya карты на сайт и нажмем создать карту.
• Введем адрес, на карте отразиться данное местоположение, приблизим.
• Нажимаем сохранить и продолжить.
• Появится окошко где выберем нужные параметры размера карты и нажмем получить код карты.
• Код копируем в четвертую колонку в див с классом map-footer.

Перейдем к стилизации каркаса в main.sass.

Зададим стиль для каждой колонки column-footer отступ margin: 15px 0.

Этот отступ нужен когда колонки будут складываться между ними будет 15+15 отступ 30 пикселей, стандартный отступ.

1. Зададим всем тегам p position: relative и шрифт. Логотип logo-footer ширина width: 120px, а высота height: auto, потому что логотип svg формата. Плюс тег p и задаем свойства padding: 0, отступ от иконок социальных сетей margin-bottom: 20px, отступ сверху margin-top: 15px.  Перейдем к оформлению социальных сетей cos-footer. Отступ сверху margin-top: 30px. Оформим тег li поставим иконки в ряд display: inline-block, отступы между элементами margin: 8px. Стилизуем тег a, зададим синий цвет. При наведение иконки делаем ярче осветлим функцией color: rgba (blue, .5).
2. Проработаем menu-footer, убираем отступы и добавляем list-style-type: none пропадут точки у перечисления. Сделаем активный пункт меню li.active цвет синий. Иконки добавим через before, тоже укажем синий цвет. Настроим тег a, padding: 5px 0. Подчеркнем все ссылки text-decoration: underline. Отодвинем ссылки от края на padding-left: 25px, чтобы добавить иконки. position: relative, потому что иконки будут иметь абсолютное позиционирование, из-за этого у родительского элемента relative. Добавим &:hover, &:focus с цветом синим, теперь если наводим мышкой на элементы списка они подсвечиваются. Иконка тоже меняет цвет, добавляем элемент before и назначаем синий цвет. Оформляем саму иконку position: absolute, задаем с иконками шрифт font awesome и в content пропишем код иконки. Как смотреть код иконки можно найти тут. Сдвигаем иконку влево в свободное место left: 0.
3. Стилизуем класс addr-footer, задаем position: relative. Оставим место для иконки padding-left: 20px, уберем кроме нижнего margin: 0 0 20px. У телефона tel-footer делаем побольше шрифт и display: block, чтобы можно было сдвинуть вниз на 20 пикселей padding-top: 20px.
4. Настроим отображение карты map-footer. У кода карты с сайта ширину делаем width=100%, ширина будет максимальной, а высота height=250px. Стили правятся в index.html. В main.sass у карты сделаем max-height: 200px, чтобы на мобильных устройствах она не выходила за границы. Сделаем карте непрозрачность opacity: .7 и при наведении &:hover уберем opacity: 1

Код в main.sass.

Адаптируем для мобильных устройств.

1100 экран.

Смотрим что есть.

Делаем первые три колонки в ряд, каждой добавим col-md-4, а карту сделаем на всю ширину добавим col-md-12.

Получится в браузере.

800 экран.

Дальше уменьшаем идет col-sm.

Меняем col-sm на col-xs у всех колонок, а col-md на col-sm.

320 экран.

Идет col-xs.

Меняем все на col-xs-12, во всю ширину.