Сегодня хотел рассказать о правках на сайте luxstor.ru
Ко мне обратился руководитель компании ABP Company и поставил несколько задач:
— изменить шапку сайта
— сверстать страницу
— стилизовать список.
Расскажу о каждой подробнее.
Верстка страницы «Партнерам»
Страница до:
Страница после:
Также были добавлены модальные окна, которые появляются при нажатии на кнопки «Заказать звонок» и «Написать нам»
Стили заголовков, текста, кнопок, полей форм, модальных окон мне не нужно было писать заново, они уже были созданы на сайте.
Когда я разрабатывал текущий сайт, я сделал все блоки независимыми, чтобы потом при появлении таких задач можно было быстро, как на конструкторе собирать формы и страницы.
Так делают не все, я часто встречаю такие сайты, в которых много одинаковых блоков, кнопок, полей. Код оформления для каждого блока написан повторно. Это увеличивает размер кода и замедляет сайт.
Изменение шапки
С шапкой пришлось повозится, так как кроме версии для компьютера, нужно было менять еще и адаптивный вариант. Сделать это нужно было быстро, чтобы пользователи не видели разваливающейся страницы пока я редактирую код.
Я сделал чтобы все изменения в новой шапке были видны только администратору сайта, а когда все было готово, просто отключил это условие и подменил шапки, никто и не заметил 🙂
Шапка до:
И шапка после:
Стилизация списка
Изначальный вид списка:
На такой список не хочется смотреть второй раз. Нет отступов, отделения сущностей друг от друга. Теряешься когда смотришь на него.
Заказчик хотел выполнить его в стиле списка заказов и в добавок пожелание: «Чтобы было красиво!» 🙂
Не вопрос, сделаем:
Другое дело!
Список стал читабельнее: четкое разделение пунктов, ярко выделен статус, выделена кнопка действия.
Изменение оформления мобильного меню
Мне захотелось изменить мобильное меню, текущий вариант мне не очень нравился. Я делал внешний вид мобильной версии сам, я думаю ничего страшного если мы немного улучшим его вид.
Было:
В верхней панели меня не устраивали маленькие внутренние отступы. Маленький шрифт, текст по центру выглядит как-то неаккуратно. Меню не нужно столько места.
Стало:
Увеличил отступы, шрифт, уменьшил ширину блока с меню.
Спасибо за просмотр поста.
Хорошего вам дня!
Канал о фрилансе
Там я делюсь фишками о фрилансе: деньги, клиенты, автоматизация, фриланс. Раньше это был закрытый материал с платным доступом. Сейчас он открыт. Иногда подписчикам будет открываться платные материалы.
Подписаться