HTML/CSS верстка двух экранов

Дмитрий12 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
26.05.2017

Необходимо сделать HTML/CSS верстку двух экранов и адаптировать под разные разрешения. Интерактивные элементы должны содержать JS реализацию.

Ширина экрана - не фиксированная, responsive дизайн.

 

На выходе:

  • Html страница.
  • CSS файл. Все png ресурсы на одной картинке, которая используется в CSS.
  • JS файл.
Все иконки, шрифты и размеры текстов будут уже нарезаны/предоставлены.

 

1)Домашняя страница

https://projects.invisionapp.com/share/75B77Q8VR#/screens/227706454

 

В бекграунде используется видео, которое должно заменяться статической картинкой во время загрузки. Желательно, не грузить его совсем для мобильного интернета (slow connection). Асинхронно - время загрузки страницы не должно зависеть от этого.

 

Выпадающее меню

https://projects.invisionapp.com/share/75B77Q8VR#/screens/228997982

 

Версии под разные разрешения:

Мобильный: 480 px x 800 px

https://invis.io/GFBGD78ZJ#/230700012_01_Main_Mobile

 

Планшет : 768  х 1024 px  (750 в Bootsrap сетке)

https://projects.invisionapp.com/share/FDBGD9RBM#/screens/230719119_01_Main_Tablet

 

Интерактив JS:

  • Прокрутка Testimonials
  • Открытие меню
2)Страница результатов

https://projects.invisionapp.com/share/75B77Q8VR#/screens/227820490

 

“Search settings” - кликабельно.

“Filters” - кликабельно.

Menu - кликабельно.

 

Analytics график - Не надо стилизовать, просто оставить место которое будет растягиваться. При нажатии на “Detailed statistics” показ “Back to search” области https://projects.invisionapp.com/share/75B77Q8VR#/screens/230411286

 

Результаты поиска (посты) представлены в стилях, копирующих текущую реализацию на Social Searcher:  https://www.social-searcher.com/social-buzz/?q5=dj

См div id=”blocksresults” и стили отдельных постов:

  • Фиксированные left/top positions в “style”
  • Position: absolute
Версии под разные разрешения:

Мобильный: 480 px x 800 px

https://invis.io/GFBGD78ZJ#/230702869_02_Search_Result_Advanced

 

Планшет : 768  х 1024 px  (750 в Bootsrap сетке)

https://invis.io/FDBGD9RBM#/230719118_02_Search_Result_Advanced

 

Интерактив JS:

  • Открытие меню
  • Открытие Search settings
  • Открытие Filters, прокрутка Filters кнопкой “...”
  • Переключение по табам
  • Добавление элементов через “+”
  • Открытие More
  • Переключатель Email Alerts/Monitoring
  • Sticky header при прокрутке вниз
  • При нажатии на “Detailed statistics” показ “Back to search” области
  • Выпадающий список эмоциональной окраски публикации (красный/зеленый/серый).
  • Выезжающий набор операций с публикацией при нажатии на “...”
CSSHTMLJavaScript

Заявки фрилансеров