PageSourceSearch

https://unistudio.co/

html unistudio.co collected 2026-10-08 19:53:58 UTC 90,589 bytes, 1,172 lines download raw bytes

1<!DOCTYPE html>
2<html lang="zxx">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="theme-color" content="#5422e8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <title>UniStudio</title>
8        <link rel="icon" type="image/png" href="favicon.ico"/>
9        <meta name="description" content="A design and coding agency with a twist.">
10        <meta name="keywords" content="premium templates, framer templates, framer, html templates, html, web design, design services, development services, premium website templates, free templates, digital downloads, bootstrap templates">
11        <meta name="og:image" content="../assets/images/about-01.jpg">
12
13        <!-- Google tag (gtag.js) -->
vendor: 72 bytes, lines 13-14
13
14        <script async src="https://www.googletagmanager.com/gtag/js?id=
14G-DDC61199QR
vendor: 20 bytes, lines 14-15
14"></script>
15        
15<script>
16            
vendor: 195 bytes, lines 16-22
16window.dataLayer = window.dataLayer || [];
17            function gtag() {
18                dataLayer.push(arguments);
19            }
20            gtag("js", new Date());
21
22            gtag("config", "
22G-DDC61199QR
vendor: 12 bytes, lines 22-23
22");
23        
23</script>
23
24
25        <!-- Required scripts -->
26
27        <!-- preload head styles -->
28        <link rel="preload" href="assets/css/unicons.min.css" as="style">
29        <link rel="preload" href="assets/css/prettify.min.css" as="style">
30        <link rel="preload" href="assets/css/swiper-bundle.min.css" as="style">
31        <link rel="preload" href="assets/css/magic-cursor.min.css" as="style">
32
33        <!-- preload footer scripts -->
34        <link rel="preload" href="assets/js/libs/jquery.min.js" as="script">
35        <link rel="preload" href="assets/js/libs/clipboard.min.js" as="script">
36        <link rel="preload" href="assets/js/libs/scrollmagic.min.js" as="script">
37        <link rel="preload" href="assets/js/libs/swiper-bundle.min.js" as="script">
38        <link rel="preload" href="assets/js/libs/split-type.min.js" as="script">
39        <link rel="preload" href="assets/js/libs/anime.min.js" as="script">
40        <link rel="preload" href="assets/js/libs/gsap.min.js" as="script">
41        <link rel="preload" href="assets/js/libs/typed.min.js" as="script">
42        <link rel="preload" href="assets/js/libs/prettify.min.js" as="script">
43        <link rel="preload" href="assets/js/libs/smooth-scrollbar.min.js" as="script">
44        <link rel="preload" href="assets/js/libs/tilt.min.js" as="script">
45        <link rel="preload" href="assets/js/helpers/data-attr-helper.js" as="script">
46        <link rel="preload" href="assets/js/helpers/swiper-helper.js" as="script">
47        <link rel="preload" href="assets/js/helpers/splitype-helper.js" as="script">
48        <link rel="preload" href="assets/js/helpers/anime-helper.js" as="script">
49        <link rel="preload" href="assets/js/helpers/anime-helper-defined-timelines.js" as="script">
50        <link rel="preload" href="assets/js/helpers/typed-helper.js" as="script">
51        <link rel="preload" href="assets/js/helpers/tilt-helper.js" as="script">
52        <link rel="preload" href="assets/js/core/preloader.js" as="script">
53        <link rel="preload" href="assets/js/core/dynamic-background.js" as="script">
54        <link rel="preload" href="assets/js/core/magic-cursor.js" as="script">
55        <link rel="preload" href="assets/js/core/marquee.js" as="script">
56        <link rel="preload" href="assets/js/wp_cms.js" as="script">
57        <link rel="preload" href="assets/js/app.js" as="script">
58
59        <!-- app head for bootstrap core -->
60        
60<script src="assets/js/app-head-bs.js"></script>
60
61
62        <!-- include uni-core components -->
63        <link rel="stylesheet" href="assets/js/uni-core/css/components/base.min.css">
64
65        <!-- include styles -->
66        <link rel="stylesheet" href="assets/css/unicons.min.css">
67        <link rel="stylesheet" href="assets/css/prettify.min.css">
68        <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
69        <link rel="stylesheet" href="assets/css/magic-cursor.min.css">
70
71        <!-- include main style -->
72        <link rel="stylesheet" href="assets/css/theme/main.min.css">
73
74        <!-- include scripts -->
75        
75<script src="assets/js/uni-core/js/uni-core.min.js"></script>
75
76        
76<script src="assets/js/libs/lightbox.min.js"></script>
76
77        
77<script src="assets/js/libs/filter.min.js"></script>
77
78        
78<script src="assets/js/libs/countdown.min.js"></script>
78
79        
79<script src="assets/js/libs/tooltip.min.js"></script>
vendor: 77 bytes, lines 79-81
79
80    
81        <script async src="https://www.googletagmanager.com/gtag/js?id=
81G-B5JJP7FY91
vendor: 20 bytes, lines 81-82
81"></script>
82        
82<script>
83            
vendor: 163 bytes, lines 83-86
83window.dataLayer = window.dataLayer || [];
84            function gtag(){dataLayer.push(arguments);}
85            gtag('js', new Date());
86            gtag('config', '
86G-B5JJP7FY91
vendor: 12 bytes, lines 86-87
86');
87        
87</script>
87
88        
88<script async type="module">
89            import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/web-vitals.js';
90            function sendToGoogleAnalytics({ name, delta, id }) {
91                gtag('event', name, {
92                    event_category: 'Web Vitals',
93                    event_label: id,
94                    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
95                    non_interaction: true,
96                });
97            }
98            /* CLS FCP FID LCP TTFB */
99            getCLS(sendToGoogleAnalytics);
100            getFCP(sendToGoogleAnalytics);
101            getFID(sendToGoogleAnalytics);
102            getLCP(sendToGoogleAnalytics);
103            getTTFB(sendToGoogleAnalytics);
104        </script>
104
105    </head>
106    <body class="uni-body panel bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-200 overflow-x-hidden">
107
108        <!--  Menu panel -->
109        <div id="uc-menu-panel" data-uc-offcanvas="overlay: true;">
110            <div class="uc-offcanvas-bar bg-white text-dark dark:bg-gray-800 dark:text-white">
111                <header class="uc-offcanvas-header hstack justify-between items-center mb-4">
112                    <div class="uc-logo">
113                        <a class='text-none text-primary dark:text-secondary' href='/'>
114                            <img class="w-32px" src="assets/images/common/logo-icon.svg" alt="UniStudio" data-uc-svg>
115                        </a>
116                    </div>
117                    <button class="uc-offcanvas-close position-relative top-0 end-0 m-0 p-0 icon-3 btn btn-md dark:text-white rounded-circle" type="button">
118                        <i class="unicon-close"></i>
119                    </button>
120                </header>
121
122                <div class="panel">
123                    <ul class="nav-y gap-narrow fw-medium" data-uc-nav>
124                        <li><a href='/all-access'>All-Access Pass</a></li>
125                        <li><a href='/themes'>Themes</a></li>
126                        <li><a href='/services'>Services</a></li>
127                        <li><a href='/about'>About</a></li>
128                        <li><a href='/support'>Support</a></li>
129                        <li><a href="https://store.unistudio.co/affiliates">Become an affiliate</a></li>
130                        <li><a href="https://blog.unistudio.co">Blog</a></li>
131                        <li class="hr opacity-10 my-1"></li>
132                        <li><a data-uc-toggle href='/activate'>Activate a website</a></li>
133                        <li><a href='/faq'>FAQ</a></li>
134                        <li><a href='/terms'>Terms of use</a></li>
135                        <li><a href='/privacy-policy'>Privacy policy</a></li>
136                    </ul>
137                    <ul class="nav-x gap-2 mt-4">
138                        <li>
139                            <a href="https://ui8.net/unistudio/" target="_blank">
140                                <img src="assets/images/common/icons/unicon-logo-ui8.svg" alt="unicon-logo-ui8" class="icon icon-1" data-uc-svg="">
141                            </a>
142                        </li>
143                        <li>
144                            <a href="https://themeforest.net/user/unistudioco/portfolio" target="_blank">
145                                <img src="assets/images/common/icons/unicon-logo-envato.svg" alt="unicon-logo-envato" class="icon icon-1" data-uc-svg="">
146                            </a>
147                        </li>
148                        <li>
149                            <a href="https://dribbble.com/unistudioinc" target="_blank">
150                                <img src="assets/images/common/icons/unicon-logo-dribbble.svg" alt="unicon-logo-dribble" class="icon icon-1" data-uc-svg="">
151                            </a>
152                        </li>
153                        <li>
154                            <a href="https://facebook.com/unistudioco" target="_blank">
155                                <i class="icon icon-2 unicon-logo-facebook"></i>
156                            </a>
157                        </li>
158                        <li>
159                            <a href="https://x.com/unistudioinc" target="_blank">
160                                <img src="assets/images/common/icons/unicon-logo-x.svg" alt="unicon-logo-x" class="icon icon-1" data-uc-svg="">
161                            </a>
162                        </li>
163                        <li>
164                            <a href="https://instagram.com/unistudioco" target="_blank">
165                                <i class="icon icon-2 unicon-logo-instagram"></i>
166                            </a>
167                        </li>
168                    </ul>
169                </div>
170            </div>
171        </div>
172
173        <!--  To Top Sticky -->
174        <a class="to-top position-fixed bottom-0 end-0 m-3 w-40px h-40px d-none xl:d-inline-flex items-center justify-center rounded-circle text-none z-99 bg-primary text-white" href="#to_top" data-uc-scroll>
175            <i class="icon icon-2 unicon-chevron-up"></i>
176        </a>
177
178        <!--  Darkmode Switcher Sticky -->
179        <div class="darkmode-trigger position-fixed bottom-0 end-0 m-2 my-1 lg:m-3 xl:mb-8 -translate-y-1 d-inline-flex items-center justify-center w-40px h-40px rounded-circle text-none z-99 bg-gray-100 dark:bg-gray-700 dark:text-white" data-darkmode-toggle="">
180            <label class="switch">
181                <span class="sr-only">Dark mode toggle</span>
182                <input type="checkbox">
183                <span class="slider fs-5"></span>
184            </label>
185        </div>
186
187        <!-- Header start -->
188        <header class="uc-header uc-navbar-sticky-wrap z-999" data-uc-sticky="start: 170; show-on-up: true; animation: uc-animation-slide-top; sel-target: .uc-navbar-container; cls-active: uc-navbar-sticky; cls-inactive: uc-navbar-transparent; end: ! *;">
189            <nav class="uc-navbar-container ft-tertiary z-1" data-anime="translateY: [-40, 0]; opacity: [0, 1]; easing: easeOutExpo; duration: 750; delay: 0;">
190                <div class="container max-w-xl">
191                    <div class="uc-navbar min-h-64px lg:min-h-100px text-gray-900 dark:text-white" data-uc-navbar=" animation: uc-animation-slide-top-small; duration: 150;">
192                        <div class="uc-navbar-left">
193                            <a class='hstack gap-1' href='/'>
194                                <img class="logo-icon w-24px md:w-32px text-primary dark:text-secondary" src="assets/images/common/logo-icon.svg" alt="UniStudio" data-uc-svg>
195                                <img class="logo-text w-100px md:w-128px text-gray-900 dark:text-white" src="assets/images/common/logo-text.svg" alt="UniStudio" data-uc-svg>
196                            </a>
197                        </div>
198                        <div class="uc-navbar-center d-none xl:d-block">
199                            <ul class="uc-navbar-nav gap-1 xl:gap-2 d-none lg:d-flex">
200                                <li><a href='/themes'>Themes</a></li>
201                                <li><a href="https://blog.unistudio.co">Blog</a></li>
202                                <li><a href='/support'>Support</a></li>
203                                <li><a href='/about'>About</a></li>
204                                <li><a href="https://store.unistudio.co/affiliates">Become an affiliate</a></li>
205                            </ul>
206                        </div>
207                        <div class="uc-navbar-right gap-1">
208                            <a class='btn btn-sm btn-secondary rounded-pill px-2 d-none xl:d-inline-flex' href='/services'>
209                                <span>Hire us</span>
210                                <i class="icon icon-narrow unicon-arrow-right"></i>
211                            </a>
212                            <a class='btn btn-sm btn-primary rounded-pill px-2 text-white d-none xl:d-inline-flex' href='/all-access'>
213                                <span>All-Access Pass</span>
214                            </a>
215                            <a class="d-block xl:d-none" href="#uc-menu-panel" data-uc-navbar-toggle-icon data-uc-toggle></a>
216                        </div>
217                    </div>
218                </div>
219            </nav>
220        </header>
221
222        <!-- Header end -->
223
224        <!-- Wrapper start -->
225        <div id="wrapper" class="wrap">
226
227            <!-- Section start -->
228            <div id="hero_header" class="hero-header section sm:mx-2 xl:mx-3 rounded-0 sm:rounded-2 lg:rounded-3 panel overflow-hidden bg-gradient-45 from-primary to-secondary-200 uc-dark" data-anime="scale: [0.95, 1]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: 100;">
229                <div class="hero-marquee panel position-absolute top-50 start-50 min-h-100 w-md sm:w-lg lg:w-xl xl:w-2xl">
230                    <div class="swiper" data-uc-swiper="items: 5; gap: 16; center: true; center-bounds: true; autoplay: 3000; speed: 10000; autoplay-delay: 1; loop: true; allowTouchMove: false; disableOnInteraction: true;">
231                        <div class="swiper-wrapper items-center ease-linear">
232                            <div class="swiper-slide">
233                                <img class="rounded" src="assets/images/covers/01.jpg" alt="Lexend">
234                            </div>
235                            <div class="swiper-slide">
236                                <img class="rounded" src="assets/images/covers/02.jpg" alt="Saasy">
237                            </div>
238                            <div class="swiper-slide">
239                                <img class="rounded" src="assets/images/covers/03.jpg" alt="Nerko">
240                            </div>
241                            <div class="swiper-slide">
242                                <img class="rounded" src="assets/images/covers/04.jpg" alt="Dannel">
243                            </div>
244                            <div class="swiper-slide">
245                                <img class="rounded" src="assets/images/covers/05.jpg" alt="UniStudio">
246                            </div>
247                            <div class="swiper-slide">
248                                <img class="rounded" src="assets/images/covers/06.jpg" alt="Dover">
249                            </div>
250                        </div>
251                    </div>
252                    <div class="swiper mt-2" data-uc-swiper="items: 5; gap: 16; center: true; center-bounds: true; autoplay: true; speed: 12000;
252 autoplay-delay: false; autoplay-reverseDirection: true; loop: true; allowTouchMove: false; disableOnInteraction: true;">
253                        <div class="swiper-wrapper items-center ease-linear">
254                            <div class="swiper-slide">
255                                <img class="rounded" src="assets/images/covers/07.jpg" alt="Avanta">
256                            </div>
257                            <div class="swiper-slide">
258                                <img class="rounded" src="assets/images/covers/08.jpg" alt="Nexo">
259                            </div>
260                            <div class="swiper-slide">
261                                <img class="rounded" src="assets/images/covers/09.jpg" alt="Crafto">
262                            </div>
263                            <div class="swiper-slide">
264                                <img class="rounded" src="assets/images/covers/10.jpg" alt="Zaply">
265                            </div>
266                            <div class="swiper-slide">
267                                <img class="rounded" src="assets/images/covers/11.jpg" alt="Veloce">
268                            </div>
269                            <div class="swiper-slide">
270                                <img class="rounded" src="assets/images/covers/12.jpg" alt="Snapy">
271                            </div>
272                            <div class="swiper-slide">
273                                <img class="rounded" src="assets/images/covers/02.jpg" alt="Renox">
274                            </div>
275                        </div>
276                    </div>
277                    <div class="swiper mt-2" data-uc-swiper="items: 5; gap: 16; center: true; center-bounds: true; autoplay: true; speed: 7000; autoplay-delay: false; loop: true; allowTouchMove: false; disableOnInteraction: true;">
278                        <div class="swiper-wrapper items-center ease-linear">
279                            <div class="swiper-slide">
280                                <img class="rounded" src="assets/images/covers/01.jpg" alt="Lexend">
281                            </div>
282                            <div class="swiper-slide">
283                                <img class="rounded" src="assets/images/covers/02.jpg" alt="Saasy">
284                            </div>
285                            <div class="swiper-slide">
286                                <img class="rounded" src="assets/images/covers/03.jpg" alt="Nerko">
287                            </div>
288                            <div class="swiper-slide">
289                                <img class="rounded" src="assets/images/covers/04.jpg" alt="Dannel">
290                            </div>
291                            <div class="swiper-slide">
292                                <img class="rounded" src="assets/images/covers/05.jpg" alt="UniStudio">
293                            </div>
294                            <div class="swiper-slide">
295                                <img class="rounded" src="assets/images/covers/06.jpg" alt="Dover">
296                            </div>
297                        </div>
298                    </div>
299                    <div class="swiper mt-2" data-uc-swiper="items: 5; gap: 16; center: true; center-bounds: true; autoplay: true; speed: 8000; autoplay-delay: false; autoplay-reverseDirection: true; loop: true; allowTouchMove: false; disableOnInteraction: true;">
300                        <div class="swiper-wrapper items-center ease-linear">
301                            <div class="swiper-slide">
302                                <img class="rounded" src="assets/images/covers/07.jpg" alt="Avanta">
303                            </div>
304                            <div class="swiper-slide">
305                                <img class="rounded" src="assets/images/covers/08.jpg" alt="Nexo">
306                            </div>
307                            <div class="swiper-slide">
308                                <img class="rounded" src="assets/images/covers/09.jpg" alt="Crafto">
309                            </div>
310                            <div class="swiper-slide">
311                                <img class="rounded" src="assets/images/covers/10.jpg" alt="Zaply">
312                            </div>
313                            <div class="swiper-slide">
314                                <img class="rounded" src="assets/images/covers/11.jpg" alt="Veloce">
315                            </div>
316                            <div class="swiper-slide">
317                                <img class="rounded" src="assets/images/covers/12.jpg" alt="Snapy">
318                            </div>
319                            <div class="swiper-slide">
320                                <img class="rounded" src="assets/images/covers/02.jpg" alt="Renox">
321                            </div>
322                        </div>
323                    </div>
324                    <div class="swiper mt-2" data-uc-swiper="items: 5; gap: 16; center: true; center-bounds: true; autoplay: true; speed: 9000;
324 autoplay-delay: false; loop: true; allowTouchMove: false; disableOnInteraction: true;">
325                        <div class="swiper-wrapper items-center ease-linear">
326                            <div class="swiper-slide">
327                                <img class="rounded" src="assets/images/covers/01.jpg" alt="Lexend">
328                            </div>
329                            <div class="swiper-slide">
330                                <img class="rounded" src="assets/images/covers/02.jpg" alt="Saasy">
331                            </div>
332                            <div class="swiper-slide">
333                                <img class="rounded" src="assets/images/covers/03.jpg" alt="Nerko">
334                            </div>
335                            <div class="swiper-slide">
336                                <img class="rounded" src="assets/images/covers/04.jpg" alt="Dannel">
337                            </div>
338                            <div class="swiper-slide">
339                                <img class="rounded" src="assets/images/covers/05.jpg" alt="UniStudio">
340                            </div>
341                            <div class="swiper-slide">
342                                <img class="rounded" src="assets/images/covers/06.jpg" alt="Dover">
343                            </div>
344                        </div>
345                    </div>
346                </div>
347                <div class="position-absolute top-0 start-0 end-0 overflow-hidden min-h-100 bg-black opacity-85"></div>
348                <div class="position-absolute top-0 start-0 end-0 overflow-hidden min-h-100 blend-overlay opacity-30">
349                    <img src="assets/images/noise-bg.png" alt="noise-bg" class="media-cover">
350                </div>
351                <div class="section-outer panel py-4 sm:py-9">
352                    <div class="container max-w-xl">
353                        <div class="section-inner panel">
354                            <div class="vstack justify-center gap-6 sm:gap-9 sm:min-h-400px lg:min-h-450px xl:min-h-550px">
355                                <div class="panel text-center sm:max-w-600px lg:max-w-700px xl:max-w-850px mx-auto py-4 dark:text-white">
356                                    <div class="vstack items-center gap-2" data-anime="targets: >*; translateY: [24, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 200});">
357                                        <h1 class="h2 sm:h1 lg:display-6 xl:display-4">
358                                            Create stunning websites that
359                                            <span class="text-secondary d-none lg:d-inline-block" data-uc-typed="typeSpeed: 80; backSpeed: 50; backDelay: 1500; loop: true;">
360                                                <span>fits your needs</span>
361                                                <span>save you time</span>
362                                                <span>help you grow</span>
363                                                <span>convert</span>
364                                            </span>
365                                            <span class="d-inline-block lg:d-none">fits your needs</span>
366                                        </h1>
367                                        <a href="#products" class="btn btn-sm sm:btn-md lg:btn-lg btn-primary rounded-pill min-w-150px lg:mt-2">
368                                            <span>Discover themes</span>
369                                            <i class="icon icon-narrow unicon-arrow-down"></i>
370                                        </a>
371                                        <div class="vstack sm:hstack justify-center gap-2 sm:mt-3 lg:mt-4">
372                                            <div class="hstack justify-center gap-0">
373                                                <img class="w-32px sm:w-40px rounded-circle ms-n1" src="assets/images/avatars/03.png" alt="Avatar image">
374                                                <img class="w-32px sm:w-40px rounded-circle ms-n1" src="assets/images/avatars/02.png" alt="Avatar image">
375                                                <img class="w-32px sm:w-40px rounded-circle ms-n1" src="assets/images/avatars/08.png" alt="Avatar image">
376                                            </div>
377                                            <span class="fw-medium">6.32k satesfied clients.</span>
378                                        </div>
379                                    </div>
380                                </div>
381                            </div>
382                        </div>
383                    </div>
384                </div>
385            </div>
386
387            <!-- Section end -->
388
389            <!-- Section start -->
390            <div id="featured_in" class="featured-in section panel overflow-hidden">
391                <div class="section-outer panel py-4 lg:py-6">
392                    <div class="container max-w-lg">
393                        <div class="brands panel opacity-40 dark:opacity-60">
394                            <div class="block-panel panel text-center" data-anime="onview: true; translateY: [24, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: 200;">
395                                <p class="mb-3 text-dark dark:text-white">Featured in:</p>
396                                <div class="element-brands text-gray-900 dark:text-white">
397                                    <div class="swiper" data-uc-swiper="items: 3; gap: 32; autoplay: 5000; loop: true;  allowTouchMove: false; disableOnInteraction: true;" data-uc-swiper-s="items: 4; center: false; center-bounds: false;" data-uc-swiper-m="items: 6; gap: 80;">
398                                        <div class="swiper-wrapper items-center">
399                                            <div class="brand-item swiper-slide text-center">
400                                                <img class="brand-item-image h-40px" src="assets/images/brands/envato.svg" alt="Envato" data-uc-svg>
401                                            </div>
402                                            <div class="brand-item swiper-slide text-center">
403                                                <img class="brand-item-image h-40px" src="assets/images/brands/awwwards.svg" alt="Awwwards" data-uc-svg>
404                                            </div>
405                                            <div class="brand-item swiper-slide text-center">
406                                                <img class="brand-item-image h-40px" src="assets/images/brands/creativemarket.svg" alt="Creative Market" data-uc-svg>
407                                            </div>
408                                            <div class="brand-item swiper-slide text-center">
409                                                <img class="brand-item-image h-40px" src="assets/images/brands/dribbble.svg" alt="Dribbble" data-uc-svg>
410                                            </div>
411                                            <div class="brand-item swiper-slide text-center">
412                                                <img class="brand-item-image h-40px" src="assets/images/brands/ui8.svg" alt="UI8" data-uc-svg>
413                                            </div>
414                                            <div class="brand-item swiper-slide text-center">
415                                                <img class="brand-item-image h-40px" src="assets/images/brands/lemonsqueezy.svg" alt="Lemon Squeezy" data-uc-svg>
416                                            </div>
417                                        </div>
418                                    </div>
419                                </div>
420                            </div>
421                        </div>
422                    </div>
423                </div>
424            </div>
425
426            <!-- Section end -->
427
428            <!-- Section start -->
429            <div id="main_features" class="main-features section panel overflow-hidden" data-anime="onview: -100; translateY: [24, 0]; opacity: [0, 1]; easing: easeInOutExpo; duration: 750; delay: 100;">
430                <div class="section-outer panel py-4 lg:py-6 xl:pt-9">
431                    <div class="container max-w-xl">
432                        <div class="panel vstack gap-6 lg:gap-8 xl:gap-9 px-2 py-4 sm:py-6 lg:px-3 xl:p-9 rounded-2 xl:rounded-3 overflow-hidden bg-primary-50 dark:bg-gray-800 dark:text-white">
433                            <div class="heading panel vstack items-center gap-2 sm:gap-3 max-w-650px mx-auto text-center" data-anime="onview: -100; targets: >*; translateY: [24, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 100});">
434                                <h2 class="h3 sm:h2 m-0">What distinguishes us?</h2>
435                                <p class="fs-6 lg:fs-5 text-gray-900 dark:text-white text-opacity-70">We always bring the highest quality templates & resources for developers. Pay once, use forever in unlimited projects. Free updates for life.</p>
436                            </div>
437                            <div class="content panel vstack gap-6 lg:gap-8 xl:gap-9">
438                                <div>
439                                    <div class="row child-cols-12 sm:child-cols-6 lg:child-cols-4 justify-center col-match g-2 text-center" data-anime="onview: -100; targets: >*; scale: [0.8, 1]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 200});">
440                                        <div>
441                                            <div class="panel vstack items-center justify-between gap-4 p-3 py-6 bg-white dark:bg-gray-300 dark:bg-opacity-10 rounded-2">
442                                                <div class="panel vstack items-center gap-2">
443                                                    <div class="cstack w-56px h-56px mb-2">
444                                                        <img class="w-100 d-block dark:d-none" src="assets/images/icons/layers.svg" alt="Built for developers">
445                                                        <img class="w-100 d-none dark:d-block" src="assets/images/icons/layers-dark.svg" alt="Built for developers">
446                                                    </div>
447                                                    <h3 class="h6 sm:h5 m-0">Built for developers</h3>
448                                                    <p>Each template features new components built to match Bootstrap's level of quality and re-usability.</p>
449                                                </div>
450                                                <a href="https://unistudio.co/unicore/docs" target="_blank" class="uc-link d-inline-flex items-center gap-narrow pb-narrow border-bottom dark:text-white dark:border-white dark:border-opacity-20">
451                                                    <span>Check it out</span>
452                                                    <i class="icon icon-narrow unicon-arrow-up-right"></i>
453                                                </a>
454                                            </div>
455                                        </div>
456                                        <div>
457                                            <div class="panel vstack items-center justify-between gap-4 p-3 py-6 bg-white dark:bg-gray-300 dark:bg-opacity-10 rounded-2">
458                                                <div class="panel vstack items-center gap-2">
459                                                    <div class="cstack w-56px h-56px mb-2">
460                                                        <img class="w-100 d-block dark:d-none" src="assets/images/icons/shape.svg" alt="Developer friendly code">
461                                                        <img class="w-100 d-none dark:d-block" src="assets/images/icons/shape-dark.svg" alt="Developer friendly code">
462                                                    </div>
463                                                    <h3 class="h6 sm:h5 m-0">Built as frameworks</h3>
464                                                    <p>Each theme is architected as an extension of Bootstrap, built for a specific set of problems.</p>
465                                                </div>
466
467                                                <!-- <a href="main/features.html" class="uc-link d-inline-flex items-center gap-narrow pb-narrow border-bottom dark:text-white dark:border-white dark:border-opacity-20">
468                                            <span>Learn more</span>
469                                            <i class="icon icon-narrow unicon-arrow-up-right"></i>
470                                        </a> -->
471                                            </div>
472                                        </div>
473                                        <div>
474                                            <div class="panel vstack items-center justify-between gap-4 p-3 py-6 bg-white dark:bg-gray-300 dark:bg-opacity-10 rounded-2">
475                                                <div class="panel vstack items-center gap-2">
476                                                    <div class="cstack w-56px h-56px mb-2">
477                                                        <img class="w-100 d-block dark:d-none" src="assets/images/icons/plus.svg" alt="Source files included">
478                                                        <img class="w-100 d-none dark:d-block" src="assets/images/icons/plus-dark.svg" alt="Source files included">
479                                                    </div>
480                                                    <h3 class="h6 sm:h5 m-0">Source files included</h3>
481                                                    <p>Each theme includes all the source and compiled files, making deep customization possible.</p>
482                                                </div>
483                                            </div>
484                                        </div>
485                                    </div>
486                                </div>
487                                <div>
488                                    <div class="row child-cols-6 sm:child-cols-4 lg:child-cols-3 justify-center col-match items-center justify-center text-center gy-4" data-anime="onview: -100; targets: >*; translateY: [24, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 200});">
489                                        <div>
490                                            <h6 class="h6 sm:h5 mb-1">Average Rating</h6>
491                                            <div class="cstack gap-1">
492                                                <ul class="rating nav-x gap-0">
493                                                    <li class="icon icon-narrow unicon-star-filled text-warning"></li>
494                                                    <li class="icon icon-narrow unicon-star-filled text-warning"></li>
495                                                    <li class="icon icon-narrow unicon-star-filled text-warning"></li>
496                                                    <li class="icon icon-narrow unicon-star-filled text-warning"></li>
497                                                    <li class="icon icon-narrow unicon-star-filled text-warning"></li>
498                                                </ul>
499                                                <p class="fs-7 opacity-70">4.97/5</p>
500                                            </div>
501                                        </div>
502                                        <div>
503                                            <h6 class="h6 sm:h5 mb-1">2-3 New Items</h6>
504                                            <p class="fs-7 opacity-70">Regularly & monthly.</p>
505                                        </div>
506                                        <div>
507                                            <h6 class="h6 sm:h5 mb-1">Lifetime Updates</h6>
508                                            <p class="fs-7 opacity-70">Regularly & Lifetime.</p>
509                                        </div>
510                                        <div>
511                                            <h6 class="h6 sm:h5 mb-1">Premium Support</h6>
512                                            <p class="fs-7 opacity-70">6 months included.</p>
513                                        </div>
514                                    </div>
515                                </div>
516                                <div>
517                                    <div class="row child-cols col-match items-center justify-around g-3 text-center opacity-50 dark:opacity-100" data-anime="onview: -100; targets: >*; scale: [0.8, 1]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 200});">
518                                        <div>
519                                            <img class="w-32px sm:w-40px xl:w-48px mx-auto text-gray" src="assets/images/brands/unicore.svg" alt="unicore" data-uc-svg>
520                                        </div>
521                                        <div>
522                                            <img class="w-32px sm:w-40px xl:w-48px mx-auto text-gray" src="assets/images/brands/npm.svg" alt="npm" data-uc-svg>
523                                        </div>
524                                        <div>
525                                            <img class="w-32px sm:w-40px xl:w-48px mx-auto text-gray" src="assets/images/brands/bootstrap.svg" alt="bootstrap" data-uc-svg>
526                                        </div>
527                                        <div>
528                                            <img class="w-32px sm:w-40px xl:w-48px mx-auto text-gray" src="assets/images/brands/sass.svg" alt="sass" data-uc-svg>
529                                        </div>
530                                        <div>
531                                            <img class="w-32px sm:w-40px xl:w-48px mx-auto text-gray" src="assets/images/brands/tailwind-css.svg" alt="tailwind-css" data-uc-svg>
532                                        </div>
533                                        <div>
534                                            <img class="w-32px sm:w-40px xl:w-48px mx-auto text-gray" src="assets/images/brands/js.svg" alt="js" data-uc-svg>
535                                        </div>
536                                    </div>
537                                </div>
538                            </div>
539                        </div>
540                    </div>
541                </div>
542            </div>
543
544            <!-- Section end -->
545
546            <!-- Section start -->
547            <div id="products" class="products section panel overflow-hidden">
548                <div class="section-outer panel py-6 xl:pt-8 xl:pb-10">
549                    <div class="container max-w-xl">
550                        <div class="section-inner panel">
551                            <div class="panel vstack items-center gap-5 sm:gap-6 xl:gap-8" data-anime="onview: -100; targets: >*; translateY: [48, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 200});">
552                                <div class="heading panel vstack sm:hstack justify-center sm:justify-between items-center gap-2 sm:gap-4 text-center sm:text-start">
553                                    <h2 class="title h4 sm:h3 m-0">New website themes</h2>
554                                    <a class='btn btn-sm fs-7 btn-alt-primary border-gray-100 dark:bg-gray-900 dark:text-white dark:border-gray-700 hover:border-primary rounded-pill px-2' href='/themes'>
555                                        <span>Browse All Themes</span>
556                                        <i class="icon icon-narrow unicon-arrow-up-right"></i>
557                                    </a>
558                                </div>
559                                <div class="content panel">
560                                    <div class="row child-cols-6 sm:child-cols-4 lg:child-cols-3 col-match gy-3 sm:gy-4 lg:gy-6 gx-2 sm:gx-3">
561                                        <div>
562                                            <div class="panel vstack gap-2">
563                                                <div class="product-details panel overflow-hidden rounded shadow-xs hover:shadow-md transition-all duration-150">
564                                                    <a href='/all-access'><img class="image" src="assets/images/covers/all-access.jpg" alt="All-Access Pass"></a>
565                                                </div>
566                                                <div class="product-details vstack gap-narrow">
567                                                    <div>
568                                                        <div class="vstack sm:hstack gap-narrow sm:gap-1 justify-between">
569                                                            <h3 class="product-title fs-5 ft-tertiary fw-medium m-0">
570                                                                <a class='text-none dark:text-white' href='/all-access'>All-Access</a>
571                                                            </h3>
572                                                            <span class="product-price fs-7 ft-tertiary fw-medium text-uppercase text-primary dark:text-secondary d-none md:d-block">
573                                                                <span class="fw-bold">from $99</span>
574                                                            </span>
575                                                        </div>
576                                                    </div>
577                                                    <p class="product-slogan fs-7 opacity-60">Access to All Themes</p>
578                                                    <span class="product-price fs-7 ft-tertiary fw-medium text-uppercase text-primary dark:text-secondary d-block md:d-none">
579                                                        <span class="fw-bold">from $99</span>
580                                                    </span>
581                                                </div>
582                                            </div>
583                                        </div>
584                                        <span class="unicore-cms" data-type="templates" data-count="7"></span>
585                                    </div>
586                                </div>
587                            </div>
588                        </div>
589                    </div>
590                </div>
591            </div>
592
593            <!-- Section end -->
594
595            <!-- Section start -->
596            <div id="features" class="features section panel overflow-hidden uc-dark">
597                <div class="section-outer panel py-6 xl:py-10 bg-gray-25 dark:bg-gray-800 dark:text-white">
598                    <div class="container max-w-xl">
599                        <div class="section-inner panel">
600                            <div class="panel vstack items-center gap-4 sm:gap-8" data-anime="onview: -100; targets: >*; translateY: [48, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 100});">
601                                <div class="heading panel vstack 
601items-center gap-2 sm:gap-3 text-center">
602                                    <h2 class="h4 sm:h3 md:h2 lg:h1 m-0">Why our themes?</h2>
603                                    <p class="fs-6 sm:fs-5 text-dark dark:text-white text-opacity-70">Packs all the essential yet advanced feature.</p>
604                                </div>
605                                <div class="content row child-cols-12 sm:child-cols-6 lg:child-cols-4 xl:child-cols-3 g-4 sm:gx-3 sm:gy-6 xl:g-8" data-anime="onview: -200; targets: > * > *; translateY: [48, 0]; opacity: [0, 1]; delay: anime.stagger(100, { start: 200 }); duration: 1000; easing: 'spring(1, 80, 10, 0)'">
606                                    <div>
607                                        <div class="panel vstack gap-2">
608                                            <i class="icon icon-3 unicon-settings-adjust opacity-50"></i>
609                                            <h5 class="h6 m-0">Easy Customization</h5>
610                                            <p class="fs-6 text-slate-500 dark:text-slate-200">Easy to customize and coordinate between layouts, elements, widgets and blocks, as you will find great flexibility while working with UniStudio.</p>
611                                        </div>
612                                    </div>
613                                    <div>
614                                        <div class="panel vstack gap-2">
615                                            <i class="icon icon-3 unicon-devices opacity-50"></i>
616                                            <h5 class="h6 m-0">Fully Responsive</h5>
617                                            <p class="fs-6 text-slate-500 dark:text-slate-200">The best thing about UniStudio is responsiveness, as we relied on the mobile-first system for a great user experience across various devices.</p>
618                                        </div>
619                                    </div>
620                                    <div>
621                                        <div class="panel vstack gap-2">
622                                            <i class="icon icon-3 unicon-cube opacity-50"></i>
623                                            <h5 class="h6 m-0">Unicore Framework</h5>
624                                            <p class="fs-6 text-slate-500 dark:text-slate-200">Full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system, extensive utility classes and custom made in-house components. <a href="https://unistudio.co/unicore">Learn more</a></p>
625                                        </div>
626                                    </div>
627                                    <div>
628                                        <div class="panel vstack gap-2">
629                                            <i class="icon icon-3 unicon-package opacity-50"></i>
630                                            <h5 class="h6 m-0">Sticky Headers & Sidebars</h5>
631                                            <p class="fs-6 text-slate-500 dark:text-slate-200">Make elements remain at the top of the viewport with many built-in options that will help you create a sticky navigation, sidebar or any element.</p>
632                                        </div>
633                                    </div>
634                                    <div>
635                                        <div class="panel vstack gap-2">
636                                            <i class="icon icon-3 unicon-code opacity-50"></i>
637                                            <h5 class="h6 m-0">Extended Utility Classes</h5>
638                                            <p class="fs-6 text-slate-500 dark:text-slate-200">A collection of useful utility classes based on Tailwind Syntax to style your content without without the need to use CSS except rarely and in special cases.</p>
639                                        </div>
640                                    </div>
641                                    <div>
642                                        <div class="panel vstack gap-2">
643                                            <i class="icon icon-3 unicon-rocket opacity-50"></i>
644                                            <h5 class="h6 m-0">SEO Optimized</h5>
645                                            <p class="fs-6 text-slate-500 dark:text-slate-200">The latest SEO practices, integrated in our theme, like the Google Structured Data, will make your website rank higher.</p>
646                                        </div>
647                                    </div>
648                                    <div>
649                                        <div class="panel vstack gap-2">
650                                            <i class="icon icon-3 unicon-sub-volume opacity-50"></i>
651                                            <h5 class="h6 m-0">Bootstrap v5.2</h5>
652                                            <p class="fs-6 text-slate-500 dark:text-slate-200">Based on the components of Bootstrap we have created our exclusive components are made to empower your next project with our new UI/UX vision.</p>
653                                        </div>
654                                    </div>
655                                    <div>
656                                        <div class="panel vstack gap-2">
657                                            <i class="icon icon-3 unicon-gui-management opacity-50"></i>
658                                            <h5 class="h6 m-0">Built with NPM & Gulp</h5>
659                                            <p class="fs-6 text-slate-500 dark:text-slate-200">In order to use UniStudio you need to install tools such as Node.js and NPM on your system, or you can use the production version directly.</p>
660                                        </div>
661                                    </div>
662                                    <div>
663                                        <div class="panel vstack gap-2">
664                                            <i class="icon icon-3 unicon-lightning opacity-50"></i>
665                                            <h5 class="h6 m-0">Quick Installation</h5>
666                                            <p class="fs-6 text-slate-500 dark:text-slate-200">Install the dependencies using Yarn or NPM and use our custom made Gulp or Webapck build tools to get your project up and running literally in a minutes.</p>
667                                        </div>
668                                    </div>
669                                    <div>
670                                        <div class="panel vstack gap-2">
671                                            <i class="icon icon-3 unicon-model-alt opacity-50"></i>
672                                            <h5 class="h6 m-0">3rd-Party Plugins</h5>
673                                            <p class="fs-6 text-slate-500 dark:text-slate-200">All popular and needed 3rd-party plugins are deeply customized in order to perfectly meet our design system requirements and blend with your unique in-house components.</p>
674                                        </div>
675                                    </div>
676                                    <div>
677                                        <div class="panel vstack gap-2">
678                                            <i class="icon icon-3 unicon-view-next opacity-50"></i>
679                                            <h5 class="h6 m-0">Regular Updates</h5>
680                                            <p class="fs-6 text-slate-500 dark:text-slate-200">When selecting a theme for your website, make sure that your theme will stay up-to-date and won't be abandoned.</p>
681                                        </div>
682                                    </div>
683                                    <div>
684                                        <div class="panel vstack gap-2">
685                                            <i class="icon icon-3 unicon-chat-bot opacity-50"></i>
686                                            <h5 class="h6 m-0">
686Top-Notch Support</h5>
687                                            <p class="fs-6 text-slate-500 dark:text-slate-200">We generally don't provide discounts on our products to keep our user base small, so that we could provide the best support ever.</p>
688                                        </div>
689                                    </div>
690                                </div>
691
692                                <!-- <a href="main/features.html" class="uc-link d-inline-flex items-center gap-narrow pb-narrow border-bottom dark:text-white dark:border-white dark:border-opacity-20">
693                            <span>Learn more</span>
694                            <i class="icon icon-narrow unicon-arrow-up-right"></i>
695                        </a> -->
696                            </div>
697                        </div>
698                    </div>
699                </div>
700            </div>
701
702            <!-- Section end -->
703
704            <!-- Section start -->
705            <div id="pricing_tiers" class="pricing-tiers section panel overflow-hidden">
706                <div class="section-outer panel py-6 xl:py-10">
707                    <div class="container max-w-xl">
708                        <div class="section-inner panel">
709                            <div class="panel vstack items-center gap-4 sm:gap-6 lg:gap-8" data-anime="onview: -100; targets: >*; translateY: [48, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 200});">
710                                <div class="heading panel vstack items-center gap-2 sm:gap-3 text-center">
711                                    <h2 class="title h3 sm:h2 xl:h1 m-0">One Plan, All-Access</h2>
712                                    <p class="fs-6 lg:fs-5 text-gray-900 dark:text-white text-opacity-70">
713                                        Instant access to all current and upcoming templates. <br>
714                                        No extra charges. No hidden fees.
715                                    </p>
716                                </div>
717                                <div class="content panel w-100 text-center">
718                                    <div class="row child-cols-12 sm:child-cols-6 lg:child-cols-4 col-match justify-center g-2 lg:g-3">
719                                        <div>
720                                            <div class="tier panel vstack gap-2 sm:gap-3 xl:gap-4 p-4 sm:px-4 sm:py-5 xl:p-6 rounded-3 border">
721                                                <div class="panel">
722                                                    <h3 class="title h5 sm:h4 dark:text-white">Basic</h3>
723                                                    <p class="desc dark:text-whiteopacity-70 dark:opacity-80">Instant access to all current and upcoming templates for next <b>3 months</b>.</p>
724                                                </div>
725                                                <div class="panel">
726                                                    <div class="panel vstack gap-narrow">
727                                                        <h5 class="title h3 sm:h2 m-0 dark:text-white">$99 USD</h5>
728                                                        <span class="fs-7 opacity-70">Billed each 3 months (Quarterly).</span>
729                                                        <div class="vstack gap-1 justify-center text-center mt-2 xl:mt-3">
730                                                            <a href="https://store.unistudio.co/checkout/buy/1dfc9294-e300-4f6d-a3e7-c5225a5d100d" class="btn btn-md sm:btn-sm lg:btn-md btn-dark text-white dark:bg-white dark:border-white dark:text-dark dark:hover:bg-primary dark:hover:border-primary dark:hover:text-white rounded-pill">Get access</a>
731                                                            <span class="fs-7 opacity-70 min-h-24px">Instant access, cancel anytime!</span>
732                                                        </div>
733                                                    </div>
734                                                </div>
735                                            </div>
736                                        </div>
737                                        <div>
738                                            <div class="tier panel vstack gap-2 sm:gap-3 xl:gap-4 p-4 sm:px-4 sm:py-5 xl:p-6 rounded-3 border border-3 border-primary">
739                                                <span class="position-absolute top-0 end-0 m-2 d-inline-flex py-narrow px-2 bg-primary rounded-pill text-white fs-7 fw-medium">Popular</span>
740                                                <div class="panel">
741                                                    <h3 class="title h5 sm:h4 dark:text-white">Pro</h3>
742                                                    <p class="desc dark:text-whiteopacity-70 dark:opacity-80">Instant access to all current and upcoming templates for next <b>6 months</b>.</p>
743                                                </div>
744                                                <div class="panel">
745                                                    <div class="panel vstack gap-narrow">
746                                                        <h5 class="title h3 sm:h2 m-0 dark:text-white">$149 USD</h5>
747                                                        <span class="fs-7 opacity-70">Billed each 6 months (Half-yearly).</span>
748                                                        <div class="vstack gap-1 justify-center text-center mt-2 xl:mt-3">
749                                                            <a href="https://store.unistudio.co/checkout/buy/b4acefe7-cfcc-49e9-a884-1954442409c2" class="btn btn-md sm:btn-sm lg:btn-md btn-primary text-white rounded-pill">Get access</a>
750                                                            <span class="fs-7 opacity-70 min-h-24px">Instant access, cancel anytime!</span>
751                                                        </div>
752                                                    </div>
753                                                </div>
754                                            </div>
755                                        </div>
756                                        <div>
757                                            <div class="tier panel vstack gap-2 sm:gap-3 xl:gap-4 p-4 sm:px-4 sm:py-5 xl:p-6 rounded-3 border">
758                                                <div class="panel">
759                                                    <h3 class="title h5 sm:h4 dark:text-white">Elite</h3>
760                                                    <p class="desc dark:text-whiteopacity-70 dark:opacity-80">Instant access to all current and upcoming templates for next <b>12 months</b>.</p>
761                                                </div>
762                                                <div class="panel">
763                                                    <div class="panel vstack gap-narrow">
764                                                        <h5 class="title h3 sm:h2 m-0 dark:text-white">$249 USD</h5>
765                                                        <span class="fs-7 opacity-70">Billed each 12 months (Yearly).</span>
766                                                        <div class="vstack gap-1 justify-center text-center mt-2 xl:mt-3">
767                                                            <a href="https://store.unistudio.co/checkout/buy/8b359b95-bc3b-49a2-b353-60f3a53acc73" class="btn btn-md sm:btn-sm lg:btn-md btn-secondary rounded-pill">Get access</a>
768                                                            <span class="fs-7 opacity-70 min-h-24px">Instant access, cancel anytime!</span>
769                                                        </div>
770                                                    </div>
771                                                </div>
772                                            </div>
773                                        </div>
774                                    </div>
775                                </div>
776                                <a class='uc-link d-inline-flex items-center gap-narrow pb-narrow border-bottom dark:text-white' href='/all-access'>
777                                    <span>More detailed pricing</span>
778                                    <i class="icon icon-narrow unicon-arrow-up-right"></i>
779                                </a>
780                            </div>
781                        </div>
782                    </div>
783                </div>
784            </div>
785
786            <!-- Section end -->
787
788            <!-- Section start -->
789            <div id="clients_feedbacks" class="clients-feedbacks section panel overflow-hidden">
790                <div class="section-outer panel">
791                    <div class="container max-w-lg">
792                        <div class="section-inner panel">
793                            <div class="heading panel vstack justify-center items-center gap-4 sm:gap-6 lg:gap-8" data-anime="onview: -100; targets: > *; translateY: [48, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 200});">
794                                <div class="panel vstack items-center gap-2 sm:gap-3 max-w-600px mx-auto text-center">
795                                    <h2 class="h4 sm:h2 m-0">Don’t just take our words</h2>
796                                    <p class="fs-6 lg:fs-5 text-opacity-70">Our templates are used by 6.3k+ customers with the 4.97 average theme rating from new and returning buyers.</p>
797                                </div>
798                                <div class="content row child-cols-12 sm:child-cols-6 col-match g-2 lg:g-4" data-uc-grid>
799                                    <div>
800                                        <div class="panel vstack justify-between gap-3 p-3 md:p-4 rounded-2 bg-gray-25 dark:bg-gray-800">
801                                            <div class="panel vstack items-start gap-2">
802                                                <ul class="rating nav-x gap-0 mb-2">
803                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
804                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
805                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
806                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
807                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
808                                                </ul>
809                                                <p class="fs-6 lg:fs-5 text-inherit text-opacity-70">“Value for money! You may get at this same price a lot of themes which have tons of pages instead in this theme pages are limited but very elegant and well designed. Great Job!”</p>
810                                            </div>
811                                            <div class="panel hstack gap-2 mt-2 lg:mt-4">
812                                                <img class="w-40px rounded-circle" src="https://s3.envato.com/files/291609972/logo80.png" alt="Quick Coder">
813                                                <div class="panel vstack items-start gap-0">
814                                                    <h6 class="h6 m-0 text-inherit">Quick Coder</h6>
815                                                    <span class="fs-7 opacity-70">For Design Quality</span>
816                                                </div>
817                                            </div>
818                                        </div>
819                                    </div>
820                                    <div>
821                                        <div class="panel vstack justify-between gap-3 p-3 md:p-4 roun
821ded-2 bg-gray-25 dark:bg-gray-800">
822                                            <div class="panel vstack items-start gap-2">
823                                                <ul class="rating nav-x gap-0 mb-2">
824                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
825                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
826                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
827                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
828                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
829                                                </ul>
830                                                <p class="fs-6 lg:fs-5 text-inherit text-opacity-70">“I love the layout of the theme. It's fun to work on it. I must admit i have some difficult about the Menu or little things, but the team offer a great support with a lot of details. They are kind and always helpfull. Thanks!”</p>
831                                            </div>
832                                            <div class="panel hstack gap-2 mt-2 lg:mt-4">
833                                                <img class="w-40px rounded-circle" src="https://public-assets.envato-static.com/assets/common/icons-buttons/default-user-1b2249ae9ceead87c78e32de9ad5364b72ae18bfd9f744cb89a5da339168aa33.jpg" alt="Energy Freak">
834                                                <div class="panel vstack items-start gap-0">
835                                                    <h6 class="h6 m-0 text-inherit">Energy Freak</h6>
836                                                    <span class="fs-7 opacity-70">for Code Quality</span>
837                                                </div>
838                                            </div>
839                                        </div>
840                                    </div>
841                                    <div>
842                                        <div class="panel vstack justify-between gap-3 p-3 md:p-4 roun
842ded-2 bg-gray-25 dark:bg-gray-800">
843                                            <div class="panel vstack items-start gap-2">
844                                                <ul class="rating nav-x gap-0 mb-2">
845                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
846                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
847                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
848                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
849                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
850                                                </ul>
851                                                <p class="fs-6 lg:fs-5 text-inherit text-opacity-70">“This is a good theme. It is simple but clean in a professional way. The coding has little to no hiccups at all and if you run into one during custom work the customer support is quick and friendly. I would recommend it. Download & Enjoy!”</p>
852                                            </div>
853                                            <div class="panel hstack gap-2 mt-2 lg:mt-4">
854                                                <img class="w-40px rounded-circle" src="https://public-assets.envato-static.com/assets/common/icons-buttons/default-user-1b2249ae9ceead87c78e32de9ad5364b72ae18bfd9f744cb89a5da339168aa33.jpg" alt="Alexandre Turcotte">
855                                                <div class="panel vstack items-start gap-0">
856                                                    <h6 class="h6 m-0 text-inherit">Alexandre Turcotte</h6>
857                                                    <span class="fs-7 opacity-70">For Design Quality</span>
858                                                </div>
859                                            </div>
860                                        </div>
861                                    </div>
862                                    <div>
863                                        <div class="panel vstack justify-between gap-3 p-3 md:p-4 roun
863ded-2 bg-gray-25 dark:bg-gray-800">
864                                            <div class="panel vstack items-start gap-2">
865                                                <ul class="rating nav-x gap-0 mb-2">
866                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
867                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
868                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
869                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
870                                                    <li class="icon icon-1 unicon-star-filled text-warning"></li>
871                                                </ul>
872                                                <p class="fs-6 lg:fs-5 text-inherit text-opacity-70">“Brilliant customer support. I had a problem and they fixed it within a day. I would recommend this theme! It is easy to amend and looks great.”</p>
873                                            </div>
874                                            <div class="panel hstack gap-2 mt-2 lg:mt-4">
875                                                <img class="w-40px rounded-circle" src="https://public-assets.envato-static.com/assets/common/icons-buttons/default-user-1b2249ae9ceead87c78e32de9ad5364b72ae18bfd9f744cb89a5da339168aa33.jpg" alt="BigEv">
876                                                <div class="panel vstack items-start gap-0">
877                                                    <h6 class="h6 m-0 text-inherit">BigEv</h6>
878                                                    <span class="fs-7 opacity-70">For Customer Support</span>
879                                                </div>
880                                            </div>
881                                        </div>
882                                    </div>
883                                </div>
884
885                                <!-- <a href="main/testimonials.html" class="uc-link d-inline-flex items-center gap-narrow pb-narrow border-bottom">
886                            <span>See all feedbacks</span>
887                            <i class="icon icon-narrow unicon-arrow-up-right"></i>
888                        </a> -->
889                            </div>
890                        </div>
891                    </div>
892                </div>
893            </div>
894
895            <!-- Section end -->
896
897            <!-- Section start -->
898            <div id="faq" class="section panel overflow-hidden border-bottom">
899                <div class="section-outer panel py-6 xl:py-10">
900                    <div class="container max-w-md">
901                        <div class="section-inner panel" data-anime="onview: -100; targets: >*; translateY: [48, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 200});">
902                            <div class="panel vstack items-center gap-6 lg:gap-8">
903                                <div class="heading panel vstack items-center gap-2 sm:gap-3 max-w-600px mx-auto text-center">
904                                    <h2 class="h3 sm:h2 m-0">FAQs</h2>
905                                    <p class="fs-6 lg:fs-5 text-gray-900 dark:text-white text-opacity-70">Here are our most frequently asked questions.</p>
906                                </div>
907                                <div class="content panel w-100">
908                                    <ul class="gap-1" data-uc-accordion="targets: > li;">
909                                        <li class="panel p-2 md:p-3 rounded-2 bg-gray-200 bg-opacity-10 uc-open">
910                                            <a class="uc-accordion-title fs-5 lg:fs-4" href="#">Can I use it for commercial projects?</a>
911                                            <div class="uc-accordion-content">
912                                                <p class="fs-6 lg:fs-5 text-gray-400 dark:text-gray-200">All our templates has a three clear options of <a class='text-none text-primary dark:text-secondary border-bottom' href='/licenses'>licenses</a>. Therefore, commercial or non-commercial use depends on the type of license you have chosen!</p>
913                                            </div>
914                                        </li>
915                                        <li class="panel p-2 md:p-3 rounded-2 bg-gray-200 bg-opacity-10">
916                                            <a class="uc-accordion-title fs-5 lg:fs-4" href="#">Can I use it for multiple projects?</a>
917                                            <div class="uc-accordion-content">
918                                                <p class="fs-6 lg:fs-5 text-gray-400 dark:text-gray-200">It depends on the type of license you choose. Therefore, if you want to use our products in multiple projects, you must choose the commercial license or the extended commercial license, or you can <a class='text-none text-primary dark:text-secondary border-bottom' href='/all-access'>subscribe</a> on our All-Access Pass membership, as all our plans are for multiple use.</p>
919                                            </div>
920                                        </li>
921                                        <li class="panel p-2 md:p-3 rounded-2 bg-gray-200 bg-opacity-10">
922                                            <a class="uc-accordion-title fs-5 lg:fs-4" href="#">Can I use this to create or edit and re-sell as a product?</a>
923                                            <div class="uc-accordion-content">
924                                                <p class="fs-6 lg:fs-5 text-gray-400 dark:text-gray-200">Do not ever consider doing it.</p>
925                                            </div>
926                                        </li>
927                                        <li class="panel p-2 md:p-3 rounded-2 bg-gray-200 bg-opacity-10">
928                                            <a class="uc-accordion-title fs-5 lg:fs-4" href="#">How long will I get support?</a>
929                                            <div class="uc-accordion-content">
930                                                <p class="fs-6 lg:fs-5 text-gray-400 dark:text-gray-200">In principle, all our paid templates includes 6 months of technical support. As for All-Access membership, they depen
930d on the subscription period.</p>
931                                            </div>
932                                        </li>
933                                        <li class="panel p-2 md:p-3 rounded-2 bg-gray-200 bg-opacity-10">
934                                            <a class="uc-accordion-title fs-5 lg:fs-4" href="#">How long will you update the templates?</a>
935                                            <div class="uc-accordion-content">
936                                                <p class="fs-6 lg:fs-5 text-gray-400 dark:text-gray-200">We update all our templates based on the needs for the lifetime.</p>
937                                            </div>
938                                        </li>
939                                        <li class="panel p-2 md:p-3 rounded-2 bg-gray-200 bg-opacity-10">
940                                            <a class="uc-accordion-title fs-5 lg:fs-4" href="#">Do you have an affiliate program?</a>
941                                            <div class="uc-accordion-content">
942                                                <p class="fs-6 lg:fs-5 text-gray-400 dark:text-gray-200">Yes, we do. Refer customers and start earning cash today! By affiliating UniStudio's Products or Services to others. <strong>Gain 10% to 20%</strong> of every sale you have successfully completed. Submit your affiliate profile <a class="text-none text-primary" href="https://store.unistudio.co/affiliates" rel="noopener">here</a>.</p>
943                                            </div>
944                                        </li>
945                                        <li class="panel p-2 md:p-3 rounded-2 bg-gray-200 bg-opacity-10">
946                                            <a class="uc-accordion-title fs-5 lg:fs-4" href="#">What is your refund policy?</a>
947                                            <div class="uc-accordion-content">
948                                                <p class="fs-6 lg:fs-5 text-gray-400 dark:text-gray-200">We understand the importance of customer satisfaction and we strive to provide the best products and services. However, please note that due to the nature of our products and services, we do not offer refunds after a purchase has been made.</p>
949                                            </div>
950                                        </li>
951                                    </ul>
952                                </div>
953                                <a class='uc-link d-inline-flex items-center gap-narrow pb-narrow border-bottom dark:text-white' href='/support'>
954                                    <span>Still have a question?</span>
955                                    <i class="icon icon-narrow unicon-arrow-up-right"></i>
956                                </a>
957                            </div>
958                        </div>
959                    </div>
960                </div>
961            </div>
962
963            <!-- Section end -->
964        </div>
965
966        <!-- Wrapper end -->
967
968        <!-- Footer start -->
969
970        <!-- Section start -->
971        <div id="redeem_discount_cta" class="cta section panel overflow-hidden uc-dark">
972            <div class="section-outer panel bg-gray-900">
973                <div class="container max-w-xl">
974                    <div class="section-inner panel overflow-hidden py-6 pb-4 sm:py-8 lg:py-9 xl:py-10 border-bottom">
975                        <div class="d-none lg:d-block" data-anime="targets: >*; scale: [0, 1]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 750});">
976                            <div class="position-absolute top-0 start-0 rotate-45" style="top: 40% !important; left: 15% !important">
977                                <img class="w-24px text-gray-900 dark:text-white" src="assets/images/common/star-1.svg" alt="star-1" data-uc-svg>
978                            </div>
979                            <div class="position-absolute bottom-0 end-0 rotate-45" style="bottom: 40% !important; right: 15% !important">
980                                <img class="w-24px text-gray-900 dark:text-white" src="assets/images/common/star-2.
980svg" alt="star-2" data-uc-svg>
981                            </div>
982                        </div>
983                        <div class="vstack items-center gap-2 max-w-400px lg:max-w-600px mx-auto text-center" data-anime="onview:-100; targets: >*; translateY: [48, 0]; opacity: [0, 1]; easing: spring(1, 80, 10, 0); duration: 450; delay: anime.stagger(100, {start: 200});">
984                            <h2 class="h4 sm:h3 md:h2 lg:h1 m-0">
985                                Exclusive <span class="text-secondary">10% DISCOUNT</span> <br>
986                                on your 1st purchase.
987                            </h2>
988                            <form class="panel cstack w-100 mt-2 lg:mt-4" action="https://store.unistudio.co/email-subscribe" method="post">
989                                <input type="hidden" name="_token" value="CgoUnetqXcdRYkZU1cQJCRblbJDkzPFObEdjXpLJ">
990                                <div class="row child-cols gy-1 sm:g-0 w-100 lg:w-5/6">
991                                    <div class="mc-field-group">
992                                        <input class="required email form-control h-48px lg:h-56px px-3 bg-white dark:bg-gray-800 dark:border-white dark:border-opacity-10 dark:text-white rounded-pill sm:rounded-end-0" type="email" name="email" placeholder="Your email address" autocomplete="email" value required>
993                                    </div>
994                                    <div class="col-12 sm:col-auto">
995                                        <button type="submit" class="btn btn-md h-48px lg:h-56px w-100 min-w-150px btn-primary text-white rounded-pill sm:rounded-start-0">Redeem now</button>
996                                    </div>
997                                </div>
998                            </form>
999                            <p class="fs-7 text-dark dark:text-white text-opacity-70 mt-3">
1000                                We will send the discount code <br class="lg:d-none">
1001                                immediately on your email.
1002                            </p>
1003                        </div>
1004                    </div>
1005                </div>
1006            </div>
1007        </div>
1008
1009        <!-- Section end -->
1010
1011        <footer id="uc-footer" class="uc-footer panel overflow-hidden uc-dark">
1012            <div class="footer-outer py-4 lg:py-6 xl:py-9 dark:bg-gray-900 dark:text-white">
1013                <div class="container max-w-xl">
1014                    <div class="footer-inner vstack gap-4 lg:gap-6 xl:gap-9">
1015                        <div class="uc-footer-widgets panel">
1016                            <div class="row child-cols-6 sm:child-cols col-match g-4">
1017                                <div class="col-12 lg:col-4">
1018                                    <div class="panel vstack items-start">
1019                                        <a class='uc-logo hstack gap-1' href='/'>
1020                                            <img class="w-32px text-gray-900 dark:text-white text-opacity-50" src="assets/images/common/logo-icon.svg" alt="UniStudio" data-uc-svg>
1021                                            <img class="w-128px text-gray-900 dark:text-white text-opacity-50" src="assets/images/common/logo-text.svg" alt="UniStudio" data-uc-svg>
1022                                        </a>
1023                                    </div>
1024                                </div>
1025                                <div>
1026                                    <ul class="nav-y gap-1 lg:gap-2">
1027                                        <li class="uc-nav-header opacity-60">Company</li>
1028                                        <li><a href='/about'>About</a></li>
1029                                        <li><a href='/services'>Services</a></li>
1030
1031                                        <!-- <li><a href="main/features.html">Features</a></li> -->
1032                                        <li><a href="https://blog.unistudio.co">Blog</a></li>
1033                                        <li><a href='/support'>Support</a></li>
1034                                        <li class="lg:d-none"><a href='/faq'>FAQ</a></li>
1035                                    </ul>
1036                                </div>
1037                                <div>
1038                                    <ul class="nav-y gap-1 lg:gap-2">
1039                                        <li class="uc-nav-header opacity-60">Products</li>
1040                                        <li><a href='/all-access'>All-Access Pass</a></li>
1041                                        <li><a href='/themes'>Themes</a></li>
1042                                        <li><a href='/licenses'>Licenses</a></li>
1043                                        <li><a href="https://store.unistudio.co/affiliates">Affiliate Program</a></li>
1044                                        <li class="lg:d-none"><a href='/activate'>Activate License</a></li>
1045                                    </ul>
1046                                </div>
1047                                <div class="d-none lg:d-block">
1048                                    <ul class="nav-y gap-2">
1049                                        <li class="uc-nav-header opacity-60">Other</li>
1050                                        <li><a href='/activate'>Activate License</a></li>
1051                                        <li><a href='/faq'>FAQs</a></li>
1052                                        <li><a href='/terms'>Terms of use</a></li>
1053                                        <li><a href='/privacy-policy'>Privacy policy</a></li>
1054                                    </ul>
1055                                </div>
1056                            </div>
1057                        </div>
1058                        <div class="uc-footer-bottom panel vstack lg:hstack gap-4 justify-center lg:justify-between pt-4 lg:pt-6 xl:pt-9 border-top dark:text-white">
1059                            <div class="vstack sm:hstack justify-center lg:justify-start items-center lg:items-start gap-1 lg:gap-4">
1060                                <p class="opacity-60">UniStudio © 2023, All rights reserved.</p>
1061                                <ul class="nav-x gap-3 lg:d-none">
1062                                    <li><a href='/terms'>Terms of service</a></li>
1063                                    <li><a href='/privacy-policy'>Privacy policy</a></li>
1064                                </ul>
1065                            </div>
1066                            <div class="hstack justify-center lg:justify-end gap-2 lg:gap-3">
1067                                <ul class="nav-x gap-2 justify-end">
1068                                    <li>
1069                                        <a href="https://ui8.net/unistudio/" target="_blank">
1070                                            <img src="assets/images/common/icons/unicon-logo-ui8.svg" alt="unicon-logo-ui8" class="icon icon-1" data-uc-svg="">
1071                                        </a>
1072                                    </li>
1073                                    <li>
1074                                        <a href="https://themeforest.
1074net/user/unistudioco/portfolio" target="_blank">
1075                                            <img src="assets/images/common/icons/unicon-logo-envato.svg" alt="unicon-logo-envato" class="icon icon-1" data-uc-svg="">
1076                                        </a>
1077                                    </li>
1078                                    <li>
1079                                        <a href="https://dribbble.com/unistudioinc" target="_blank">
1080                                            <img src="assets/images/common/icons/unicon-logo-dribbble.svg" alt="unicon-logo-dribble" class="icon icon-1" data-uc-svg="">
1081                                        </a>
1082                                    </li>
1083                                    <li>
1084                                        <a href="https://facebook.com/unistudioco" target="_blank">
1085                                            <i class="icon icon-2 unicon-logo-facebook"></i>
1086                                        </a>
1087                                    </li>
1088                                    <li>
1089                                        <a href="https://x.com/unistudioinc" target="_blank">
1090                                            <img src="assets/images/common/icons/unicon-logo-x.svg" alt="unicon-logo-x" class="icon icon-1" data-uc-svg="">
1091                                        </a>
1092                                    </li>
1093                                    <li>
1094                                        <a href="https://instagram.com/unistudioco" target="_blank">
1095                                            <i class="icon icon-2 unicon-logo-instagram"></i>
1096                                        </a>
1097                                    </li>
1098                                </ul>
1099                            </div>
1100                        </div>
1101                    </div>
1102                </div>
1103            </div>
1104        </footer>
1105
1106        <!-- Footer end -->
1107
1108        <!-- include jquery & bootstrap js -->
1109        
1109<script defer src="assets/js/libs/jquery.min.js"></script>
1109
1110        
1110<script defer src="assets/js/libs/bootstrap.min.js"></script>
1110
1111
1112        <!-- include uni-core components -->
1113        
1113<script defer src="assets/js/uni-core/js/components/anime.min.js"></script>
1113
1114        
1114<script defer src="assets/js/uni-core/js/components/parallax.min.js"></script>
1114
1115
1116        <!-- include scripts -->
1117        
1117<script src="assets/js/libs/clipboard.min.js"></script>
1117
1118        
1118<script src="assets/js/libs/prettify.min.js"></script>
1118
1119        
1119<script defer src="assets/js/libs/swiper-bundle.min.js"></script>
1119
1120        
1120<script defer src="assets/js/libs/split-type.min.js"></script>
1120
1121        
1121<script defer src="assets/js/libs/scrollmagic.min.js"></script>
1121
1122        
1122<script defer src="assets/js/libs/anime.min.js"></script>
1122
1123        
1123<script defer src="assets/js/libs/gsap.min.js"></script>
1123
1124        
1124<script defer src="assets/js/libs/typed.min.js"></script>
1124
1125        
1125<script defer src="assets/js/libs/smooth-scrollbar.min.js"></script>
1125
1126        
1126<script defer src="assets/js/libs/tilt.min.js"></script>
1126
1127        
1127<script defer src="assets/js/libs/lightbox.min.js"></script>
1127
1128        
1128<script defer src="assets/js/libs/filter.min.js"></script>
1128
1129        
1129<script defer src="assets/js/libs/countdown.min.js"></script>
1129
1130        
1130<script defer src="assets/js/libs/tooltip.min.js"></script>
1130
1131        
1131<script defer src="assets/js/helpers/data-attr-helper.js"></script>
1131
1132        
1132<script defer src="assets/js/helpers/swiper-helper.js"></script>
1132
1133        
1133<script defer src="assets/js/helpers/splitype-helper.js"></script>
1133
1134        
1134<script defer src="assets/js/helpers/anime-helper.js"></script>
1134
1135        
1135<script defer src="assets/js/helpers/anime-helper-defined-timelines.js"></script>
1135
1136        
1136<script defer src="assets/js/helpers/typed-helper.js"></script>
1136
1137        
1137<script defer src="assets/js/helpers/tilt-helper.js"></script>
1137
1138        
1138<script defer src="assets/js/core/preloader.js"></script>
1138
1139        
1139<script defer src="assets/js/core/dynamic-background.js"></script>
1139
1140        
1140<script defer src="assets/js/core/magic-cursor.js"></script>
1140
1141        
1141<script defer src="assets/js/core/marquee.js"></script>
1141
1142        
1142<script defer src="https://assets.lemonsqueezy.com/lemon.js"></script>
1142
1143        
1143<script defer src="assets/js/wp_cms.js"></script>
1143
1144
1145        <!-- include app script -->
1146        
1146<script defer src="assets/js/app.js"></script>
1146
1147        
1147<script>
1148            // Schema toggle via URL
1149            const queryString = window.location.search;
1150            const urlParams = new URLSearchParams(queryString);
1151            const getSchema = urlParams.get("schema");
1152            if (getSchema === "dark") {
1153                setDarkMode(1);
1154            } else if (getSchema === "light") {
1155                setDarkMode(0);
1156            }
1157
1158            // Pretty Print
1159            window.prettyPrint && prettyPrint();
1160
1161            // Copy to clipboard
1162            var clipboard = new ClipboardJS(".ctc");
1163            clipboard.on("success", function (e) {
1164                document.getElementById("ctc_collapse").style.display = "flex";
1165                setTimeout(function () {
1166                    document.getElementById("ctc_collapse").style.display = "none";
1167                }, 1000);
1168                e.clearSelection();
1169            });
1170        </script>
1170
1171    </body>
1172</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.