Верстка сайта по макету

Требуется сверстать сайт для компании ФОКС-СЭС-РФ.

1) Верстка должна быть на Bootstrap 3-4

2) Верстка должна быть адаптивной, адаптив сверстать на свой вкус.

3) Верстка должна быть полностью валидной, проверятся будет на сайте: https://validator.w3.org/

4) Показатели в Google Page Speed должны быть не меньше 70% для обеих версий сайта. (Мобильной и Десктопной)

5) Верхнее меню при прокрутке фиксируется. Пункт услуги должен иметь подпункты, разворачивающие меню, в котором идет перечисление всех услуг которые можно наблюдать в сайдбаре слева на дочерних страницах. Активный пункт меню подсвечивается красным, так же при наведенни на пункты меню они тоже приобретают красный цвет.

6) transition: all 0.2s; Для всех hover елементов.

7) Срок выполнения до 29.02.2020

8) Cсылка на макет: https://www.figma.com/file/FXmVXdMPA8XfOynxNUtIFJ/Untitled?node-id=63%3A11

9) Все кнопки на макете которые отображены как черные при наведении становятся красными, все кнопки которые на макете красные при наведении становятся черными, За исключением секции о мошенниках, там при наведении на кнопку курсор становиться pointer.

10) Секция "Безопасные препараты" на главной странице: Там должны быть возможность посмотреть сертификат в полноэкранном режиме, для этого используйте FancyBox 4й версии.

11) При нажатии на кнопку связаться, в footer, открывается popup с модальным окном, окно так же можете наблюдать в маете, внизу справа от макета главной страницы.

12) Везде где вы видите номер телефона, делайте ссылкой: , класс rotate-phone обязательно.

13) Слайдер с отзывами: Слайдом является просто картинка (скриншот) с viber-vats-upp или любого другого  места.  Можете сделать с помощью библиотеки flickity.pkgd.min.js

14) На дочерней странице вы можете заметить таблицу с ценой, tr - окрашивается в красный только при наведении. Адаптив: Хорошо сделано вот на этом сайте (https://sesuslugi.ru/uslugi/29-unichtozhenie-tarakanov.html) Табы(Для юр лиц, для котеджей для бытовок можно не делать) Главное что бы при мобильной версии таблица разбивалась на 3 разные, как это реализовано на сайте примере и в зависимости от выбранного варианта обработки с помощью select, показывается нужна таблица. 

15) После отправленной заяки должен выскакивать алерт показывающий что заявка отправленна. Для этого используйте библиотеку: https://sweetalert2.github.io/ . На данный момент алерт реализован на регионе уфа все того же сайта СЭС услуги. https://ufa.sesuslugi.ru/ . Там также отобраается алерт в случае ошибки, можете поотправлять пару тестовых, только пишите именно слово "ТЕСТ". 

16) Для слайдера на главной так же используйте библиотеку  flickity.pkgd.min.js. 

17) Левый сайд бар при мобильной версии переноситься вниз,под контент.

18) В некоторых формах вы можете заметить счетчики, они так же должны работать, и обновляться ежедневно без вмещательств. Обновление счетчика через день, промежуток акции +4 часа 22 минуты с момента захода пользователя. 

Калькулятор:

Калькулятор представляет из-себя полу квиз. В макете отображены все шаги, но при его работе так быть не должно. При открытии страницы пользователь видит только первый шаг, на нем он может выбрать несколько вариантов. Изначально кнопка далее является не активной, на нее нельзя нажать. При выборе варианта круг в котором нарисован силует насекомного превращается в прицел и соответснвенно кнопка далее становиться активной. Будет круто если на этом шаге добавить звук выстрела. Далее, блок "Заг 1" - проподает и появляется шаг №2, там пользователь так же может выбрать несколько вариантов, так же при нажатии на кнопку "назад" он возвращается на шаг #1. При нажатии на далее, блок "Шаг 2" пропадает и появляется блок "Шаг 3". На этом этапе пользователь может выбрать только 1 вариант из 3ю. Шаг №4 аналогично с 3им, только 1 вариант можно выбрать. Далее идет шаг №5 пользователь получает списком все выбранные им услуги, итоговую стоимость, а так же внизу справа эту же стоимость с учетом скидки. При вводе телефона, на почту прислыается письмо со всеми выбранными вариантами пользователя и его телефоном. 

Проект является полу тестовым, при успешном исполнении будут передоваться другие с более высоким бюджетом. Постарайтесь показать свой скилл максимально. Припроцессор желательно использовать LESS или Scss. Сроки выбопления можно будет увеличить при необходимости в разумных пределах. До +3дней. Еще дневно в 14:00 по МСК отправляйте ссылку на проект для просмотра. В конце от вас архив с файлами.