Сверстать адаптивно одну страницу

Бюджет: по договоренности
Заказчик выбрал исполнителя:
Олег Фронтэнд  
Нужно сделать верстку одной страницы – прикреплена к заданию.

Подробности:

- картинку в заголовке и цвет наложения (сейчас оранжевый должно быть легко менять)
- меню сверху, слева вверху, кнопки и вообще все элементы на которые подразумевается клик – при наведении становятся чуть светлее
- раздел "выбор диска": при нажатии на плашку диска он добавляется вверх, а около самой плашки появляется цифра слота, куда диск был добавлен. Этого нет в дизайне, объясню как сделать. вся плашка кликабельна. Крестиков справа дисков не будет, это атавизм.
- все кнопки при наведении слегка осветляются. При нажатии должен быть эффект легкого «проваливанию», как это бывает с обычными кнопками.

Блок: самая верхняя панель. Флаги при наведении осветляются. Значок скайпа – становится синим, значок трубки – зеленым.

Блок: Верхнее меню (Главная, Как выбрать и т. д.) – пункты должны легко добавляться и занимать верхнее пространство без ломки дизайна. При наведении на желтые не выбранные пункты они слегка осветляются. 

Блок: боковые плашки (три – cpu, memory, hdd&ssd) – при наведении слегка осветляются.

Блок: конфигурация. там список – значение …. цена. Нужно сделать так, чтобы вне зависимости от длинны значения и цены длинна точек подбиралась автоматически.

Блок: Как выбрать конфигурацию (внизу, со списком статей). При наведении на пункт меню он подсвечивается серым (оттенок подберем) по всей длинне блока.

Блок: Конфигурация сервера – HDD и SSD – там значок RAID. По умолчанию серый. При нажатии – синий. Диски должны быть одинаковые (проверка по id из JSON-файла). Если разные – плавно всплывающий див с сообщением об ошибке. Списки (там где красная стрелочка в круге) – выпадают. Визуально это выглядит как растягивание дива вниз поверх остального содержимого. У каждого пункта есть заголовок и краткое описание.

Блок: Ползунок с выбором ОЗУ – в скрипте должно быть легко указать минимальное и максимальное значения, а также шаг.

Блок: Выбор диска (большой черный) – появляется при нажатии на кнопку добавить диск.

Страница должна корректно отображаться во всех браузерах, в том числе под мобильными устройствами.

Не использовать тяжелые фреймворки типа бутстрапа и т. д. Все должно быть по-минимуму. Все стили – в одном файле – нужно свести кол-во подгружаемых элементов к минимуму. Иконки и небольшие картинки – одним файлом (в приведенном файле не все, вышлю еще – около 10, вместе с psd).


Пишите цену и срок иначе сразу отклоняю – считаю, что дал достаточно данных, чтобы вы могли их озвучить. Предложения связаться для обсуждения подробностей также будут откланяться, если есть вопросы – спрашивайте в комментариях к проекту. Поймите заказчика тоже – поступают десятки предложений, переписываться со всеми по базовым условиям просто невозможно.
Опубликован 12.07.2015 в 21:08

Выберите способ верификации:

Обновите страницу после прохождения верификации.