​​Тз программисту 
​​
​​программирование сайта ibravo.it
​​Задача: адаптивно сверстать и запрограммировать сайт по ремонту айфонов ibravo.it по макетам и по ТЗ, описанном ниже.
​​Дано:
  1. ​​Дизайн версии для ПК
  1. ​​https://drive.google.com/open?id=0B_UHzroffw_rMkx0bUFUSjFfN2M
  1. ​​Дизайн версии для смартфонов 420 пикселей https://drive.google.com/open?id=0B_UHzroffw_rRUVwRVp0TWdjdkE
  1. ​​Применять дизайн для мобильной версии при ширине 420 пикселей и ниже
  1. ​​Изображения айфонов для шага 1 (выбор модели)
  1. ​​https://drive.google.com/open?id=0B_UHzroffw_rX1BjUGUwSm1VOW8
  1. ​​Первая версия готового сайта, с которой можно взять очень много готового кода. Из того, что можно взять от туда, это:
  1. ​​Страница “Спасибо” ПК + мобильник - совпадение с текущим дизайном 95%
  1. ​​Готовая вёрстка поп-апа при клике на кнопку Hai domande - совпадение с текущим дизайном 100%
  1. ​​Готовая на 80% вёрстка поп апа “Почему Вам выгодно починить айфон, а не купить новый” - на старом сайте это реализовано одним из блоков, а на новом будет в поп-ап окне.
​​Техническое задание для версии для ПК:
  1. ​​Главная страница.
  1. ​​Страница должна размещаться в одном экране на всех популярных разрешениях.
  1. ​​На странице фоном планируется подключение видео (пока это не входит в ТЗ, но именно по этому нужно верстать в один экран)
  1. ​​Номер телефона в хедере - ссылка tel: с хавер эффектом из набора в макетах.
  1. ​​В футере кликабельный имейл i@ibravo.it со ссылкой mailto:
  1. ​​В футере ссылки Consigli utili / Come funziona / Contratto di garanzia сверстать и закомментировать (скрыть)
  1. ​​В футере при клике на поп-ап hai domande выводить этот поп-ап 
  1. ​​“Главная страница-поп ап.jpg”
  1. ​​в этом поп-апе не делать иконки месенджеров внизу, как показано в дизайне
  1. ​​В футере ссылку airweb.agency сделать кликабельной и вести на имейл zioncomputerservice@gmail.com
  1. ​​При клике на кнопку Scoprire il prezzo происходит переход на шаг 1 на страницу 1-3.jpg
  1. ​​При переходе со страницы на страницу применить прелоадер
  1. ​​Прелоадер
  1. ​​Прелоадер должен быть показан при загрузке страницы
  1. ​​Прелоадер должен заполняться цветом градиента снизу вверх синхронно с загрузкой страницы
  1. ​​Фон вокруг прелоадера должен быть в цвете 333333
  1. ​​Шаг 1 - выбор модели телефона / 1-3.jpg
  1. ​​Повторить пункты a / c / d / e / f / g главной страницы
  1. ​​При клике на ссылку torna indietro - переводить на предыдущую страницу
  1. ​​Цвет футера изменить на цвет фона блока Ti raggiungiamo in qualsiasi posto первой версии сайта http://ibravo.it/
  1. ​​Шаг 2 - выбор цвета модели / 2-3.jpg
  1. ​​Повторить пункты a / c / d / e / f / g главной страницы
  1. ​​При клике на ссылку torna indietro - переводить на предыдущую страницу
  1. ​​Под данной ссылкой показывать изображение выбранной модели из предыдущего шага.
  1. ​​Цвет футера изменить на цвет фона блока Ti raggiungiamo in qualsiasi posto первой версии сайта http://ibravo.it/
  1. ​​Изображения всех цветов и всех моделей айфонов взять с сайта http://premiumservice.store
  1. ​​Отношение моделей к цветам (у каких моделей какие цвета) взять тоже из этого сайта
  1. ​​При наведении на чекбокс с цветом - менять цвет айфона на изображении
  1. ​​Производить переход на следующий шаг 3 при клике на иконку с цветом.
  1. ​​При клике на Passo 1 производить переход на шаг 1
  1. ​​В заголовке страницы подставить выбранную модель телефона
  1. ​​Шаг 3 - выбор ремонта
  1. ​​Повторить пункты a / c / d / e / f / g главной страницы
  1. ​​При клике на ссылку torna indietro - переводить на предыдущую страницу