Враження

Палітра

Типографіка

Бібліотеки

Сторінки

• Home v1index.html
• Home v2index-2.html
• Home v3index-3.html
• Home v4index-4.html
• Home v5index-5.html
• Home v6index-6.html
• Home v7index-7.html
• Home v8index-8.html
• Home v9index-9.html
• Aboutabout.html
• Servicesservices.html
• Service Detailsservice-details.html
• Projectsproject.html
• Project Detailsproject-details.html
• Teamteam.html
• Team Detailsteam-details.html
• Blogblog.html
• Blog Listblog-list.html
• Blog Detailsblog-details.html
• Pricingpricing-plan.html
• FAQfaq.html
• Contactcontact.html
• Contact v2contact-2.html
• Privacy Policyprivacy-policy.html
• Terms & Conditionsterms-condition.html
• 404error.html

Ключові фішки

• Custom-element architecture for every interactive section

  Де знайти

  assets/js/main.js:308-1017, <hero-slider>, <team-slider>, <counter-up>, <sticky-header>, <drawer-menu>

  Чому цікаво

  Instead of a single jQuery init, the template wires every behavior as a Web Component that boots itself in connectedCallback and instantiates Swiper from inside. The HTML reads like declarative tags (<hero-slider>, <team-slider>...) and dropping a section in or out is a copy-paste with no JS changes.

  Коли використовувати

  You want to bolt sliders/counters into an existing static site without a framework but still get encapsulated init logic that survives DOM swaps.

  Техніка

  Vanilla JS customElements.define, Swiper 11, IntersectionObserver

• Floating glass header that hides on scroll-down and reveals on scroll-up

  Де знайти

  assets/js/main.js:15-115, header.header-1.header-floating, assets/scss/header.scss:46-61

  Чому цікаво

  The <sticky-header data-sticky-type='always'> compares scrollTop deltas frame-by-frame and toggles 'scrolled-past-header' / hide / reveal classes via requestAnimationFrame, while an IntersectionObserver caches the original bounds to avoid layout thrash. The floating variant also paints a translucent backdrop only after first scroll.

  Коли використовувати

  Headers that need to disappear during reading and re-appear on intent-to-navigate without GSAP or a sticky-headroom library.

  Техніка

  Vanilla JS, IntersectionObserver, requestAnimationFrame

• CSS-only logo marquee with edge-fade gradient mask

  Де знайти

  assets/scss/running-content.scss:44-97, .running-content .running-animation

  Чому цікаво

  The infinite horizontal scroll is pure CSS keyframes (translateX(0) -> -100%) on a flex row of duplicated logo lists. A linear-gradient on .logos-background fades the edges to background, hover-pauses the animation, and on mobile the duration drops to 5s for a faster feel. No JS required.

  Коли використовувати

  Brand-logo strips, ticker bars, partner walls — anywhere you want a self-running marquee without a library.

  Техніка

  CSS keyframes, flexbox, linear-gradient mask

• IntersectionObserver-driven counter-up with raf loop

  Де знайти

  assets/js/main.js:480-530, <counter-up> .counter-item .heading[data-target]

  Чому цікаво

  Counters only start when 50% of the strip enters the viewport (threshold: 0.5), then a requestAnimationFrame loop ticks until current >= target. The increment is target/100, so big numbers and small numbers all settle in roughly the same number of frames.

  Коли використовувати

  Stats bands where you want the count-up to feel intentional (kicks off as the user reads it) rather than racing while the page is below the fold.

  Техніка

  IntersectionObserver, requestAnimationFrame, parseInt(data-target)

• Sticky headings + scrolling cards in testimonials

  Де знайти

  index.html:3116-3551, section.testimonial .section-headings-sticky

  Чому цікаво

  The left 5/12 column uses position: sticky so the section eyebrow + 'See what our customers have to say' headline parks at the top of the viewport while the right 7/12 column scrolls a vertical stack of testimonial cards past it. No ScrollTrigger needed — classic CSS sticky.

  Коли використовувати

  Long-form testimonial or feature lists where you want the section title to anchor while content streams.

  Техніка

  CSS position: sticky, Bootstrap grid

• Asymmetric 8/12 + 6/6 project mosaic

  Де знайти

  index.html:2155-2225, div.recent-project .project-media .row

  Чому цікаво

  Bootstrap grid produces a magazine-feel layout: one tall 8/12 hero image (with an arrow-CTA absolutely positioned over its corner) plus two stacked 6/6 thumbnails in the remaining 4/12, each carrying its own AOS reveal direction (zoom-in-up vs fade-left with stagger).

  Коли використовувати

  Portfolio reels where you want one signature project front-and-center with secondary work tucked beside it, without writing a custom bento engine.

  Техніка

  Bootstrap col-lg-8 / col-lg-4, AOS, CSS border-radius radius18

• Per-section CSS-variable rebinding for dark/light context swaps

  Де знайти

  assets/scss/promotion.scss:1-50, assets/scss/multicolumn.scss:42-58

  Чому цікаво

  Components don't hardcode their dark variants — they rebind --color-background, --color-foreground, --color-foreground-heading on the section root or on .multicolumn-card:hover. This means the same .multicolumn-card flips its full color scheme on hover with three custom-property overrides instead of a duplicate selector tree.

  Коли використовувати

  Templates that need light cards on dark bands, hover-inversions, or theme variants without writing a ::hover ruleset for every nested element.

  Техніка

  CSS custom properties, scoped variable inheritance

Компоненти