About This Template
A premium, framework-free HTML/CSS/vanilla-JS template for construction, development, and architectural firms. Built bespoke from the subject — not a recolored scaffold.
CONSTRA is part of the uiuxlabz collection — a set of premium, framework-free HTML templates designed from each subject to feel genuinely unique. Open the folder, edit the text and tokens, and you have a production-ready website for a real estate & construction business.
Key Features
- ✓Hero carousel — 3-slide auto-advancing image carousel with crossfade, dot navigation, and vertical text sidebar
- ✓Vertical sidebar — "Est. 2008 / Build Better" in vertical writing-mode with terracotta accent line
- ✓Counter band — 4 animated metrics (240+ projects, 16 years, 85+ team, 12 awards) with count-up on scroll
- ✓Vertical timeline — 5 alternating milestones (2008-2024) with terracotta dots and parallax background
- ✓About mosaic — 3-image grid (main + 2 side) with hover zoom
- ✓Service cards — 6 numbered modules in 2-column grid with image, description, and inclusion lists
- ✓Blog grid — 4-column cards with date labels, titles, and excerpts
- ✓CTA banner — full-width earth-toned section with background image overlay
- ✓Contact form — first/last name, email, phone, service dropdown, project details textarea
- ✓Contact info — phone, email, office address, business hours with icon cards
- ✓Embedded map — OpenStreetMap iframe on contact page
- ✓Scroll reveals — IntersectionObserver with staggered delays (`.reveal-delay-1` through `.reveal-delay-3`)
- ✓Counter animation — `data-count` elements count from 0 to target with cubic easing
- ✓Timeline parallax — subtle background shift on scroll for depth
- ✓Navbar — transparent on hero, solid cream on scroll with shadow, hamburger menu for mobile
- ✓Page headers — parallax background images with breadcrumb navigation
- ✓Footer year — auto-updating copyright year
- ✓Responsive — 3 breakpoints (1024px, 768px): stacked grids, hidden sidebar/stats, mobile nav drawer, single-column timeline
- ✓Original imagery — 19 source images from the original template (carousel, about, blog, service, footer)