Вёрстка элементов сайта

Цена договорная • электронные деньги
04 декабря 2017, 14:35 • 1 отклик • 34 просмотра
Нужно сверстать - хедер, футер и две формы.
По прогнозам там - до 6 часов работ

Описание и скрины в гугл-таблице https://goo.gl/g24k8y

Макеты доступны в Zeplin, внешний вид под разные разрешения присуствует.

Техтребования:
стили на SCSS, итоговый набор файлов стилей - исходник SCSS+CSS;
для сборки использовать gulp, файлы gulpfile.js и package.json должны быть приложены
изменение внешнего вида элементов из-за состояния (например: активный/неактивный пункт) изменяется стилями с помощью модификаторов;
основные цвета в виде переменных в SCSS;
колоночная адаптивная верстка на bootstrap4;
актуальные разрешения экрана:
320-767
768-991
992-1999
>1200

верстка по БЭМ, согласно этим правилам: http://nicothin.github.io/idiomatic-pre-CSS/;
mobile-first (с использованием миксинов с медиа запросами min-width, а не max-width);
организаци стилей по разным файлам соответственно разным блокам (подробнее - здесь: http://nicothin.github.io/idiomatic-pre-CSS/#pr...);
При написании кода соблюдать отступы для наглядности в иерархии; снабжать комментариями открытие и закрытие кода основных блоков, с указанием класса или ID этого блока (<!-- .container -->, <!-- #header -->)
В папке с версткой страница index.html должна быть каталогом всех сверстанных страниц.
Именование классов без нижнего подчеркивания (_), используем дефис (-)
Для классов, используемых в JS используется префикс js_
Нет JS ошибок
Всем картинкам в основной контентной области нужно прописать max-width: 100% (это будет гарантией, что оно не вылезет за пределы контента)
Кодировка UTF-8
Корректное отображение во всех свежих браузерах: FF, Chrome, Safari, Opera, IE (версии 11 и выше), EDGE.
Корректное отображение на мобильных устройствах.
Ресайз textarea не должен ломать вёрстку (либо отключен вовсе)
Реальный контент не должен ломать верстку (например, фотографии формата не как в дизайн-макете, или длинный текст )
Весь JS документирован (описано, что и при каких условиях делает функция)
Графику, не являющаяся частью дизайна, нужно положить в отдельную подпапку (/img/del)
Отзывы
Avatar r50 a6ce93fe35b158fd29ba0e8681c918c22117160e9586a56eee4ffbc20df9bda1
Заказчик
Задачу решил грамотно и в срок.
Подход к разработке современный, поэтому качество на высоте, вообще без вопросов.
Могу рекомендовать.
3 года назад
R50 c4f435ad5c1271d0a8be06cf0ea3f630
Фрилансер
Был рад сотрудничать с Игорем, профессиональный подход к задачам начиная от требований заканчивая необходимыми для них ресурсами. Оплата своевременная. Рекомендую!
3 года назад