Нужно сверстать шаблон сайта

400 руб.за час • безналичный расчёт, электронные деньги
12 декабря 2017, 11:17 • 2 отклика • 29 просмотров
Нужно сверстать шаблон.

Дизайн сделан в формате Sketch, макеты доступны в программе Zeplin (бесплатная, надо будет зарегиться на сайте и скачать – zeplin.io/)


Нужно сверстать главную страницу и несколько внутренних (в них – много похожих элементов).
к этому будет дана более подробная информация по некоторым отдельным страницам.
Есть стайлгайд.
Вся остальная информация по запросу.

Требования к исполнителю: показывать промежуточные результаты, оплата по факту (на мой хостинг переносите после оплаты, доступы даете мне после оплаты), соблюдение сроков (если сроки сорваны и вы не вышли на связь, то заказ передается другому), поправки сайта включены в стоимость (до 3 итераций поправок).

Техтребования:
стили на SCSS, итоговый набор файлов стилей – исходник SCSS+CSS;
для сборки использовать gulp, файлы gulpfile.js и package.json должны быть приложены
изменение внешнего вида элементов из-за состояния (например: активный/неактивный пункт пагинации) изменяется стилями с помощью модификаторов;
ссылки на почту и на телефон – вызывают действие ( звонок, открытие почтовика );
основные цвета из стайлгайда используются в виде переменных в SCSS;
колоночная адаптивная верстка на bootstrap4;
актуальные разрешения экрана:
320-767
768-991
992-1999
1200
верстка по методологии БЭМ, согласно этим правилам: nicothin.github.io/idioma...
mobile-first (с использованием миксинов с медиа запросами min-width, а не max-width);
организаци стилей по разным файлам соответственно разным блокам (подробнее – здесь: nicothin.github.io/idioma...
При написании кода соблюдать отступы для наглядности в иерархии; снабжать комментариями открытие и закрытие кода основных блоков, с указанием класса или ID этого блока (, )
В папке с версткой страница index.html должна быть каталогом всех сверстанных страниц.
Именование классов без нижнего подчеркивания (_), используем дефис (-)
Для классов, используемых в JS используется префикс js_
Нет JS ошибок
При загрузке страниц не должно быть ошибок 404 (например, ссылка в стилях на несуществующую картинку)
Всем картинкам в основной контентной области нужно прописать max-width: 100% (это будет гарантией, что оно не вылезет за пределы контента)
Кодировка UTF-8
Хлебные крошки в микроформате (Microdata schema.org/docs/gs.html)
Корректное отображение во всех актуальных браузерах: FF, Chrome, Safari, Opera, IE (версии 11 и выше), EDGE.
Корректное отображение на мобильных устройствах.
Никакого закомментированного мусора не должно быть
Ресайз textarea не должен ломать вёрстку (либо отключен вовсе)
Skype-плагин не должен ломать вёрстку
Реальный контент не должен ломать верстку (например, фотографии формата не как в дизайн-макете, или длинный текст в карточке товара в каталоге)
Текст на слайдах слайдера сделан текстом, не картинкой
Весь JS документирован (описано, что и при каких условиях делает функция)
Графику, не являющаяся частью дизайна, нужно положить в отдельную подпапку (/img/del)
В мобильной версии подключена галерея с поддержкой жестов (для слайдера и страниц галереи)
Все всплывающие формы всплывают (стилизация по стайлгайду)
Должны быть подключены фавиконки (их дадим).


Не надо верстать хедер/футер, меню на мобилке, стайлгайд.

Список макетов для верстки:
главная (внутряк) main
take.ms/lgyyw
take.ms/APg8L
take.ms/LwTaf
take.ms/wjpGm

каталог – корень catalog-section-list
take.ms/nRWfV
take.ms/uzr1O
take.ms/QHQSd
take.ms/H66MS

каталог – список секций (отличается только наличием левого меню,т.е. по факту только левое меню) корень catalog-section-list2
take.ms/zTeq2C
take.ms/lf8n0
take.ms/VW2aK
take.ms/eg9rg

каталог – список элементов корень catalog-element-list2
каталог – детальная catalog-element
take.ms/L4U2p
take.ms/bQnei
take.ms/s1r6S
take.ms/8UCyk

всплывающая форма на дет.странице каталога form
take.ms/uar7v
take.ms/A55Ij
take.ms/0i3ZI
take.ms/mOuAm

список новостей news-list
take.ms/OnKhi

партнеры (совсем простой) partners
take.ms/4OSO0
take.ms/cpnDf
take.ms/vQsdg
take.ms/joJ7E

FAQ faq
take.ms/ORqXq
take.ms/yivtn
take.ms/igg70
take.ms/QHble