Sonar – Custom-scrolling Free HTML5 Photography Template

Sonar is a free, multi-page HTML5 photography website template built on Bootstrap 4 that delivers a custom-scrolling presentation style for image-heavy portfolios. It ships as a static HTML/CSS/JS kit with 7 HTML pages, a sticky navigation with burger menu, and a black-and-white aesthetic.

What is Sonar?

Sonar is a free, downloadable HTML5 photography template created by Colorlib and distributed through ThemeWagon. It takes demo images and your edited HTML/CSS content and produces a multi-page photography website with a custom scroll effect, carousel slider, preloader, and sortable gallery. The template runs entirely in the browser with no server-side dependencies, and it comes with SCSS source files for styling customization.

Key Features

• Custom scroll & preloader — the page uses a bespoke scrolling behavior and a full-width animated preloader on entry.
• Bootstrap 4 layout — built on the Bootstrap 4 grid and components, with SCSS files included for recompiling styles.
• Creative burger menu & sticky navigation — a burger-menu navigation that expands a multi-page menu while the header stays fixed on scroll.
• Sortable gallery & carousel slider — a filterable image gallery plus an Owl Carousel slider for presenting photo sets.
• Element page — a dedicated page containing ready-made components like progress bars, accordions, loaders, and count-up counters that you can copy onto other pages.
• Contact page with Google Maps — includes a Google Maps embed and custom icons on the contact section.
• Email subscription & social media icons — a built-in email subscription block and social icon links in the sticky header.
• Free & open source — the template is free for commercial use with lifetime updates and no license cost.

Who is it for?

• Photographers — build a personal portfolio site to show galleries, add an about page, and list contact details with map integration.
• Creative studios & freelancers — use the multi-page structure to create a small brochure site that separates portfolio, services, and contact sections.
• Web designers — grab the SCSS files and prebuilt components from the element page to prototype responsive photography layouts.
• Students & hobbyists — practice editing HTML/CSS by customizing a complete template without writing code from scratch.

What can you do with Sonar?

• Showcase a photo series: create a sortable gallery where visitors can filter images by category using the built-in gallery and hover effects.
• Launch a mini brand site: adapt the multi-page layout into an about, portfolio, and contact site for a photography business with Google Maps showing the studio location.
• Collect email leads: enable the email subscription block in the header to grow a mailing list for photography print sales or newsletters.
• Learn front-end customization: modify the 6 JavaScript, 6 CSS, and SCSS files to change animations, colors, and component behavior on the element page.

Pricing

Sonar is free to download from ThemeWagon. The license is open source, allows commercial projects, and includes lifetime free updates; no payment or credit card is required.

FAQ

Is Sonar free?

Yes, Sonar is free. The ThemeWagon download page shows a free download option with an open-source license that permits use in commercial projects and lifetime free updates.

What files are included in the download?

The package contains 7 HTML files, 6 CSS files, 6 JavaScript files, SCSS source files, and demo images. These cover all pages of the multi-page template plus ready elements like progress bars and accordions.

Which browsers does Sonar support?

Sonar is compatible with Chrome, Edge, Firefox, Mobile, Opera, and Safari according to the ThemeWagon compatibility list, so it works on desktop and mobile browsers.

Which framework does Sonar use?

Sonar is built on Bootstrap 4 and uses jQuery 2.2.4, FontAwesome, Themify icons, Owl Carousel, Magnific Popup, and Animate.css as its main libraries.