Maharatri — Hindu Temple & Spirituality

Overview

A devotional HTML template for Hindu temples, ashrams, and spiritual organisations. Maharatri provides pages for pujas, holi celebrations, donations, events, and volunteer management, supported by a shop, broadcast page, and a warm, culturally rich design language.

What’s included

3 homepage variations
Puja archive and puja detail pages
Holi festival pages (archive and detail)
Events archive and event detail
Donation pages and donation archive
Services (2 layout options)
Volunteers archive and volunteer profile
Shop, product single, cart, checkout, wishlist
Broadcast, blog, FAQ, and contact pages

📄 30 HTML files

Getting Started

Thank you for choosing Maharatri. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — all files are ready to use as-is.

2. Deploy to a server

Upload the entire template folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All styling lives in assets/css/style.css. Edit colours, fonts, and spacing there. HTML pages are straightforward and well-structured — open any page in a code editor to modify content directly.

Tip: We recommend using VS Code with the Live Preview extension for the smoothest editing experience.

File Structure

Below is an overview of the key files and folders included in this template.

`index.html / home-v2.html / home-v3.html`	Homepage variations
`puja.html / puja-details.html`	Puja pages
`holi.html / holi-details.html`	Holi festival pages
`events.html / event-details.html`	Events pages
`donation.html / donation-archive.html`	Donation pages
`services.html / services-2.html`	Services pages
`volunteers.html / volunteer-detail.html`	Volunteer pages
`shop.html / product-single.html`	Shop and product
`cart.html / checkout.html / wishlist.html`	E-commerce flow
`broadcast.html / blog-grid.html / blog-details.html`	Content pages
`about-us.html / faq.html / contact-us.html / 404.html`	Info pages
`assets/css/ assets/js/`	Stylesheets and scripts

Bootstrap 5 Guide

This template is built on Bootstrap 5.3.3. If you plan to add new components or customise existing ones, here is a quick reference for the most common Bootstrap 5 patterns.

Interactive attributes

Bootstrap 5 uses data-bs-* attributes. If you copy a component from an older Bootstrap 4 tutorial, update the attributes as shown:

Bootstrap 4

data-bs-toggle="modal"data-bs-target="#id"data-bs-dismiss="modal"data-bs-toggle="tooltip"

Bootstrap 5

data-bs-toggle="modal"data-bs-target="#id"data-bs-dismiss="modal"data-bs-toggle="tooltip"

Spacing & text utilities

Bootstrap 4

ml-* / mr-*pl-* / pr-*text-start / text-endfloat-start / float-end

Bootstrap 5

ms-* / me-*ps-* / pe-*text-start / text-endfloat-start / float-end

Common class changes

Bootstrap 4

..form-select.close.badge-primary.form-row

Bootstrap 5

.mb-3.form-select.btn-close.text-bg-primary.row.g-2

Need more? The full Bootstrap 5 migration guide is at getbootstrap.com/docs/5.3/migration/.

Accessibility (ARIA) — v1.2.0

Version 1.2.0 adds a full set of WCAG 2.1 AA accessibility enhancements. Every change is non-visual — the design, layout, and colours are identical to v1.1.0. Three files are touched per template: an HTML page, style.css, and the main JavaScript file.

Zero visual impact. All ARIA additions are invisible on-screen. They improve screen reader output and keyboard navigation without changing a single pixel of the design.

What was added

`[HTML] Skip link`	A "Skip to main content" link placed as the very first element inside `<body>`. Sighted keyboard users can Tab to it; screen reader users hear it immediately on page load.
`[HTML] <main> landmark`	`<main id="main-content">` now wraps all page body content between the closing `</header>` and the opening `<footer>`. Screen readers expose this as the primary content region.
`[HTML] Image alt=""`	Decorative `<img>` tags that were missing an `alt` attribute have had `alt=""` added. This tells screen readers to skip them.
`[CSS] Skip-link styles`	The skip link is hidden off-screen by default (`top:-100%`) and animates into view only when focused via keyboard. Added at the bottom of `assets/css/style.css`.
`[CSS] :focus-visible`	A 3px outline ring appears on interactive elements (`a`, `button`, `input`, etc.) only when navigated by keyboard. Mouse clicks are completely unaffected because `:focus-visible` never fires on pointer events.
`[JS] ARIA auto-labels`	A self-contained IIFE appended to `main.js` runs on `DOMContentLoaded` and assigns `aria-label`, `role`, `aria-expanded`, and `tabindex` to social links, slider arrows, nav togglers, back-to-top buttons, and close buttons.

Accessibility Widget

