Snapshot

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Snapshot is a one-page website template for photographers, film makers and small creative studios, built on Bootstrap 5 with a dark, photo-led design. A full-screen hero opens the page, and a row of dots on the right side leads to each section: about the studio with a video link and a project counter, services with skill circles, a twelve-photo gallery, a testimonials slider and contact details with a contact form and a map. The layout is responsive and works in all popular web browsers.

Each gallery photo has a category and a title, and its zoom button opens the photo full size in a lightbox you can page through. A second page presents a single project with its photo, story, a quote and the project details.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3 and jQuery), compiled from Sass with the original proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the testimonials, PhotoSwipe replaces Magnific Popup in the gallery, Jarallax replaces Stellar on the hero, and small built-in modules replace AOS, Waypoints and animateNumber. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: both pages together went from 10.4 MB and 103 requests to 4.1 MB and 46 requests. Every photo has an AVIF version with the JPEG as the fallback, the hero is preloaded and sharp up to 4K screens, gallery tiles load compact copies while the lightbox opens 2000 × 3000 px originals, and the page-hiding preloader is gone.
• No third-party requests: Noto Sans and Noto Serif are self-hosted, Lucide SVG icons and a 1 KB social-logo subset replace four icon fonts (the Twitter bird is now the X logo), the map is an OpenStreetMap placeholder that loads only after a click, the video opens in a privacy-friendly dialog, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working contact form: it sends through php/send-email.php, with visible labels, validation, a spam trap and an in-page message. Before, it posted to the page itself and its fields had no names.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a labelled side navigation that also works from the keyboard, names on icon-only links, visible focus rings, reduced-motion support and WCAG AA text contrast, with a caption gradient on the gallery photos and a deeper taupe behind white button labels.
• Demo content: written studio copy in place of the placeholder text, titled gallery photos, five different testimonials, a project page with its own story, placeholder contact details, page titles, descriptions and social sharing tags, and new photos in the gallery and the film sections.