Коллеги, нужно классно сверстать обновленный сайт для SEO-агентства. Верстка на bootstrap 4, сетка и разметка строго по документации. От исполнителя нужно единообразное форматирование и написание кода HTML5, CSS3, Javascript, использование jQuery 3.

Сайт состоит из двух посадочных страниц. Главная и страница по основной услуге агентства – Поисковая оптимизация. Верстаем под 4 устройства. Макеты довольно простые, без подводных камней. Все кнопки "Заказать..." – это вызов одной и той же формы заказа звонка в модальном окне.

Макеты (масштабирование макета в нижнем правом углу):
Главная страница – http://view.maquetter.com/n2j2y3/0101
SEO-лендинг – http://view.maquetter.com/n2j2y3/0102

Из хотелок:
Форма заказа звонка в подвале. При прокрутке экрана к форме, заголовок "Напишите нам" должен начинать печататься. Простой пример: www.jivo.ru/. Плавающее главное меню. Дополнительные визуальные решения и эффекты по обработке заголовков и блоков приветствуются, обсуждаются и оплачиваются.

Требования к кодировке:
Все файлы кодируются в кодировке UTF-8 without BOM. Необходимо минимизировать CSS-код и JavaScript-код.

ПРИЕМКА ПРОЕКТА

Блочная верстка, никаких таблиц. Каскады стилей сводим к минимуму. Обязательно использование CSS-препроцессоров LESS и SASS со сборщиком Gulp. Все файлы кодируются в кодировке UTF-8 without BOM. Необходимо минимизировать CSS-код и JavaScript-код.


HTML:
- Для разметки используются теги согласно документации Bootstrap 4.
- Значения всех атрибутов заключаются в двойные (").
- Форматирование HTML иерархическое, отступ — один символ табуляции.
- Табличная верстка используется только в теле контента, редактируемого посредством WYSIWYG-редакторов.
- В контентных фрагментах верстки используются теги , . Не допускается использование блочных элементов основной разметки в контентных фрагментах верстки.
- Не допускается использование тега кроме фрагментов верстки, редактируемых посредством WYSIWYG-редакторов.


CSS:

Стили, принадлежащие одному блоку, должны следовать друг за другом: сначала блок, потом его модификаторы (также переопределения для конкретных браузеров, для отключенного JS и т.п.), затем элементы и их модификаторы. Стили для конкретных браузеров задаются с помощью классов, правила которых должны следовать непосредственно за оригинальным правилом. Нормализация стилей осуществляется встроенными средствами Bootstrap 4. Форматирование стилей:

- Каждое свойство — на отдельной строке.
- Каждый селектор — на отдельной строке.
- Используйте сокращённые CSS-свойства, где это только возможно.
- Используйте максимально короткие ID и class имена, но не в ущерб информативности.
- Избегайте совмещения элементов с ID и class именами.
- Свойство без префикса пишется последним.
- Использование символа (;) в конце описания всех CSS-свойств обязательно.

Верстка проходит тест на переполнение контентом. Верстка не должна ломаться:

- при добавлении в элементы большего количества текста;
- при использовании картинок с неподходящими размерами;
- текст не должен выпадать из объектов;
- переполнение контентными блоками не приводит к нарушению сетки.


Прочее:

- Каждый класс или идентификатор должен являться отдельным определением за исключением состояний, псевдоэлементов, медиа-запросов и т.п.
- Приложение должно быть сгруппированные по папкам, согласно пакетам по документации Bootstrap4 + индивидуальные компоненты.
- Обязательно использовать переменные, миксины, функции.
- Обязательно подготовить файл variables в котором содержится: цветовая схема, сетка, типографика
- При использовании препроцессоров правила организации файлов такие же, как и для обычного CSS.
- Переменные для одного блока должны объявляться непосредственно перед ним.
Подключение стилей на сайт должно осуществляться через один файл.

Мы точно знаем, что хотим получить, вы точно знаете что должны сделать. Никаких "поди туда, не знаю куда". Познакомились, обсудили, быстро сверстали, закрыли сделку. Всем радость и профит. Ждем предложений :)

К нашему сожалению, данный проект будет предоставлен исполнителю в PSD. Это один из наших проектов, который разрабатывался еще до обновления нашей команды до выработки конкретных требований к верстке и культуре кода и перехода на Figma.