A floating trigger button (bottom-left, wheelchair icon) that opens a side panel. Visitors can adjust font size, line spacing, contrast, colour filters, cursor size, animations, and more. Settings persist across pages via localStorage.

Already installed. The widget is pre-installed in assets/accessibility/ and the script tag is already present before </body> on the homepage.

How to add the widget to additional pages — Add one line before </body> on any HTML page:

<script src="assets/accessibility/assets/js/accessibility.js"></script>

The script self-bootstraps — it injects its own CSS and loads the panel HTML automatically. No extra <link> tag needed.

How to remove the widget — Two steps:

HTML	Delete the `<script src="assets/accessibility/assets/js/accessibility.js"></script>` line from every HTML page that includes it.
Files	Delete the entire `assets/accessibility/` folder. No other project files are modified by the widget.

How to change the trigger position — Open assets/accessibility/assets/css/accessibility.css, find the .acw-logo-trigger rule, and adjust bottom and left:

.acw-logo-trigger {
    bottom: 95px; /* distance from the bottom of the viewport */
    left: 0;      /* 0 = flush with the left edge */
}

How to change the panel colours — In the same CSS file, locate the :root block near the top and update the two main custom properties:

--acw-primary: #1e2a3b;   /* panel header & trigger background */
--acw-accent:  #00c4a1;   /* active-state & highlight colour  */

How to clear a user’s saved settings — Preferences are stored under the localStorage key acw-settings. To reset programmatically, add this anywhere in your page JS:

localStorage.removeItem('acw-settings');

5. Remove All ARIA Features

If you prefer to strip every accessibility addition, follow these four steps:

HTML (all pages)	Delete the `<a class="skip-link" …>` line and the `<main id="main-content">` / `</main>` pair from each `.html` file.
CSS — skip link	In `assets/css/style.css`, find the block marked `/* Skip Navigation Link */` and delete it along with the `.skip-link:focus { … }` rule below it.
CSS — focus ring	In the same file, find the block marked `/* Keyboard Focus Indicators */` and delete it.
JS — ARIA init	In `assets/js/main.js`, find the comment block `/* ARIA Accessibility Enhancements -- v1.1 */` and delete the entire IIFE below it (from the opening `(function () {` to the closing `})();`).

Tip: Search each file for the comment ARIA Accessibility Enhancements — it acts as a precise marker in both the CSS and JS files so you can locate and remove every addition in seconds.

Mobile & PWA — v1.5

Version 1.5 upgrades every page with a complete mobile-first meta block. This enables the template to render edge-to-edge on modern phones (iPhone notch / Dynamic Island), match the browser chrome colour to your brand, and behave like a native app when added to the home screen.

Zero effort required. The new meta tags are already present on every HTML page. Update only the colour and title values below to match your brand.

What was added to every page

`viewport-fit=cover`	Allows content to extend into the iPhone notch / safe area. Works together with the `env(safe-area-inset-*)` CSS padding described below.
`theme-color`	Sets the browser address bar colour on Chrome Android, Edge Mobile, and Samsung Internet. Matches the template mauve (`#7E4555`) by default.
`apple-mobile-web-app-capable`	When the page is added to the iOS Home Screen, it launches in standalone mode without the Safari UI — behaves like a native app.
`apple-mobile-web-app-status-bar-style`	Set to `black-translucent` so the iOS status bar overlays the hero section transparently.
`apple-mobile-web-app-title`	The icon name shown under the Home Screen icon on iOS. Default: `Maharatri`.
`format-detection`	Set to `telephone=no` — prevents iOS Safari from auto-linking phone-number-like strings in blue, which used to make some pages look broken.

How to customise the theme colour

Open any HTML file in a code editor and update the content value of the theme-color meta tag. Use the same hex code as your primary brand colour:

<meta name="theme-color" content="#7E4555">  <!-- change this hex code -->

iPhone notch & safe-area padding

A new block in assets/css/style.css automatically pads the body, sticky header, back-to-top button, off-canvas panels, and footer with env(safe-area-inset-*) values. On phones without a notch these values are 0 — no visual change. On notched devices the content stays clear of the curved corners and home indicator.

No more iOS auto-zoom on form inputs

iOS Safari used to auto-zoom the page whenever a user tapped into any <input> smaller than 16 px. Version 1.5 forces all form inputs to 16 px on mobile (and restores the original 14 px from 768 px upwards) so the zoom never triggers.

Very small devices (iPhone SE, 320 px)

A dedicated @media (max-width: 374px) block tightens container padding and slightly reduces large headings so the hero and banner sections never overflow on narrow devices.

Accessibility preserved. The viewport tag does not include maximum-scale=1 or user-scalable=no. Users can still pinch-to-zoom for readability — a WCAG requirement.

