Итак, после новогодних праздников продолжаем наш неторопливый марафон. Все подготовительные операции прошли и теперь можно с головой погрузиться в сам процесс. В исходниках темы был 81 файл в формате psd, в том числе несколько разных вариантов каждой страницы. Все их делать мы, конечно, не будем.

В качестве главной я выбрал вот этот вариант. Смотрится стильно, не слишком громоздко и вполне можно в дальнейшем адаптировать под любой другой товар. Отсюда же возьмём подвал и топ, которые будут повторяться на каждой странице.

фото 2

Так будет выглядеть каталог.

фото 2

Так страница одного товара.

фото 3

Далее понадобится корзина.

фото 4

И страница заказа.

фото 5

В макете есть второй вариант, который состоит из пяти последовательных вкладок. Как показывает практика, с нажатием каждой вкладки шансы, что покупатель доберётся до конца, становятся всё меньше. Гораздо лучше сделать эту страницу в виде одного листа, на котором человек сможет заполнить данные об адресе, контактных данных и способе оплаты. Плюс обычно добавляют возможность быстрого заказа по нажатии на товар – то есть просто оставить свой телефон или электронку плюс имя для обратной связи.

Также добавим страницу обратной связи.

фото 6

И форму регистрации

фото 7

Определимся с константами, которые мы разместим в файле _variables.scss. Это будут:

  • ширина экрана для десктопа;
  • ширина экрана для планшета;
  • ширина экрана для смартфона;
  • фоновый цвет шапки заголовка;
  • два цвета заголовков;
  • фоновый цвет подвала.

Выглядеть файл будет следующим образом.

$desktop-width: 1920px;
$pad-width: 768px;
$mobile-widt: 360px;
$header-fon: #42b4c7;
$first-color: #fea800;
$second-color: #d60d46;
$footer-color: #f4f4f4;

На этом этапе можно определиться и с миксинами, выбрав для этой цели небольшие постоянно повторяющиеся на нескольких страницах элементы. Для нашего макета можно взять выбрать такие элементы:

  • формы ввода е-майл;
  • кнопки;
  • ссылки на главной со стрелкой справа;
  • звёздочки для оценки товара.

Возможно, в ходе работы добавится что-то ещё.

Теперь можно переходить к вёрстке главной страницы. Начнём мы с того, что отцентрируем элементы и сделаем ещё одну важную вещь.