Верстка Сайта 08.09.2016

Макеты спросить у заказчика 

Адаптивность под все устройства

Адаптивная верстка данных макетов, c использованием SCSS, WOW.js + Animate.css,

все это дело правильно и качественно посадить на WP (натяжка).

Техническое задание на верстку Доставка 24.

Вот сам сайт http://dost24-webs.flipcat.ru/

Руководство верстальщику ( ОЗНАКОМИТЬСЯ ИЗНАЧАЛЬНО) http://dost24-webs.flipcat.ru/doc/

Сайт необходимо сверстать в точности как этот сайт https://zakazaka.ru/

Сайт должен быть адаптирован под все устройства, планшеты, мобильные и т.п.

Отображаться правильно, без изъян.

Сайт отрисован так же как сайт заказака. Все моменты при верстки надо сравнивать с сайтом заказака.

Важно – должны быть мягкие переходы, небольшие эффекты при наведении и нажатии мышки.

Имеется ввиду плавное затемнение и появление при наведении, кнопок и других частей сайта.

Затемнения/засветление при наведении на поиск, выбор города, отдельных полей и т.д. и т.п.

Важно что бы сайт не тормозил.

ГЛАВНЫЙ САЙТ ДОСТАВКА 24 

1. Главная страница 

«Чердак»

При наведении на лого Доставка 24 лого подсвечивается, при нажатии переходим на главную страницу.

при нажатии на кнопку партнёры попадаем на LP б2б

при нажатии на кнопку задать вопрос плавно всплывает окошко с формой.

Форма – при наведении на разделы, меняем цвет, все плавно, при нажатии на кнопку отправить фому, появляется плавно форма спасибо, форма отправленна.

«Слайдер»

Возможность нажатия на слайдере на кнопки ( конкретно отдельные кнопки)

так же можно нажать просто на слайдер и перейти по ссылке

«Раздел закажите доставку»

тоже плавные при наведении и нажатии затемнения на магазины, рестораны, бесплатная доставка и круглосуточно

при нажатии плано и красиво меняется картинка, выплывает или выезжает.

При наведении мышки на любую картинку все рестораны, пицца и прочее рисунок немного выдвигается, выплывает. Красиво мягко не резко.

«Раздел акции и скидки»

При наведении кантик планый зеленыйм цветом как на сайте.

При нажатии на него переходим в тот самый магазин, раздел акции в который мы нажали на глвной странице.

«Раздел скачать приложение»

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

«Раздел скачай бесплатно мобильное приложение»

при наведении на кнопки гугл и апстор кнопки выезжают, немного.

«Раздел делай как мы»

При наведении на слово слова выезжают, при нажатии на слово «Делай как мы» в низ выдвигается делай раз, потом делай два, потом делай три.

«Раздел ну что, проголодались?»

При наведении на кнопки, они затемняются.

При нажатии переходим в данный раздел.

«Раздел подписывайтесь на рассылку»

при нажатии кнопки как и везде немного затемняются, а при нажатии отправляется на на емаил dostavka24.info

«Подвал»

При наведении на все кнопка, соц сети, кнопки создание и продвижение сайтов они ивыдвигаются.

2. Станица при нажатии на категорию

В принципе, на макетах все показано что выделяется, что меняет цвет, выплывает или подчеркивается.

Думаю с этим у Вас не возникнут вопросы.

3. Страница при нажатии на магазин. Сам магазин или ресторан.

Важно! При наведении на товар/продукт/еду показывать описание, 

Если будет возможность что бы это окошко немного увеличилось, было бы лучше.

Смотрите как на сайт заказака.

При нажатии на товар, в низу появляется строка с заказом.

4. Корзина.

Тоже все должно быть понятно по макетам, что и где каким цветом и прочее.

LP Б2Б и LP Б2С

Верстка должна быть примерно как на этом сайте http://www.transitplus.ru/

Так же мягкие переходы, небольшие эффекты при наведении и нажатии мышки

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

Адаптивная верстка данных макетов, c использованием SCSS, WOW.js + Animate.css, все это дело правильно и качественно посадить на WP (натяжка).

Можно заменить на другие инструменты и языки схожие по инструментам и возможностям.

LP b2с

1. при наведении мышки на значок меню слева, оно должно реагировать как на сайте (тразит плюс), Далее.. как на сайте - означает как на сайте тразитплюс.

2. ссылки для партнёров и задать вопрос тоже как на сайте.

При нажатии на задать вопрос всплывает окошко с формой, после нажатия кнопку отправить появляется окошко спасибо.

при нажатии на для партнёров переходим на ЛП Б2Б

3. при наведении мышкой на ссылки скачать с апстора и плеймаркета кнопки увеличиваются или что нибудь там еще можно придумать?

4. колесико которое в низу на 2м макете должно быть как на сайте.

5. все существующие слайдеры на ЛП должны красиво перелистываться

6. слайд наши партнёры.

Всё должно быть в точности как на сайте.

7. при наведении мышкой на кнопки соц сетей должны выплывать как то, ну или что еще можно придумать?

8. при нажатии на "заказать обратный звонок"красиво всплывает иконка для заполнения.

После неё иконка спасибо

9. При нажатии на меню появляется окошко с анкетой при нажатии на неё скачивается файл. Надо уточнить до конца что там еще будет.

10. меню которое постоянно в верху должно быть затемнённое, цвета посмотреть можно.

LP b2b

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

Адаптивная верстка данных макетов, c использованием SCSS, WOW.js + Animate.css, все это дело правильно и качественно посадить на WP (натяжка).

Можно заменить на другие инструменты и языки схожие по инструментам и возможностям.

1. главная, задать вопрос, ограниченное предложение - при наведении так же как на сайте.

При нажатии на

- главную, переходим на сайт б2с

- задать вопрос, всплывает окошко для заполнения и потом после окошко спасибо.

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

2. При нажатии на первом слайде стрелочки в низ переходим на 2й слайд.

3. на 2-м слайде в форме для заполнения учитываем количество цифр и @ на емейл.

после нажатия на получить бесплатно консультацию неё появляется окошко спасибо. Такая же схема и в других формах лендинга б2б.

К с тате кнопочка крестика (закрытия) тоже должна быть как на сайте

4. слайдеры тоже самое как и в б2с

5. макет где ссылки на посмотреть рекламу, послушать аудио рекламу и т.п.

все кнопочки при наведении так же как на сайте и при нажатии:

- реклама в газетах и печ изданиях так же в низу всплывают фото или как нибудь красиво выезжают или как нибудь еще.

- контекстная реклама яндекс и гугл, мы переходим на поисковик где прописаны слова( уточните у меня позже)

- реклама на радио, ссылка на вк с аудио записями

- соц сети ссылками на соц сети и при наведении они тоже как то должны себя вести, при нажатии переходим по ссылкам

- ютуб, переходим на ютуб видео ролик

- реклама в подъездах и лифтах, так же с низу как на сайте о партнёрах при нажатии всплывают в низу фото.

5. слайд "КОМПАНИИ КОТОРЫЕ УЖЕ С НАМИ СОТРУДНИЧАЮТ"

всё тоже самое как на сайте .

При наведении на них они становятся цветными, при нажатии всплывает с боку информация о компании

6. тоже самое и с ссылками - кнопками на апстор и гугл как на б2с

Готовая работа подразумевает все рабочие ссылки и кнопки. + посадка и тестирование сайта на нашем сервере.

Сайт готов к работе.

Предоставляете ЛП на вашем хостинге, после оплаты ВЫ нам перегоняете на наш хостинг.