Здравствуйте!
Нужно сверстать адаптивно главную и 3 внутренние страницы
psd тут:
preview в приложении.
От вас нужна цена и срок.
Спасибо!
1) 01.главная
В psd есть всплывающие формы, их пока не верстаем, т.к. они не согласованы. Позже верстать будем.
Прямоугольники в центральной части – это полностью ссылка (ну кроме "бесплатный замер"). Текст естественно текстом. При навдении на блок, картинка в нем должна увеличиться как тут: (
Черный прямоугольник в правом верхнем углу (там где кнопка "заказать звонок"), при прокрутке вниз фиксируется на своем месте.
Фоновая картинка двери справа вверху от всего сайта – это наверное фон у body смещенный в сторону. На мониторах шириной типа 1280px его просто не будет видно.
Что касатеся мобильной версии:
левая часть, верхняя плашка, нижнее меню, кнопка наверх – все точно так же как на moslest.ru (почему-то у них мобильная версия видна только если со смартфона смотреть, я сколько в хроме не уменьшал окно браузера – не адаптируется)
а вот содержимое центральной части – просто блоки размещаем вертикально на всю ширину друг за другом. Мослест оставили только три блока и поместили их в слайдер, но нам так не нравится.
Что касатеся версии для планшетов:
нужно просто что бы все нормалньо помещалось на экран.
Вот тут например:
у них большую часть экрана занимает фоновая картинка.
А должно быть как-то так:
2) 02.список_входные
"Получить консультацию" – весь прямоугольник это ссылка a href. Так же как и круглая кнопка к тем же текстом внизу.
Верхняя полоса (красный и черный блоки), – фиксируются при прокрутке вниз.
Форма подбора двери по цена/цвету и т.д., учитывайте сразу, что это должна быть ФОРМА, с соотв. инпутами, а то хрефами все сделаете.
"Показать все" – это a href
Название товаров, могут быть в две строки и больше. Аналогично с описание товаров, описание например внутренней отделки можен быть на 2-3 строки.
"В корзину" – это a href
Картинка и название – ссылкой
Ну и у разных товаров, сделайте разное кол-во заполненных звездочек.
"Купить в рассрочку" – это a href
По версии для смартфонов я думаю тут все понятно. Фильтр делать так же как на мослест.
3) 04.межкомнатная_общее
Это страница подробного описания межкомнатной двери.
Серый блок "Назад к списку дверей" это все a href.
Верхняя полоса (серый и черный блоки), – фиксируются при прокрутке вниз.
Картинка это слайдер.
"Хит продаж" – если там будет более длинное слово, должно перенесить под перечеркнутую цену.
ВАЖНО! вот это место под картинку, делайте overflow: hidden, что бы можно было туда подсунуть картинку выше размером, т.к. в процессе жизни сайта, высота всего этого блока возможно будет увеличиваться. Т.е. и стрелки управления слайдером должны так же оставаться внизу картинки. Проверяйте сразу, напрмер делая в несколько строк название товара.
"Нашли дешевле? Снизим цену!" – это a href
Прямоугольники возможных цветов – это все a href-ы
Без стекла/со стеклом – это тоже два href-а
А вот одностворчатая/двухстворчатая и распашная/развижная + чек боксы ниже и кнопка "в корзину" – это одна большая форма.
"В корзину" – это a href
"Вызвать замерщика" – это тоже a href
Дальше идут три вкладки. Это обычные вкладки, их содержимое переключается на лету.
Три кнопки "В корзину", "Вызвать замершика", "Купить в рассрочку" – это все a href
Файлы для скачиваниея – каждый блок полностью самостоятельная ссылка
С этой дверью так же покупают: картинка и название ссылкой. И в рейтинге поставьте 5 звездочек, а не 4, как в макете. Ну и у разных товаров, сделайте разное кол-во заполненных звездочек.
По версии для смартфонов я думаю тут все понятно.
Сначала картинка, затем под ней описание, затем сразу раскрытывае вкладки и т.д.
4) 05.межкомнатная_ручки
Тут нас интересует вкладка "Вам так же потребуется..."
Содержимое этой вкладки – больщая форма.
Кнопки "Выбрать ручку", "Выбрать замок" и т.д. это все a href
Иконка удаления, тоже a href
5) 06.межкомнатная_сервис
Тут нас интересует вкладка "Воспользуйтесь проф. сервисом."
Ну тут все аналогично предыдущей вкладке.
6) 07.входные_общий.psd
Это страница подробного описания входной двери.
От межкомнатной отличий не много.
Описание справа от основной картинки.
При наведеннии на левая/правая всплывают соотв. подсказки.
Кнопки "Левая/правая" и кнопка "в корзину", это форма.
Чуть другое название вкладок.
Другое содержимое таблицы.
7) 07.входные_оформление_проема.psd
Тут нас интересует вкладка "Оформление проема"
Тут думаю все понятно, уже делали, просто другое содержимое.
8) 07.входные_сервис.psd
Тут нас интересует вкладка "Воспользуйтесь проф. сервисом."
Тут думаю все понятно, уже делали, просто другое содержимое.