Skater

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Skater is a website template for a skateboard coach or skate school, built on Bootstrap 5, with a dark page and orange accents. It has two pages: a one-page home and a blog post. The layout is responsive and mobile-ready, and it also suits other board and action sports.

The home page opens with a full-screen hero slider, followed by six services, “My Best Performance” and “My Best Mentor” blocks, a video that plays in a dialog, counters, the team, session pricing, an FAQ, a testimonial slider, the latest blog posts and a contact form. The blog post page adds comments, a comment form and a sidebar with search, categories and an author box. A sticky menu bar highlights the section in view, and both pages have a newsletter form in the footer.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.3.1 and jQuery), compiled from Sass with the template’s colours and the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero and testimonial sliders, and small built-in modules handle the video dialog, counters, scroll reveals, the mobile menu, the sticky menu bar and the forms; jQuery UI, Stellar, Waypoints, Magnific Popup, Slick and the other unused plugins are gone. Lucide SVG icons, six skateboard service icons drawn in the same line style and a Font Awesome 7 Brands subset replace the old icon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 3.3 MB and 32 requests to 0.84 MB and 18 requests, and the download from 3.8 MB to 1.7 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the fold, the hero photo is preloaded, and there is no preloader: the full-screen loading screen that hid the page until everything had loaded is gone.
• No third-party requests: Rubik and Oswald 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 video is a skateboarding clip that loads from YouTube’s privacy-enhanced player only after a visitor clicks play. Before, every page loaded its web fonts from Google Fonts.
• Working forms: the contact form, the blog comment form and the newsletter forms in the footer of both pages send through php/send-email.php, with validation, a spam trap, a recipient you set and an in-page message, and the mailer keeps visitor input out of the mail headers. Before, none of them could send: the fields had no names, the forms had no action and the newsletter button did not submit.
• Accessibility: a skip link and landmarks on both pages, one h1 per page without skipped heading levels, labelled form fields, a 44 px menu button, a mobile menu that keeps keyboard focus inside and closes with Esc, submenus that open from the keyboard (they opened on hover only), visible focus rings and 44 px slider controls (the hero arrows sit on dark discs and were barely visible before). Text meets WCAG AA contrast: the bright orange stays on headings, prices and counters on the dark page, buttons use a deeper orange with white labels, the testimonial names are white (they were black on the dark page), and a scrim keeps the hero and post titles readable on the photos.
• Fixed: after scrolling down and back to the top, the sticky header covered the top of the hero; the blog post’s menu button was black on the dark header and its menu pointed at sections that page does not have; the sidebar search button had a blank icon; and every link that went nowhere (the submenu, buttons, social and footer links, categories, tags and Reply links) now leads somewhere.
• Demo content: the two blog teasers have their own titles and dates (both read the same before) and link to the blog post, the FAQ has eight distinct questions (two were repeated six times), the testimonials and comments have distinct names, the post has skateboarding categories and tags, and typos are corrected.