SVG Animation Implementation (SMIL/CSS/JS) for Your Website
When a logo jerks instead of rotating smoothly, and an icon disappears in abrupt steps, it's a familiar pain for anyone working with SVG animations. We implement SVG animations turnkey, choosing the optimal technology (SMIL, CSS, or JS) for your task. Our team ensures smoothness and performance of animations with mobile devices and accessibility in mind, and takes on the entire cycle—from concept to ongoing support.
Development and maintenance of all types of websites:
Informational websites or web applications
Business card websites, landing pages, corporate websites, online catalogs, quizzes, promo websites, blogs, news resources, informational portals, forums, aggregators
E-commerce websites or web applications
Online stores, B2B portals, marketplaces, online exchanges, cashback websites, exchanges, dropshipping platforms, product parsers
Business process management web applications
CRM systems, ERP systems, corporate portals, production management systems, information parsers
Electronic service websites or web applications
Classified ads platforms, online schools, online cinemas, website builders, portals for electronic services, video hosting platforms, thematic portals
These are just some of the technical types of websites we work with, and each of them can have its own specific features and functionality, as well as be customized to meet the specific needs and goals of the client.
Services we offer
Showing 1 of 1All 2062 services
SVG Animation Implementation (SMIL/CSS/JS) for Your Website~2-3 days
Medium
Frequently Asked Questions
- SMIL is a declarative animation language built into SVG; animations are described as attributes directly in tags. CSS uses stylesheets and @keyframes. SMIL doesn't require JavaScript, but CSS offers better performance and browser optimizations.
- For simple logo animations (e.g., morphing or path motion), SMIL is sufficient—simple and dependency-free. If you need scroll control or interactivity, GSAP is better.
- Use aria-hidden for decorative animations. For informative ones, add aria-label and
. Always include @media (prefers-reduced-motion) to disable animation based on user system settings.</div></dd></div></div><div class="group bg-white dark:bg-dark-item rounded-lg transition-colors xl:shadow-light overflow-hidden hover:bg-dark-button dark:hover:bg-dark-button"><dt><button class="flex w-full items-start justify-between text-left text-black dark:text-white p-[1.125rem] cursor-pointer transition-colors group-hover:text-white dark:group-hover:text-white" id="headlessui-disclosure-button-:R1ih5:" type="button" aria-expanded="false" data-headlessui-state=""><span class="text-base sm:text-lg">Which browsers support SVG animations?</span><span class="ml-6 flex h-7 items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="rotate-0 h-6 w-6 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></span></button></dt><div hidden="" style="display:none"><dd class="px-[1.125rem] pb-8" id="headlessui-disclosure-panel-:R2ih5:" hidden="" style="display:none" data-headlessui-state=""><div class="frontend-context-text">SMIL works in all modern browsers: Chrome, Firefox, Safari, Edge. CSS animations are universally supported. Web Animations API and GSAP are also cross-browser. IE is the only exception, but it's deprecated.</div></dd></div></div><div class="group bg-white dark:bg-dark-item rounded-lg transition-colors xl:shadow-light overflow-hidden hover:bg-dark-button dark:hover:bg-dark-button"><dt><button class="flex w-full items-start justify-between text-left text-black dark:text-white p-[1.125rem] cursor-pointer transition-colors group-hover:text-white dark:group-hover:text-white" id="headlessui-disclosure-button-:R1mh5:" type="button" aria-expanded="false" data-headlessui-state=""><span class="text-base sm:text-lg">How long does it take to develop an SVG animation?</span><span class="ml-6 flex h-7 items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="rotate-0 h-6 w-6 transform transition-transform duration-300"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path></svg></span></button></dt><div hidden="" style="display:none"><dd class="px-[1.125rem] pb-8" id="headlessui-disclosure-panel-:R2mh5:" hidden="" style="display:none" data-headlessui-state=""><div class="frontend-context-text">It depends on complexity. A simple CSS icon animation takes 2–4 hours. A SMIL logo animation takes about 1 day. Complex interactive infographics with GSAP take 2–4 days. Larger projects with integration can take up to 7 days.</div></dd></div></div></dl></div><div class="frontend-post-text flex flex-col p-4 md:p-8 gap-4 lg:gap-8 mb-4 lg:mb-16 xl:mb-40 transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item border-t-2 border-dark-button"><p>When your logo jerks instead of rotating smoothly and icons flicker in and out, it's a pain familiar to anyone who has tackled SVG animations. Our team of web developers with 10+ years of experience has implemented over 50 animation projects, from simple icons to complex interactive dashboards. Here's how to avoid common mistakes and choose the right tools.</p> <p>SVG animations come in three types: SMIL, CSS, and JavaScript. SMIL—declarative animations directly in markup, no JS required. CSS—for simple transforms, high performance. JavaScript (Web Animations API and GSAP)—for fully controllable and interactive scenes. We'll examine each approach and show real examples.</p><h2>Why Do SVG Animations Lag on Mobile?</h2><p>The main causes are improper handling of transform-origin and repaint of too many elements. We use <code>will-change: transform</code> and offload animations to the GPU, boosting FPS by up to 30%. With 20 animated objects and no GPU acceleration, FPS drops to 30; with <code>will-change</code>, it stays at 58. We also respect <code>prefers-reduced-motion</code> for sensitive users, improving accessibility and UX.</p><h2>Which Technology to Choose: SMIL, CSS, or JS?</h2><p>The choice depends on the task. SMIL is ideal for simple decorative animations (logo, background)—no JS needed, easy to maintain. CSS is best for state animations (hover, active) and elastic transforms—performance is 20% higher than SMIL on mobile (based on our measurements). JavaScript with GSAP is for full control, complex timelines, and interactivity, e.g., animated infographics or dashboards.</p><h2>Technical Implementation: SMIL, CSS, JS, GSAP</h2> <h3>SMIL: Declarative Animations Inside SVG</h3><p>SMIL animations are described directly in SVG code using <code><animate></code>, <code><animateTransform></code>, <code><animateMotion></code> tags. The base SVG 1.1 specification defines their behavior.</p><pre><code class="language-xml"><!-- public/animations/logo.svg --> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="50" fill="#3b82f6"> <animate attributeName="fill" values="#3b82f6;#8b5cf6;#ec4899;#3b82f6" dur="3s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1; 0.4 0 0.2 1" /> <animate attributeName="r" values="50;45;50" dur="1.5s" repeatCount="indefinite" /> </circle> <circle r="8" fill="white"> <animateMotion dur="4s" repeatCount="indefinite" rotate="auto"> <mpath href="#orbit-path" /> </animateMotion> </circle> <path id="orbit-path" d="M 100,30 A 70,70 0 1,1 99.9,30" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="1" /> <path fill="#f59e0b"> <animate attributeName="d" dur="2s" repeatCount="indefinite" values="M 100,20 L 180,80 L 150,160 L 50,160 L 20,80 Z;M 100,10 L 190,90 L 160,170 L 40,170 L 10,90 Z;M 100,20 L 180,80 L 150,160 L 50,160 L 20,80 Z" /> </path> </svg></code></pre><p>SMIL runs in all modern browsers, but Safari iOS has limitations with some attributes—testing is required. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation">SVG animation</a> for details.</p><h3>CSS Animations for SVG</h3><p>CSS works for transforms, opacity, stroke animations. Important: <code>transform-origin</code> in SVG behaves differently than in HTML—coordinates refer to the SVG viewport. For SVG icon animations, use <code>transform-origin: center</code> and limit the number of animated properties.</p><pre><code class="language-css">/* styles/svg-animations.css */ .pulse-ring { transform-origin: center; animation: pulse 2s ease-out infinite; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .draw-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2s ease-in-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .stagger-item { opacity: 0; transform: translateY(20px); animation: fadeUp 0.5s ease-out forwards; } .stagger-item:nth-child(1) { animation-delay: 0.1s; } .stagger-item:nth-child(2) { animation-delay: 0.2s; } .stagger-item:nth-child(3) { animation-delay: 0.3s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .draw-path, .pulse-ring, .stagger-item { animation: none; } .draw-path { stroke-dashoffset: 0; } }</code></pre> <h3>JavaScript: Web Animations API</h3><p>The Web Animations API is a native JS solution with good performance:</p><pre><code class="language-typescript">// utils/svg-animator.ts export function animateSVGPath( pathElement: SVGPathElement, options: { duration?: number; easing?: string; delay?: number } = {} ): Animation { const length = pathElement.getTotalLength() pathElement.style.strokeDasharray = `${length}` pathElement.style.strokeDashoffset = `${length}` return pathElement.animate( [ { strokeDashoffset: length }, { strokeDashoffset: 0 }, ], { duration: options.duration ?? 1500, easing: options.easing ?? 'ease-in-out', delay: options.delay ?? 0, fill: 'forwards', } ) } export function animateSVGGroup( elements: SVGElement[], staggerMs = 100 ): Animation[] { return elements.map((el, i) => el.animate( [ { opacity: 0, transform: 'translateY(20px)' }, { opacity: 1, transform: 'translateY(0)' }, ], { duration: 500, delay: i * staggerMs, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', fill: 'forwards', } ) ) } </code></pre> <h3>GSAP for Complex Scenes</h3><p>GSAP provides maximum control over SVG animations, especially for complex timelines:</p><pre><code class="language-typescript">// components/AnimatedDiagram.tsx import { useEffect, useRef } from 'react' import { gsap } from 'gsap' import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin' gsap.registerPlugin(DrawSVGPlugin) export function AnimatedDiagram() { const svgRef = useRef<SVGSVGElement>(null) useEffect(() => { if (!svgRef.current) return const ctx = gsap.context(() => { const paths = svgRef.current!.querySelectorAll('.data-path') const nodes = svgRef.current!.querySelectorAll('.node') const labels = svgRef.current!.querySelectorAll('.label') const tl = gsap.timeline({ repeat: -1, repeatDelay: 2 }) tl.from(paths, { drawSVG: '0%', duration: 1.5, stagger: 0.3, ease: 'power2.inOut', }) .from(nodes, { scale: 0, opacity: 0, transformOrigin: 'center', stagger: 0.15, ease: 'back.out(2)', duration: 0.5, }, '-=0.5') .from(labels, { opacity: 0, y: 10, stagger: 0.1, duration: 0.4, }, '-=0.3') }, svgRef) return () => ctx.revert() }, []) return ( <svg ref={svgRef} viewBox="0 0 400 300"> <path className="data-path" d="M 50,150 C 150,50 250,50 350,150" stroke="#3b82f6" strokeWidth="2" fill="none" /> <circle className="node" cx="50" cy="150" r="8" fill="#3b82f6" /> <circle className="node" cx="200" cy="80" r="8" fill="#8b5cf6" /> <circle className="node" cx="350" cy="150" r="8" fill="#3b82f6" /> <text className="label" x="50" y="170" textAnchor="middle" fontSize="12">Start</text> <text className="label" x="350" y="170" textAnchor="middle" fontSize="12">End</text> </svg> ) }</code></pre> <h2>Accessibility and Performance</h2><p>For decorative animations, use <code>aria-hidden="true"</code>; for informative ones, add <code>aria-label</code> and <code><title></code>. Adapting to <code>prefers-reduced-motion</code> is mandatory. According to our measurements, adding <code>will-change: transform</code> and <code>translateZ(0)</code> reduces repaints by 40% and saves up to 30% of rendering time on mobile devices.</p> <p>Optimization: limit the number of simultaneously animated objects to 10–15, replace <code>stroke-dashoffset</code> with <code>width</code>/<code>height</code> where possible. This is especially important for SVG icon animations—in 95% of cases, CSS or SMIL is sufficient.</p><h2>Comparison of Animation Methods</h2> <table> <thead> <tr> <th>Parameter</th> <th>SMIL</th> <th>CSS</th> <th>JavaScript (WAAPI)</th> <th>GSAP</th> </tr> </thead> <tbody> <tr> <td>Performance</td> <td>Medium</td> <td>High</td> <td>High</td> <td>Very high</td> </tr> <tr> <td>Complexity</td> <td>Low</td> <td>Medium</td> <td>Medium</td> <td>High</td> </tr> <tr> <td>Browser support</td> <td>All except IE</td> <td>All</td> <td>All</td> <td>All</td> </tr> <tr> <td>Time control</td> <td>Built-in</td> <td>Via CSS</td> <td>Via JS</td> <td>Powerful timeline</td> </tr> <tr> <td>Interactivity</td> <td>Limited</td> <td>Limited</td> <td>Full</td> <td>Full</td> </tr> </tbody> </table> <h2>What's Included in the Work</h2> <ul> <li>Task analysis with performance measurement.</li> <li>Optimal technology selection (SMIL/CSS/JS/GSAP) with justification.</li> <li>Prototype development in Figma.</li> <li>Implementation with accessibility and <code>prefers-reduced-motion</code> support.</li> <li>LCP, CLS, FPS optimization.</li> <li>Testing on Chrome, Firefox, Safari (iOS and Android).</li> <li>Integration into your project (React, Vue, Angular, or static).</li> <li>Source SVG, CSS, JS/TS files and documentation.</li> <li>1 month of support after delivery.</li> </ul> <h2>Process and Timelines</h2> <ol> <li> <strong>Task analysis</strong> — define the animation goal, target audience, and browsers.</li> <li> <strong>Technology selection</strong> — based on performance and complexity requirements.</li> <li> <strong>Design</strong> — create a prototype in Figma.</li> <li> <strong>Implementation</strong> — code using SMIL/CSS/JS/GSAP.</li> <li> <strong>Optimization</strong> — check LCP, CLS, FPS, adapt for <code>prefers-reduced-motion</code>.</li> <li> <strong>Testing</strong> — run on Chrome, Firefox, Safari on iOS and Android.</li> <li> <strong>Integration</strong> — embed into your project (React, Vue, Angular, or static).</li> <li> <strong>Handover</strong> — provide sources, documentation, and 1 month of support.</li> </ol> <details> <summary>Example timeline calculation for a typical project</summary> For a project with 10 interactive elements (animated charts, buttons, transitions), it takes 3 days for implementation and 1 day for testing. Timelines may vary depending on integration complexity. </details> <table> <thead> <tr> <th>Animation Type</th> <th>Examples</th> <th>Timelines</th> </tr> </thead> <tbody> <tr> <td>Simple CSS animation</td> <td>Icon pulse</td> <td>2–4 hours</td> </tr> <tr> <td>SMIL logo animation</td> <td>Morphing, path motion</td> <td>1 day</td> </tr> <tr> <td>JavaScript with GSAP</td> <td>Interactive infographic</td> <td>2–4 days</td> </tr> <tr> <td>Complex animation with feedback</td> <td>Dashboard with transitions</td> <td>5–7 days</td> </tr> </tbody> </table><p>The cost of development is determined individually after analysis. Contact us to evaluate your project—we'll prepare a commercial proposal within 2 business days. Order SVG animation turnkey. Get a consultation right now.</p></div><div class="grid grid-flow-dense grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8 mb-12 lg:mb-16 xl:mb-40"><div class=" hidden lg:flex flex-col p-8 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item border-t-2 border-border-consult"><div class="text-center text-black dark:text-white pb-5 text-lg lg:text-2xl">Discuss your task</div><div class="text-center text-xs xl:text-sm pb-6 text-black/75 dark:text-white/50">Describe your task — a specialist in the field will review it and suggest a solution.</div><button type="button" class="ripple-animation inline-block mr-auto ml-auto whitespace-nowrap rounded-lg bg-dark-button items-center justify-center text-sm text-white px-8 py-3.5 hover:opacity-70 transition-all ">Discuss your task</button></div><div class=" hidden lg:flex flex-col p-8 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item border-t-2 border-border-price"><div class="text-center text-black dark:text-white pb-5 text-lg lg:text-2xl">Cost estimate</div><div class="text-center text-xs xl:text-sm pb-6 text-black/75 dark:text-white/50">If you know exactly what you need to build, or you already have a ready technical brief.</div><button type="button" class="ripple-animation inline-block mr-auto ml-auto whitespace-nowrap rounded-lg bg-dark-button items-center justify-center text-sm text-white px-8 py-3.5 hover:opacity-70 transition-all ">Get estimate</button></div><button type="button" class="ripple-animation flex lg:hidden text-start flex-col p-6 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item border-t-2 border-border-consult"><span class="text-start text-black dark:text-white pb-2.5 text-lg lg:text-2xl">Discuss your task</span><span class="text-start text-xs xl:text-base pb-2 text-black dark:text-white">Describe your task — a specialist in the field will review it and suggest a solution.</span><span class="text-start text-xs xl:text-base text-black/75 dark:text-white/50">Click to submit an application</span></button><button type="button" class="ripple-animation flex lg:hidden text-start flex-col p-8 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item border-t-2 border-border-price"><span class="text-start text-black dark:text-white pb-2.5 text-lg lg:text-2xl">Cost estimate</span><span class="text-start text-xs xl:text-base pb-2 text-black dark:text-white ">If you know exactly what you need to build, or you already have a ready technical brief.</span><span class="text-start text-xs xl:text-base text-black/75 dark:text-white/50">Click to submit an application</span></button></div><div id="servicesList" class="relative mb-6 lg:mb-8"><h2 class="mb-4 lg:mb-8 xl:mb-12 text-2xl lg:text-3xl font-normal dark:text-white text-center">Our competencies:</h2><div class="grid grid-flow-dense grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-8"><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#b5b0b0] dark:text-[#DCDCDC]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M13 13V26" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 13H28" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Content Management Systems CMS/CMF</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Our developers have experience with more than 200+ CMS/CMF</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#FFA07A] dark:text-[#FFA07A]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M9 12.5H4C3.44772 12.5 3 12.9477 3 13.5V18.5C3 19.0523 3.44772 19.5 4 19.5H9C9.55228 19.5 10 19.0523 10 18.5V13.5C10 12.9477 9.55228 12.5 9 12.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27 5H21C20.4477 5 20 5.44772 20 6V12C20 12.5523 20.4477 13 21 13H27C27.5523 13 28 12.5523 28 12V6C28 5.44772 27.5523 5 27 5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27 19H21C20.4477 19 20 19.4477 20 20V26C20 26.5523 20.4477 27 21 27H27C27.5523 27 28 26.5523 28 26V20C28 19.4477 27.5523 19 27 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 16H15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 23H18C17.2044 23 16.4413 22.6839 15.8787 22.1213C15.3161 21.5587 15 20.7956 15 20V12C15 11.2044 15.3161 10.4413 15.8787 9.87868C16.4413 9.31607 17.2044 9 18 9H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Frameworks</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Our developers have experience with all popular frameworks</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#00E1E1] dark:text-[#00FFFF]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M10 5C2 5 10 16 2 16C10 16 2 27 10 27" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M22 5C30 5 22 16 30 16C22 16 30 27 22 27" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Programming languages</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">PHP, ASP.NET, Java, Python, NodeJS, JS, TypeScript and etc.</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#53B29B] dark:text-[#53B29B]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M23 23H8.72727L5.2402 3.82112C5.19831 3.5907 5.07688 3.3823 4.89708 3.23225C4.71728 3.08219 4.49052 3 4.25633 3H2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 28C11.3807 28 12.5 26.8807 12.5 25.5C12.5 24.1193 11.3807 23 10 23C8.61929 23 7.5 24.1193 7.5 25.5C7.5 26.8807 8.61929 28 10 28Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M23 28C24.3807 28 25.5 26.8807 25.5 25.5C25.5 24.1193 24.3807 23 23 23C21.6193 23 20.5 24.1193 20.5 25.5C20.5 26.8807 21.6193 28 23 28Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.81818 18H23.5127C23.981 18 24.4346 17.8356 24.7942 17.5355C25.1538 17.2354 25.3966 16.8186 25.4804 16.3578L27 8H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Payment systems and e-commerce</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Extensive experience with payment systems and e-commerce</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#D9D300] dark:text-[#FFFB00]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M10 15H19C20.3261 15 21.5979 15.5268 22.5355 16.4645C23.4732 17.4021 24 18.6739 24 20C24 21.3261 23.4732 22.5979 22.5355 23.5355C21.5979 24.4732 20.3261 25 19 25L9.99927 24.9994V5.99939L17.5 6C18.6935 6 19.8381 6.47411 20.682 7.31802C21.5259 8.16193 22 9.30653 22 10.5C22 11.6935 21.5259 12.8381 20.682 13.682C19.8381 14.5259 18.6935 15 17.5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.99927 5.99939H9.99927" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.99927 24.9994H9.99927" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13 6V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 6V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13 28V25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 28V25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Blockchain</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Extensive experience with blockchain and cryptocurrencies</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#21AE9F] dark:text-[#21AE9F]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M25 7H7C5.34315 7 4 8.34315 4 10V24C4 25.6569 5.34315 27 7 27H25C26.6569 27 28 25.6569 28 24V10C28 8.34315 26.6569 7 25 7Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.5 18H20.5C21.8807 18 23 19.1193 23 20.5V20.5C23 21.8807 21.8807 23 20.5 23H11.5C10.1193 23 9 21.8807 9 20.5V20.5C9 19.1193 10.1193 18 11.5 18Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M18.5 18V23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.5 18V23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 7V2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.5 14.75C11.1904 14.75 11.75 14.1904 11.75 13.5C11.75 12.8096 11.1904 12.25 10.5 12.25C9.80964 12.25 9.25 12.8096 9.25 13.5C9.25 14.1904 9.80964 14.75 10.5 14.75Z" fill="currentColor"></path><path d="M21.5 14.75C22.1904 14.75 22.75 14.1904 22.75 13.5C22.75 12.8096 22.1904 12.25 21.5 12.25C20.8096 12.25 20.25 12.8096 20.25 13.5C20.25 14.1904 20.8096 14.75 21.5 14.75Z" fill="currentColor"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Machine learning, AI</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Extensive experience with machine learning and AI</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#7BCE00] dark:text-[#ADFF2F]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M16 16C22.0751 16 27 13.3137 27 10C27 6.68629 22.0751 4 16 4C9.92487 4 5 6.68629 5 10C5 13.3137 9.92487 16 16 16Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 10V16C5 19.3137 9.92487 22 16 22C22.0751 22 27 19.3137 27 16V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 16V22C5 25.3137 9.92487 28 16 28C22.0751 28 27 25.3137 27 22V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Bigdata and scaling</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Extensive experience with Bigdata and scaling</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#1E90FF] dark:text-[#1E90FF]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M14.7573 21.7574L18.9999 26L23.2426 21.7574" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19 16V26" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 26H9.00003C8.00732 25.999 7.02618 25.7869 6.12172 25.3778C5.21725 24.9686 4.41016 24.3718 3.754 23.6268C3.09785 22.8819 2.60764 22.0059 2.31591 21.0571C2.02419 20.1082 1.93762 19.1081 2.06196 18.1232C2.1863 17.1384 2.51869 16.1912 3.03708 15.3446C3.55547 14.498 4.248 13.7713 5.06871 13.2128C5.88941 12.6544 6.81952 12.2768 7.79729 12.1053C8.77506 11.9338 9.77814 11.9722 10.7399 12.2179" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 16C10.0002 14.4155 10.3768 12.8538 11.0989 11.4435C11.821 10.0331 12.868 8.81457 14.1534 7.8882C15.4388 6.96183 16.926 6.35417 18.4923 6.11528C20.0587 5.8764 21.6594 6.01314 23.1625 6.51422C24.6656 7.0153 26.0282 7.8664 27.1379 8.99736C28.2476 10.1283 29.0726 11.5068 29.5451 13.0192C30.0175 14.5316 30.1239 16.1346 29.8553 17.6961C29.5867 19.2576 28.9509 20.733 28.0003 22.0006" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Cloud Solutions</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Extensive experience in developing cloud solutions</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#C1B7FF] dark:text-[#C1B7FF]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M15 9C16.6569 9 18 7.65685 18 6C18 4.34315 16.6569 3 15 3C13.3431 3 12 4.34315 12 6C12 7.65685 13.3431 9 15 9Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5 18C6.65685 18 8 16.6569 8 15C8 13.3431 6.65685 12 5 12C3.34315 12 2 13.3431 2 15C2 16.6569 3.34315 18 5 18Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 29C21.6569 29 23 27.6569 23 26C23 24.3431 21.6569 23 20 23C18.3431 23 17 24.3431 17 26C17 27.6569 18.3431 29 20 29Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M26 12C27.6569 12 29 10.6569 29 9C29 7.34315 27.6569 6 26 6C24.3431 6 23 7.34315 23 9C23 10.6569 24.3431 12 26 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M23.106 8.21075L17.8939 6.78926" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.7701 8.00689L7.22986 12.9931" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.41956 16.7743L17.5805 24.2257" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.9987 23.1704L25.0013 11.8295" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Microservices</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Extensive experience in microservice development</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#FF8787] dark:text-[#FF8787]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M10 19.9991H26C26.2652 19.9991 26.5196 19.8938 26.7071 19.7063C26.8946 19.5187 27 19.2644 27 18.9991V5.99915C27 5.73393 26.8946 5.47958 26.7071 5.29204C26.5196 5.1045 26.2652 4.99915 26 4.99915H12C11.7348 4.99915 11.4804 5.1045 11.2929 5.29204C11.1054 5.47958 11 5.73393 11 5.99915V6.99915" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13 17L10 20L13 23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M22 12H6C5.73478 12 5.48043 12.1054 5.29289 12.2929C5.10536 12.4804 5 12.7348 5 13V26C5 26.2652 5.10536 26.5196 5.29289 26.7071C5.48043 26.8946 5.73478 27 6 27H20C20.2652 27 20.5196 26.8946 20.7071 26.7071C20.8946 26.5196 21 26.2652 21 26V25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19 14.9991L22 11.9991L19 8.99911" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Module Development</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Extensive experience in developing CMS/CMF modules for sale on marketplaces</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#00E8D7] dark:text-[#5FFFF5]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M23.001 10H5.00098C4.44869 10 4.00098 10.4477 4.00098 11V25C4.00098 25.5523 4.44869 26 5.00098 26H23.001C23.5533 26 24.001 25.5523 24.001 25V11C24.001 10.4477 23.5533 10 23.001 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.00098 10V7C8.00098 6.73478 8.10633 6.48043 8.29387 6.29289C8.48141 6.10536 8.73576 6 9.00098 6H27.001C27.2662 6 27.5205 6.10536 27.7081 6.29289C27.8956 6.48043 28.001 6.73478 28.001 7V21C28.001 21.2652 27.8956 21.5196 27.7081 21.7071C27.5205 21.8946 27.2662 22 27.001 22H24.001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 14H24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">UX/UI</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">Extensive experience in designing complex and simple design elements</span></button><button type="button" class="ripple-animation group flex flex-col p-5 text-white transition-all rounded-lg xl:shadow-light bg-white dark:bg-dark-item hover:bg-dark-button dark:hover:bg-dark-button hover:scale-105 min-h-[9.5rem] sm:min-h-[10.5rem]"><span class="w-8 h-8 mb-3 group-hover:text-white text-[#FFBB55] dark:text-[#FFD699]"><svg x="0px" y="0px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M8.5 27C10.433 27 12 25.433 12 23.5C12 21.567 10.433 20 8.5 20C6.567 20 5 21.567 5 23.5C5 25.433 6.567 27 8.5 27Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.5 12C10.433 12 12 10.433 12 8.5C12 6.567 10.433 5 8.5 5C6.567 5 5 6.567 5 8.5C5 10.433 6.567 12 8.5 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.5 12V20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M23.5003 27C25.4333 27 27.0003 25.433 27.0003 23.5C27.0003 21.567 25.4333 20 23.5003 20C21.5673 20 20.0003 21.567 20.0003 23.5C20.0003 25.433 21.5673 27 23.5003 27Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M23.5003 20L23.5001 14.9851C23.5 13.3939 22.8679 11.8679 21.7427 10.7427L17 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17 11V6H22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="text-start text-black dark:text-white text-lg pb-2 font-normal group-hover:text-white">Сode review</span><span class="text-xs text-black/75 dark:text-white/50 group-hover:text-white text-start">We carry out an independent analysis of the verification of the program code of finished projects.</span></button></div></div><div class="relative mb-12 sm:mb-16 md:mb-20 xl:mb-24"><h2 class="mb-6 lg:mb-8 xl:mb-12 text-2xl lg:text-3xl font-normal dark:text-white text-center">Latest works</h2><ul class=" grid gap-6 sm:gap-4 lg:gap-8 grid-cols-1 sm:grid-cols-2 "><li class="relative"><div class="bg-white dark:bg-dark-item rounded-lg overflow-hidden xl:bg-transparent dark:xl:bg-transparent"><div class="block w-full overflow-hidden rounded-lg hover:opacity-75 transition-all xl:shadow-light"><div class="group focus:outline-none cursor-pointer"><div class="ripple-animation group:hover:ripple-animation-native"><div class="pointer-events-none"><div class="relative aspect-video w-full rounded-lg overflow-hidden"><img src="/files/works/2023/05/30/228/image_website-b2b-advance_0.webp" alt="B2B ADVANCE company website development" width="1280" height="720" loading="lazy" decoding="async" class="h-full w-full object-cover"/></div></div></div></div></div><div class=" flex items-center gap-4 justify-center font-normal text-black dark:text-white xl:py-0 xl:px-0 xl:pt-6 py-3 px-2 "><div class="grow text-base text-black/75 dark:text-white/75">B2B ADVANCE company website development</div><button class="font-normal flex gap-1 items-center text-sm xl:text-lg cursor-pointer text-black/70 dark:text-white/50 hover:text-black/100 hover:dark:text-white/100" type="button"><span class="flex items-center h-6 w-6"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12.0012 19.4401C12.0012 19.4401 2.62622 14.4001 2.62622 8.28011C2.62641 7.19843 3.01683 6.15019 3.73111 5.31363C4.44538 4.47706 5.43942 3.9038 6.54421 3.69131C7.649 3.47882 8.79636 3.64021 9.79121 4.14805C10.7861 4.65589 11.567 5.47883 12.0012 6.47695L12.0012 6.47696C12.4355 5.47884 13.2164 4.6559 14.2112 4.14806C15.2061 3.64022 16.3534 3.47882 17.4582 3.69131C18.563 3.9038 19.5571 4.47706 20.2713 5.31363C20.9856 6.15019 21.376 7.19843 21.3762 8.28011C21.3762 14.4001 12.0012 19.4401 12.0012 19.4401Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>61</button><div class="font-normal flex gap-1 items-center text-sm xl:text-lg opacity-70 dark:opacity-50 pointer-events-none"><span class="flex items-center h-6 w-6 xl:h-6 xl:w-6 opacity-50 mr-1"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12 5.24927C4.5 5.24927 1.5 12 1.5 12C1.5 12 4.5 18.7493 12 18.7493C19.5 18.7493 22.5 12 22.5 12C22.5 12 19.5 5.24927 12 5.24927Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>1542</div></div></div></li><li class="relative"><div class="bg-white dark:bg-dark-item rounded-lg overflow-hidden xl:bg-transparent dark:xl:bg-transparent"><div class="block w-full overflow-hidden rounded-lg hover:opacity-75 transition-all xl:shadow-light"><div class="group focus:outline-none cursor-pointer"><div class="ripple-animation group:hover:ripple-animation-native"><div class="pointer-events-none"><div class="relative aspect-video w-full rounded-lg overflow-hidden"><img src="/files/works/2023/06/30/466/image_web-applications_feedme_466_0.webp" alt="Development of a web application for FEEDME" width="1280" height="720" loading="lazy" decoding="async" class="h-full w-full object-cover"/></div></div></div></div></div><div class=" flex items-center gap-4 justify-center font-normal text-black dark:text-white xl:py-0 xl:px-0 xl:pt-6 py-3 px-2 "><div class="grow text-base text-black/75 dark:text-white/75">Development of a web application for FEEDME</div><button class="font-normal flex gap-1 items-center text-sm xl:text-lg cursor-pointer text-black/70 dark:text-white/50 hover:text-black/100 hover:dark:text-white/100" type="button"><span class="flex items-center h-6 w-6"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12.0012 19.4401C12.0012 19.4401 2.62622 14.4001 2.62622 8.28011C2.62641 7.19843 3.01683 6.15019 3.73111 5.31363C4.44538 4.47706 5.43942 3.9038 6.54421 3.69131C7.649 3.47882 8.79636 3.64021 9.79121 4.14805C10.7861 4.65589 11.567 5.47883 12.0012 6.47695L12.0012 6.47696C12.4355 5.47884 13.2164 4.6559 14.2112 4.14806C15.2061 3.64022 16.3534 3.47882 17.4582 3.69131C18.563 3.9038 19.5571 4.47706 20.2713 5.31363C20.9856 6.15019 21.376 7.19843 21.3762 8.28011C21.3762 14.4001 12.0012 19.4401 12.0012 19.4401Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>205</button><div class="font-normal flex gap-1 items-center text-sm xl:text-lg opacity-70 dark:opacity-50 pointer-events-none"><span class="flex items-center h-6 w-6 xl:h-6 xl:w-6 opacity-50 mr-1"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12 5.24927C4.5 5.24927 1.5 12 1.5 12C1.5 12 4.5 18.7493 12 18.7493C19.5 18.7493 22.5 12 22.5 12C22.5 12 19.5 5.24927 12 5.24927Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>1394</div></div></div></li><li class="relative"><div class="bg-white dark:bg-dark-item rounded-lg overflow-hidden xl:bg-transparent dark:xl:bg-transparent"><div class="block w-full overflow-hidden rounded-lg hover:opacity-75 transition-all xl:shadow-light"><div class="group focus:outline-none cursor-pointer"><div class="ripple-animation group:hover:ripple-animation-native"><div class="pointer-events-none"><div class="relative aspect-video w-full rounded-lg overflow-hidden"><img src="/files/works/2023/06/29/462/image_websites_belfingroup_462_0.webp" alt="Website development for BELFINGROUP" width="1280" height="720" loading="lazy" decoding="async" class="h-full w-full object-cover"/></div></div></div></div></div><div class=" flex items-center gap-4 justify-center font-normal text-black dark:text-white xl:py-0 xl:px-0 xl:pt-6 py-3 px-2 "><div class="grow text-base text-black/75 dark:text-white/75">Website development for BELFINGROUP</div><button class="font-normal flex gap-1 items-center text-sm xl:text-lg cursor-pointer text-black/70 dark:text-white/50 hover:text-black/100 hover:dark:text-white/100" type="button"><span class="flex items-center h-6 w-6"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12.0012 19.4401C12.0012 19.4401 2.62622 14.4001 2.62622 8.28011C2.62641 7.19843 3.01683 6.15019 3.73111 5.31363C4.44538 4.47706 5.43942 3.9038 6.54421 3.69131C7.649 3.47882 8.79636 3.64021 9.79121 4.14805C10.7861 4.65589 11.567 5.47883 12.0012 6.47695L12.0012 6.47696C12.4355 5.47884 13.2164 4.6559 14.2112 4.14806C15.2061 3.64022 16.3534 3.47882 17.4582 3.69131C18.563 3.9038 19.5571 4.47706 20.2713 5.31363C20.9856 6.15019 21.376 7.19843 21.3762 8.28011C21.3762 14.4001 12.0012 19.4401 12.0012 19.4401Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>96</button><div class="font-normal flex gap-1 items-center text-sm xl:text-lg opacity-70 dark:opacity-50 pointer-events-none"><span class="flex items-center h-6 w-6 xl:h-6 xl:w-6 opacity-50 mr-1"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12 5.24927C4.5 5.24927 1.5 12 1.5 12C1.5 12 4.5 18.7493 12 18.7493C19.5 18.7493 22.5 12 22.5 12C22.5 12 19.5 5.24927 12 5.24927Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>1081</div></div></div></li><li class="relative"><div class="bg-white dark:bg-dark-item rounded-lg overflow-hidden xl:bg-transparent dark:xl:bg-transparent"><div class="block w-full overflow-hidden rounded-lg hover:opacity-75 transition-all xl:shadow-light"><div class="group focus:outline-none cursor-pointer"><div class="ripple-animation group:hover:ripple-animation-native"><div class="pointer-events-none"><div class="relative aspect-video w-full rounded-lg overflow-hidden"><img src="/files/works/2023/06/28/435/image_ecommerce_furnoro_435_0.webp" alt="Development of an online store for the company FURNORO" width="1280" height="720" loading="lazy" decoding="async" class="h-full w-full object-cover"/></div></div></div></div></div><div class=" flex items-center gap-4 justify-center font-normal text-black dark:text-white xl:py-0 xl:px-0 xl:pt-6 py-3 px-2 "><div class="grow text-base text-black/75 dark:text-white/75">Development of an online store for the company FURNORO</div><button class="font-normal flex gap-1 items-center text-sm xl:text-lg cursor-pointer text-black/70 dark:text-white/50 hover:text-black/100 hover:dark:text-white/100" type="button"><span class="flex items-center h-6 w-6"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12.0012 19.4401C12.0012 19.4401 2.62622 14.4001 2.62622 8.28011C2.62641 7.19843 3.01683 6.15019 3.73111 5.31363C4.44538 4.47706 5.43942 3.9038 6.54421 3.69131C7.649 3.47882 8.79636 3.64021 9.79121 4.14805C10.7861 4.65589 11.567 5.47883 12.0012 6.47695L12.0012 6.47696C12.4355 5.47884 13.2164 4.6559 14.2112 4.14806C15.2061 3.64022 16.3534 3.47882 17.4582 3.69131C18.563 3.9038 19.5571 4.47706 20.2713 5.31363C20.9856 6.15019 21.376 7.19843 21.3762 8.28011C21.3762 14.4001 12.0012 19.4401 12.0012 19.4401Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>57</button><div class="font-normal flex gap-1 items-center text-sm xl:text-lg opacity-70 dark:opacity-50 pointer-events-none"><span class="flex items-center h-6 w-6 xl:h-6 xl:w-6 opacity-50 mr-1"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12 5.24927C4.5 5.24927 1.5 12 1.5 12C1.5 12 4.5 18.7493 12 18.7493C19.5 18.7493 22.5 12 22.5 12C22.5 12 19.5 5.24927 12 5.24927Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>1369</div></div></div></li><li class="relative"><div class="bg-white dark:bg-dark-item rounded-lg overflow-hidden xl:bg-transparent dark:xl:bg-transparent"><div class="block w-full overflow-hidden rounded-lg hover:opacity-75 transition-all xl:shadow-light"><div class="group focus:outline-none cursor-pointer"><div class="ripple-animation group:hover:ripple-animation-native"><div class="pointer-events-none"><div class="relative aspect-video w-full rounded-lg overflow-hidden"><img src="/files/works/2023/07/12/479/image_crm_enviok_479_0.webp" alt="Development of a web application for Enviok" width="1280" height="720" loading="lazy" decoding="async" class="h-full w-full object-cover"/></div></div></div></div></div><div class=" flex items-center gap-4 justify-center font-normal text-black dark:text-white xl:py-0 xl:px-0 xl:pt-6 py-3 px-2 "><div class="grow text-base text-black/75 dark:text-white/75">Development of a web application for Enviok</div><button class="font-normal flex gap-1 items-center text-sm xl:text-lg cursor-pointer text-black/70 dark:text-white/50 hover:text-black/100 hover:dark:text-white/100" type="button"><span class="flex items-center h-6 w-6"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12.0012 19.4401C12.0012 19.4401 2.62622 14.4001 2.62622 8.28011C2.62641 7.19843 3.01683 6.15019 3.73111 5.31363C4.44538 4.47706 5.43942 3.9038 6.54421 3.69131C7.649 3.47882 8.79636 3.64021 9.79121 4.14805C10.7861 4.65589 11.567 5.47883 12.0012 6.47695L12.0012 6.47696C12.4355 5.47884 13.2164 4.6559 14.2112 4.14806C15.2061 3.64022 16.3534 3.47882 17.4582 3.69131C18.563 3.9038 19.5571 4.47706 20.2713 5.31363C20.9856 6.15019 21.376 7.19843 21.3762 8.28011C21.3762 14.4001 12.0012 19.4401 12.0012 19.4401Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>230</button><div class="font-normal flex gap-1 items-center text-sm xl:text-lg opacity-70 dark:opacity-50 pointer-events-none"><span class="flex items-center h-6 w-6 xl:h-6 xl:w-6 opacity-50 mr-1"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12 5.24927C4.5 5.24927 1.5 12 1.5 12C1.5 12 4.5 18.7493 12 18.7493C19.5 18.7493 22.5 12 22.5 12C22.5 12 19.5 5.24927 12 5.24927Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>1142</div></div></div></li><li class="relative"><div class="bg-white dark:bg-dark-item rounded-lg overflow-hidden xl:bg-transparent dark:xl:bg-transparent"><div class="block w-full overflow-hidden rounded-lg hover:opacity-75 transition-all xl:shadow-light"><div class="group focus:outline-none cursor-pointer"><div class="ripple-animation group:hover:ripple-animation-native"><div class="pointer-events-none"><div class="relative aspect-video w-full rounded-lg overflow-hidden"><img src="/files/works/2023/06/28/448/image_bitrix-bitrix-24-1c_fixper_448_0.webp" alt="Website development for FIXPER company" width="1280" height="720" loading="lazy" decoding="async" class="h-full w-full object-cover"/></div></div></div></div></div><div class=" flex items-center gap-4 justify-center font-normal text-black dark:text-white xl:py-0 xl:px-0 xl:pt-6 py-3 px-2 "><div class="grow text-base text-black/75 dark:text-white/75">Website development for FIXPER company</div><button class="font-normal flex gap-1 items-center text-sm xl:text-lg cursor-pointer text-black/70 dark:text-white/50 hover:text-black/100 hover:dark:text-white/100" type="button"><span class="flex items-center h-6 w-6"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12.0012 19.4401C12.0012 19.4401 2.62622 14.4001 2.62622 8.28011C2.62641 7.19843 3.01683 6.15019 3.73111 5.31363C4.44538 4.47706 5.43942 3.9038 6.54421 3.69131C7.649 3.47882 8.79636 3.64021 9.79121 4.14805C10.7861 4.65589 11.567 5.47883 12.0012 6.47695L12.0012 6.47696C12.4355 5.47884 13.2164 4.6559 14.2112 4.14806C15.2061 3.64022 16.3534 3.47882 17.4582 3.69131C18.563 3.9038 19.5571 4.47706 20.2713 5.31363C20.9856 6.15019 21.376 7.19843 21.3762 8.28011C21.3762 14.4001 12.0012 19.4401 12.0012 19.4401Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>165</button><div class="font-normal flex gap-1 items-center text-sm xl:text-lg opacity-70 dark:opacity-50 pointer-events-none"><span class="flex items-center h-6 w-6 xl:h-6 xl:w-6 opacity-50 mr-1"><svg x="0px" y="0px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M12 5.24927C4.5 5.24927 1.5 12 1.5 12C1.5 12 4.5 18.7493 12 18.7493C19.5 18.7493 22.5 12 22.5 12C22.5 12 19.5 5.24927 12 5.24927Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>1060</div></div></div></li></ul><div class="flex items-center justify-center p-4 lg:p-8 w-full"><a class="frontend-button-secondary" href="https://truetech.dev/works">Show more works</a></div></div></div></main><div class="block relative mt-8 lg:hidden w-full"></div><footer class="relative hidden lg:block"><div class="mx-auto max-w-7xl py-12 px-6 lg:py-16 lg:px-8"><div class="pb-8 grid grid-cols-4 gap-8"><div class="mt-0"><div class="text-base text-black font-normal dark:text-white">Support</div><ul class="mt-4 space-y-4"><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/contacts">Discuss your task</a></li><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/posts">Helpful information</a></li></ul></div><div><div class="text-base text-black font-normal dark:text-white">Solutions</div><ul class="mt-4 space-y-4"><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/apps">All solutions</a></li></ul></div><div><div class="text-base text-black font-normal dark:text-white">Company</div><ul class="mt-4 space-y-4"><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/contacts">Contacts</a></li><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/about">About company</a></li><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/career">Work in a company</a></li><li><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/affiliate-program">Affiliate program</a></li></ul></div><div class="mt-0"><div class="text-base text-black font-normal dark:text-white">Language & Currency</div><div class="mt-4 flex flex-col gap-4"><div><div class="relative mt-1"><button class="relative rounded-lg w-full cursor-default py-3 pl-3 pr-10 text-left shadow-sm text-base font-normal text-black/75 dark:text-white/50 bg-light-item dark:bg-dark-item focus:outline-none focus:ring-2 focus:ring-dark-button" id="headlessui-listbox-button-:Rpkdl:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="block truncate">English</span><span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></span></button></div></div><div><div class="relative"><button class="relative rounded-lg w-full cursor-default py-3 pl-3 pr-10 text-left shadow-sm text-base font-normal text-black/75 dark:text-white/50 bg-light-item dark:bg-dark-item focus:outline-none focus:ring-2 focus:ring-dark-button" id="headlessui-listbox-button-:Rqkdl:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="block truncate">USD</span><span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></span></button></div></div></div></div></div><div class="py-8 grid grid-cols-4 gap-8 border-t border-black/25 dark:border-white/25"><div><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/privacy-policy">Privacy Policy</a></div><div><a class="text-base text-black/75 dark:text-white/50 hover:text-black dark:hover:text-white transition-all" href="https://truetech.dev/terms-of-service">Terms of service</a></div><div class="col-span-2"><div class="text-base text-black/75 dark:text-white/50">© <!-- -->2026<!-- --> <!-- -->True Technologies, Inc. All rights reserved.</div></div></div></div></footer></div><div class="fixed lg:hidden w-full bottom-0"><div class="flex gap-12 px-12 justify-center bg-white border-t border-[#E8E8E8] dark:bg-dark-nav dark:border-none" style="height:3.25rem"><a class="grow flex items-center justify-center text-white h-full" aria-label="Home" href="https://truetech.dev/"><span class="flex h-8 w-7 text-black dark:text-white opacity-100"><svg x="0px" y="0px" viewBox="0 0 28 32.7" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M16.8,23v-6c0-0.3-0.1-0.5-0.3-0.7c-0.2-0.2-0.4-0.3-0.7-0.3h-4c-0.3,0-0.5,0.1-0.7,0.3 c-0.2,0.2-0.3,0.4-0.3,0.7v6c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3l-6,0c-0.1,0-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.1-0.3-0.2 C3,23.6,3,23.5,2.9,23.3c-0.1-0.1-0.1-0.3-0.1-0.4V11.4c0-0.1,0-0.3,0.1-0.4c0.1-0.1,0.1-0.2,0.2-0.3l10-9.1 c0.2-0.2,0.4-0.3,0.7-0.3c0.2,0,0.5,0.1,0.7,0.3l10,9.1c0.1,0.1,0.2,0.2,0.2,0.3c0.1,0.1,0.1,0.3,0.1,0.4V23c0,0.1,0,0.3-0.1,0.4 c-0.1,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.2,0.2-0.3,0.2C24.1,23.9,24,24,23.8,24l-6,0c-0.3,0-0.5-0.1-0.7-0.3 C17,23.5,16.8,23.2,16.8,23L16.8,23z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><line class="st1" x1="6.4" y1="32" x2="21.4" y2="32" fill="none" stroke="currentColor" stroke-linecap="round"></line></svg></span></a><a class="grow flex items-center justify-center text-white h-full" aria-label="All solutions" href="https://truetech.dev/apps"><span class="flex h-8 w-7 text-black dark:text-white opacity-50"><svg x="0px" y="0px" viewBox="0 0 28 32.7" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M11.8,3.1h-8v8h8V3.1z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M23.8,3.1h-8v8h8V3.1z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.8,15.1h-8v8h8V15.1z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M23.8,15.1h-8v8h8V15.1z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></a><a class="grow flex items-center justify-center text-white h-full" aria-label="Services" href="https://truetech.dev/#servicesList"><span class="flex h-8 w-7 text-black dark:text-white opacity-50"><svg x="0px" y="0px" viewBox="0 0 28 32.7" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M2.8,13.2h22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.8,5.2h22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.8,21.2h22" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></a><a class="grow flex items-center justify-center text-white h-full" aria-label="My account" href="https://truetech.dev/area51"><span class="flex h-8 w-7 text-black dark:text-white opacity-50"><svg x="0px" y="0px" viewBox="0 0 28 32.7" fill="none" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M13.8,17.2c4.4,0,8-3.6,8-8s-3.6-8-8-8s-8,3.6-8,8S9.4,17.2,13.8,17.2z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M1.7,24.2c1.2-2.1,3-3.9,5.1-5.1c2.1-1.2,4.5-1.9,7-1.9c2.5,0,4.9,0.6,7,1.9c2.1,1.2,3.9,3,5.1,5.1" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></a></div></div></div></div> <div id="dialog"></div> <div id="dialog-alert"></div> <div id="dialog-iframe" class="hidden"></div> </div> </body> </html>