Верстка простой страницы и мелких улучшений существующей
Есть сайт, уже сверстан и работает, сделан на 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