Project Overviewlink

Atroly is a set of static HTML website templates for the legal/law services industry, built on the Bootstrap framework. It includes 4 homepage variants and multiple business pages such as blog, case studies, FAQ, and contact, making it suitable for quickly building a showcase website for legal consulting firms.

Tech Stacklink

• Bootstrap 5 — Responsive CSS framework
• jQuery — DOM interaction and animation logic
• Slick Slider — Carousel component
• Font Awesome / Line Awesome — Icon libraries
• Static HTML — No backend required, pure frontend deployment

Project Structurelink

Atroly/
├── index.html          # Homepage 1
├── index2.html         # Homepage 2
├── index3.html         # Homepage 3
├── index4.html         # Homepage 4
├── about.html          # About Us
├── practice-area.html  # Practice Areas
├── blog.html           # Blog List
├── contact.html        # Contact Page
├── faq.html            # FAQ
├── gallery.html        # Gallery
├── testimonial.html    # Testimonials
├── 404.html            # Error Page
└── assets/
    ├── css/
    │   └── main.css    # Main theme styles (includes variables, layout, components)
    └── js/
        └── main.js     # Interaction logic (counter, sidebar, carousel, scroll effects)

Core File Descriptionlink

• assets/css/main.css — Main theme stylesheet, defines color variables, fonts, typography, and all page layouts
• assets/js/main.js — Core interaction script, implements number scrolling animation, mobile sidebar, scroll-to-top, and other interactions
• index.html — Homepage template, includes navigation, footer, and full content sections; also provides three variants: index2/3/4

Quick Startlink

Pure static project, no npm install required. Simply open index.html in your browser locally to preview all pages; for deployment, upload the entire folder to any static server or GitHub Pages.

Usage Suggestionslink

The template provides 4 different homepage styles. It is recommended to choose one based on the legal firm's brand positioning as a foundation, then quickly adjust colors and fonts by modifying CSS variables (e.g., --base, --heading-font) in main.css. Page content can be directly replaced by editing placeholder text and image paths in the HTML.