Stellar

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Stellar is a one-page website template for creative, branding and digital agencies, with a dark, bold design, Montserrat headings and an orange accent. It has no CSS framework and runs on plain JavaScript; the layout is responsive and works in all popular web browsers. It comes with the one-page site and a style guide page.

The page opens with a full-screen hero with a parallax photo and a video link, then an About section with the agency’s four-step process, six services on a dark photo background, a works grid with a lightbox gallery, a testimonial slider, a client logo grid, animated statistics and a contact section with the address, social links, a contact button and a newsletter form. The style guide shows the typography, lists, buttons, skill bars, tables, form fields, alert boxes and responsive media.

What’s new in 3.0

• Plain JavaScript with no jQuery (the earlier release used jQuery 3.2.1 and a bundle of jQuery plugins). Swiper 14 replaces Slick on the testimonial slider, PhotoSwipe 5 replaces PhotoSwipe 4 in the works gallery (with zoom and real image sizes), Jarallax replaces parallax.js on the hero, a native dialog plays the hero video, and small built-in modules replace AOS and the Waypoints counters. Lucide SVG icons and a small social-logo subset replace Font Awesome 5 and the old icon files (the Twitter bird is now the X logo). npm run build (esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 3.9 MB and 47 requests to 1.8 MB and 36 requests, the style guide from 4.3 MB and 39 requests to 0.9 MB and 13, and the download from 7.4 MB to 6.7 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the hero, the works thumbnails pick the right size for the screen, and the full-screen preloader is gone, so the page shows at once.
• No third-party requests: Montserrat, Merriweather and Libre Baskerville are self-hosted, the hero and style-guide videos load from the video site only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its fonts from Google Fonts and the style guide loaded a video player at page load.
• Working forms: the newsletter form checks the address and shows clear messages, and connects to Mailchimp once you add your list’s URL; the style guide’s sample form checks its fields and shows a status line.
• Accessibility: a skip link and a main landmark, one h1 per page, a real menu button that closes with Esc, names on the social and icon links, visible focus rings, a works overlay that also opens from the keyboard, reduced-motion support and WCAG AA text contrast, with a darker orange for text and button fills on light backgrounds, a lighter orange on the dark sections and lighter greys for the statistics and contact labels.
• Fixed: the hero photo depended on a parallax script and stayed black without it, the hover overlay on the works grid blocked the project links, “Let’s Talk” scrolled back to the About section instead of opening an e-mail, the e-mail link in the contact headline was nearly invisible on the dark background, and the style guide’s alert close icons did not display.
• Demo content: fictional client logos, testimonial names, address and contact details, and five works photos with camera brand markings or identifiable people are replaced with Unsplash photos.