Charitics - NGO & Non Profit HTML Template
Теплий помаранчево-кремовий шаблон НГО з органічними clip-path формами, прогрес-смугами донатів та щирою благодійною атмосферою.
Враження
Атмосфера
Charitics — теплий обнадійливий шаблон для НГО та неприбуткових організацій, побудований навколо одного домінуючого акценту: вогняного помаранчевого (#EB5310), що переходить в бурштиновий (#FAA019) і лежить на кремовому/слоновому фоні. Візуальна ідентичність спирається на органічні, рукотворні елементи — clip-path "галькові" силуети навколо героїчних портретів, рукописний акцентний шрифт Caveat, декоративні SVG-вектори, що плавають на полях, та округлі "blob"-фони за секціями. Quicksand задає тон усім заголовкам (округлий гуманістичний sans), а Manrope обслуговує основний текст, що дає типографії м'який, дружній ритм. Анімація середньої ваги: WOW.js разом з Animate.css керують напрямними fade-in під час скролу, прогрес-смуги донатів рахують значення через IntersectionObserver, а каруселі Swiper працюють у автоплеї в розділах донатів, відгуків, блогу та галереї.
Цільова аудиторія — благодійні фонди, НГО, волонтерські програми, релігійні нонпрофіти, організації з підтримки дітей, екологічні ініціативи та гуманітарні кампанії. Шаблон постачається з повним набором сторінок, потрібних сайту збору коштів: списки донацій, деталі донації з кастомним полем суми, календар подій із датами-бейджами, галерея проєктів, сторінки команди та учасника команди, блог v1/v2/деталі, FAQ-акордеон, тарифи й 404 — разом двадцять сторінок у двох варіантах головної. Тон щирий і людяний, з фотознімками дітей, волонтерів та громадської роботи; помаранчево-бурштинова палітра передає теплоту й терміновість без агресії. НЕ підходить для холодного корпоративного B2B, фінтеху, SaaS-дашбордів, люксової/редакторської моди або сайтів, що потребують темну тему — темного режиму немає, а палітра поверхонь чітко світла/кремова.
Виробничі застереження: шаблон використовує комерційні іконкові шрифти Flaticon (flaticon_charitics, flaticon_glamer), для розповсюдження яких у продакшені потрібна ліцензія Flaticon. Активно використовується сітка Bootstrap 5, плюс довгий стек вендорних бібліотек (Swiper, Splide, SplitType, MixItUp, fsLightbox, Flatpickr, SlimSelect, WOW, Animate.css) — це нормально для standalone HTML-розгортання, але важко для бандлу при міграції на сучасний білд. Підстановки словника: splittype → splittext (та сама бібліотека з перейменуванням пакета); mixitup → isotope (найближчий аналог фільтра-сітки); wow.js/Animate.css → aos (найближчий родич scroll-reveal). Для fslightbox, flatpickr та slim-select у словнику близьких відповідників немає — їх пропущено; розширити vocabularies.json:libraries, якщо майбутній шаблон їх вантажитиме як ключові.
Палітра
Типографіка
Бібліотеки
Сторінки
- Home v1
index.html - Home v2
index-2.html - About
about.html - Services
services.html - Service Details
service-details.html - Projects
projects.html - Project Details
project-details.html - Team
team.html - Team Member Details
team-details.html - Donations
donations.html - Donation Details
donation-details.html - Events
events.html - Event Details
event-details.html - Blog
blog.html - Blog v2
blog-2.html - Blog Details
blog-details.html - Pricing
pricing.html - FAQ
faq.html - Contact
contact.html - 404
404.html
Ключові фішки
Organic clip-path 'blob' frame around hero portrait with gradient bleed
- Де знайти
- index.html section.ul-banner .ul-banner-img .img-wrapper, assets/scss/sections/_banner.scss:122-143
- Чому цікаво
- Hand-tuned ~80-point polygon clip-path is duplicated on both the wrapper and the image inside, producing a stylised pebble-blob silhouette with a soft orange gradient halo bleeding through the offset — far more identity than the usual rounded photo crop.
- Коли використовувати
- Hero portraits for charity, education, kids, or wellness brands that want a soft hand-drawn outline instead of straight edges.
- Техніка
- CSS clip-path polygon, linear-gradient background, double-element offset
Animated count-up donation progress bar driven by IntersectionObserver
- Де знайти
- assets/js/progressbar.js, index.html .ul-donation-progress .ul-progressbar
- Чому цікаво
- When the bar enters the viewport, a requestAnimationFrame loop increments width and the inline label simultaneously up to the data-attribute target (e.g. 55%, 95%) — runs once per bar, then unobserves itself to avoid replays. Lightweight no-library variant of an AOS counter.
- Коли використовувати
- Fundraising/goal-tracker meters, course-progress widgets, KPI cards needing in-view animation without GSAP overhead.
- Техніка
- IntersectionObserver, requestAnimationFrame, data-* attribute config
Custom-amount donation form blending radio presets with a free-text input
- Де знайти
- index.html .ul-donate-form, assets/scss/sections/_donate-form.scss
- Чому цікаво
- Five preset radio chips ($10..$50) plus a sixth pseudo-radio that wraps a number input; the input itself acts as the label, so typing a value selects that option visually. Cleaner UX than the usual 'Other' radio with separate field beneath.
- Коли використовувати
- Donation forms, tip jars, pricing custom-amount selectors, any preset-or-custom money picker.
- Техніка
- HTML radio + label trick, hidden inputs, CSS :checked sibling styling
Hover-reveal social column on team cards
- Де знайти
- index.html section.ul-team .ul-team-member-img .ul-team-member-socials
- Чому цікаво
- Social icons live inside the photo crop and slide up into view on hover (translateY + opacity), giving the otherwise minimal portrait a layered interaction without a separate overlay panel.
- Коли використовувати
- Team grids, author pages, attorney/agent cards needing per-person social links without breaking the photo grid rhythm.
- Техніка
- CSS transform/transition on hover, absolute positioning
Dual-axis WOW.js scroll-reveals layered with Animate.css fade variants
- Де знайти
- assets/vendor/animate-wow/wow.min.js, index.html: classes wow animate__fadeInUp, animate__fadeInRight, animate__fadeInDown
- Чому цікаво
- The template uses WOW + Animate.css instead of GSAP/AOS, picking different directional fades per element (sub-titles fade-up, hero side vectors fade-right and fade-down) so reveals feel choreographed rather than uniform.
- Коли використовувати
- Static HTML sites that want polished scroll reveals without bundling GSAP or a full motion library.
- Техніка
- wow.js, animate.css, CSS keyframes
Manual translateY parallax on a video cover via IntersectionObserver
- Де знайти
- assets/js/main.js parallaxEffect()
- Чому цікаво
- Self-contained 30-line parallax: an IntersectionObserver attaches/detaches a scroll listener only while the .ul-video-cover element is on screen, computing offset from viewport center so the image drifts at half the scroll speed. Minimal JS, no library, automatically pauses when off-screen.
- Коли використовувати
- A single hero/video parallax on an otherwise lightweight page where pulling in Locomotive Scroll or Lenis would be overkill.
- Техніка
- IntersectionObserver, scroll listener, transform translateY
Centred Swiper marquee with overflow-visible neighbours
- Де знайти
- index.html .ul-gallery-slider, assets/js/main.js gallery slider config
- Чому цікаво
- slidesPerView: 5.8 plus centeredSlides: true and autoplay produces an always-moving gallery where the active tile is centred and neighbours bleed off both edges — a magazine-style ribbon without writing a marquee animation.
- Коли використовувати
- Photo galleries, logo strips, partner walls where a continuous focal-point ribbon reads better than a static grid.
- Техніка
- Swiper.js (centeredSlides, fractional slidesPerView, autoplay, loop)
Компоненти
Sticky transparent header with logo, dropdown nav, search opener, gradient CTA pill button, and mobile sidebar toggler.
Dark charcoal hero with organic clip-path framed photo, gradient orange backdrop shape, sub-title, large Quicksand headline, donate CTA, and overlapping active-donors avatar stack.
Two-column about section with clip-path framed image, decorative SVG vectors, icon-led helping team callout card, and a phone-call mini-CTA next to the primary button.
Swiper carousel of donation cards: tagged photo, animated horizontal progress bar with raised/goal labels, title, description, and arrow CTA.
Custom donation widget with radio-button preset amounts ($10–$50), free-form custom amount input, gradient submit button, and a mirrored progress bar on the dark side panel.
Four-tile strip on a soft cream surface counting happy children, volunteers, products, and donors with flaticon glyphs and bold gradient numbers.
Two-by-two events grid on a dark background with date badge overlays on photos, venue meta, and an event-details CTA per card.
Why-join volunteer section with photo on the left and a single-open accordion on the right (rotating chevron, animated body reveal).
Four-up team grid with circular cropped portraits, hover-reveal social icons sliding in from the bottom, and member name plus designation.
Centred testimonials swiper with star rating, italic-leaning quote, reviewer avatar/name/role, and a quote-mark icon, paged via progress-bar pagination.
Asymmetric two-column block: heading and arrow nav on the left, swiper of blog cards (date badge corner, author/category meta, read-more arrow) on the right.
Edge-to-edge auto-playing centred swiper of square gallery images with hover-reveal Instagram-icon lightbox triggers (fslightbox).
Three-tier footer: gradient contact-info bar with icon tiles, four-column widget area (about, links, recent posts, newsletter), and bottom legal row with vector backdrop.
Fixed full-viewport preloader with a CSS spinner that JS hides on DOMContentLoaded by setting display:none.
Fixed full-screen search overlay with a single search input, submit button, and close icon — opened from the header search trigger.