Сверстать landing + mobile-версию

Здравствуйте.

Необходимо сверстать landing на bootstrap + mobile-версию.

Комментарии:

1) Слово "Идефикс" - картинка, под которой идёт описание. Если описание больше, чем на одну строку, идёт смещение блоков ниже.

2) "Спецгости" - картинка-круг, которая отдельным слоем прикреплена к правому/левому краю экрана с заступом xx пикселей

3) Кнопка "Купить билет" изначально чёрная, при наведении становится красной

4) Внизу 4 столбца одинаковой ширины с выравниванием по левому краю, кроме столбца 4 - выравнивание по правому краю.

5) Полупрозрачность на текстовом блоке достигается посредством CSS. Текстовые блоки - 1/3 ширины страницы. Внутри них выравнивание текста идёт по центру.

6) Картинка на фоне растягивается по ширине страницы

Мобильная версия:

1) Блоки занимают 1/2 от ширины страницы

2) ОПЦИОНАЛЬНО (это значит, что это можно отключить или включить изменением одного параметра в коде страницы) на фотографию посредством CSS накладывается затемнение 30%

3) Плавающий блок спецгостей - абсолютная позиция с выравниванием по правому краю и полупрозрачностью 50%

4) Кнопки при нажатии становятся красными (как в основной версии).

5) Обратите внимание на распределение блоков. 1, 2 и 3 теперь с выравниванием по центру, 4ый с выравниванием по правому краю.

На страницу необходимо прикрутить проверку устройства. Если вход производится с мобильного телефона, должна отображаться мобильная версия. Если с PC, ноутбука или планшета - основная.

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

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