Archlab

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Archlab is a website template for architecture studios, interior designers and building consultancies, built on Bootstrap 5. The layout is responsive and mobile-ready, the menu stays at the top of the screen as you scroll, the photo headers have a parallax effect and the sections fade in as they scroll into view. There are eight pages: home, about, team, services, projects, blog, blog post and contact.

The home page has a full-height hero with a video button, a services band, an about block with a quote form, animated counters, a project grid, a testimonials slider, pricing plans and recent blog posts. The inner pages add an about page with the quote form, counters, testimonials and pricing, a team page with eight architects, a services page with eight services and pricing, a projects page with large photo tiles, a blog, a blog post with comments, a comment form and a sidebar, and a contact page with a working contact form and a map that loads on click. Archlab gives you a ready-made site for an architecture or interior design studio.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1 and jQuery 3.2.1), compiled from Sass together with the theme and the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the testimonials slider, Jarallax replaces Stellar on the parallax headers, small built-in modules replace Waypoints, animate.css and the number counter plugin, and the unused Scrollax and Magnific Popup scripts are gone. Lucide SVG icons and a 1 KB social-logo subset replace Font Awesome 4.7 and Flaticon (the Twitter bird is now the X logo). npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 4.3 MB and 44 requests to 1.4 MB and 29 requests, and the contact page from 2.1 MB and 36 requests to 438 KB and 13 requests. Every photo has an AVIF version with the JPEG as the fallback, and the full-page preloader is gone. The download is now 5.9 MB (it was 4.7 MB) because it now includes the Sass sources and the build tools.
• No third-party requests: Nunito Sans is self-hosted, the contact page map is an OpenStreetMap map that loads only when a visitor clicks “Show map”, the “Watch our video” button plays a stock construction time-lapse in a dialog from YouTube’s privacy-enhanced player only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded Font Awesome from a CDN, its web fonts from Google Fonts and the Google Maps script, which threw an error on the seven pages without a map.
• Working forms: the quote form on the home and about pages, the contact form and the blog comment form send through includes/send-email.php, with validation, a spam trap and an in-page message, the quote form now asks for an email address so you can reply, and the sidebar search opens the blog. Before, the forms had no field names and posted nowhere, so nothing could be sent.
• Accessibility: a skip link and a main landmark on every page, one h1 per page with headings in order, a labelled menu button, labelled form fields, names on icon-only and image links, visible focus rings, reduced-motion support and WCAG AA text contrast: a darker green for green text, darker meta greys, navy text and icons on the green buttons, services band and play button (white on the green was 2.2:1), a deep green behind the white text of the quote panel, a dark shade behind the team names on their photos and a light shade behind the inner page titles on phones.
• Fixed: the Team menu item on every page and fourteen project links went to pages that do not exist, so the Team item now opens the team page and the home page project links open the projects page; the menu button, the quote form’s select arrow, the blog post icons, the footer heart and the team social links had icons that never showed (their icon fonts were never loaded) and now render; each service has an icon that matches it (two services shared one); and footer, blog, tag and pagination links that pointed to “#” now go to the matching pages.
• Demo content: a fictional address replaces a real street address, the brand is spelled ArchLab everywhere (it was spelled two ways), typos in a counter label and the footer are fixed, a leftover heading about WordPress themes in the blog post is replaced, the links to the closed Google+ network are gone, and three photos that showed product brands are replaced with Unsplash photos.