Верстка простой страницы и мелких улучшений существующей

Владимир17 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
21.11.2015

Есть сайт, уже сверстан и работает, сделан на bootstrap3, css правила написаны на scss, сборка осуществляется с использованием grunt. Верстка адаптивная, поддерживаются все размеры экрана начиная с iphone4.

Что нужно сделать:

1) Сделать верстку нового дизайна главной страницы - http://stunnix.com

 Макет лежит в main.psd в архиве по ссылке

 Превью макета http://stunnix.com/priv/tmp/design-preview/main.jpg

 Верстка очень похожа на верстку существующей страницы http://stunnix.com/prod/vbso/ - надо только сверстать 2 списка продуктов

 

 1.1) кнопка more info чтобы вела на страницу продукта (см ссылки на текущей версии этой страницы)

 1.2) На мобильных чтобы эти списки были в один столбец

 1.3) В спрайты картинки НЕ засовывать

 

 2) Сделать верстку блока с ценами для случая, когда идет распродажа. имя psd - "sale-badges.psd"

 Превью макета http://stunnix.com/priv/tmp/design-preview/sale-badges.jpg

 (большие бирки вдоль правого края картинки - просто для справки, их игнорируйте)

 

 Блок с ценами например

 на http://stunnix.com/prod/vbso/ (там 3 колонки)

 на http://stunnix.com/prod/po/ (там 4 колонки)

 В psd даны 2 варианта для случая 3х колоночного и 4х колоночного блока с ценами.

 

 В принципе лучше унифицировать верстку 4х колоночного случая, чтобы там высота части с ценой была как в 3х колоночном случае (в настоящий момент она различается из-за разницы в размере шрифта у цены, если в 4х колоночном случае размер шрифта сделать как 3х колоночном, то фразы CONTACT US не полезут по ширине). Но не путем уменьшения текста в 3х колоночном случае до случая 4х колоночного :-)

 

 Особенности

 2.1) в psd 4 варианта отображения скидки. Сделать верстку для всех 4.

 2.2) Для первого варианта отображения скидки (который слева, ленточка с надписью SALE - слово SALE верстать как текст, так как клиент будет менять иногда надписи - SALE! или SALE!! или SALE)

 2.3) Старую цену (которая зачеркнута) и новую - верстать как текст. Чтобы можно было ее генерировать из скрипта

Весь html на сайте генерится скриптами, поэтому хочется получить изменение html кода по сравнению с той версией что есть на сайте, а не с той, что есть в архиве с gulpfile.js (между ними могут быть какие-то незначительные отличия, скорее всего их даже нет). В архиве с gulpfile.js стоит брать только ресурсы (png+css+js). Еще надо учитывать что на сайте на каждую страницу выплевываются одни и те же правила css в теге style, надо верстать с их учетом.

 

 Где брать

 - тут псд http://stunnix.com/priv/tmp/psds-task2.zip

 - Тут сырцы для gulp и все scss, png и тд http://stunnix.com/priv/tmp/stunnix-src.zip

 

 Оплатим WMZ

Заявки фрилансеров