Доброго времени суток.
Необходимо сверстать одну страницу: https://yadi.sk/i/b_FkRa7Xs8GhS
Ее нужно сверстать кроссбраузерно (IE 9+, 9 включительно), адаптивно. HTML5, CSS3. Семантика должна быть.
Когда пользователь нажимает на кнопку из бокового меню, вместо текста появляется карусель (это есть в псд).
Так вот, это все должно происходить через ajax и со значком "Загрузка". Страница, к которой посылается ajax- запрос будет возвращать массив, элементами которого есть url картинки, текст-описание и ссылка (на котороую будет перекидывать при нажатии). Массив возвращается в формате json.
Также обратите внимание, в дизайне карусели, вы можете увидеть размытые фото препаратов. Так и должно быть. НО дизайн может слегка отличаться. Если вы хотите использовать какую-то готовую карусель, скиньте пожалуйста ссылку на нее, чтобы я посмотрел и сказал подходит или нет.
Также в дизайне этого, нету, когда отображается карусель, должен появляться крестик сверху справа от карусели при нажатии на который, карусель исчезает и пользователь опять видит текст как при начальной загрузки страницы.
У всего, что нажимается, должен быть ховерстейст. Если он не прорисован в дизайне, надо будет его вам придумать) Главное чтобы они все гармонировали со стилистикой сайта.
Страничка меленькая, но должна быть удаленькая: не хочу резких переходов используем css-transition или если уж совсем надо, jquery animation. Также при загрузке страницы должен быть лоудер - как здесь med-info.com.ua
Как страница будет выглядеть на меньших размерах экрана - чуть позже вышлю вам мокап, чтобы упростить вам задачу.
Желательно использовать препроцессор sass.
От вас хочу получить такую информацию:
1) Ваша предлагаемая цена за работу, если она отличается от моей.
2) Сроки
3) Пользуетесь ли вы цсс-препроцессором и если да, то каким?
4) В чем верстаете?
5) Пользуетесь каким-либо еще программами / утилитами при верстке?
6) Ссылки на две последние свои работы.
Дизайн на маленьких экранах:
Ширина 880 пкс и больше - все остается в таком же виде как и в исходнике. Блок с каруселью и текстом сжимается чтобы вместиться. При этом расстояние между этим блоком и боковым меню не меньше 30 пкс. Да при это не забывает про боковые паддинги у всего контейнера (карусель и боковое меню вместе) - 20 пкс каждый.
Дальше боковое меню становится выпадающим. Выглядеть это будет так: над текстом или слайдером будет кнопка с текстом "Препараты" такого же дизайна как неактивный пункт бокового меню ("Жінкам", "Родина"...) При нажатии на него вниз выпадает боковое меню (дизайн такой же). При нажатии на какой-то пункт, меню закрывается, теперь вместо "Препараты" будет показываться этот выбарнный пункт меню. Экран скролится вверх, чтобы эта кнопка (выпадающего бокового меню) была сверху. Теперь под ней мы видим карусель препаратов соответствующей категории.
Дальше при уменьшении экрана - ничего не меняется, просто становится уже. В какой-то момент у слайдера/карувели должны пропасть боковые стрелки - чтобы он поместился.
И у карты в какой-то момент должны появится боковые паддинги, чтобы человек на телефоне мог ее пролистать.
Верхнее меню, оформляется, как обычно, выпадающим. Куда и как всунуть лого - пожалуйста, подумайте.
