Верска

Sqwoz Bab & Gone.fludd & BlagoSqwoz Bab & Gone.fludd & Blago White - Братва На СвязиУ нас есть уже готовый дизайн лендинга, но есть небольшая проблема. Дизайнер, который нам его рисовал в один момент просто исчез. Соответственно, у нас есть только картинка без исходника. Нам надо сделать только верстку и чтобы она была адаптивная. Используя бутстрап 4 или 5 и интерактив просто на jQuery или на ванильном JS, без всяких наворотов типа вебпака, нода и прочих историй. Сейчас отправлю сам макет, оцените пожалуйста по стоимости и срокам

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

2. Использовать фреймворк bootstrap 4 или 5, на ваше усмотрение

3. В шапке, где написано "Charity" предпологается что там будет лого. Сделайте его картинкой

4. Пункты навигации в шапке, должны плавно скролить на соответствующие блоки, в мобильной версии навигация должна прятаться и появляться бургер кнопка, которая открывает навигацию мобильной версии

5. В первом блоке, там где нарисован африканский континент, а поверх нее кнопка плей: кнопка плей должна слегка пульсировать, при наведении плавно должен меняться цвет на такой же цвет, как рядом кнопка "Join now". При нажатии на плей, вместо африканского континента +/- по тем же размерам должно воспроизводится видео.

6. В первом блоке, на кнопке "Join now" надо сделать анимацию блика. Пример можно посмотреть при покупке кнопки телеграм премиум. Если не найдете напишите, отправлю пример.

7. Во втором блоке все просто. Там так же где кнопка плей, тоже должна пульсировать как в первом блоке.

8. В третьем блоке, слева где идет перечисление "source ... title", должен быть функционал аккордеон. То есть, нажимаем на один заголовок, другой открытый закрывается и меняется картинка справа. Плюс, там где картинка справа, помимо самой фотки, поверх нее есть другие элементы, надо сделать чтобы они либо сама анимировано не слишком быстро двигалась, либо чтобы был паралакс эффект.

9. В четвертом блоке, кнопка плей так же должна пульсировать. Ниже, где идет перечисление "Program ... title", надо реализовать функционал табиков. Кликаем на один табик, он становиться активным, контент в блоке ниже меняется

10. В пятом блоке "Who needs help", там где идут проекты, надо сделать слайдер. Надо чтобы он управлялся и с кнопок-стрелочек, что под текстом, и чтобы можно было свайпать пальцем и мышкой. Текст прокручиваться в слайдере не должен. Карточки с проектами должны заезжать под них

11. В шестом блоке, "Projects statistics", там где цифры они должны быстро набираться от 0 до цифры, которую мы укажем, как счетчиком

!2. В седьмом блоке все просто и достаточно очевидно

13. В футере все тоже довольно просто

14. Весь интерактив надо сделать на jQuery либо на чистом JS (желательно второе), без вебпака и nodejs

15. Скролинг страницы должно быть плавным

16. Все иконки должны быть в SVG

17. Шрифты не обязательно использовать те же самые, но надо чтобы они были максимально похожи и были бесплатные