У footer подвал сайта див с классом my-footer.
Весь foter положим в класс main-footer, он представляет из себя контейнер container с классом row.
Весь подвал будет разбит на четыре колонки bootstrap сетки.
Будет два класса для отображения на больших мониторах col-lg-2 и для маленьких col-sm-6.
Внутри каждого дива с данным классом будет колонка column-footer.
Можно написать слово и посмотреть как отобразится в браузере.
Содержание статьи
- Размещаем логотип пишем тег img с классом logo-footer. Вторым будет описание тег p. Третьим внизу будут социальные сети с иконками.
- Оформим меню menu-footer с иконками font awesome. У первого li класс будет active.
- Третья колонка список тег p с классом addr-footer и сбоку иконка. Будет адрес , время работы и телефон. Шрифт Телефона сделаем крупнее, поэтому поместив в тег span с классом tel-footer.
- Колонка с картой map-footer.
Код index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="my-footer"> <div class="main-footer"> <div class="container"> <div class="row"> <div class="col-lg-2 col-sm-4 col-xs-12"><div class="column-footer"> <img src="img/i.jpg" alt="лого" class="logo-footer"> <p>Далеко-далеко за словесными горами в стране, гласных и согласных.</p> <div class="soc-footer"> <nav class="social"> <ul> <li><a href="#"><i class="fa fa-vk"></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul> </nav> </div> </div></div> <div class="col-lg-3 col-sm-4 col-xs-12"><div class="column-footer"> <nav class="menu-footer"> <ul> <li class="active"><a href="#">Главная</a></li> <li><a href="#">Навигация по сайту</a></li> <li><a href="#">Написать автору</a></li> </ul> </nav> </div></div> <div class="col-lg-3 col-sm-4 col-md-4 col-xs-12"><div class="column-footer"> <p class="addr-footer"><i class="fa fa-address-card-o" aria-hidden="true"></i>Адрес Далеко-далеко <br>за словесными горами в стране.</p> <p class="addr-footer"><i class="fa fa-clock-o" aria-hidden="true"></i>Время работы <br> 10:00-22:00</p> <p class="addr-footer"><span class="tel-footer"><i class="fa fa-phone" aria-hidden="true"></i>+7 (495) 111-11-11</span></p> </div></div> <div class="col-lg-4 col-sm-12 col-xs-12"><div class="column-footer"> <div class="map-footer"><script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A21ac9b9065cd4f25848bb300e3b239e0bb40bc1e50ad5edc6b477459da788e1c&width=100%&height=250&lang=ru_RU&scroll=true"></script></div> </div></div> </div> </div> </div> </div> |
Настройка карты для сайта
- Перейдем в конструктор ya карты на сайт и нажмем создать карту.
- Введем адрес, на карте отразиться данное местоположение, приблизим.
- Нажимаем сохранить и продолжить.
- Появится окошко где выберем нужные параметры размера карты и нажмем получить код карты.
- Код копируем в четвертую колонку в див с классом map-footer.
Перейдем к стилизации каркаса в main.sass.
Зададим стиль для каждой колонки column-footer отступ margin: 15px 0.
Этот отступ нужен когда колонки будут складываться между ними будет 15+15 отступ 30 пикселей, стандартный отступ.
- Зададим всем тегам 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).
- Проработаем 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.
- Стилизуем класс addr-footer, задаем position: relative. Оставим место для иконки padding-left: 20px, уберем кроме нижнего margin: 0 0 20px. У телефона tel-footer делаем побольше шрифт и display: block, чтобы можно было сдвинуть вниз на 20 пикселей padding-top: 20px.
- Настроим отображение карты map-footer. У кода карты с сайта ширину делаем width=100%, ширина будет максимальной, а высота height=250px. Стили правятся в index.html. В main.sass у карты сделаем max-height: 200px, чтобы на мобильных устройствах она не выходила за границы. Сделаем карте непрозрачность opacity: .7 и при наведении &:hover уберем opacity: 1
Код в main.sass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
.column-footer margin: 15px 0 p position: relative font-size: 16px .logo-footer width: 120px height: auto + p padding: 0 margin-bottom: 15px margin-top: 15px .soc-footer margin-top: 30px .social li display: inline-block margin: 8px a transition: color .5s color: blue &:hover color: rgba(blue, .5) .menu-footer ul padding: 0 margin: 0 list-style-type: none li.active a color: blue &::before color: blue a display: inline-block padding: 5px 0 text-decoration: underline padding-left: 25px position: relative &:hover, &:focus color: blue &:before color: blue &::before position: absolute font-family: fontawesome content: '\f00c' left: 0 font-size: 10px top: 12px .addr-footer position: relative padding-left: 30px margin: 0 0 20px .fa position: absolute left: 0 top: 8px .tel-footer font-size: 18px font-weight: bold display: block padding-top: 20px .fa top: 27px .map-footer max-height: 200px opacity: .7 transition: .5s ease &:hover opacity: 1 |
Адаптируем для мобильных устройств.
1100 экран.
Смотрим что есть.
Делаем первые три колонки в ряд, каждой добавим col-md-4, а карту сделаем на всю ширину добавим col-md-12.
Получится в браузере.
800 экран.
Дальше уменьшаем идет col-sm.
Меняем col-sm на col-xs у всех колонок, а col-md на col-sm.
320 экран.
Идет col-xs.
Меняем все на col-xs-12, во всю ширину.