Концепт: лендинг конференции «Сигнал» — таймер, программа, тарифы на JavaScript

Описание

Спроектировать и сверстать концепт лендинга конференции о продуктах и данных «Сигнал». Заказчика нет, мероприятие вымышленное. Задача — показать структуру события: дата, обратный отсчёт, ключевые цифры, программа двух дней, спикеры, тарифы билетов. Дизайн, адаптивная вёрстка на HTML/CSS и интерактив на чистом JavaScript.

Решение

— Спроектировала структуру лендинга: первый экран с фото сцены, датой, заголовком и описанием, блок ключевых цифр, программа, спикеры, тарифы.
— Сверстала страницу на HTML и CSS с адаптивом под мобильные: на телефоне таймер и цифры перестраиваются, доклады в одну колонку, вкладки программы прокручиваются по горизонтали.
— Написала на чистом JavaScript таймер обратного отсчёта до начала конференции: дни, часы, минуты, секунды, обновление каждую секунду.
— Реализовала программу с вкладками «День 1» и «День 2» и метками потоков: переключение контента без перезагрузки.
— Сделала карточки спикеров.
— Добавила интерактив для тарифов: при клике выбранный тариф подсвечивается, строка покупки внизу обновляет название и цену.
— Проверила адаптивность и корректность работы интерактива.

Результат

Открыла готовый концепт в браузере и проверила: таймер, переключение вкладок и выбор тарифа работают, страница адаптирована под телефон и планшет. Реальных метрик нет, потому что это концепт без заказчика.

Презентация проекта