Сверстать с адаптивкой psd макеты сайта каталога недвижимости
Только Front: HTML+CSS(Less)+JS и фреймворки для них. Backend не нужен.
В дальнейшем сами будем "прикручивать" на Битрикс.
Макеты в низком разрешении для ознакомления:
https://yadi.sk/d/1GHsCSVyx24kq
Структура верстаемых страниц:
1. Общие элементы, стилевая
2. Главная страница
3. Внутренние страницы:
- Страница каталога в табличном виде
- Страница каталога в плиточном виде
- Страница объекта недвижимости
- Страница со списком ЖК/КП
- Страница конкретного ЖК/КП
- Страница с описанием рабочего процесса
- Страница о компании (с фотографиями людей)
- Страница с отзывами
- Страница с описанием дополнительных услуг
- Страницы новостей/статей.
- Страница контактной информации
- Страница 404 ошибки
Общие требования к верстке (html-структуре) сайта
Сайт должен корректно отображаться:
- в актуальных версиях следующих браузеров: InternetExplorer, FireFox, Opera, Chrome, Safari, Maxthon (Расположение блоков и общий вид не должны сильно изменяться при просмотре на различных браузерах);
- на основных разрешениях мониторов 1024х768, 1280х1024, 1378х768 (ноутбуки), 1440x900, 1920x1080;
- адаптивно на всех мобильных форматах экранов в соответствии с дизайн-макетами мобильной версии.
Вёрстка сайта должна полностью соответствовать нижеперечисленным требованиям:
- 100% валидность по данным W3C
- В тэгах head обязательно должно присутствовать указание на кодировку и на тип документа
- Все стили должны быть вынесены в классы файла css – на странице не должно быть стилевых тэгов.
- Все скрипты должны быть вынесены в отдельные js файлы.
- Для всех картинок (где это применимо) должны быть указаны релевантные alt и title.
- Все относительные ссылки должны начинаться от слеша.
- Текущий пункт меню, где находится пользователь должен выделяться и становиться некликабельным.
- Не допускается использование элементов H1-H6 для верстки оформления страниц, только в контентной части.
Верстать макеты точно по пикселям (PerfectPixel).
Внимание ко всем отступам, стилям шрифтов, рамкам, градиентам и прочим деталям. Проверяем очень внимательно.
(В ряде макетов есть отличия по этим деталям. Какой из них брать за эталон, укажем отдельно)
Каждый смысловой блок и подблок должен быть в своём div с адекватно названным по смыслу классом css (таблицы не используются вообще).
Стараться минимум использовать position: absolute; и жёсткое задание ширины блоков. Приоритетно сперва min- и max-width.
Любые последующие изменения стилей одного div не должны "ломать" верстку других.
Поэтому любые теги, отличные от div, не должны прилегать к другим div непосредственно. Только внутри другого div.
Адаптивную верстку предпочтительно делать на bootstrap (возможны варианты, например uikit).
При этом верстку делаем не только с максимальной шириной в макетах - 960px, но и для ширины 1200px.
Всем элементам даётся чуть больше ширина, чем в макете.
Абсолютно все объекты имеющие hover должны иметь плавные переходы transition all 300
Тексты оформляются исключительно с помощью тэга параграфа <p> и вложенными в них по необходимости <span>
Более детальное ТЗ на верстку после первичного согласования.
Ждём от вас сроки и цену (желательно с детализацией по каждой странице)
Комментарии, предложения конкретных решений и уточнения приветствуются.