Archi

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Archi is a website template for architecture and interior design studios, built on Bootstrap 5. It has a transparent header with a hamburger menu that turns into a solid sticky bar, and a responsive, mobile-ready layout. There are eight pages: home, about, services, projects, blog, blog post, contact and elements.

The home page opens with a three-slide hero and continues with an about section with years of experience, three services, selected projects, a call-to-action photo band, the team, a video with a client testimonial and recent articles. You will also find a services page with six services, a projects page, a blog with a sidebar, a blog post with comments and a comment form, a contact page with a working contact form and a map that loads on click, and an elements page with typography, buttons, tables and forms.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4 and jQuery), compiled from Sass, and plain JavaScript with no jQuery. Swiper 14 runs the hero slider, PhotoSwipe the elements gallery, and Lucide SVG icons replace the icon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all eight pages together went from 30.1 MB and 534 requests to 5.6 MB and 210 requests; the home page from 10.2 MB and 72 requests to 0.9 MB and 32 requests. Every photo has an AVIF version with the original as the fallback, real dimensions and lazy loading below the first screen.
• No third-party requests: Poppins and Rajdhani are self-hosted, social logos come from a small built-in subset, the contact map is an OpenStreetMap map (no API key needed) and the video loads only when a visitor clicks them.
• Working forms with visible labels: the contact form, blog newsletter and comment form send through included PHP handlers with validation and a spam trap, and the blog search lists matching posts.
• Accessibility: a skip link, one main heading per page, keyboard-friendly menus, visible focus, and text and buttons that meet WCAG AA contrast (a deeper red for text and under white button labels, darker grey text).
• New architecture photos at full resolution and fictional demo content: studio copy on every page, distinct hero slides, services, projects, team and blog posts, and a fictional address, phone and email. Page titles, descriptions, social sharing tags and structured data are filled in.