Skip to main content

GruzService прототип

Опубликовано: Konkin 14.05.2019 - 15:59
GruzService прототип
LESS/PHP/HTML
~1ч
~700р

Вёрстка главной страницы gruzservice.com

Исходные данные:

  • Специфика - Сайт услуги грузчиков;
  • Цель - увеличить конверсию из контекстной рекламы;

План на вёрстку макета

  • 1 Структура (основная разметка);
  • 2 Боковой блок;
  • 3 Карточки товара;
  • 4 Меню.

 

Основная разметка

Страница имеет двухколоночную структуру, в которой первая колонка - это блок с информацией, вторая колонка - это основное содержимое.

Основное содержимое содержит контент в текстовом виде, блоки информации, таблицы.

Боковой блок содержит контактную информацию.

Верстка, данной структуры, будет реализована технологией "Flex Box", где общий родитель будет содержать в себе два потомка боковой блок и основное содержимое.

Пример реализации:

text...

Смотреть пример реализации на CodePen

Где основное содержимое будет резиновым (тянуться за шириной экрана) от 1920 до 1024 пикселей по ширине, а далее обрабатываться мадиа-запросами.

разметка для gruzservice

Так. схематично можно представить структуру блоков. Примерная схема, для представления конечного результата.

Для дисплеев планшетов и телефонов, боковой блок Aside будет скрыт, а основное содержимое будет масштабироваться между брейк-поинтами.

Боковой блок Aside будет задвинут за левую границу экрана отрицательным значением margin, для использования в качестве мобильного меню выезжающего слева. Боковое, мобильное меню разберем в отдельной теме.

В page.tpl.php подготавливаем переменные, в которые будет выводится содержимое и переходим к CSS.

Продолжение: Переопределение стилей views