German Roofing Contractor Presentation Website

This static, professional website showcases the services of a German company specializing in roof construction and repairs. Developed without frameworks, using only core technologies (vanilla HTML, CSS, and JavaScript), it delivers maximum performance and universal compatibility. The modern, minimalist design highlights German quality, with dedicated sections for services (installation, repairs, maintenance), completed projects (interactive photo gallery), and client testimonials. The site includes a real-time validated contact form, an interactive location map, and an FAQ section. Fully responsive, it adapts flawlessly to all devices—from desktop to mobile—ensuring an impeccable visual experience for potential clients. Technical Features Structure: HTML5: Optimal semantic structure (header, nav, main, section, footer). CSS3: Responsive design (Flexbox/Grid), subtle animations, CSS variables for theme. Vanilla JavaScript: Dynamic interactions (photo gallery, form validation, mobile menu). Key Features: Interactive Photo Gallery: Navigation through projects with lightbox (no external libraries). Contact Form: Real-time validation (regex for email/phone), submission via mailto or external service (e.g., Formspree). Interactive Map: Embedded Google Maps with custom marker. FAQ Section: Accordion open/close with CSS animations. Testimonials: Carousel with navigation via arrows/dots. Performance: Fast Loading: No external dependencies, image optimization (WebP), automatic minification (Gulp/Webpack). SEO Optimized: Descriptive meta tags, semantic structure, microdata for services. Security: XSS Protection: Input sanitization in JavaScript. Mandatory HTTPS: SSL certificate required.

Tech Stack