Le'Practi — Law Firm & Legal Services

Overview

A sophisticated HTML template for law firms, attorneys, and legal service providers. Le'Practi combines a strong professional presence with lawyer directory listings, case galleries, service pages, and a comprehensive blog to help practices attract and inform clients.

What’s included

4 homepage variations
Lawyer directory listings (left and right layouts, 2 styles each)
Lawyer profile pages
Service pages (2 layouts) with detail view
Blog (6 post formats)
Gallery pages (2 styles)
Team, about, and contact pages
Login, register, and my-account pages
Classification, legal, coming soon, and 404 pages

📄 40 HTML files

Getting Started

Thank you for choosing Le'Practi. 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 / index-2 – 4.html`	Homepage variations
`lawyer-left.html / lawyer-right.html / *-style-2.html`	Lawyer directory layouts
`lawyer-profile.html`	Lawyer profile page
`service-1.html / service-2.html / service-detail.html`	Services pages
`gallery.html / gallery-2.html`	Gallery pages
`blog-grid.html / blog-details*.html`	Blog pages
`about.html / team.html / contact.html`	About, team, contact
`login.html / register.html / my-account.html`	User account
`classification.html / faq.html / legal.html`	Info and utility 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 v1.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 the previous version. 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 3 px outline ring appears on interactive elements 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.

1. Skip Navigation Link

The skip link is the first child of <body> on every HTML page:

<a class="skip-link" href="#main-content">Skip to main content</a>

Edit the label: Change the text between the tags (e.g. translate it). The JS and CSS need no changes — only the visible text is language-specific.

Remove the skip link: Delete the <a class="skip-link"> line from every HTML page, then delete the .skip-link { … } and .skip-link:focus { … } blocks from assets/css/style.css.

2. <main> Content Landmark

Every page now wraps its body content like this:

</header>
<main id="main-content">

  <!-- all page sections -->

</main>
<footer> … </footer>

Change the target ID: Update both id="main-content" on <main> and href="#main-content" on the skip link so they stay in sync.

Remove the landmark: Delete the <main id="main-content"> opening and the matching </main> closing line from each HTML page.

3. Focus Indicators (CSS)

At the bottom of assets/css/style.css:

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

Change the ring colour: Replace #0d6efd with any accessible colour that has at least 3:1 contrast ratio against the page background.

Remove focus indicators: Delete the entire /* Keyboard Focus Indicators */ block from style.css. Browser defaults will apply.

Why :focus-visible? Unlike :focus, the :focus-visible pseudo-class never fires on mouse clicks — so button shapes and hover colours remain completely unaffected for pointer users.

4. ARIA Labels — JavaScript Auto-Assignment

The ARIA init block at the bottom of main.js runs once on DOMContentLoaded and auto-assigns attributes to interactive elements. Any element that already has the attribute in HTML is skipped — so adding the attribute manually in the HTML always takes priority.

Social icon links `aria-label="Facebook"aria-label="Instagram" …`	Any `<a>` containing a Font Awesome social icon (e.g. `fa-facebook-f`, `fa-instagram`) that has no `aria-label` gets one from the icon class name. Override: Add `aria-label="Visit our Facebook page"` directly on the `<a>` tag.
Slider arrows `role="button"aria-label="Previous slide"aria-label="Next slide"`	Targets `.slick-prev / .slick-next`, `.owl-prev / .owl-next`, `.swiper-button-prev/next`. Sets role, label, tabindex, and keyboard Enter/Space. Override: Add the attribute in HTML before the slider initialises.
Nav togglers `aria-label="Toggle navigation menu"aria-expanded="false"`	Targets `.navbar-toggler`, `.hamburger`, `.meanmenu-reveal`, `[data-bs-toggle="collapse"]`. `aria-expanded` flips on every click. Override: Add `aria-label="Open menu"` in the HTML.
Back-to-top `aria-label="Back to top"role="button"`	Targets `.back-to-top`, `.go-top`, `.scroll-top`, `.scrollup`. Non-button elements also receive `role="button"`.
Close buttons `aria-label="Close"`	Targets `.btn-close`, `.close`, `.close-btn`, `[data-bs-dismiss]`. Gets `aria-label="Close"` if none already set.

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

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	Find `/* Skip Navigation Link */` in `assets/css/style.css` and delete that block plus `.skip-link:focus { … }`.
CSS — focus ring	Find `/* Keyboard Focus Indicators */` in `style.css` and delete that block.
JS — ARIA init	Find `/* ARIA Accessibility Enhancements */` in `main.js` and delete the entire IIFE from `(function () {` to its closing `})();`.

Quick find: Search all files for the string ARIA Accessibility Enhancements — it is the exact marker used in both the CSS and JS additions, making it trivial to locate and remove.

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
Isotope

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.