Zogin

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Zogin is a website template for yoga studios and teachers, built on Bootstrap 5. It ships with nine pages: home, about, classes, class details, pricing, blog, blog details, contact and FAQ. The layout is responsive and works in all popular browsers.

The home page has a hero slider, service cards, a why-choose-us block with animated counters, upcoming classes, a photo gallery, instructor cards, an appointment form and a testimonial slider. The inner pages add skill bars, a team slider, a class filter, three pricing plans, a blog with a sidebar and comments, a contact page with a click-to-load map and a working message form, and an FAQ accordion.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.4.1 and jQuery 3.3.1), compiled from Sass together with the theme, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero, team and testimonial sliders, native selects replace Nice Select, and a keyboard-operable off-canvas menu replaces SlickNav. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the nine pages together went from 16.8 MB and 348 requests to 5.1 MB and 239 requests, and the home page from 3.4 MB to 1.0 MB. Every photo has an AVIF version with a JPEG fallback, real dimensions and lazy loading below the hero, and phones get portrait crops of the wide banner photos. The plugin files and source archives are no longer in the download.
• No third-party requests: DM Sans is self-hosted, the Font Awesome 4 and Elegant Icons fonts are replaced by Lucide SVG icons and a small social-logo subset (the Twitter bird is now the X logo), the contact map loads 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 contact page loaded Google Maps.
• Working forms: the contact, comment, appointment and newsletter forms send through php/send-email.php with validation, a spam trap and in-page messages. Before, none of the 17 forms had an action, and most fields had no name. The blog search and the class filter are plain GET forms.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a real menu button, a mobile menu that keeps keyboard focus inside and closes with Esc, a Pages dropdown that opens from the keyboard (it opened on hover only), a keyboard-operable FAQ accordion, names on icon-only links, descriptive alt text, visible focus rings, reduced-motion support and WCAG AA text contrast, with darker greys for small text and a darker overlay behind the hero and banner text.
• Fixed: the dead # links in the menus, footers and cards now point to real pages, the second hero slide and the third team card no longer repeat the first, the contact details no longer show “Phone” four times, and the About link in the FAQ page menu works.
• Demo content: new photography, four different portraits in the testimonials, fictional contact details and a fictional studio address.