Sierra

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Sierra is a website template for a creative digital agency or a brand studio that works with start-ups, built on Bootstrap 5, with a pastel blob design. The layout is responsive and mobile-ready. It has eight pages: home, about, services, portfolio, blog, a single blog post, contact and elements.

The home page opens with a three-slide hero slider, followed by services, a testimonial slider in a pastel blob, the team, a contact form and an office section on a world map. The about page has a video, a testimonial slider and skill bars, the services page six service cards, animated skill rings and an FAQ accordion, and the portfolio page a project grid with working category filters. You will also find a blog with search, categories and tags, a blog post with comments and a comment form, a contact page with a working contact form and a map that loads on click, and an elements page with buttons, progress bars, accordions, rings and milestones. Like our other small business website templates, Sierra gives an agency, a start-up studio or another small business a ready-made site to present its services and work.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used a Bootstrap 4.0 beta and jQuery), compiled from Sass with the template’s Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 runs the hero slider with the same layout, fade, bullets and arrows, and replaces Owl Carousel on the two testimonial sliders. A CSS grid with the same masonry layout and a small filter script runs the portfolio, SVG rings replace the circle-progress plugin, a video dialog replaces Magnific Popup, and small built-in modules replace CounterUp, Waypoints and the form plugins. Lucide SVG icons and a Font Awesome 7 Brands subset replace Font Awesome 4.7. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 1,657 KB and 60 requests to 773 KB and 38 requests, and the contact page from 3,003 KB and 94 requests to 473 KB and 24 requests. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen, and the logos are SVG. The download went from 5.17 MB to 2.43 MB and still includes the Sass sources, now with the build tools.
• No third-party requests: Roboto and Open Sans are self-hosted, the Twitter bird is now the X logo, and a Google Analytics 4 snippet stays commented out until you add your own ID. The contact page map is an OpenStreetMap map that needs no setup and loads only when a visitor clicks “Show map”, and the about page video loads from YouTube’s privacy-enhanced player only after a click. Before, every page loaded its web fonts from Google Fonts, and the contact and elements pages loaded a map script.
• Working forms: the contact forms on the home and contact pages and the blog comment form send through php/send-email.php, and the footer newsletter through php/subscribe.php, each with validation, a spam trap, a recipient you set and an in-page message. Before, the contact script put the visitor’s input into the mail headers, the newsletter button and the comment form did nothing, and the blog search had no form.
• Accessibility: a skip link and a main landmark on every page, one h1 per page with headings in order, labelled form fields, names on icon links, a Blog submenu that opens from the keyboard, visible focus rings, an accordion with correct semantics, a hero slider that pauses on keyboard focus, and reduced-motion support. Text meets WCAG AA contrast, with darker greys and blue text, dark text on the pastel blobs, footer and banners, and white labels on a deeper brand gradient on the buttons, badges and slider arrows.
• Fixed: the three hero slides were identical and now have their own headlines; the portfolio filters really filter and fill whole rows, and the “Next” tile, an image of the word, is now a “Start a project” link; the blog search, categories and tags filter the posts, and each post opens its own content; the skill rings on the services and elements pages draw on scroll again; and the dark logo, which disappeared on the fixed header, is white on a navy bar. Every link now goes somewhere (214 pointed to #), and every page has one clear heading and its own title and description (every page was titled “Sierra”).
• Demo content: agency copy of the same length replaces the lorem ipsum, the office, phone numbers and email addresses are fictional, and typos, a second “Development” skill and a “Download test” service are corrected.