Лендинг Пейдж
Технологический стек:
HTML5: Семантическая структура страницы.
CSS3 (Vanilla CSS): Стилизация, адаптивная верстка (Media Queries), кастомные свойства (CSS Variables) для управления цветовой схемой и шрифтами.
JavaScript (ES6+): Логика взаимодействия (меню, изменение заголовка при скролле, активные ссылки).
ScrollReveal: Библиотека для создания плавных анимаций появления элементов при скролле.
Google Fonts (Poppins): Современная типографика.
Основные разделы и функционал
Header & Navigation:
Адаптивное меню (Mobile First).
Эффект scroll-header: изменение фона шапки при прокрутке страницы.
Активные ссылки: навигационная панель подсвечивает соответствующий раздел в зависимости от позиции скролла.
Home Section (Hero):
Главное изображение наушников с эффектом появления.
Описание продукта и кнопка "Add to Bag" с ценой.
Использование градиентного текста для заголовков.
Sponsor Section:
Логотипы партнеров или брендов, размещенные в адаптивной сетке.
Specs Section (Характеристики):
Подробная информация о технических параметрах (Bluetooth 5.2, Battery 40h, Fast charge, Siri support).
Визуализация характеристик с помощью SVG-иконок.
Case & Discount Sections:
Блок о защитном кейсе.
Акционный блок с интерактивной анимацией и кнопкой "Shop Now".
Products Section:
Карточки товаров в разных цветах (Black, Red, Silver, Green, Blue).
Каждая карточка содержит изображение, название, цену и кнопку покупки.
Footer:
Ссылки по категориям (Products, Support).
Форма подписки на новости.
Иконки социальных сетей и копирайт.
#Landing #HTML-верстальщик
HTML5: Семантическая структура страницы.
CSS3 (Vanilla CSS): Стилизация, адаптивная верстка (Media Queries), кастомные свойства (CSS Variables) для управления цветовой схемой и шрифтами.
JavaScript (ES6+): Логика взаимодействия (меню, изменение заголовка при скролле, активные ссылки).
ScrollReveal: Библиотека для создания плавных анимаций появления элементов при скролле.
Google Fonts (Poppins): Современная типографика.
Основные разделы и функционал
Header & Navigation:
Адаптивное меню (Mobile First).
Эффект scroll-header: изменение фона шапки при прокрутке страницы.
Активные ссылки: навигационная панель подсвечивает соответствующий раздел в зависимости от позиции скролла.
Home Section (Hero):
Главное изображение наушников с эффектом появления.
Описание продукта и кнопка "Add to Bag" с ценой.
Использование градиентного текста для заголовков.
Sponsor Section:
Логотипы партнеров или брендов, размещенные в адаптивной сетке.
Specs Section (Характеристики):
Подробная информация о технических параметрах (Bluetooth 5.2, Battery 40h, Fast charge, Siri support).
Визуализация характеристик с помощью SVG-иконок.
Case & Discount Sections:
Блок о защитном кейсе.
Акционный блок с интерактивной анимацией и кнопкой "Shop Now".
Products Section:
Карточки товаров в разных цветах (Black, Red, Silver, Green, Blue).
Каждая карточка содержит изображение, название, цену и кнопку покупки.
Footer:
Ссылки по категориям (Products, Support).
Форма подписки на новости.
Иконки социальных сетей и копирайт.
#Landing #HTML-верстальщик