Mosaic

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Mosaic is a website template for architecture, interior design and construction studios, built on Bootstrap 5. The layout is responsive and works in all popular web browsers. It comes with eight pages: home, about, project, services, team, blog, blog post and contact.

The home page opens with a two-slide hero, then an about section, animated counters, a work-flow and services block, a project grid that filters between interior and exterior work, a testimonial slider, the team, recent blog posts and a client slider. The project page opens each photo in a lightbox, the blog has a sidebar and a post page with comments, and the contact page has a working form and a click-to-load map. Mosaic gives you a ready-made site to present your studio and its projects.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1 and jQuery), compiled from Sass with the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel, PhotoSwipe replaces Magnific Popup, Jarallax replaces Stellar and small built-in modules replace the scroll animations and counters. npm run build (Dart Sass and esbuild) compiles the stylesheets and one script.
• Lighter pages: all eight pages together went from 19.9 MB and 378 requests to 7.9 MB and 239 requests (the home page from 3.6 MB to 1.8 MB). Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screens, and the home page preloads its hero photo.
• No third-party requests: Poppins is self-hosted, the Ionicons, icomoon and Flaticon icon fonts are replaced by Lucide SVG icons and a small social-logo subset (the Twitter bird is now the X logo), the Google Maps script is replaced by a map that loads only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded Google Fonts and the Maps API.
• Working forms: the contact form, the blog comment form and the newsletter box on every page now send through PHP handlers with validation, a spam trap and an in-page message. Before, none had field names or an action, so nothing could be sent.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, labelled form fields, names on icon-only links, visible focus rings, reduced-motion support and WCAG AA text contrast, with darker greys for meta text, section introductions and category counts.
• Fixed: the Interior and Exterior links above the projects now filter the grid (they did nothing), the contact page no longer leaves a section unclosed, footer, blog and sidebar links that pointed to # go to real pages, the home page has one h1 instead of two, and a missing script file that returned a 404 on every page is gone.
• Demo content: new Unsplash photos for the heroes, projects and blog, initials avatars in place of portraits, fictional names, address, phone and email, and architecture copy in place of placeholder text.