Technical task - Riga69/golden-bear GitHub Wiki

Golden Bottle

Исходные данные

Файл golden_bottle.sketch — страница конкурса и UI kit.

Задача

Сверстать страницу конкурса, используя HTML5, CSS3 и JS/jQuery с умом :) Применить компонентный подход к веб - разработке, БЭМ и масштабируемую векторную графику SVG.

Адаптив

320px - 2000px. Поддержка ретины.

Поддержка последних версий браузеров:

• Google Chrome • Mozila Firefox • Opera • Safari • Edge

Анимация

Прелоадер — набор бутылок, который вы найдете в UI kit. Выбор анимации появления по своему желанию или последовательное проявление, одна за другой с изменением размера - 100%-120%- 100%. Добавляем бесконечную анимацию заливки, изменения в диапазоне от самой темной бутылки до самой светлой. Все интерактивные элементы должны реагировать на действия пользователя соответственно UI kit. Изменение стилей происходит плавно, без скачков. Смена выбора радио кнопки сопровождается сменой описания ниже.

Валидация

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