Regalis - Lawyer, Attorney and Law Firms HTML Template
Витончений шаблон для юридичної фірми з темно-синьо-золотою палітрою, повноекранною паралакс-фотографією та спокійним редакторським ритмом у десяти варіантах головної.
Враження
Regalis — це витончений, трохи традиційний шаблон для юридичної фірми, що робить ставку на редакторську фотографію, а не на ілюстрації. Базова схема побудована на глибокому темно-синьому regalis-navy (#213449) у парі з теплим золотом barrister-gold (#EAA638) — серйозність зали суду з відтінком позолоти. Шість готових кольорових схем у css/colors/ керуються двома CSS-змінними, тому весь шаблон можна перефарбувати, замінивши лише href тегу <link id="colors">. Темп спокійний — повноекранні jarallax-герої, щедрі відступи, великі заголовки Jost поверх основного тексту Manrope — але мікродеталей вистачає: лічильники, табовані блоки About, hover-картки команди, правий off-canvas drawer і журнальна каруселя кейсів, що виходить за край екрана.
Цільова аудиторія — професійні послуги: юридичні фірми, адвокати, радники, консалтинг, бухгалтерія та комплаєнс. Десять варіантів головної, окремі сторінки practice areas, case studies, careers, FAQ, team, blog, contact і how-it-works дають достатньо матеріалу для повного сайту малої фірми майже без додаткового дизайну. Підходить також нотаріусам, медіаторам і корпоративно-фінансовим бутикам, де важливіший серйозний впевнений тон, ніж грайлива взаємодія. НЕ підходить: молодіжним брендам, SaaS-лендингам, e-commerce або будь-чому, що потребує яскравих градієнтів чи агресивної прокрутно-керованої анімації — WOW.js-реверси тут стримані, не кінематографічні.
Виробничі застереження: стек важкий — jQuery, Bootstrap 5, Swiper, Owl Carousel, jarallax, isotope і WOW.js, тож міграція на сучасний JS-фреймворк потребуватиме акуратності. Бібліотек wow.js, jarallax та owl-carousel немає у словнику проєкту, тому в libraries[] вони не задекларовані (заміна: фактично записані jquery, bootstrap, swiper, isotope, інші згадані лише в компонентах). Утилітарні класи бренду Designesia (hover-scale-1-1, bg-blur, id-color, subtitle, de-flex) присутні всюди — при витягуванні компонента беріть увесь блок зі style.css або готуйтеся переписувати. Тексти повністю англійською, фотографії вже додано (жодного Lorem), є робочий contact.php для форми.
Палітра
Типографіка
Бібліотеки
Сторінки
- Home v1
index.html - Home v2
index-2.html - Home v3
index-3.html - Home v4
index-4.html - Home v5
index-5.html - Home v6
index-6.html - Home v7
index-7.html - Home v8
index-8.html - Home v9
index-9.html - Home v10
index-10.html - About
about.html - Practice Areas
practice-areas-1.html - Practice Area Single
practice-area-single.html - Team
team.html - Team Single
team-single.html - Case Studies
case-studies.html - Case Study Single
case-study-single.html - Blog
blog.html - Blog Single
blog-single.html - FAQ
faq.html - Careers
careers.html - How It Works
how-it-work.html - Why Choose Us
why-choose-us.html - Contact
contact.html
Ключові фішки
Six swappable color schemes loaded from a single linkable stylesheet
- Де знайти
- css/colors/scheme-01.css, index.html#colors
- Чому цікаво
- All chrome colors are driven by --primary-color and --secondary-color CSS variables, so swapping schemes only requires changing the linked stylesheet's href — no rebuild, no per-element overrides.
- Коли використовувати
- You need a quickly re-skinnable template for client demos or A/B brand exploration.
- Техніка
- CSS custom properties, multiple themed stylesheets, swappable <link id="colors">
Mega-menu home picker with hover-scaled thumbnails
- Де знайти
- index.html (#mainmenu li ul.mega), css/style.css .hover-scale-1-1
- Чому цікаво
- Instead of plain text links, the Home menu opens a full-width grid of 10 home-variant screenshots that zoom on hover — useful for any demo template or design-system landing.
- Коли використовувати
- You ship a multi-variant template and want users to preview demos directly from the navbar.
- Техніка
- Bootstrap mega-menu, transform: scale on .hover-scale-1-1, soft-shadow utility
Bleeding container-fluid carousel that runs off the right viewport edge
- Де знайти
- index.html section.overflow-hidden #services-carousel, css/style.css .owl-2-cols-center
- Чому цікаво
- Section title is constrained to the .container, but the carousel itself sits in a .container-fluid and slides past the right edge — a magazine-style trick that signals "more content available" without arrows.
- Коли використовувати
- Editorial layouts, case-study showcases or portfolios where visual rhythm matters more than perfect grid alignment.
- Техніка
- Owl Carousel, Bootstrap container-fluid + container nesting, overflow-hidden parent
Floating frosted stat card layered over a parallax photo
- Де знайти
- index.html section.bg-light .bg-blur, css/style.css .bg-blur
- Чому цікаво
- A backdrop-filter glass panel hosts an animated counter (data-to="90") and is positioned absolutely at the bottom of a jarallax image, creating depth without a separate stat strip.
- Коли використовувати
- Hero or about sections where you want a single hero number to feel embedded in the photography, not stuck to a divider.
- Техніка
- jarallax, backdrop-filter, jQuery countTo / custom timer, position:absolute
Fade-in-on-scroll reveals with WOW + animate.css and per-element delays
- Де знайти
- index.html (data-wow-delay attributes throughout), css/plugins.css animate.css block
- Чому цікаво
- Almost every section uses data-wow-delay between .0s and 1s on staggered children, producing a choreographed cascade rather than a single global fade — easy to tune section-by-section without writing custom GSAP timelines.
- Коли використовувати
- You want scroll-driven storytelling on a budget without GSAP/ScrollTrigger overhead.
- Техніка
- WOW.js, animate.css, data-wow-delay attributes
Right-side off-canvas drawer that doubles as a marketing summary
- Де знайти
- index.html #extra-wrap, #btn-extra, css/style.css #extra-wrap, #extra-content
- Чому цікаво
- Rather than a typical mobile menu, the drawer presents a curated digest — practice-area list, contact info, brand bio, social icons — making the burger button useful even on desktop.
- Коли використовувати
- Service businesses where a side panel can replace duplicate footer/contact UI on every page.
- Техніка
- jQuery toggle, fixed-position panel, custom #btn-extra trigger
Frosted-glass team bio reveal on hover
- Де знайти
- index.html section.pb-0 .hover .bg-blur, css/style.css .hover-op-1, .bg-blur
- Чому цікаво
- Team cards keep their full portrait visible at rest; on hover, a translucent blurred bar with name, role and socials slides up via opacity rather than displacing the image — visually cleaner than the typical overlay swap.
- Коли використовувати
- Team or staff grids where photography is strong enough to stand alone but you still want metadata accessible.
- Техніка
- backdrop-filter, opacity transition on .hover-op-1
Компоненти
Transparent fixed header with a 10-thumbnail mega menu for homepage demos and an off-canvas drawer trigger.
Full-viewport jarallax photo hero with bottom-anchored title, stacked-avatar social proof and a four-column service ticker.
Three-column trust block of color-icon features each with a pill-style CTA to deeper pages.
Side-by-side jarallax image with a floating animated stat card and a Mission/Vision/Values tab switcher.
Dark half-bleed section with a fixed legal portrait on one side and an owl-carousel of quote testimonials on the other.
Four-up attorney portrait grid where a frosted-glass bio panel slides up on hover to reveal name, role and socials.
Navy-on-navy practice-area block with floating white icons positioned absolutely to the left of each title.
Container-fluid owl-carousel of case-study cards with a bleeding-right edge, gradient overlay and custom prev/next nav.
Dark four-column counter row using data-to/data-speed timer animation triggered on scroll into view.
Split layout pairing a circular play-button video poster with a numbered three-step vertical timeline.
Three category tabs (Services, Consultation, Billing) each switching to its own accordion of five questions.
Right-side dark off-canvas drawer with logo, two columns of practice areas, contact info and social icons.
Three-column dark footer with logo, brand statement, company links, practice areas and store-hours info card.
Vertical scrollbar indicator paired with a 'Scroll to top' floating link that appears after scroll threshold.