PageSourceSearch

https://masco-tailwind.netlify.app/pricing

html masco-tailwind.netlify.app collected 2026-10-03 11:03:04 UTC 51,614 bytes, 776 lines download raw bytes

1<!doctype html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8" />
6<!-- This site is hosted on Netlify. Anyone can build and deploy a site
7     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=49e20bd1-d91f-4564-813a-8a580c5370bb
8     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
9    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10    <title>Masco - Saas Software Startup Tailwind Template</title>
11    <meta name="description" content="AIMass Tailwind based SASS Template" />
12
13    <!-- Favicon  -->
14    <link rel="icon" href="assets/img/favicon.png" />
15
16    <!-- Icon Font -->
17    <link rel="stylesheet" href="assets/fonts/iconfonts/font-awesome/stylesheet.css" />
18    <!-- Site font -->
19    <link rel="stylesheet" href="assets/fonts/webfonts/inter/stylesheet.css" />
20    <link rel="stylesheet" href="assets/fonts/webfonts/plus-jakarta-sans/stylesheet.css" />
21
22    <!-- Vendor CSS -->
23    <link rel="stylesheet" href="assets/css/vendors/swiper-bundle.min.css" />
24    <link rel="stylesheet" href="assets/css/vendors/jos.css" />
25    <link rel="stylesheet" href="assets/css/vendors/menu.css" />
26
27    <!-- Custom CSS -->
28    <link rel="stylesheet" href="assets/css/custom.css" />
29
30    <!-- Development css -->
31    <link href="assets/css/style.css" rel="stylesheet" />
32
33    <!-- Production css -->
34    <!-- <link rel="stylesheet" href="assets/css/style.min.css"> -->
35</head>
36
37<body>
38    <div class="page-wrapper relative z-[1] bg-white">
39        <!--...::: Header Start :::... -->
40        <header class="site-header site-header--absolute is--white py-3" id="sticky-menu">
41            <div class="container-default">
42                <div class="flex items-center justify-between gap-x-8">
43                    <!-- Header Logo -->
44                    <a class href='/'>
45                        <img src="assets/img/logo-blue-dark.png" alt="Masco" width="109" height="24" />
46                    </a>
47                    <!-- Header Logo -->
48
49                    <!-- Header Navigation -->
50                    <div class="menu-block-wrapper">
51                        <div class="menu-overlay"></div>
52                        <nav class="menu-block" id="append-menu-header">
53                            <div class="mobile-menu-head">
54                                <div class="go-back">
55                                    <i class="fa-solid fa-angle-left"></i>
56                                </div>
57                                <div class="current-menu-title"></div>
58                                <div class="mobile-menu-close">&times;</div>
59                            </div>
60                            <ul class="site-menu-main">
61                                <li class="nav-item nav-item-has-children">
62                                    <a href="#" class="nav-link-item drop-trigger">Demo <i class="fa-solid fa-angle-down"></i>
63                                    </a>
64                                    <ul class="sub-menu" id="submenu-1">
65                                        <li class="sub-menu--item">
66                                            <a href='/'>Digital agency</a>
67                                        </li>
68                                        <li class="sub-menu--item">
69                                            <a href='/index-2'>Chat software</a>
70                                        </li>
71                                        <li class="sub-menu--item">
72                                            <a href='/index-3'>Fitness App</a>
73                                        </li>
74                                        <li class="sub-menu--item">
75                                            <a href='/index-4'>Online Courses</a>
76                                        </li>
77                                        <li class="sub-menu--item">
78                                            <a href='/index-5'>SEO Agency</a>
79                                        </li>
80                                        <li class="sub-menu--item">
81                                            <a href='/index-6'>Cold Email</a>
82                                        </li>
83                                        <li class="sub-menu--item">
84                                            <a href='/index-7'>Web Hosting</a>
85                                        </li>
86                                        <li class="sub-menu--item">
87                                            <a href='/index-8'>Startup</a>
88                                        </li>
89                                        <li class="sub-menu--item">
90                                            <a href='/index-9'>Tracking Software</a>
91                                        </li>
92                                        <li class="sub-menu--item">
93                                            <a href='/index-10'>AI Writing Tool</a>
94                                        </li>
95                                        <li class="sub-menu--item">
96                                            <a href='/index-11'>Website Builder</a>
97                                        </li>
98                                        <li class="sub-menu--item">
99                                            <a href='/index-12'>AI Photo Editor</a>
100                                        </li>
101                                        <li class="sub-menu--item">
102                                            <a href='/index-13'>initial coin offering (ICO)</a>
103                                        </li>
104                                        <li class="sub-menu--item">
105                                            <a href='/index-14'>AI Content Generator</a>
106                                        </li>
107                                        <li class="sub-menu--item">
108                                            <a href='/index-15'>IT Service</a>
109                                        </li>
110                                    </ul>
111                                </li>
112                                <li class="nav-item">
113                                    <a class='nav-link-item' href='/about'>About</a>
114                                </li>
115                                <li class="nav-item nav-item-has-children">
116                                    <a href="#" class="nav-link-item drop-trigger">Services
117                                        <i class="fa-solid fa-angle-down"></i>
118                                    </a>
119                                    <ul class="sub-menu" id="submenu-2">
120                                        <li class="sub-menu--item">
121                                            <a href='/services'>Services</a>
122                                        </li>
123                                        <li class="sub-menu--item">
124                                            <a href='/service-details'>Service Details</a>
125                                        </li>
126                                    </ul>
127                                </li>
128                                <li class="nav-item nav-item-has-children">
129                                    <a href="#" class="nav-link-item drop-trigger">Pages <i class="fa-solid fa-angle-down"></i>
130                                    </a>
131                                    <ul class="sub-menu" id="submenu-3">
132                                        <li class="sub-menu--item nav-item-has-children">
133                                            <a href="#" data-menu-get="h3" class="drop-trigger">blogs <i class="fa-solid fa-angle-right"></i></a>
134                                            <ul class="sub-menu shape-none" id="submenu-4">
135                                                <li class="sub-menu--item">
136                                                    <a href='/blog'>blogs</a>
137                                                </li>
138                                                <li class="sub-menu--item">
139                                                    <a href='/blog-details'>blog details</a>
140                                                </li>
141                                            </ul>
142                                        </li>
143                                        <li class="sub-menu--item nav-item-has-children">
144                                            <a href="#" data-menu-get="h3" class="drop-trigger">Team
145                                                <i class="fa-solid fa-angle-right"></i>
146                                            </a>
147                                            <ul class="sub-menu shape-none" id="submenu-5">
148                                                <li class="sub-menu--item">
149                                                    <a href='/teams'>Teams</a>
150                                                </li>
151                                            </ul>
152                                        </li>
153                                        <li class="sub-menu--item nav-item-has-children">
154                                            <a href="#" data-menu-get="h3" class="drop-trigger">FAQ
155                                                <i class="fa-solid fa-angle-right"></i>
156                                            </a>
157                                            <ul class="sub-menu shape-none" id="submenu-6">
158                                                <li class="sub-menu--item">
159                                                    <a href='/faq'>FAQ-1</a>
160                                                </li>
161                                                <li class="sub-menu--item">
162                                                    <a href='/faq-2'>FAQ-2</a>
163                                                </li>
164                                                <li class="sub-menu--item">
165                                                    <a href='/faq-3'>FAQ-3</a>
166                                                </li>
167                                                <li class="sub-menu--item">
168                                                    <a href='/faq-4'>FAQ-4</a>
169                                                </li>
170                                            </ul>
171                                        </li>
172                                        <li class="sub-menu--item nav-item-has-children">
173                                            <a href="#" data-menu-get="h3" class="drop-trigger">Portfolio
174                                                <i class="fa-solid fa-angle-right"></i>
175                                            </a>
176                                            <ul class="sub-menu shape-none" id="submenu-7">
177                                                <li class="sub-menu--item">
178                                                    <a href='/portfolio'>Portfolio Classic</a>
179                                                </li>
180                                                <li class="sub-menu--item">
181                                                    <a href='/portfolio-2'>Portfolio Masonry</a>
182                                                </li>
183                                                <li class="sub-menu--item">
184                                                    <a href='/portfolio-3'>Portfolio Modern</a>
185                                                </li>
186                                                <li class="sub-menu--item">
187                                                    <a href='/portfolio-4'>Portfolio Minimal</a>
188                                                </li>
189                                                <li class="sub-menu--item">
190                                                    <a href='/portfolio-details'>Portfolio Details</a>
191                                                </li>
192                                            </ul>
193                                        </li>
194                                        <li class="sub-menu--item nav-item-has-children">
195                                            <a href="#" data-menu-get="h3" class="drop-trigger">Pricing
196                                                <i class="fa-solid fa-angle-right"></i>
197                                            </a>
198                                            <ul class="sub-menu shape-none" id="submenu-8">
199                                                <li class="sub-menu
199--item">
200                                                    <a href='/pricing'>Pricing-1</a>
201                                                </li>
202                                                <li class="sub-menu--item">
203                                                    <a href='/pricing-2'>Pricing-2</a>
204                                                </li>
205                                            </ul>
206                                        </li>
207                                        <li class="sub-menu--item nav-item-has-children">
208                                            <a href="#" data-menu-get="h3" class="drop-trigger">Careers
209                                                <i class="fa-solid fa-angle-right"></i>
210                                            </a>
211                                            <ul class="sub-menu shape-none" id="submenu-9">
212                                                <li class="sub-menu--item">
213                                                    <a href='/careers'>Career</a>
214                                                </li>
215                                                <li class="sub-menu--item">
216                                                    <a href='/career-details'>Career Details</a>
217                                                </li>
218                                            </ul>
219                                        </li>
220                                        <li class="sub-menu--item nav-item-has-children">
221                                            <a href="#" data-menu-get="h3" class="drop-trigger">Utilities
222                                                <i class="fa-solid fa-angle-right"></i>
223                                            </a>
224                                            <ul class="sub-menu shape-none" id="submenu-10">
225                                                <li class="sub-menu--item">
226                                                    <a href='/login'>Login</a>
227                                                </li>
228                                                <li class="sub-menu--item">
229                                                    <a href='/signup'>Signup</a>
230                                                </li>
231                                                <li class="sub-menu--item">
232                                                    <a href='/reset-password'>Reset Password</a>
233                                                </li>
234                                                <li class="sub-menu--item">
235                                                    <a href='/coming-soon'>Coming Soon</a>
236                                                </li>
237                                                <li class="sub-menu--item">
238                                                    <a href='/error-404'>Error 404</a>
239                                                </li>
240                                            </ul>
241                                        </li>
242                                    </ul>
243                                </li>
244                                <li class="nav-item nav-item-has-children">
245                                    <a href="#" class="nav-link-item drop-trigger">Contact
246                                        <i class="fa-solid fa-angle-down"></i>
247                                    </a>
248                                    <ul class="sub-menu" id="submenu-11">
249                                        <li class="sub-menu--item">
250                                            <a href='/contact'>Contact-1</a>
251                                        </li>
252                                        <li class="sub-menu--item">
253                                            <a href='/contact-2'>Contact-2</a>
254                                        </li>
255                                        <li class="sub-menu--item">
256                                            <a href='/contact-3'>Contact-3</a>
257                                        </li>
258                                    </ul>
259                                </li>
260                            </ul>
261                        </nav>
262                    </div>
263                    <!-- Header Navigation -->
264
265                    <!-- Header User Event -->
266                    <div class="flex items-center gap-6">
267                        <a class='btn-text hidden hover:text-ColorBlue md:inline-block' href='/login'>Login</a>
268                        <a class='btn is-blue is-rounded btn-animation group hidden md:inline-block' href='/signup'><span>Sign up free</span></a>
269                        <!-- Responsive Offcanvas Menu Button -->
270                        <div class="block lg:hidden">
271                            <button id="openBtn" class="hamburger-menu mobile-menu-trigger">
272                                <span></span>
273                                <span></span>
274                                <span></span>
275                            </button>
276                        </div>
277                    </div>
278                    <!-- Header User Event -->
279                </div>
280            </div>
281        </header>
282        <!--...::: Header End :::... -->
283
284        <main class="main-wrapper relative overflow-hidden">
285            <!--...::: Breadcrumb Section Start :::... -->
286            <section class="section-breadcrumb">
287                <!-- Breadcrumb Section Spacer -->
288                <div class="breadcrumb-wrapper">
289                    <!-- Section Container -->
290                    <div class="container-default">
291                        <div class="breadcrumb-block">
292                            <h1 class="breadcrumb-title">Pricing</h1>
293                            <ul class="breadcrumb-nav">
294                                <li><a href='/'>Home</a></li>
295                                <li>Pricing</li>
296                            </ul>
297                        </div>
298                    </div>
299                    <!-- Section Container -->
300
301                    <!-- Breadcrumb Shape - 1 -->
302                    <div class="absolute left-0 top-0 -z-10">
303                        <img src="assets/img/elements/breadcrumb-shape-1.svg" alt="hero-shape-1" width="291" height="380" />
304                    </div>
305
306                    <!-- Breadcrumb Shape - 2 -->
307                    <div class="absolute bottom-0 right-0 -z-[1]">
308                        <img src="assets/img/elements/breadcrumb-shape-2.svg" alt="hero-shape-2" width="291" height="380" />
309                    </div>
310                </div>
311                <!-- Breadcrumb Section Spacer -->
312            </section>
313            <!--...::: Breadcrumb Section End :::... -->
314
315            <!--...::: Pricing Section Start :::... -->
316            <section class="section-pricing">
317                <!-- Section Space -->
318                <div class="section-space">
319                    <!-- Section Container -->
320                    <div class="container-default">
321                        <!-- Section Content Wrapper -->
322                        <div class="jos">
323                            <!-- Section Content Block -->
324                            <div class="mx-auto max-w-[600px]">
325                                <div class="mb-5">
326                                    <h2 class="text-center">
327                                        Choice the right pricing plan that suits your need
328                                    </h2>
329                                </div>
330                            </div>
331                            <!-- Section Content Block -->
332                        </div>
333                        <!-- Section Content Wrapper -->
334
335                        <!-- Pricing Area -->
336                        <div>
337                            <!-- Pricing Button Block -->
338                            <div class="my-[50px] flex flex-row items-center justify-center gap-6">
339                                <span class="font-bold">Per Month</span>
340
341                                <!-- Toggle Button -->
342                                <label for="toggle" class="flex cursor-pointer items-center">
343                                    <!-- toggle -->
344                                    <span class="relative h-[35px] w-[70px] rounded-[35px] bg-ColorBlue">
345                                        <!-- hidden input -->
346                                        <input id="toggle" type="checkbox" class="hidden" onclick="toggleSwitch()" />
347                                        <!-- dot -->
348                                        <span class="toggle_dot absolute h-[35px] w-[35px] rounded-full bg-white transition-all duration-300"></span>
349                                    </span>
350                                </label>
351                                <!-- Toggle Button -->
352                                <span class="font-bold">Per Year</span>
353                            </div>
354                            <!-- Pricing Button Block -->
355
356                            <!-- Pricing List -->
357                            <div class="grid gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3">
358                                <!-- Pricing Item -->
359                                <div class="jos" data-jos_animation="flip-left" data-jos_delay="0">
360                                    <div class="hover-solid-shadow h-full">
361                                        <div class="rounded-[10px] border-2 border-ColorBlack bg-white p-7 xl
361:p-10 h-full">
362                                            <!-- Pricing Content Top -->
363                                            <div class="text-center">
364                                                <span class="text-xl font-bold text-ColorBlack">Free Plan</span>
365                                                <div class="month text-[28px] font-normal leading-[2.85] text-ColorBlack">
366                                                    $<span class="text-[48px] font-bold leading-[1.3] xl:text-[58px]">00</span>/month
367                                                </div>
368                                                <div class="annual hidden text-[28px] font-normal leading-[2.85] text-ColorBlack">
369                                                    $<span class="text-[48px] font-bold leading-[1.3] xl:text-[58px]">00</span>/yearly
370                                                </div>
371                                                <span class="text-sm text-ColorBlack/70">No credit card required</span>
372                                            </div>
373                                            <!-- Pricing Content Top -->
374                                            <!-- Horizontal Line Separator -->
375                                            <div class="my-10 h-px w-full bg-ColorBlack/10"></div>
376                                            <!-- Horizontal Line Separator -->
377                                            <!-- Pricing Data list -->
378                                            <ul class="flex flex-col gap-y-6 text-base font-semibold text-ColorBlack xl:px-[18px]">
379                                                <li class="flex gap-x-3">
380                                                    <span class="text-xl">
381                                                        <i class="fa-solid fa-star"></i>
382                                                    </span>
383                                                    Unlimited chats & websites
384                                                </li>
385                                                <li class="flex gap-x-3">
386                                                    <span class="text-xl">
387                                                        <i class="fa-solid fa-star"></i>
388                                                    </span>
389                                                    60-day conversations history
390                                                </li>
391                                                <li class="flex gap-x-3">
392                                                    <span class="text-xl">
393                                                        <i class="fa-solid fa-star"></i>
394                                                    </span>
395                                                    Basic widget customization
396                                                </li>
397                                                <li class="flex gap-x-3">
398                                                    <span class="text-xl">
399                                                        <i class="fa-solid fa-star"></i>
400                                                    </span>
401                                                    Web, desktop & mobile apps
402                                                </li>
403                                                <li class="flex gap-x-3 text-ColorBlack/10">
404                                                    <span class="text-xl">
405                                                        <i class="fa-solid fa-star"></i>
406                                                    </span>
407                                                    Engage visitors via visitor list
408                                                </li>
409                                                <li class="flex gap-x-3 text-ColorBlack/10">
410                                                    <span class="text-xl">
411                                                        <i class="fa-solid fa-star"></i>
412                                                    </span>
413                                                    Engage with automatic messages
414                                                </li>
415                                            </ul>
416                                            <!-- Pricing Data list -->
417                                            <div class="mt-10 flex justify-center">
418                                                <button class="btn is-white is-rounded is-large group w-full border-2">
419                                                    Purchase now
420                                                </button>
421                                            </div>
422                                        </div>
423                                    </div>
424                                </div>
425                                <!-- Pricing Item -->
426                                <!-- Pricing Item -->
427                                <div class="jos" data-jos_animation="flip-left" data-jos_delay="0">
428                                    <div class="hover-solid-shadow h-full">
429                                        <div class="rounded-[10px] border-2 border-ColorBlack bg-white p-7 xl
429:p-10 h-full">
430                                            <!-- Pricing Content Top -->
431                                            <div class="text-center">
432                                                <span class="text-xl font-bold text-ColorBlack">Popular Plan</span>
433                                                <div class="month text-[28px] font-normal leading-[2.85] text-ColorBlack">
434                                                    $<span class="text-[48px] font-bold leading-[1.3] xl:text-[58px]">199</span>/month
435                                                </div>
436                                                <div class="annual hidden text-[28px] font-normal leading-[2.85] text-ColorBlack">
437                                                    $<span class="text-[48px] font-bold leading-[1.3] xl:text-[58px]">2000</span>/yearly
438                                                </div>
439                                                <span class="text-sm text-ColorBlack/70">No credit card required</span>
440                                            </div>
441                                            <!-- Pricing Content Top -->
442                                            <!-- Horizontal Line Separator -->
443                                            <div class="my-10 h-px w-full bg-ColorBlack/10"></div>
444                                            <!-- Horizontal Line Separator -->
445                                            <!-- Pricing Data list -->
446                                            <ul class="flex flex-col gap-y-6 text-base font-semibold text-ColorBlack xl:px-[18px]">
447                                                <li class="flex gap-x-3">
448                                                    <span class="text-xl">
449                                                        <i class="fa-solid fa-star"></i>
450                                                    </span>
451                                                    Live chat + email + FB Messenger
452                                                </li>
453                                                <li class="flex gap-x-3">
454                                                    <span class="text-xl">
455                                                        <i class="fa-solid fa-star"></i>
456                                                    </span>
457                                                    3-year conversations history
458                                                </li>
459                                                <li class="flex gap-x-3">
460                                                    <span class="text-xl">
461                                                        <i class="fa-solid fa-star"></i>
462                                                    </span>
463                                                    Advanced widget customization
464                                                </li>
465                                                <li class="flex gap-x-3">
466                                                    <span class="text-xl">
467                                                        <i class="fa-solid fa-star"></i>
468                                                    </span>
469                                                    24/7 system monitoring facility
470                                                </li>
471                                                <li class="flex gap-x-3">
472                                                    <span class="text-xl">
473                                                        <i class="fa-solid fa-star"></i>
474                                                    </span>
475                                                    Engage visitors via visitor list
476                                                </li>
477                                                <li class="flex gap-x-3">
478                                                    <span class="text-xl">
479                                                        <i class="fa-solid fa-star"></i>
480                                                    </span>
481                                                    Engage with automatic messages
482                                                </li>
483                                            </ul>
484                                            <!-- Pricing Data list -->
485                                            <div class="mt-10 flex justify-center">
486                                                <button class="btn is-blue is-rounded is-large group w-full border-2">
487                                                    Purchase now
488                                                </button>
489                                            </div>
490                                        </div>
491                                    </div>
492                                </div>
493                                <!-- Pricing Item -->
494                                <!-- Pricing Item -->
495                                <div class="jos" data-jos_animation="flip-left" data-jos_delay="0">
496                                    <div class="hover-solid-shadow h-full">
497                                        <div class="rounded-[10px] border-2 border-ColorBlack bg-white p-7 xl
497:p-10 h-full">
498                                            <!-- Pricing Content Top -->
499                                            <div class="text-center">
500                                                <span class="text-xl font-bold text-ColorBlack">Standard Plan</span>
501                                                <div class="month text-[28px] font-normal leading-[2.85] text-ColorBlack">
502                                                    $<span class="text-[48px] font-bold leading-[1.3] xl:text-[58px]">49</span>/month
503                                                </div>
504                                                <div class="annual hidden text-[28px] font-normal leading-[2.85] text-ColorBlack">
505                                                    $<span class="text-[48px] font-bold leading-[1.3] xl:text-[58px]">500</span>/yearly
506                                                </div>
507                                                <span class="text-sm text-ColorBlack/70">No credit card required</span>
508                                            </div>
509                                            <!-- Pricing Content Top -->
510                                            <!-- Horizontal Line Separator -->
511                                            <div class="my-10 h-px w-full bg-ColorBlack/10"></div>
512                                            <!-- Horizontal Line Separator -->
513                                            <!-- Pricing Data list -->
514                                            <ul class="flex flex-col gap-y-6 text-base font-semibold text-ColorBlack xl:px-[18px]">
515                                                <li class="flex gap-x-3">
516                                                    <span class="text-xl">
517                                                        <i class="fa-solid fa-star"></i>
518                                                    </span>
519                                                    Live chat + email + FB Messenger
520                                                </li>
521                                                <li class="flex gap-x-3">
522                                                    <span class="text-xl">
523                                                        <i class="fa-solid fa-star"></i>
524                                                    </span>
525                                                    3-year conversations history
526                                                </li>
527                                                <li class="flex gap-x-3">
528                                                    <span class="text-xl">
529                                                        <i class="fa-solid fa-star"></i>
530                                                    </span>
531                                                    Advanced widget customization
532                                                </li>
533                                                <li class="flex gap-x-3">
534                                                    <span class="text-xl">
535                                                        <i class="fa-solid fa-star"></i>
536                                                    </span>
537                                                    24/7 system monitoring facility
538                                                </li>
539                                                <li class="flex gap-x-3 text-ColorBlack/10">
540                                                    <span class="text-xl">
541                                                        <i class="fa-solid fa-star"></i>
542                                                    </span>
543                                                    Engage visitors via visitor list
544                                                </li>
545                                                <li class="flex gap-x-3 text-ColorBlack/10">
546                                                    <span class="text-xl">
547                                                        <i class="fa-solid fa-star"></i>
548                                                    </span>
549                                                    Engage with automatic messages
550                                                </li>
551                                            </ul>
552                                            <!-- Pricing Data list -->
553                                            <div class="mt-10 flex justify-center">
554                                                <button class="btn is-white is-rounded is-large group w-full border-2">
555                                                    Purchase now
556                                                </button>
557                                            </div>
558                                        </div>
559                                    </div>
560                                </div>
561                                <!-- Pricing Item -->
562                            </div>
563                            <!-- Pricing List -->
564                        </div>
565                        <!-- Pricing Area -->
566                    </div>
567                    <!-- Section Container -->
568                </div>
569                <!-- Section Space -->
570            </section>
571            <!--...::: Pricing Section End :::... -->
572        </main>
573
574        <!--...::: Footer Section Start :::... -->
575        <footer class="section-footer">
576            <div class="bg-ColorBlack">
577                <!-- Footer Area Top -->
578                <div class="relative z-10">
579                    <!-- Footer Top Spacing -->
580                    <div class="pb-[60px] pt-20 lg:pb-20 lg:pt-[100px] xl:pt-[120px]">
581                        <!-- Section Container -->
582                        <div class="container-default">
583                            <!-- Section Wrapper -->
584                            <div class="flex flex-wrap items-center justify-center text-center lg:text-left lg:justify-between gap-8">
585                                <!-- Section Block -->
586                                <div class="max-w-[400px] md:max-w-[500px] lg:max-w-[550
586px]">
587                                    <h2 class="text-white">
588                                        Ready to grow your business digitally?
589                                    </h2>
590                                </div>
591                                <!-- Section Block -->
592                                <a class='btn is-blue is-rounded btn-animation is-large group' href='/portfolio'><span>Let's start the project</span></a>
593                            </div>
594                            <!-- Section Wrapper -->
595                        </div>
596                        <!-- Section Container -->
597                    </div>
598                    <!-- Footer Top Spacing -->
599
600                    <!-- CTA Shape -->
601                    <div class="absolute right-[9%] top-8 -z-10 hidden xxl:block">
602                        <img src="assets/img/elements/cta-1-shape-1.svg" alt="cta-1-shape-1" width="115" height="130" />
603                    </div>
604                </div>
605                <!-- Footer Area Top -->
606
607                <!-- Horizontal Line Separator -->
608                <div class="horizontal-line bg-white"></div>
609                <!-- Horizontal Line Separator -->
610
611                <!-- Footer Area Center -->
612                <div class="text-white">
613                    <!-- Footer Center Spacing -->
614                    <div class="py-[60px] lg:py-20">
615                        <!-- Section Container -->
616                        <div class="container-default">
617                            <!-- Footer Widget List -->
618                            <div class="grid gap-x-16 gap-y-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-[1fr_repeat(3,_auto)] xl:gap-x-24 xxl:gap-x-[134px]">
619                                <!-- Footer Widget Item -->
620                                <div class="flex flex-col gap-y-7 md:col-span-3 lg:col-span-1">
621                                    <!-- Footer Logo -->
622                                    <a href='/'>
623                                        <img src="assets/img/logo-blue-light.png" alt="Masco" width="109" height="24" />
624                                    </a>
625                                    <!-- Footer Content -->
626                                    <div>
627                                        <!-- Footer About Text -->
628                                        <div class="lg:max-w-[416px]">
629                                            We are strategic & creative digital agency who are
630                                            focused on user experience, mobile, social, data
631                                            gathering and promotional offerings.
632                                        </div>
633                                        <!-- Footer Mail -->
634                                        <a href="mailto:[email protected]" class="my-6 block underline-offset-4 transition-all duration-300 hover:underline">[email protected]</a>
635                                        <!-- Footer Social Link -->
636                                        <div class="flex flex-wrap gap-5">
637                                            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" class="flex h-[30px] w-[30px] items-center justify-center rounded-[50%] bg-white bg-opacity-5 text-sm text-white transition-all duration-300 hover:bg-ColorBlue" aria-label="twitter">
638                                                <i class="fa-brands fa-x-twitter"></i>
639                                            </a>
640                                            <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer" class="flex h-[30px] w-[30px] items-center justify-center rounded-[50%] bg-white bg-opacity-5 text-sm text-white transition-all duration-300 hover:bg-ColorBlue" aria-label="facebook">
641                                                <i class="fa-brands fa-facebook-f"></i>
642                                            </a>
643                                            <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" class="flex h-[30px] w-[30px] items-center justify-center rounded-[50%] bg-white bg-opacity-5 text-sm text-white transition-all duration-300 hover:bg-ColorBlue" aria-label="instagram">
644                                                <i class="fa-brands fa-instagram"></i>
645                                            </a>
646                                            <a href="https://www.github.com/" target="_blank" rel="noopener noreferrer" class="flex h-[30px] w-[30px] items-center justify-center rounded-[50%] bg-white bg-opacity-5 text-sm text-white transition-all duration-300 hover:bg-ColorBlue" aria-label="github">
647                                                <i class="fa-brands fa-github"></i>
648                                            </a>
649                                        </div>
650                                    </div>
651                                    <!-- Footer Content -->
652                                </div>
653                                <!-- Footer Widget Item -->
654
655                                <!-- Footer Widget Item -->
656                                <div class="flex flex-col gap-y-7 md:col-span-1 lg:col-span-1">
657                                    <!-- Footer Widget Title -->
658                                    <div class="text-xl font-semibold capitalize">
659                                        Primary Pages
660                                    </div>
661                                    <!-- Footer Navbar -->
662                                    <ul class="flex flex-col gap-y-[10px] capitalize">
663                                        <li>
664                                            <a class='hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline' href='/'>Home</a>
665                                        </li>
666                                        <li>
667                                            <a class='hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline' href='/about'>About Us</a>
668                                        </li>
669                                        <li>
670                                            <a class='hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline' href='/services'>Services</a>
671                                        </li>
672                                        <li>
673                                            <a class='hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline' href='/pricing'>pricing</a>
674                                        </li>
675                                        <li>
676                                            <a class='hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline' href='/contact'>Contact</a>
677                                        </li>
678                                    </ul>
679                                </div>
680                                <!-- Footer Widget Item -->
681
682                                <!-- Footer Widget Item -->
683                                <div class="flex flex-col gap-y-6 md:col-span-1 lg:col-span-1">
684                                    <!-- Footer Title -->
685                                    <div class="text-xl font-semibold capitalize">
686                                        Utility pages
687                                    </div>
688                                    <!-- Footer Title -->
689
690                                    <!-- Footer Navbar -->
691                                    <ul class="flex flex-col gap-y-[10px] capitalize">
692                                        <li>
693                                            <a class='hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline' href='/signup'>Signup</a>
694                                        </li>
695                                        <li>
696                                            <a class='hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline' href='/login'>Login</a>
697                                        </li>
698                                        <li>
699                                            <a class='hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline' href='/error-404'>404 Not found</a>
700                                        </li>
701                                        <li>
702                                            <a class='hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline' href='/reset-password'>Password Reset</a>
703                                        </li>
704                                    </ul>
705                                </div>
706                                <!-- Footer Widget Item-->
707
708                                <!-- Footer Widget Item -->
709                                <div class="flex flex-col gap-y-6 md:col-span-1 lg:col-span-1">
710                                    <!-- Footer Title -->
711                                    <div class="text-xl font-semibold capitalize">
712                                        Resources
713                                    </div>
714                                    <!-- Footer Title -->
715
716                                    <!-- Footer Navbar -->
717                                    <ul class="flex flex-col gap-y-[10px] capitalize">
718                                        <li>
719                                            <a href="https://www.example.com/" target="_blank" rel="noopener noreferrer" class="hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline">Support</a>
720                                        </li>
721                                        <li>
722                                            <a href="https://www.example.com/" target="_blank" rel="noopener noreferrer" class="hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline">Privacy policy</a>
723                                        </li>
724                                        <li>
725                                            <a href="https://www.example.com/" target="_blank" rel="noopener noreferrer" class="hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline">Terms & Conditions</a>
726                                        </li>
727                                        <li>
728                                            <a href="https://www.example.com/" target="_blank" rel="noopener noreferrer" class="hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline">Strategic finance</a>
729                                        </li>
730                                        <li>
731                                            <a href="https://www.example.com/" target="_blank" rel="noopener noreferrer" class="hover:opcity-100 underline-offset-4 opacity-80 transition-all duration-300 ease-linear hover:underline">
731Video guide</a>
732                                        </li>
733                                    </ul>
734                                </div>
735                                <!-- Footer Widget Item -->
736                            </div>
737                            <!-- Footer Widget List -->
738                        </div>
739                        <!-- Section Container -->
740                    </div>
741                    <!-- Footer Center Spacing -->
742                </div>
743                <!-- Footer Area Center -->
744
745                <!-- Footer Bottom -->
746                <div class="bg-white bg-opacity-5">
747                    <!-- Footer Bottom Spacing -->
748                    <div class="py-[18px]">
749                        <!-- Section Container -->
750                        <div class="container-default">
751                            <div class="text-center text-white text-opacity-80">
752                                &copy; Copyright 2024, All Rights Reserved by Mthemeus
753                            </div>
754                        </div>
755                        <!-- Section Container -->
756                    </div>
757                    <!-- Footer Bottom Spacing -->
758                </div>
759                <!-- Footer Bottom -->
760            </div>
761        </footer>
762        <!--...::: Footer Section End :::... -->
763    </div>
764
765    <!--Vendor js-->
766    
766<script src="assets/js/vendors/counterup.js" type="module"></script>
766
767    
767<script src="assets/js/vendors/swiper-bundle.min.js"></script>
767
768    
768<script src="assets/js/vendors/fslightbox.js"></script>
768
769    
769<script src="assets/js/vendors/jos.min.js"></script>
769
770    
770<script src="assets/js/vendors/menu.js"></script>
770
771
772    <!-- Main js -->
773    
773<script src="assets/js/main.js"></script>
773
774</body>
775
776</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.