Враження

Палітра

Типографіка

Бібліотеки

Сторінки

• Home v1index.html
• Home Marketing Agencyindex-2.html
• Home Creative Agencyindex-3.html
• Home Design Studioindex-4.html
• Home Modern Agencyindex-5.html
• Aboutabout.html
• Servicesservice.html
• Services v2service-2.html
• Service Detailsservice-details.html
• Projectsproject.html
• Projects v2project-2.html
• Project Detailsproject-details.html
• Teamteam.html
• Team Detailsteam-details.html
• Blog Gridblog.html
• Blog Standardblog-2.html
• Blog Detailsblog-details.html
• Pricingpricing.html
• FAQfaq.html
• Testimonialstestimonials.html
• Contactcontact.html
• 404error.html

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

• Hover-expanding portfolio tile that takes over its neighbour's column

  Де знайти

  index.html: section.project-section .project-block-one, assets/css/module-css/project.css: .project-block-one .inner-box .overlay-content

  Чому цікаво

  Each tile holds a hidden double-width overlay (200% + 15px) that scales from 0 to 1 on hover, so the active card visually swallows the next slot rather than just popping up a tooltip. The last child flips its transform-origin so the expansion goes left instead of overflowing.

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

  Portfolio or case-study grids where you want hover to feel architectural and reveal a fuller title without a separate detail page or modal.

  Техніка

  Pure CSS transforms with transform-origin flip on :last-child; no JS required.

• Offset-shadow card frame using nested pseudo-elements

  Де знайти

  assets/css/style.css: .block-shadow, assets/css/module-css/feature.css: .feature-block-one

  Чому цікаво

  Instead of a box-shadow, every card draws its black 'shadow' as a real ::before that's 5px wider and taller with rounded asymmetric corners (30px 40px 34px 40px). This gives the chunky neo-brutalist offset look that animates and matches border radius perfectly across browsers.

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

  When you want a hard, designed offset-shadow that crops to a non-circular border-radius and stays crisp on retina, instead of a soft CSS shadow.

  Техніка

  CSS only: ::before with z-index -1 and asymmetric border-radius, plus an outer wrapper with padding-right/padding-bottom to reveal the offset.

• Letter-by-letter rotateY preloader with stroked outline text

  Де знайти

  index.html: .handle-preloader .txt-loading, assets/css/style.css: @keyframes letters-loading

  Чому цікаво

  Each letter of 'digmox' is rendered twice: once as transparent text with -webkit-text-stroke (the outline) and once as a filled :before whose opacity and rotateY animate on a 0.2s stagger per letter. The result is a flipbook reveal rather than a generic spinner.

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

  Brand-led preloaders where the wordmark itself should perform; works best with a short brand name (4-8 letters).

  Техніка

  @keyframes letters-loading with rotateY(-90deg) <-> 0deg, nth-child animation-delay stagger, -webkit-text-stroke for the hollow letterforms.

• Triple-ring ripple around the play button

  Де знайти

  index.html: section.video-section .video-btn .border-animation, assets/css/style.css: .border-animation, @keyframes squares

  Чому цікаво

  Three absolutely-positioned spans share the same 2.9s 'squares' keyframe but with 0s/1s/2s delays, producing a continuously emitted ring effect rather than a single pulse. It is rendered as plain CSS without any JS hooks.

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

  Video thumbnails, podcast players, or any clickable focal point where you want eye-catching motion that loops indefinitely without burning frames on JS.

  Техніка

  CSS keyframes with scale + opacity, three siblings with staggered animation-delay.

• Owl carousel with crossfade and 8s ken-burns zoom on the active slide

  Де знайти

  index.html: .banner-carousel, assets/css/module-css/banner.css: .banner-carousel .slide-item .bg-layer, assets/js/script.js: $('.banner-carousel').owlCarousel

  Чому цікаво

  The owlCarousel is configured with animateIn/animateOut: fadeIn/fadeOut, but the .active .bg-layer transitions to scale(1.25) over 8000ms, so each slide drifts cinematically while the next one fades over it. Sub-elements (upper-text, h2, p, btn) each use their own 700-1300ms transition-delay so the copy ladders in.

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

  Cinematic agency or product hero sliders where you want movement on a still photo without the cost of video.

  Техніка

  owl.carousel + CSS transitions on .active subselectors with manually tuned transition-delay values.

• 600s-loop CSS-only marquee with icomoon separators

  Де знайти

  index.html: .slide-text-outer .text-box, assets/css/style.css: @keyframes scroll-left, .slide-text-outer .text-box li:before

  Чому цікаво

  Capability words are duplicated 8x inside one ul, set to width: max-content, and translated -100% over 600 seconds for an extremely slow, hypnotic scroll. Each item gets a glyph from the icomoon font as a ::before separator, avoiding any extra markup or images.

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

  Brand-keyword bands or section dividers where you want subtle motion that doesn't compete with neighbouring content.

  Техніка

  Pure CSS: @keyframes translateX, width: max-content, font-icon ::before.

• Process accordion that reveals an image, not text

  Де знайти

  index.html: .accordion-box li.accordion, assets/css/module-css/process.css: .content_block_two .accordion.active-block .image-box, assets/js/script.js: '.accordion-box .acc-btn' click handler

  Чому цікаво

  The classic accordion pattern is inverted: the heading is always visible and clicking swaps in a process screenshot above the active step (display:none -> display:block on .active-block). It turns the accordion into a visual carousel without needing a separate carousel library.

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

  Methodology, process, or feature-step sections where each step has a representative image but you want a compact stacked layout.

  Техніка

  jQuery click handler that toggles .active-block, with CSS .active-block .image-box{display:block}.

• Live LTR/RTL direction switch built into the page

  Де знайти

  index.html: .page_direction .direction_switch button, assets/css/rtl.css, assets/js/script.js: directionswitch() function

  Чому цікаво

  Two fixed pill buttons toggle .rtl/.ltr on .boxed_wrapper, and every module CSS ships its own .rtl override block (.rtl .project-block-four .inner-box, etc.). The whole layout mirrors live with no reload, useful for Arabic/Hebrew client demos.

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

  When you need a single template to demo or ship to bilingual markets without forking the stylesheet.

  Техніка

  jQuery class toggle plus a parallel rtl.css stylesheet with mirrored padding/transform-origin/float rules.

Компоненти