Сверстать страницу для сайта на битрикс
Задание:
сверсать макет изаменить им текущую страницу http://www.psk-m.ru/catalog/termopaneli/
вид страницы - https://cloud.mail.ru/public/CpHU/Vkdc7vE9i
PSD - https://cloud.mail.ru/public/5i7b/VDA182myu
Пояснение:
Шапка остается как щяс т.е. берется из общего шаблона сайтаввиде инклюда (редактируется в одном шаблоне)
Все что ниже желательно вынести в отдельный файл свизуальным редактором что бы можно было быстро вносить правки во всю страницу.
стиль шрифтов заголовков http://prntscr.com/9znfoy должен быть таким же как на
главной http://prntscr.com/9znfxa размер и цвет подобрать уже по макету
Пояснения по блокам на картинке https://cloud.mail.ru/public/CpHU/Vkdc7vE9i :
1. Фоновая картинка отзеркалена http://prntscr.com/9znehs растягиваться набольших экранах она должна равномерно ив лево и в право (а не только в правую сторону)
2-3. просто HTML верстка.Все тексты и картинки должны меняться через визуальный редактор.
4. просто HTML верстка, красная кнопка подробнее является ссылкой (при наведении сделать эффект
нажатия со сменой отттенка илиуглублением кнопки). Все тексты и картинки должны меняться через визуальный
редактор
5. Слайдер (карусель со сменой картинок)
должно настраиваться:
- смена картинок (сколько прописано картинок столько и кадров / квадратиков
внизу)
- скорость смены картинок в миллисек (задержка показа каждой картинки)
- желательно заложить плавный эффект смены картинок (чтобы не мигали а плавно
за 1 сек переходили из одной в другую)
6. просто HTML верстка
блок с картинками, с возможностью легко их поменять в визуальном реакторе
7. просто HTML верстка , серая кнопка "подробнее о ценах" является ссылкой (при наведении сделатьэффект нажатия со сменой отттенка илиуглублением кнопки). Все тексты и картинки должны меняться через визуальный
редактор
8. просто HTML верстка , кнопка "отправить заявку" вызывает поп-ап окно как тут http://lexstatus.com.ua/ http://prntscr.com/9znhor поле обязательно к заполнению, если не заполнено,то без перезагрузки страницы выводится сообщение "заполните это
поле" http://prntscr.com/9znhyr разделения поля под цифры такое +7 (_ _ _) __ _ - _ _ - _ _ - 3 цифры код Москвы +7 цифр код телефона.
После успешной отправки открывается страница с уникальным урл /sucsess-termopanel пример http://promo.lexstatus.com.ua/thanks.php
с сообщением "ваша заявку успешно отправлена. Мы свами свяжемся в ближайшее время"
9. просто HTML верстка
добавление блоков с новыми вопросами или их правка должны производиться легко и
удобно
10. просто HTML верстка
блок с иконками и текстом, с возможностью легко их поменять в визуальном
реакторе
11.
просто HTML верстка, кнопка "Получитьконсультацию" вызывает поп-ап окно и так как П.8
12. внизу вставить футер из шаблона сайта - http://prntscr.com/9zno7n
После верстки разместить все на сайте и проверить работоспособностьчто бы заявки приходили и страница корректно отображалась во всех популярных
браузерах.