Подвал сайта или Футер
Верстка 7 Часть 15 Футер-Прелодер-Кнопка Наверх
GO в main.sass
Сразу же стилизуем:
Далее смотрим разбивку на колонки:
Карту мы потом сгенерируем в Яндекс-Картах.
GO в index.html
Сделаем разметку сетки для нашего футера:
Видим текст в колонках:
Видим все как в наших дефолных установках стиля:
Цвет белый
Размер шрифта - 14
И еще чуть по стилизуем ->
Начнем с 1-й колонки
Иконки - СОЦ-сетей мы уже верстали, поэтому вставим их
Видим результат:
Далее ищем класс social
в index.html
Видим что получилось:
GO в main.sass
Уже симпатичнее:
Продолжим:
Смотрим результат:
Верстаем КОЛОНКУ МЕНЮ
GO в index.html
Видим результат (Пункты правда не оранжевые как в оригинале) - пока забиваем и идем дальше:
Продолжим оформление:
Видим оформленное меню:
Верстаем КОЛОНКУ АДРЕСА:
Смотрим результат:
И типа - лучше начать стилизацию с нового класса, который мы
ввели дополнительно:
GO в самый низ mian.sass
И теперь стили пишем с учетом исправленного ГЕМОРОЯ (Телефон не увеличивался и не прибавлялся)
И наконец то Адресный блок отформатирован:
Далее верстаем КОЛОНКУ КАРТЫ-Яндекс (MAP)
Идем по кнопке =>
Введем адрес:
Копируем код карты:
Далее ИДЕМ в index.html
Создадим div для карты
У нас появилась карта:
И теперь немного стилизуем карту:
АДАПТИВИМ:
Но Адаптивим в INDEX.HTML
И для 3-е других колонок, а 4-ю (КАРТУ) растянем:
И пожалуй все таки чуть уменьшим телефон в media.sass
Смотрим - получилось Хорошо!
Перескочим на минимальный экран))
Отлично!
И еще по адаптивим:
И карта у нас ЦЕНТРИРУЕТСЯ АВТОМАТИЧЕСКИ - при уменьшении экранного разрешения
Далее смотрим на отступы:
Стало по компактнее:
И еще раз все РОВНЯЮ:
Имеем такое выравнивание:
Типа Закончили ФУТЕР!
Но мне не нравиться. Я бы еще сам поработал бы над "однобокой" адаптацией.
КНОПКА НАВЕРХ
Go в index.html
И иконка "На верх" - уже появилась!
Далее СТИЛИЗУЕМ кнопку "НА ВЕРХ"
Смотрим - она появилась с права:
Сниппет:
12+brs10+c#222+fz26+h50+w50+tac+lh50+curp+trans+opa.5+c#fff+bgc$accent_orange+opa1
Имеем почти оформленную кнопку "На верх" - с курсором:
Теперь сделаем плавное появление нашей кнопки при прокрутке:
Теперь поработаем над скриптом
Но пока кнопка не кликабельная.
Исправим это:
РАБОТАЕТ! Поднимается по нажатию!
Идем в самое начало нашей верстки index.html
Далее GO в main.sass
Работает! Но пока постоянно! Вечно! Но нужно останавливать
и показывать сайт:
Поэтому GO в common.js в самый-самый низ,
будем писать функцию - для нашего окна window:
Анимация работает! - И Сайт Запускается после задержки!
Но кружек с анимацией - низковато висит - Исправим,
Теперь
КРУГ АНИМАЦИИ ПРЕЛОДЕРА - ПО ЦЕНТРУ!
