Landing Page

Technology stack:
HTML5: Semantic structure of the page.
CSS3 (Vanilla CSS): Styling, responsive layout (Media Queries), custom properties (CSS Variables) for managing color schemes and fonts.
JavaScript (ES6+): Interaction logic (menu, title change on scroll, active links).
ScrollReveal: Library for creating smooth animations of elements appearing on scroll.
Google Fonts (Poppins): Modern typography.

Main sections and functionality
Header & Navigation:

Responsive menu (Mobile First).
Scroll-header effect: background change of the header when scrolling the page.
Active links: the navigation panel highlights the corresponding section depending on the scroll position.
Home Section (Hero):

Main image of headphones with a fade-in effect.
Product description and "Add to Bag" button with price.
Use of gradient text for headings.
Sponsor Section:

Logos of partners or brands placed in a responsive grid.
Specs Section:

Detailed information about technical parameters (Bluetooth 5.2, Battery 40h, Fast charge, Siri support).
Visualization of specifications using SVG icons.
Case & Discount Sections:

Block about the protective case.
Promotional block with interactive animation and "Shop Now" button.
Products Section:

Product cards in different colors (Black, Red, Silver, Green, Blue).
Each card contains an image, name, price, and purchase button.
Footer:

Links by categories (Products, Support).
Newsletter subscription form.
Social media icons and copyright.
#Landing #HTML-developer