Архив: Верстка главной страницы сайта с PSD макета. Киев.

Описание

Макет, см. файл web-storona-main-final.jpg



1. Исправить в верстке: В шапке написано "Skyp web-storona", исправить на: "Skype: web-storona"

2. Исправить в верстке: Во всех формах, где указано только "Ваш телефон" или "Ваша почта", везде указать "Ваш E-mail/телефон"



3. В макете отключены слои:

3.1. ФОРМА ЗАКАЗА ЗВОНКА copy, см. Изображение 2

3.2. MENU_ см. Изображение 1



Их надо включить и отверстать тоже. (Их отключили, что бы не закрывать основной макет)



Требования к качеству макета:



1. Валидный HTML, Валидный CSS

3. Одинаковое отображение в браузерах: FireFox, Opera, Chrome, Safary (при отсутствии устройст apple использовать сервис https://appetize.io/demo)

4. Верстку сразу оптимизировать для https://developers.google.com/speed/pagespeed/insights/ (Должны находится в зеленой зоне)

5. Обсудить, что можно из элементов страницы, вынести в CSS Sprite, и оптимизировать процесс загрузки страницы



Другие требования к верстке:



1. Все телефоны, по тапу на них в мобильном, должны открывать звонилку

2. При клике на Skype должено открыться приложение скайпа. То же самое с Viber, Telegram

3. При клике на почту, должна открываться программа отвечающая за отправку почты



4. На дизайне не отмечено, но над всем сайтом, должна быть строка прогресслайна, по прокрутке страницы, пример: https://forum.0day.kiev.ua/index.php?showtopic=549814, цвет прогресс-лайна, такой же, как квадратик внутри логотипа (оранжевый, точный цвет взять пипеткой)

5. На PC шапка должна при прокрутке трансформироваться в см. Изображение 3



само собой над ней, должен быть прогресс-лайн.



6. Шапка на мобильном устройстве см. Изображение 4



7. Цвет верхней части хрома, на мобильном, должен перекрашиваться в цвет шапки см. Файл 4_chrome_color.png



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



9. Слайдеры на странице



9.1. На PC так как показано на макете

9.2. На Мобильном, должно быть примерно, см. фал 5_right_slider.png (Источник, пример: https://farvater.travel/)



(главное выдержать идею - показывать часть или половину след. слайда, что бы юзеру было очевидно, что там есть еще что-то и он не ориентировался только по значкам влево/вправо)



10. Мобильное меню, см. файл 6_mob_menu_v5.jpg



11. Анимация:



11.1. Блок с цифрами: анимация цифр от 0 до 1372 и тд.

11.2. Блок с формой про идею: на движение мышки должен реагировать фон



Внимание! Что бы не создавать, нечестную конкуренцию с ценами, просьба:



Шаг 1: Сроки написать в поле "Описании" после нажатия на ссылку "Опубликовать своё предложение"

Шаг 2: Цену указать комментарием, под своим предложением через "Написать ответ", она будет доступна только заказчику.



Внимание! Все задачи, будут в системе управления проектами Redmine, нужно будет работать через нее. Дополнительные доступы выдам.



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

Город

Киев

Категория

Верстка