Адаптивный дизайн формы заявки с версткой
1. Адаптивный веб-дизайн страницы с формой заявки.
2. Верстка страницы.
Примерный вид формы во вложении.
Предпочтительный стиль оформления (образец) - сайт ТЕЛЕ2.
Описание страницы:
1) Логотип справа вверху. Это логотип Эйвон с сайта avon.ru. Попробовал сделать из него логотип своего сайта AVON-BOOM. Я партнер AVON, поэтому хочу, чтобы логотип самой компании Эйвон доминировал, но было однозначно понятно, что название AVON-BOOM. Сейчас логотип сайта посмотреть avon-boom.ru. Он уже не устраивает. У посетителя сайта не должно возникать сомнений, что он попал на сайт, тесно связанный с AVON. Если предложите свои идеи логотипа - можно обсудить.
2) Ссылка на помощь под номером телефона справа вверху страницы открывает всплывающее окно "Обратная связь" (см. справа на картинке)
3) Область полей с данными паспорта показывается/прячется по нажатию кнопки над ней. Javascript сворачивания/разворачивания делать не нужно. Он есть у меня. Достаточно поместить эту область в DIV.
4) При наведении мыши поверх кнопок, их вид должен незначительно меняться, чтобы было понятно, что это кнопка и что сюда нужно нажать. Устраивает как это сделано на ТЕЛЕ2.
5) В нижней части страницы основное меню из 4 пунктов и в прямоугольниках подменю к каждому пункту. Внешний вид и как это работает тоже нравится на сайте ТЕЛЕ2.
В мобильной версии страницы меню прячется. Вверху справа страницы появляется стандартная для мобильной версии кнопка вызова меню, по нажатию которой открывается само главное меню с подменю.
6) Иконки соцсетей в подвале. При наведении мыши "заливаются" фирменным цветом соц.сети, как на ТЕЛЕ2.
7) Адаптация страницы под 3 ширины экрана: 1000px, 768px, 320px.
Эта страница - начало редизайна всего сайта avon-boom.ru. При хорошем результате, сотрудничество может быть продолжено.
-------------
Результаты:
---
1) Эскизы страницы для трех размеров экрана утверждаем. Потом верстка
2) Верстка: HTML файл и файл стилей.
3) Адаптивную верстку страницы проверяем сервисом http://quirktools.com/screenfly/