LUMÉ — Online store of natural cosmetics Landing page / Fr
LUMÉ — DEMO Online Store of Natural Cosmetics
Landing Page / Frontend Development
About the Project
LUMÉ is a conceptual online store of natural cosmetics for the Ukrainian market. The project is implemented as a full-fledged single-page landing with an emphasis on premium aesthetics, clean design, and conversion.
What has been implemented
UI/UX
Responsive layout (mobile-first) — correct display on all devices
Animated header with scrolling and mobile burger menu
Hero section with italic accents, statistics, and CTA buttons
Scrolling marquee with brand advantages
Product filtering by categories (All / Face / Body / Hair)
Product cards with hover effects and "Add to Cart" button
Sections: categories, bestsellers, weekly promotion, advantages, reviews, footer
Cart functionality
Adding/removing products without page reload
Product counter in the header with dynamic updates
Real-time order total calculation
Slider cart from the side of the screen (drawer)
Technical
Clean HTML5, CSS3, Vanilla JS — no frameworks
CSS variables for a unified design system
Smooth scrolling to sections via navigation
Optimized images through Unsplash CDN
Stack
HTML5 CSS3 JavaScript (ES6+)
Result
A prototype of the store ready for client presentation with a complete UX flow: from the first screen to order placement.
Landing Page / Frontend Development
About the Project
LUMÉ is a conceptual online store of natural cosmetics for the Ukrainian market. The project is implemented as a full-fledged single-page landing with an emphasis on premium aesthetics, clean design, and conversion.
What has been implemented
UI/UX
Responsive layout (mobile-first) — correct display on all devices
Animated header with scrolling and mobile burger menu
Hero section with italic accents, statistics, and CTA buttons
Scrolling marquee with brand advantages
Product filtering by categories (All / Face / Body / Hair)
Product cards with hover effects and "Add to Cart" button
Sections: categories, bestsellers, weekly promotion, advantages, reviews, footer
Cart functionality
Adding/removing products without page reload
Product counter in the header with dynamic updates
Real-time order total calculation
Slider cart from the side of the screen (drawer)
Technical
Clean HTML5, CSS3, Vanilla JS — no frameworks
CSS variables for a unified design system
Smooth scrolling to sections via navigation
Optimized images through Unsplash CDN
Stack
HTML5 CSS3 JavaScript (ES6+)
Result
A prototype of the store ready for client presentation with a complete UX flow: from the first screen to order placement.