Boxus

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Boxus is a one-page website template for a web and graphic design studio or a small creative agency. Each section sits in a numbered colour box (green, amber or pink on a navy ground) that stays pinned while you scroll, and the menu bar takes the colour of the box under it. There are three pages: the one-page home and two case studies.

The home page opens with a logo and headline, followed by a services slider, a portfolio grid with a lightbox and a “Load more” button, studio history and a team slider, studio stories and quotes, a process list with a video, a feature carousel, skill bars and a contact form with a map that loads on click. The case studies show a project with a full-width image or an image slider, project details and a description.

What’s new in 3.0

• No CSS framework, as before, and plain JavaScript with no jQuery. Swiper 14 replaces the old carousel plugin on all five sliders, PhotoSwipe opens the portfolio images, a native dialog plays the video, CSS keeps the section boxes and the menu bar pinned, and Lucide SVG icons replace the icon font and PNG icons. npm run build (esbuild) makes one minified stylesheet and one script.
• Lighter pages: the three pages together went from 3.26 MB and 160 requests to 2.13 MB and 74 requests, and the home page from 1.81 MB and 99 requests to 1.01 MB and 39 requests. Images have AVIF versions with the JPEG as the fallback, real dimensions and lazy loading, and the full-page preloader is gone.
• No third-party requests: Roboto, Montserrat and PT Serif are self-hosted, and the map is an OpenStreetMap placeholder that loads only when the visitor clicks “Show map”.
• A working contact form: it validates in the browser, sends through the included PHP mail handler with a spam trap and shows its result on the page.
• Accessibility: a skip link, landmarks, one main heading per page, a keyboard-operable menu button, labelled fields and slider buttons, a visible focus ring, and deeper green and amber boxes and darker text colours where text failed WCAG AA contrast.
• Real demo content in place of the grey placeholder images and filler text: original portfolio and case-study artwork, studio and team photos, SVG section backgrounds, fictional studio copy and contact details, and every placeholder link pointing to a real section or page.