Нужно сверстать лэндинг, адаптивная верстка + программирование.
Описано всё ниже для разрешения монитора 1280-1600 пикселей (для других разрешений всё аналогично, кроме моментов, которые указаны особо).
PSD-файлы можно скачать тут:
В каждом PSD-файле всё расположено по папкам.
1. Шапка сайта (папки "logo", "header") должна быть "приклеена" к верхней части браузера
2. При нажатии на кнопку "Перезвоните мне" – появляется всплывающее окно ("pop-up_1"), при этом экран затемняется (слой "blue"). Закрыть окно можно щелкнув на пустом поле либо нажав клавишу Esc.
3. При неправильном заполнении формы появляется сообщение об ошибке ("error")
4. При правильном заполнении формы окно "pop-up_1" заменяется окном "pop-up_2". Окно "pop-up_2" можно закрыть щелкнув на пустом поле, на крестике либо нажав клавишу Esc. Страница приходит в исходное состояние. При этом на почтовый ящик менеджера высылаются введенные пользователем данные + информация из какого блока он совершил отправку.
5. Форма захвата ("forma_zahvata"). При неправильном заполнении – появляется сообщение об ошибке. В разрешениях 800 и ниже – эта форма отсутствует (скрыта).
6. При правильном заполнении – см. п. 4 (только сразу появляется окно "pop-up_2").
7. При нажатии кнопки "Купить" см. п. 2, 4.
8. При нажатии кнопки "Подробнее" в блоке "main_tovar" происходит прокрутка страницы до следующего экрана, а именно – "harakteristiki".
9. Блок с характеристиками должен быть редактируемым. Т.е. должна быть возможность без существенных затрат заменить характеристики товара (их количество и последовательность тоже), комплектацию, описание.
10. Отзывы.
Отзывы располагаются блоками. Для разрешений 1024-1600 отображается изначально по 9 отзывов, для разрешений 480-1023 – по 6 отзывов. При нажатии на кнопку "Показать больше отзывов" должны подгружаться следующие 9 (или 6) отзывов. Всего отзывов – 30 шт. Когда все отзывы показаны – кнопка "Показать больше отзывов" не должна отображаться.
11. Блок преимуществ ("pochemu")
Состоит из двух условных блоков. В первом условном блоке – видео и текст, во втором блоке – перечисление преимуществ товара (иконки + текст).
Т.к. видео сейчас только монтируют, первый условный блок должен быть изначально скрыт. Как только видео будет выложено на ютуб, нужно будет чтобы этот блок отображался. Видео проигрывается только по нажатии кнопки play.
12. Дополнительные товары.
Сейчас сфотографирован только основной товар ("main_tovar"), фотографии дополнительных товаров будут позже. Должна быть возможность легко заменить одни фотографии товаров на другие. Такая же ситуация с характеристиками для этих товаров. Должна быть возможность заменить характеристики и описание товаров.
Возле каждого товара есть 5 иконок. К ним должны быть описания (при наведении мыши, alt). Слева направо: "приспособлен к низкому качеству топлива"; "функция «легкий старт»"; "низкий уровень шума"; "низкий уровень вибрации"; "экологичный экономичный двигатель".
13. Блок аудиоотзывы.
Изначально должен быть скрыт, т.к. аудиоотзывов нет, пока нет продаж товара.
Аудиоотзывы должны функционировать следующим образом: аудиоотзыв подгружается только при нажатии на кнопку "слушать аудиоотзыв", и подгружается именно тот отзыв, который пользователь решил послушать. Следующий аудиоотзыв подгружается только в том случае, если будет нажата кнопка "слушать аудиоотзыв" возле другого отзыва.
14. Футер.
В футере стандартная форма захвата, действует так же, как и форма захвата рядом с главным товаром.
15. Всплывающее окно должно появляться примерно по центру экрана пользователя.
16. Главное фоновое изображение (девушка с косилкой на траве, на фоне неба). В разрешении 799 и ниже – это изображение в 2 раза меньше, чем на разрешении 800-1600. Но это обсуждается, как лучше сделать. Важно, чтобы изображение весило как можно меньше. Могу "зациклить" траву на фоне, примерно по ширине сделать 800-900 пикселей (если есть такая необходимость).
17. Шрифт OpenSans (Googlefont).
18. HTML5/CSS3
19. Бэкраунды по максимуму в спрайты.
20. Для разрешения ниже 480 пикселей адаптив делать не нужно.