Self-Hosted Fonts — v1.5

Every font weight used by the template is now shipped locally inside the template folder. The old Google Fonts @import has been removed. Your site makes zero external requests for fonts once it is deployed.

Why it matters. Faster first paint, full privacy (no visitor data sent to Google), GDPR-friendly, and the template continues to work offline or on an intranet.

What was added

`assets/fonts/poppins/`	New folder containing six woff2 files: `poppins-300.woff2`, `poppins-400.woff2`, `poppins-500.woff2`, `poppins-600.woff2`, `poppins-700.woff2`, `poppins-800.woff2`. Total weight: roughly 47 KB.
`assets/css/style.css`	The old `@import url('https://fonts.googleapis.com/…')` line was removed and replaced with four local `@font-face` blocks (weights 400, 500, 600, 700) using `font-display: swap`.

How to swap Poppins for a different font family

Drop your new woff2 files into assets/fonts/poppins/ (or a new folder of your choice), update the src: url(…) paths and the font-family name in the @font-face blocks near the top of style.css, and finally update the body { font-family: … } rule to reference your new family. No other changes are needed.

@font-face {
  font-family: 'YourFont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/yourfont/yourfont-400.woff2') format('woff2');
}

RTL Support (Arabic & Hebrew) — v1.5

Version 1.5 introduces a dedicated Right-to-Left stylesheet that flips the entire layout for languages such as Arabic, Hebrew, Urdu, and Farsi. It is shipped with the template but not activated by default.

Note on Hindi. Hindi uses the Devanagari script which is written left-to-right. It does not need the RTL stylesheet — the default layout already works for Hindi content.

1. Enable RTL on a page

Two changes are needed per page:

Step 1	Change the opening `<html>` tag to include `dir="rtl"` and the correct language code. Example for Arabic: `<html lang="ar" dir="rtl">`.
Step 2	Add a new `<link>` tag in the `<head>` after `responsive.css` (so its rules win the cascade):

<link rel="stylesheet" href="assets/css/responsive.css">
<link rel="stylesheet" href="assets/css/rtl.css">  <!-- add this line -->

What gets flipped automatically

Header navigation, dropdowns, sub-menus, and hamburger menu direction
Off-canvas side panels slide in from the opposite edge
Breadcrumb separators and bullet lists
Bootstrap spacing utilities (ms-*, me-*, ps-*, pe-*)
Form inputs, text alignment, blockquote borders
Slick carousels (container flipped, slide content flipped)
Footer columns, donation progress bars, scroll-to-top button position
All arrow icons mirrored with transform: scaleX(-1)

Tip: You can mix LTR and RTL pages in the same template — only the pages that include the extra rtl.css link and the dir="rtl" attribute will flip. Your English pages remain untouched.

Form Validation States — v1.5

Version 1.5 adds ready-to-use error and success states for every form input in the template. Add a single class to any input to show the state — no extra images, icons, or JavaScript required.

Applying an error state

Add the class is-invalid (or the older error class) to the input, and optionally a message in an <div class="invalid-feedback"> immediately after it:

<input type="email" class="form-control is-invalid" value="not-an-email">
<div class="invalid-feedback">Please enter a valid email address.</div>

Applying a success state

<input type="email" class="form-control is-valid" value="hello@example.com">
<div class="valid-feedback">Looks great!</div>

What the classes give you

`.is-invalid` / `.error`	Red border, soft pink background, inline warning icon on the right, red focus ring.
`.is-valid`	Green border, soft mint background, inline checkmark icon on the right, green focus ring.
`.invalid-feedback`	Hidden until the paired input has `.is-invalid`, then displays in red below the field.
`.valid-feedback`	Hidden until the paired input has `.is-valid`, then displays in green below the field.

Bonus. The styles also work with browser-native :invalid / :valid pseudo-classes when you add a .was-validated class to the surrounding form — you can validate without writing a single line of JavaScript.

Visual & UX polish (applied automatically)

Hero banner scrim	The three home sliders now show a subtle dark gradient overlay behind the title and description so hero text stays readable on top of any background photo. Nothing to configure — it is already active.
Button pressed state	All `.sigma_btn-custom` buttons now visibly depress on click/tap with a subtle inset shadow. Gives users clear tactile feedback on touch devices.
Mobile menu button	The hamburger icon on mobile now has a 44×44 pixel tap area — meets WCAG 2.5.8 AA and is much easier to hit accurately.
Improved muted-text contrast	Secondary text colours were darkened from `#a5a5a5` to `#6a6a6a` so all text meets WCAG AA contrast (5.58:1 on white backgrounds).
Image dimensions	Every `<img>` tag now has explicit `width` and `height` attributes. The browser reserves the correct space before images load, eliminating layout shift (CLS).
Social-icon labels	Every social icon link now has an `aria-label` like “Facebook”, “Instagram”, etc. Screen readers now speak each one clearly instead of just “link”.

