Documentation | Counsel Law Premium Template

Template Versions & Downloads

This package includes both the standard Counsel Law template and the latest 2026 expanded version. You can choose whichever fits your project.

counsel-law/ — Standard version with the original layout and page set. Ideal if you want a lighter, classic starting point.

Counsel-law-2026/ (and Counsel-law-2026.zip) — Latest premium 2026 release with all new pages, mega menu navigation, and extended inner layouts.

Use the buttons below to open or download the version you prefer:

View Standard Version (counsel-law/) Download Latest 2026 Version (.zip)

1. Welcome & Introduction

Welcome to the Counsel Law Premium HTML Template. This comprehensive digital product is engineered specifically for elite law firms, covering 20+ purpose-built HTML pages across multiple legal niches including Corporate, Personal Injury, and Family Law.

This documentation provides an exhaustive breakdown of the template's architecture, demonstrating exactly how to customize it, scale it, and deploy it to a live production environment. Whether you are a beginner tweaking text or an advanced developer integrating a backend CMS, this guide covers everything.

                    Core Technology Stack: HTML5, CSS3 (Vanilla), Vanilla JavaScript, jQuery (3.6.0),
                    Animate.css, WOW.js, and Font Awesome 6.4.0. No CSS frameworks (like Bootstrap or Tailwind) were
                    used to ensure maximum visual purity and ultimate customization speed.
                

2. Complete Architecture Outline

The template follows a clean, highly organized, and logical file structure. Below is the full site architecture:

                    Counsel-law/
                    ├── css/
                    │ ├── style.css (Core structural styles, global variables)
                    ├── js/
                    │ ├── script.js (Interaction controllers, mobile menu, Wow.js init)
                    │
                    ├── [ HOMEPAGES ]
                    │ ├── index.html (Home V1: Family & Immigration)
                    │ ├── index-2.html (Home V2: Corporate Law & Defense)
                    │ ├── index-3.html (Home V3: Aggressive Personal Injury)
                    │
                    ├── [ FIRM PROFILES ]
                    │ ├── about.html (Detailed firm history and credentials)
                    │ ├── attorneys.html (Masonry grid of partner profiles)
                    │ ├── attorney-single.html (Individual attorney skill bars and bio)
                    │
                    ├── [ PRACTICE & CASES ]
                    │ ├── practice-areas.html (16+ global law niche grid)
                    │ ├── practice-single.html (Deep dive template for a single practice area)
                    │ ├── case-results.html (Grid of financial victories/settlements)
                    │ ├── case-single.html (Detailed case study breakdown)
                    │
                    ├── [ CLIENT UTILITIES ]
                    │ ├── portal-login.html (Secure login for client management portals)
                    │ ├── fee-calculator.html (Interactive JS legal fee estimator)
                    │ ├── booking.html (Calendar-based consultation scheduling)
                    │ ├── resources.html (Database of forms, PDFs, and guides)
                    │ ├── testimonials.html (Client video/text reviews)
                    │ ├── faq.html (Interactive accordion FAQ)
                    │
                    ├── [ RESOURCES & CONTACT ]
                    │ ├── blog.html (Article listing grid)
                    │ ├── blog-single.html (Long-form article template)
                    │ ├── contact.html (Forms & Embedded Google Map)
                    │ ├── locations.html (Multi-branch office details)
                    │
                    ├── [ UTILITY & LEGAL ]
                    │ ├── privacy-policy.html (GDPR/CCPA privacy text)
                    │ ├── terms.html (Terms of service)
                    │ ├── 404.html (Error page)
                    │
                    ├── update_nav.py (Python automation tool for global headers/footers)
                    └── documentation.html (This manual)
                

3. Global CSS Customization

Because this template was built with Vanilla CSS, everything is orchestrated via a powerful CSS Variables block (:root) located at the very top of css/style.css. Changing these variables instantly refashions the entire aesthetic of all 20+ pages.

3.1 Primary Brand Colors

To change the color scheme, locate line 5 of style.css:

                    :root {
                    /* Modify these to match your firm's brand identity */
                    --primary-color: #0d1b2a; /* Main dark color (used for deep backgrounds, headings) */
                    --accent-color: #b89768; /* Gold highlight (used for buttons, icons, hover states) */
                    --bg-light: #f8f9fa; /* Used for contrasting alternating sections */
                    --text-color: #333333; /* Standard body text color */
                    --text-light: #666666; /* Used for subtitles and secondary text */
                    }
                

3.2 Typography System

