Pillar - Lawyer & Attorney HTML
Респектабельний сайт юридичної фірми в темно-бірюзовому з янтарним акцентом, із сериф-заголовками і класично-корпоративним настроєм.
Враження
Pillar справляє враження впевненого, класичного сайту юридичної фірми: глибокий бірюзово-темний #04383F у поєднанні з янтарним акцентом #F39005, заголовки набрано серифом Cantata One, основний текст — гротеском Cabin. Лейаут спокійний, побудований на Bootstrap-сітці, тримається офіційного тону — без градієнтів у бренд-палітрі, без грайливих ілюстрацій і без жодних анімаційних бібліотек, окрім Swiper для одного карусельного блоку відгуків. Естетичний орієнтир — сайт адвокатської практики, який хоче виглядати поважно, а не як модний стартап: «плаваючі» бейджі статистики, CTA-секція з фіксованим тлом, портретні картки команди.
Що піднімає темплейт трохи вище середнього HTML-шаблону про адвокатів — це кілька дрібних, суто CSS-фокусів: feature-картки, які наповзають на банер через від’ємний margin-top; круглий play-кнопка з концентричними «хвилями», зробленими на ::before / ::after; service-картки, які підставляють власну фонову картинку на ховер через CSS-змінну --url-image; team-картки з оверлеєм, що «розкривається» трансформацією scaleY. Усе це разом дає відчуття індивідуальної верстки, при цьому в проєкті жодного GSAP, ScrollTrigger чи Lenis. Стек у продакшен дешевий: Bootstrap 5, Swiper, jQuery, FontAwesome, локальний іконшрифт rtmicons і одна пара Google Fonts.
Найкраще підходить: юристи, бухгалтери, нотаріуси, B2B-консалтинг, серйозні корпоративні сайти, де бриф звучить як «професійний, традиційний, консервативний», а не «сучасний» чи «зухвалий». Погано лягає на SaaS, креативні агенції чи будь-що, де потрібен скрол-сторителінг. Зауваження: демо повністю на плейсхолдерах (dummy-img-1920x900.jpg тощо), без реальної фотографії шаблон виглядає блідо; jQuery обов’язковий, бо весь init-код обгорнутий у $(function(){...}); CTA з фіксованим тлом не паралаксить на iOS Safari — або фолбек, або миритись.
Палітра
Типографіка
Бібліотеки
Сторінки
- Home v1
index.html - About
about.html - Services
services.html - Service Details
service_detail.html - Case Studies
case_studi.html - Case Detail
case_detail.html - Team
team.html - Pricing Plan
price_plan.html - FAQ
faq.html - Blog
blog.html - Blog Details
single_blog.html - Contact
contact.html - 404
404.html
Ключові фішки
Cards overlap the hero with a negative top margin and overflow-visible parent
- Де знайти
- index.html section.position-relative + .section[style*='margin-top: -17rem'], css/style.css .card.card-outline-hover
- Чому цікаво
- A simple but striking layout move: the hero ends with extra bottom padding (17rem) and the next section uses an equal negative margin-top, letting four feature cards float over the photographic hero without absolute positioning or JS.
- Коли використовувати
- You want depth between hero and features without a separate hero with stacked elements, or to draw the eye into the page below the fold.
- Техніка
- plain CSS (margin-top, padding-bottom, overflow-visible)
Ripple animation around a circular video-play button using ::before / ::after
- Де знайти
- css/style.css .request-loader, css/style.css @keyframes ripple
- Чому цікаво
- Two pseudo-elements share one keyframe with offset delays, producing a clean concentric pulse without extra DOM, and the ring widens via animated border-width rather than scale-only — gives a softer ripple than the usual transform-only trick.
- Коли використовувати
- Any 'request a callback', 'play video', or 'live now' button where you want gentle attention without emoji or motion noise.
- Техніка
- CSS keyframes + ::after/::before
Service card whose hover state swaps a CSS-variable image into the background
- Де знайти
- index.html .card-service.img-hover[style*='--url-image'], css/style.css .card-service.img-hover:hover
- Чому цікаво
- Each card carries its own image via inline `--url-image` custom property, so a single CSS rule (`background-image: var(--url-image)`) handles unique imagery across many cards — no per-card CSS, no JS, easy to wire into a CMS field.
- Коли використовувати
- A grid of service or category cards where each tile needs its own hover image but you want one stylesheet rule.
- Техніка
- CSS custom properties + background-image hover
Floating amber stat badge anchored to a column with absolute positioning and negative margin
- Де знайти
- index.html .floating-top-1, css/style.css .floating-top-1
- Чому цікаво
- The 15+ years badge sits on a sibling column using `position: absolute` and a 4rem top margin so it visually breaks the image edge — a low-effort way to add the 'numbered overlay tile' look common in premium law/consulting templates.
- Коли використовувати
- Any about-us photo where you want a stat or seal to overlap the image without compositing it into the photo.
- Техніка
- CSS absolute positioning
Team card overlay revealed via vertical scaleY transform from the bottom
- Де знайти
- index.html .card.card-overlay, css/style.css .card-overlay .card-body, css/style.css .card-overlay:hover .card-body
- Чому цікаво
- Instead of fading or sliding, the team-card socials drop in by animating `transform: scaleY(0)` to `scaleY(1)` with `transform-origin: bottom`, giving a curtain-up reveal that feels less generic than fade-in-up.
- Коли використовувати
- Team grids, portfolio cards, or any image card where you want a more architectural reveal of overlay content.
- Техніка
- CSS transform-origin + scaleY transition
Fixed-attachment CTA band as a poor-man's parallax
- Де знайти
- index.html .section.bg-attach-fixed, css/style.css .bg-attach-fixed
- Чому цікаво
- A single `background-attachment: fixed` declaration produces the classic photo-locks-as-page-scrolls effect with zero JS — perfect for a corporate/law site that should not load Lenis or GSAP.
- Коли використовувати
- Mid-page CTAs in low-animation sites where you still want a moment of visual tension on scroll.
- Техніка
- CSS background-attachment
Компоненти
Teal-on-white top utility strip with email, phone, address and four social icons sitting above the main navigation.
Sticky white Bootstrap navbar with logo, dropdown menus and an amber hamburger toggle on mobile.
Full-bleed image hero with teal gradient overlay, centered serif heading and an amber CTA next to a circular ripple-animated video play button.
Four-column outline-hover cards that overlap the bottom of the hero on a negative top margin, each with a custom rtmicon and a one-line value prop.
Two-column about block pairing a checklist of firm values with a portrait photo and a floating amber years-experience badge.
Five-up partner-logo strip on a deep-teal background that desaturates to monochrome by default and recolors on hover.
Two-by-two grid of teal-bordered service cards that swap their background to a custom image plus dark gradient on hover, with an arrow-up-right link.
Parallax-feel CTA section using background-attachment: fixed under a teal gradient overlay with centered headline and amber consult button.
Image-plus-floating-contact card on the left, three stacked case-study rows with amber dividers and circular arrow buttons on the right.
Four-up counter band on deep teal showing years experience, lawyers, clients, and tasks with amber numbers.
Three-up team cards where hovering reveals a teal gradient overlay with social icons that scales up from the bottom edge.
Two-up Swiper carousel of testimonial cards with portrait, large blockquote rtmicon, italic quote and clickable bullet pagination.
Three-up blog-post teaser row with square image, serif teal headline, body excerpt, and an amber READ MORE link with arrow.
Deep-teal four-column footer with logo, social row, quick links, services list, contact details and a copyright bar.
Bootstrap modal triggered from the hero play button that embeds a YouTube iframe at modal-xl size with autoplay.