Festival Mode — v1.5

Version 1.5 introduces Festival Mode, a one-click system that transforms the entire temple website to reflect any of 9 major Hindu festivals. Each mode changes the colour palette, adds decorative overlays (falling petals, candles, peacock feathers, kites, etc.), and shows festival-specific elements like countdowns and marquees.

Already installed. The festival panel is pre-loaded on the homepage. Users click the star icon on the right edge of the page to open the panel and choose any of the 9 festivals.

How it works

When a festival is selected, the template:

Loads a festival-specific stylesheet from assets/css/festivals/
Adds a body class (e.g. fest-diwali) for scoped styling
Injects decorative DOM elements (falling particles, candles, countdown widgets, marquees, etc.)
Cleans everything up when the user resets or picks a different festival

The 9 festivals

Holi Spirit	Rainbow colour bursts + 50 falling dust particles + 4 corner pigment clouds.
Diwali	Warm amber night-time palette with 8 animated diyas at the bottom, each with rising smoke.
Navaratri	Titles cycle through the 9 sacred colours. Live countdown widget tracks days to the next Navaratri.
Hanuman Jayanti	Sacred saffron red across every element. Animated flame strip at the top.
Janmashtami	Midnight sky with 22 peacock feathers drifting down + Krishna’s flute silhouette.
Ganesh Chaturthi	“Ganpati Bappa Morya” scrolling marquee in Hindi + English + 30 marigold petals drifting across.
Maha Shivaratri	Midnight indigo theme + glowing crescent moon + 60 falling abhishek water drops.
Raksha Bandhan	A braided rakhi thread ribbon swaying across the top + dangling charm with pulsing heart.
Makar Sankranti	Five colourful kites fly across the sky + golden sun glow + two rotating kolam patterns in the corners.

How to add the festival panel to additional pages

By default the panel is on the homepage only. To add it to any other page, paste this block just before the closing </body> tag:

<link rel="stylesheet" href="assets/css/festivals/panel.css">
<div class="mht-festival-panel-wrap">
  <button class="mht-festival-switch" type="button" aria-label="Open festival modes">
    <i class="fas fa-star"></i>
  </button>
  <div class="mht-festival-panel">
    <h5>Festival Mode</h5>
    <p class="mht-festival-intro">Preview the site in festival mode.</p>
    <div class="mht-festival-tabs">
      <!-- 9 festival tab buttons — copy from index.html -->
    </div>
    <button class="mht-festival-reset" type="button"><i class="fas fa-redo"></i> Reset</button>
  </div>
</div>
<script src="assets/js/festival.js"></script>

Copy the nine <button class="mht-festival-tab"> blocks from index.html between the mht-festival-tabs div.

How to activate a festival programmatically

To auto-activate a festival (for example, to keep Diwali active during the Diwali week without user interaction), add a single line of JavaScript before festival.js loads — or simply pre-add the body class and stylesheet link on the page:

<!-- Pre-load Diwali mode on page render -->
<link rel="stylesheet" href="assets/css/festivals/diwali.css">
<body class="fest-diwali">

How to remove the festival panel

To remove the preview panel entirely (keeping only a single festival active):

HTML	Delete the `<div class="mht-festival-panel-wrap">` block and the `<script src="assets/js/festival.js">` tag from every HTML page.
CSS	Delete `assets/css/festivals/panel.css` (the panel shell styles).
Festival styles	Keep the CSS files in `assets/css/festivals/` that you want to use; delete the ones you don’t need.

How to customise a festival’s palette

Open the festival’s CSS file (e.g. assets/css/festivals/diwali.css) and edit the CSS custom properties at the top:

body.fest-diwali {
  --mht-primary: #8b4513;    /* deep amber    */
  --mht-accent:  #ffb300;    /* diwali gold   */
}

Tip: All festival CSS files are fully self-contained. You can disable any festival by removing it from the FESTIVALS object in assets/js/festival.js and deleting the matching CSS file — no other changes needed.

Credits

This template is built using the following open-source libraries and resources.

Bootstrap 5.3.3
jQuery
Popper.js
Slick Slider
Magnific Popup
Font Awesome
WOW.js
Animate.css
Nice Select

Fonts and icon packs are loaded locally — no external CDN calls are required once the template is deployed.

Support

If you have any questions or need help with the template, please reach out through our ThemeForest profile. We aim to respond within 24–48 hours.

For licensing information visit metropolitanhost.com/licenses.