Сверстать 1 страницу по БЭМ, верстка главной страницы сайта

Прошу, присылать примеры ваших работ, в ответ вышлю макеты. Интересует исключительно верстка по БЭМ. 

Нужна верстка главной страницы ИМ, если все будет сделано качественно, отдам еще 10 страниц.

Обязательные требования

1) Все страницы должны соответствовать требованиям W3C и проходить валидацию validator.w3.org/. и тут jigsaw.w3.org/css-validat... www.css-validator.org/ 

3) Скорость загрузки страниц – не менее 85 пунктов из 100 в Google Page Speed. 

4) Файлы оптимизированы на базовом уровне для Веб в Photoshop. Малые изображения оформления склеиваются в спрайты. В папке с изображениями не должно быть картинок, не использующихся в верстке. 

5) Все стили CSS и JS-скрипты должны быть вынесены в отдельные файлы. 

6) Все нестандартные шрифты подключаются по умолчанию через @font-face. 

7) В селекторе сначала идет атрибут class=, затем id=, затем все остальное. Значения атрибутов должны быть заключены в двойные кавычки. 

8) Не использовать классы с префиксом js- для стилизации. 

9) Для классов, используемых в JS использовать префикс js-. 

10) Использовать rgba модель для свойств, поддерживающих прозрачность. 

11) В коде не должно быть комментариев. 

16) Не оставлять в коде console.log. 

12) В верстке не должно быть отдельно стоящих input, select, etc. Метки полей должны находиться в тегах label, имеющих правильно заполненный атрибут for. Предусмотреть при верстке форм элементы для вывода ошибок валидации и стили для неправильно заполненных полей. 

13) С помощью тега img вставляются только изображения, относящиеся к контенту – фотографии, изображения товаров, лого и т.д. Интерфейсная графика – только в background / иконочный шрифт. 

14) Заголовки страниц должны быть обозначены тегом

15) Названия групп товаров на главной странице должны быть обозначены тегом

. 

16) Текст на странице должен быть обозначен тегом

. 

17) Все теги должны обязательно содержать атрибуты alt и title. 

18) Основное меню должно быть заключено в тег

. Основное содержимое должно быть помечено тегом  

19) В верстке, в качестве системы именования классов необходимо использовать БЭМ-методологию Строго по документации https://ru.bem.info/methodology/quick-start/ . Своевольно трактование БЭМ не допускается. 

20) Верстка необходима в разрешения макетов: 1170 px (десктоп), 768 px (планшет), 320 px (смартфон). 

21) Верстка должна корректно отображаться в браузерах выше этих версий 

Десктоп 

Опера 33+ 

FireFox 42+ 

Гуггл хром 40+ 

Explorer 10+ 

Яндекс браузер 18+ 

Edge 14+ 

Мобильные и планшеты 

Safari 5+ 

Android 4.4+ 

Opera Mobile 30+ 

MSIE Mobile 10+ 

Opera Mini 18+ 

22) Нормальное отображение верстки должно начинаться от разрешения 320 px и выше. ТО есть, я открываю браузер на этом разрешение, открываю браузер Режим адаптивного дизайна и начинаю растягивать дизайн, на всех разрешениях, все должно быть корректно, и что бы без горизонтальной прокрутки без наездов и съездов элементов. 

23) перед началом работы нужно будет обсудить моменты по адаптива, то есть, какие блоки в какой момент будут переноситься или пропадать. 

24) Учитывать http://prgssr.ru/development/ispolzovanie-aria-v-html5.html 

25) После завершения верстки, необходимо запустить аудит в гугл хроме, в результате аудита, гугл не должен ругаться на верстку. Вот этот тест http://prntscr.com/j6b18t