Вёрстка сайта
Приветствую!
Нужно сверстать сайт-каталог и сделать на него адаптив. Макетов адаптива нет, нужно добавить «от себя».
Ниже краткая ТЗшка по деталям, которые, по моему мнению, требуют внимания.
Все страницы:
1. Главная
https://i.imgur.com/Qh14Igj.jpg
2. Страница «Продукция компании»
https://images2.imgbox.com/97/44/lQ81ZheP_o.jpg
3. Страница «Отдельного продукта»
https://images2.imgbox.com/f6/64/adQH9Q4C_o.jpg
4. Страница «Проекты»
https://i.imgur.com/undefined.jpg
5. Страница отдельного проекта
https://i.imgur.com/V8XYC9M.jpg
6. Проекты на карте
https://i.imgur.com/xI3JqGh.jpg
Странички:
1. Главная
https://i.imgur.com/Qh14Igj.jpg
— На этой странице скроллинг будет вестись поэкранно по слайдам.
— Для навигации по определённым слайдам слева есть ссылки.
— При достижении соответствующего заголовку слайда и самого слайда выделяем ссылку в навигации.
— По клику на «Листайте вниз» скроллим пользователя к следующему блоку.
1.1 Первый слайд
По клику на заголовки слева раскрываются пункты со ссылками. По клику на другой заголовок, раскрытый заголовок сворачивается.
1.2 Второй слайд — «Поставка КНС на стадион»
Сюда добавляется горизонтальный слайдер. Меняется весь блок — картинка, заголовок и текст.
— Включаем поддержку свайпа влево-вправо.
1.3 Третий слайд — «Проектирование»
Как и в предыдущем слайде, добавляется горизонтальный слайдер + свайп.
1.4 Слайд «Факты о компании»
К цифрами делаем анимацию счётчика
1.5 Слайд с контактной информацией
Карта — интерактивная от Google.Maps с наложением фильтра. Детали фильтра приложены к макету.
На карте запрещаем автоматический зум по скроллу и пальцами (для мобильной версии).
2. Страница «Продукция компании»
https://images2.imgbox.com/97/44/lQ81ZheP_o.jpg
2.1 По клику на заголовок раскрываем подпункты. При клику мышкой на подпункт меняем блок с текстом и картинкой справа.
3. Страница продукта «Горизонтальные комплектные насосные станции»
https://images2.imgbox.com/f6/64/adQH9Q4C_o.jpg
3.1 Первый экран — листалка изображений по стрелочкам + свайп.
3.2 Блок «Примеры поставок»
— При наведении мышкой деланием анимацию scale для изображения.
— По клику на «Посмотреть ещё» показываем ещё 2.
3.3 Блок «Вас также может заинтересовать»
Листалка изображений с заголовком + свайп.
4. Страница «Проекты на карте»
Гугле карта с отметками проектов на карте. При отдалении карты объединяем метки на карте в список по регионам.
При zoom in раскидываем по соответствующим городам.
Пожалуйста, прикладывайте срок и стоимость работ.