Kanun - Attorney & Law Agency HTML Template
Редакторський шаблон юридичної фірми з теплими бронзовими акцентами, заголовками Prata, фотокартками послуг і ненав'язливим лічильником у героя.
Враження
Вайб — Kanun Attorney & Law Agency
Kanun виглядає як серйозний, дещо редакторський сайт юридичної фірми, який вирішив відмовитися від звичної сірості. Базова палітра поєднує теплу бронзу (#B68C5A) як акцент із кремовою поверхнею (#F9F7F3) та майже чорним текстом — заголовки звучать вагомо без типового для галузі темно-синього чи бордового. Заголовки набрано Prata (контрастний дідон), тіло — DM Sans, і це дає сайту тиху, "документальну" ритміку, яка пасує адвокатським темам. Герой поєднує заголовок із серифом, портретне фото та лічильник ("5+ років досвіду") у тому ж рядку, що й CTA-кнопка — соціальний доказ читається як частина call-to-action, а не окремою смугою нижче.
Анімація стримана, але продумана: WOW.js керує спрямованими появами зображень (left / right / top варіанти, що чергуються рядками), сітка послуг має магнітний ефект "картинка слідує за курсором" на чистому JS, а кругла кнопка play з пульсуючим CSS-кільцем відкриває відео через Magnific Popup. Секція проєктів — це магазинна асиметрична сітка (одна велика плитка поруч із трьома меншими, далі дзеркально), ближче до bento, ніж до стандартного 3-колонкового портфоліо. Жоден прийом не кричить — і в цьому ідея: шаблон продає компетентність, а не ефекти.
Підійде для сайтів адвокатів, нотаріусів, медіаторів та інших професійних послуг, де тон має бути довірливим і теплим, а не "корпоративно-синім". Не варто брати під SaaS, e-commerce чи будь-що з важкою інтерактивністю — стек jQuery + Bootstrap 5 + Swiper + WOW дозрілий, але застарілий, темної теми немає. Заміна словника: WOW.js записаний як aos (найближче значення з vocabularies.json) — це функціонально еквівалентні scroll-trigger CSS-class-бібліотеки.
Палітра
Типографіка
Бібліотеки
Сторінки
- Home v1
index.html - Home v2
index-2.html - Home v3
index-3.html - Home One-Page v1
index-one-page.html - Home One-Page v2
index-two-page.html - Home One-Page v3
index-three-page.html - About
about.html - Services
service.html - Service Details
service-details.html - Portfolio
portfolio.html - Portfolio Details
portfolio-details.html - Attorneys
team.html - Attorney Details
team-details.html - Testimonials
testimonial.html - Pricing
pricing.html - FAQ
faq.html - Blog Grid
news.html - Blog Standard
news-standard.html - Blog Details
news-details.html - Contact
contact.html - 404
404.html
Ключові фішки
Magnetic 'follow image' on services hover
- Де знайти
- assets/js/main.js:274-287, .service-items
- Чому цікаво
- A bare-bones vanilla-JS implementation: it grabs the third child of each .service-items wrapper and translates it to the cursor's offset within the item, with a fixed 28.57deg rotation — a cheap, jQuery-free recipe for the popular cursor-follow image trick.
- Коли використовувати
- You want a tilted preview image to chase the cursor inside a list item without pulling in GSAP or a tilt library.
- Техніка
- Vanilla JS, getBoundingClientRect, CSS transform translate+rotate
Asymmetric project bento grid (1 large + 5 small + 1 large)
- Де знайти
- index.html:691-781, section.project-section .row
- Чому цікаво
- Bootstrap col-xl-6 / col-xl-3 grid produces a magazine-style layout that breaks the usual 3x2 portfolio block, alternating image-anim-left / top / right reveal directions for visual rhythm.
- Коли використовувати
- Portfolio or case-study reels where you want one hero piece per band without a full bento library.
- Техніка
- Bootstrap grid, WOW.js + custom img-custom-anim-* keyframes
Counter badge nested inside hero CTA row
- Де знайти
- index.html:356-367, section.hero-section .hero-button
- Чому цікаво
- Instead of a separate stats strip, the '5+ years of experience' counter sits beside the primary CTA button, doubling as social proof and visual anchor on the same baseline as the call-to-action.
- Коли використовувати
- Single-stat hero pattern for service-firm landings where you want the proof alongside the CTA, not in a later band.
- Техніка
- jquery.counterup + Waypoints
Floating circular ripple video trigger
- Де знайти
- index.html:334-343, section.hero-section .hero-video .video-btn.ripple
- Чому цікаво
- A pure-CSS ripple play button is absolutely positioned over the hero, opening a YouTube popup via Magnific Popup. The ripple is a layered ::before/::after with staggered scale animation — no Lottie, no SVG sprite.
- Коли використовувати
- Lawyer / agency intro videos where you want a noticeable but tasteful play CTA without third-party UI kits.
- Техніка
- Magnific Popup, CSS keyframe ripple
WOW.js + custom img-custom-anim directional reveals
- Де знайти
- assets/css/animate.css, *.html [class*='img-custom-anim-']
- Чому цікаво
- Beyond the stock animate.css fadeInUp, the template ships custom keyframes (img-custom-anim-left/right/top) that mask images and slide them in by direction — pinned to scroll via WOW.js + Waypoints. The directions alternate per row to read like an editorial grid.
- Коли використовувати
- You want directional image reveals that feel intentional rather than canned 'fade-in everything'.
- Техніка
- WOW.js, Waypoints, custom @keyframes
Mega-menu Home preview thumbnails with dual CTAs
- Де знайти
- index.html:182-247, header .submenu.has-homemenu
- Чому цікаво
- The Home menu item drops a row of three preview thumbnails, each showing 'Multi Page' and 'One Page' demo buttons stacked over the screenshot — letting buyers compare layouts inside the navigation, not on a separate demo index.
- Коли використовувати
- Multi-demo HTML themes where you want to show variants in-nav rather than a 'demo selector' page.
- Техніка
- Bootstrap dropdown markup, custom .homemenu-thumb hover styling
Компоненти
Two-row header with utility info bar, sticky main row containing logo, mega-menu home preview, phone block and CTA button.
Split hero with serif H1, counter badge ('5+ years'), CTA, side portrait and a fixed circular video play trigger anchored bottom-left.
Three-column feature row with flaticon glyphs, headings and short copy on a cream surface band.
Image-and-text about block with two animated counter tiles ('Satisfied Clients', 'Service Categories') and a Read More CTA.
Four-cell services grid pairing a card (icon + title + copy) with a square photo per item, alternating left/right reveal animations.
Numbered four-step work-process column anchored to a vertical line graphic, paired with a tall side photo.
Asymmetric six-tile project grid on a dark band — one large hero tile plus five smaller tiles, each with category eyebrow and title overlay.
Four-card attorney row with portrait, hover social icons, name and role; alternating cards use a 'style-2' frame variant.
Two-column testimonial section: a stacked review summary card on the left and a Swiper slider of quote cards on the right with bronze quote SVGs.
Bootstrap collapse accordion paired with a side image carrying a circular video play button (Magnific Popup).
Headline column plus a stack of three horizontal blog cards (image left, meta + title + link-arrow right) on a cream band.
Footer over a dark photo background with a newsletter capture row, four-column site map, social icons and bottom legal strip.
Full-screen white preloader with a centred spinner that fades out on window load.
Two-element custom cursor (outer ring + inner dot) layered above the page; visible on desktop only.