Product Description
What's Inside the Template
The single HTML file is 46,700+ characters of pure HTML5 + CSS3 + Vanilla JS with zero external frameworks. Here's everything included:
Sections Built
Sticky Navbar — gradient logo, nav links, angular CTA button, hamburger mobile menu with full-screen overlay.
Hero Section — full-viewport, animated diagonal geometric pattern, skewY overlay, two angular CTA buttons, diagonal clip-path divider.
Services (6 cards) — 3-col grid, accent gradient top-border, hover clip-path morph + glow effect.
About / Brand Story — two-column layout, angular image frame, animated stat counters (10+, 500+, 1200+).
Process Timeline — 4-step flow with octagon-shaped numbered badges and connecting gradient line.
Portfolio Masonry — 6-item grid with 2 large items, gradient placeholder backgrounds, hover reveal overlay.
Testimonials (3 cards) — glassmorphism cards with backdrop-filter: blur, angular clip-path.
Team (4 members) — angular photo frames, social icon badges.
CTA Banner — full-width accent gradient with diagonal top/bottom cuts.
Footer — 4-column layout, social icons, legal links bar.
Design Details Applied:
All corners are sharp/angular — clip-path: polygon() used throughout, zero border-radius.
CSS variables for all colors and gradients in :root.
Bebas Neue headings + Inter body from Google Fonts.
Scroll-triggered fade-in-up animations via Intersection Observer API.
Counter animation triggers when About section enters viewport.
Fully responsive at 480px, 768px, 1024px breakpoints.
How to Use:::
Download the luxe_atelier.html file and open directly in any browser — no server needed. Since you're working with PHP on your platforms, you can split the