ГЕНИЙ
ГЕНИЙ — Лендинг-страница учебного курса
Лендинг по макету из Figma с современным дизайном, акцентами на CTA и четкой структурой. Использованы HTML, CSS и JavaScript без сторонних фреймворков.
Технологии
HTML5
CSS3
JavaScript (таймер, скролл, логика изменения цен)
Техническое задание
Верстаем ПК версию 1в1 как на макете, мобильную версию можно адаптивно сделать самому, но чтобы это круто выглядело. (для мобильной версии есть отдельно промальованный блок “Программа курса”).
Две кнопки “Записаться на курс”, что в первом блоке ведут плавным скроллом к пакетам “Формат участия”, на кнопках ставим плавную анимацию со сменой фона кнопки с фиолетового на белый.
Блок “Программа курса”, каждый модуль плавно открывается выпадающим элементом снизу, его можно раскрыть и открыть, нажав по блоку “Модуль…”. Каждый урок имеет свое отдельное описание (названия уроков и описание можно взять с макета и под каждый модуль сделать одинаковые). В каждом уроке есть кнопка “Забронировать место на курс”, которая ведет к блоку с пакетами “Формат участия”.
Блок “Выберите свой формат участия” имеет таймер до следующей пятницы до 23:59, каждый пункт в форматах участия, где рядом с ним есть иконка, имеет свою подсказку при наведении, на каждый пункт можно поставить одинаковую подсказку, которая есть на макете. На ценах в этом блоке нужно поставить скрипт, который вместе с таймером в заданную дату будет автоматически изменять цены, можно измененные цены поставить на 1 тыс. грн больше, и так 4 раза. То есть, если пакет за 10080, то следующая цена 11080, следующая 12080 и т.д.
Блок “Рассрочка” имеет посередине дедлайн “Предложение действует до:”, там установить скрипт, который берет сегодняшнюю дату и добавляет +2 дня к этой дате.
Статус выполнения
ПК версия 1:1 с макетом
Плавный скролл и анимации кнопок
Выпадающие модули программы
Подсказки при наведении
Таймер до пятницы
Автоматическая смена цены (4 этапа)
Скрипт рассрочки (плюсует 2 дня к текущей дате)
Проект не использует сторонних библиотек или фреймворков
Весь код написан вручную с фокусом на чистую верстку и функциональность.
Лендинг по макету из Figma с современным дизайном, акцентами на CTA и четкой структурой. Использованы HTML, CSS и JavaScript без сторонних фреймворков.
Технологии
HTML5
CSS3
JavaScript (таймер, скролл, логика изменения цен)
Техническое задание
Верстаем ПК версию 1в1 как на макете, мобильную версию можно адаптивно сделать самому, но чтобы это круто выглядело. (для мобильной версии есть отдельно промальованный блок “Программа курса”).
Две кнопки “Записаться на курс”, что в первом блоке ведут плавным скроллом к пакетам “Формат участия”, на кнопках ставим плавную анимацию со сменой фона кнопки с фиолетового на белый.
Блок “Программа курса”, каждый модуль плавно открывается выпадающим элементом снизу, его можно раскрыть и открыть, нажав по блоку “Модуль…”. Каждый урок имеет свое отдельное описание (названия уроков и описание можно взять с макета и под каждый модуль сделать одинаковые). В каждом уроке есть кнопка “Забронировать место на курс”, которая ведет к блоку с пакетами “Формат участия”.
Блок “Выберите свой формат участия” имеет таймер до следующей пятницы до 23:59, каждый пункт в форматах участия, где рядом с ним есть иконка, имеет свою подсказку при наведении, на каждый пункт можно поставить одинаковую подсказку, которая есть на макете. На ценах в этом блоке нужно поставить скрипт, который вместе с таймером в заданную дату будет автоматически изменять цены, можно измененные цены поставить на 1 тыс. грн больше, и так 4 раза. То есть, если пакет за 10080, то следующая цена 11080, следующая 12080 и т.д.
Блок “Рассрочка” имеет посередине дедлайн “Предложение действует до:”, там установить скрипт, который берет сегодняшнюю дату и добавляет +2 дня к этой дате.
Статус выполнения
ПК версия 1:1 с макетом
Плавный скролл и анимации кнопок
Выпадающие модули программы
Подсказки при наведении
Таймер до пятницы
Автоматическая смена цены (4 этапа)
Скрипт рассрочки (плюсует 2 дня к текущей дате)
Проект не использует сторонних библиотек или фреймворков
Весь код написан вручную с фокусом на чистую верстку и функциональность.
Украина 
Свободен для работы