The template loads two premium Google Fonts. Inter for absolute readability in paragraphs, and Outfit for authoritative, bold headings.

If you wish to change these, first update the Google Fonts <link> tag in the <head> of your HTML files, then update the variables:

                    :root {
                    --font-main: 'Inter', sans-serif;
                    --font-heading: 'Outfit', sans-serif;
                    }
                

3.3 Section Spacing & Layout Classes

Every page utilizes a strict structural grid. If you are copying/pasting elements to build new pages, always wrap them in these master containers:

                    <!-- 1. Use 'content-section' for the main vertical padding (100px top/bottom) -->
                    <section class="content-section">

                    <!-- 2. Use 'container' to restrict maximum width to 1200px and center the content -->
                    <div class="container">

                    <!-- 3. Use 'section-heading' to properly format the top title of the section -->
                    <div class="section-heading text-center">
                    <span class="subtitle">The Tagline</span>
                    <h2>The H2 Title</h2>
                    </div>

                    </div>
                    </section>
                

4. Global Navigation (Python Automation Injector)

One of the most powerful features of this template is the update_nav.py tool. If you manually change a phone number in the header, or add a new link to the footer, you would normally have to copy and paste that change 24 times across every `.html` file. The python script does this automatically in 1 second.

Step-by-Step Python Injection:

Install Python: Ensure Python 3 is installed. Open your system Terminal or Command Prompt and type python3 --version to verify.
Edit the Script: Open update_nav.py in VSCode or Sublime Text.
Modify HTML: In the file, you will precisely see two gigantic blocks of raw HTML wrapped in triple quotes: new_nav_block = """...""" and new_footer_block = """...""". Make your changes inside these triple quotes. (e.g., Change "Contact Us" to "Get Free Advice").
Execute: Open your terminal, navigate (`cd`) into the Counsel-law folder.
Run Command: Execute python3 update_nav.py. The script will scan the directory and intelligently replace the old code with your newly edited block in every single HTML file flawlessly.

5. Form Integrations & JavaScript

5.1 Activating Contact Forms

The forms built into contact.html and the homepages are visually styled but require a backend processor to actually transmit data to your email inbox. The template provides dummy logic. To make it functional instantly without relying on a backend server, we recommend Formspree.io.

                    <!-- Original Form Tag -->
                    <form class="contact-form">

                    <!-- To make it live via Formspree, update it to: -->
                    <form action="https://formspree.io/f/YOUR_UNIQUE_ID" method="POST" class="contact-form">
                    <!-- Ensure your inputs have the 'name' attribute -->
                    <input type="email" name="email" required>
                    <button type="submit">Send</button>
                    </form>
                

5.2 JavaScript Effects (WOW.js & Scroll Detection)

Elements that smoothly slide upward as you scroll down the page are controlled by WOW.js and Animate.css. If you build a new element and want it to animate, simply add the classes wow and an animation name (like fadeInUp):

                    <!-- This box will slide up from the bottom when it enters the viewport -->
                    <div class="wow fadeInUp"> Animated Content </div>

                    <!-- Adding a delay so items stagger load beautifully (0.1s, 0.2s, 0.3s) -->
                    <div class="wow fadeInUp" data-wow-delay="0.3s"> Delayed Content </div>
                

Note: The initialization script for WOW.js is located in js/script.js. If animations stop working, ensure new WOW().init(); is present in that file.

6. Developer Troubleshooting

If you encounter issues while deploying or modifying the template, check the following common pitfalls:

Animations not firing: Ensure both animate.min.css is linked in the <head> and wow.min.js is linked right before the closing </body> tag.
Images are blank: The template uses Unsplash images via URL links for demonstration purposes. If they stop loading, the external URL may have expired. You MUST replace these src="https://..." links with actual local files relative to an images/ folder before deploying live (e.g. src="images/hero-bg.jpg").
Mobile Menu not opening: The mobile hamburger button requires jQuery. Ensure <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> is loaded BEFORE js/script.js.

7. Credits & Libraries

Google Fonts

Inter (Body) & Outfit (Headings)

FontAwesome v6

Scalable vector legal iconography.

Animate.css & WOW.js

Viewport scroll intersection observer animations.

jQuery 3.6.0

Lightweight DOM manipulation for accordions.

Final Preparation for Launch

Before launching your law firm site to a live domain (like Namecheap or GoDaddy), ensure you have: (1) Replaced all placeholder text with legal copy, (2) Replaced Unsplash URLs with local compressed webp/jpeg images, and (3) Mapped the contact form actions.