mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-18 17:17:01 +00:00
401 lines
23 KiB
HTML
401 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||
<title>FAQ </title>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||
d
|
||
</button>
|
||
|
||
<!-- faq 1 start -->
|
||
<section class="section_divider">
|
||
<div>FAQ 1</div>
|
||
</section>
|
||
<section class="bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
|
||
<div class="container flex flex-col justify-center p-4 mx-auto md:p-8">
|
||
<p class="p-2 text-sm font-medium tracking-wider text-center uppercase">How it works</p>
|
||
<h2 class="mb-12 text-4xl font-bold leading-none text-center sm:text-5xl">Frequently Asked Questions</h2>
|
||
<div class="flex flex-col divide-y sm:px-8 lg:px-12 xl:px-32 divide-gray-300">
|
||
<details>
|
||
<summary class="py-2 outline-none cursor-pointer focus:underline">Optio maiores eligendi molestiae totam dolores similique?</summary>
|
||
<div class="px-4 pb-4">
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde neque in fugiat magni, quas animi enim veritatis deleniti ex. Impedit.</p>
|
||
</div>
|
||
</details>
|
||
<details>
|
||
<summary class="py-2 outline-none cursor-pointer focus:underline">Modi dolorem veritatis culpa quos consequuntur beatae itaque excepturi perspiciatis?</summary>
|
||
<div class="px-4 pb-4">
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est aspernatur quae, eos explicabo odit minima libero veniam similique quibusdam doloribus facilis ipsa accusantium vel maiores corrupti! Libero voluptate a doloribus?</p>
|
||
</div>
|
||
</details>
|
||
<details>
|
||
<summary class="py-2 outline-none cursor-pointer focus:underline">Magni reprehenderit possimus debitis?</summary>
|
||
<div class="px-4 pb-4 space-y-2">
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut voluptates aspernatur dolores in consequatur doloremque inventore reprehenderit, consequuntur perspiciatis architecto.</p>
|
||
<p>Sed consectetur quod tenetur! Voluptatibus culpa incidunt veritatis velit quasi cupiditate unde eaque! Iure, voluptatibus autem eaque unde possimus quae.</p>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- faq 1 end -->
|
||
|
||
<!-- faq 2 start -->
|
||
<section class="section_divider">
|
||
<div>FAQ 2</div>
|
||
</section>
|
||
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||
<div class="container flex flex-col items-center p-4 mx-auto md:p-8">
|
||
<h1 class="text-3xl font-bold leading-none text-center sm:text-4xl">Help Center</h1>
|
||
<div class="relative mt-6 mb-12">
|
||
<span class="absolute inset-y-0 flex items-center pl-2 mx-auto">
|
||
<button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
|
||
<svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-gray-100">
|
||
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
||
</svg>
|
||
</button>
|
||
</span>
|
||
<input type="search" name="Search" placeholder="Search..." class="w-full py-3 pl-12 text-sm rounded-full border-2 sm:w-96 focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
|
||
</div>
|
||
<div class="flex flex-col w-full divide-y sm:flex-row sm:divide-y-0 sm:divide-x sm:px-8 lg:px-12 xl:px-32 divide-gray-700">
|
||
<div class="flex flex-col w-full divide-y divide-gray-700">
|
||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Billing</a>
|
||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Support</a>
|
||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Account</a>
|
||
</div>
|
||
<div class="flex flex-col w-full divide-y divide-gray-700">
|
||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Features</a>
|
||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Contact us</a>
|
||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">My orders</a>
|
||
</div>
|
||
<div class="hidden w-full divide-y sm:flex-col sm:flex divide-gray-700">
|
||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Enterprise</a>
|
||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Privacy</a>
|
||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Developers</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- faq 2 end -->
|
||
|
||
<!-- faq 3 start -->
|
||
<section class="section_divider">
|
||
<div>FAQ 3</div>
|
||
</section>
|
||
|
||
|
||
<div class="dark:bg-gray-800">
|
||
<div class="mx-auto max-w-6xl ">
|
||
<div class="p-2 rounded">
|
||
<div class="flex flex-col md:flex-row">
|
||
<div class="md:w-1/3 p-4 text-sm">
|
||
|
||
<div class="sticky inset-x-0 top-0 left-0 py-12">
|
||
|
||
<div class="text-3xl text-green-400 mb-8">Frequently asked questions.</div>
|
||
<div class="mb-2 text-lg dark:text-gray-300">Lorem Ipsum ?</div>
|
||
<div class="text-s text-gray-600">See our FAQ for more details</div>
|
||
|
||
<div class="relative text-gray-600 mt-8 lg:mr-16">
|
||
<input
|
||
x-ref="searchField"
|
||
x-model="search"
|
||
x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
|
||
type="search" name="serch" placeholder="Search" class="bg-white w-full h-10 px-5 rounded-full text-sm focus:outline-none">
|
||
<button type="submit" class="focus:outline-none absolute right-0 top-0 mt-3 mr-4">
|
||
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
|
||
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="md:w-2/3 py-12 ">
|
||
<div class="p-4">
|
||
|
||
<div class="item px-6 py-6" x-data="{isOpen : false}">
|
||
<a href="#" class="flex items-center justify-between" @click.prevent="isOpen = true">
|
||
<h4 :class="{'text-green-400 font-medium ' : isOpen == true } ">Lorem Ipsum ?</h4>
|
||
<svg
|
||
:class="{'transform rotate-180' : isOpen == true}"
|
||
class="w-5 h-5 text-gray-500"
|
||
fill="none" stroke-linecap="round"
|
||
stroke-linejoin="round" stroke-width="2"
|
||
viewBox="0 0 24 24" stroke="currentColor">
|
||
<path d="M19 9l-7 7-7-7"></path>
|
||
</svg>
|
||
</a>
|
||
<div x-show="isOpen" @click.away="isOpen = false" class="mt-3" :class="{'text-gray-600' : isOpen == true}">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item px-6 py-6" x-data="{isOpen : false}">
|
||
<a href="#" class="flex items-center justify-between" @click.prevent="isOpen = true">
|
||
<h4 :class="{'text-green-400 font-medium ' : isOpen == true } ">Lorem Ipsum ?</h4>
|
||
<svg
|
||
:class="{'transform rotate-180' : isOpen == true}"
|
||
class="w-5 h-5 text-gray-500"
|
||
fill="none" stroke-linecap="round"
|
||
stroke-linejoin="round" stroke-width="2"
|
||
viewBox="0 0 24 24" stroke="currentColor">
|
||
<path d="M19 9l-7 7-7-7"></path>
|
||
</svg>
|
||
</a>
|
||
<div x-show="isOpen" @click.away="isOpen = false" class="mt-3" :class="{'text-gray-600' : isOpen == true}">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item px-6 py-6" x-data="{isOpen : false}">
|
||
<a href="#" class="flex items-center justify-between" @click.prevent="isOpen = true">
|
||
<h4 :class="{'text-green-400 font-medium ' : isOpen == true } ">Lorem Ipsum ?</h4>
|
||
<svg
|
||
:class="{'transform rotate-180' : isOpen == true}"
|
||
class="w-5 h-5 text-gray-500"
|
||
fill="none" stroke-linecap="round"
|
||
stroke-linejoin="round" stroke-width="2"
|
||
viewBox="0 0 24 24" stroke="currentColor">
|
||
<path d="M19 9l-7 7-7-7"></path>
|
||
</svg>
|
||
</a>
|
||
<div x-show="isOpen" @click.away="isOpen = false" class="mt-3" :class="{'text-gray-600' : isOpen == true}">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- faq 3 end -->
|
||
|
||
<!-- faq 4 start -->
|
||
<section class="section_divider">
|
||
<div>FAQ 4</div>
|
||
</section>
|
||
<section class="relative py-16 bg-white dark:bg-gray-800 min-w-screen animation-fade animation-delay">
|
||
<div class="container px-0 mx-auto sm:px-5">
|
||
<p class="mx-6 text-md font-bold text-left text-purple-500 uppercase sm:text-center sm:text-normal sm:font-bold">
|
||
Got a
|
||
Question? We’ve got answers.</p>
|
||
<h3 class="mx-6 mt-1 text-xl font-bold text-left text-gray-800 dark:text-gray-300 sm:text-3xl md:text-5xl sm:text-center sm:mx-0">
|
||
Frequently Asked Questions</h3>
|
||
|
||
<div
|
||
class="w-full px-6 py-6 mx-auto mt-10 bg-white border border-gray-200 sm:px-8 md:px-12 sm:py-8 sm:rounded-lg sm:shadow md:w-2/3">
|
||
<h3 class="text-lg font-bold text-purple-500 sm:text-xl md:text-2xl">How does it work?</h3>
|
||
<p class="mt-2 text-base text-gray-600 sm:text-lg md:text-normal">Our platform works with your content to
|
||
provides
|
||
insights and metrics on how you can grow your business and scale your infastructure.</p>
|
||
</div>
|
||
<div
|
||
class="w-full px-6 py-6 mx-auto mt-10 bg-white border border-gray-200 sm:px-8 md:px-12 sm:py-8 sm:rounded-lg sm:shadow md:w-2/3">
|
||
<h3 class="text-lg font-bold text-purple-500 sm:text-xl md:text-2xl">Do you offer team pricing?</h3>
|
||
<p class="mt-2 text-base text-gray-600 sm:text-lg md:text-normal">Yes, we do! Team pricing is available for
|
||
any
|
||
plan. You can take advantage of 30% off for signing up for team pricing of 10 users or more.</p>
|
||
</div>
|
||
<div
|
||
class="w-full px-6 py-6 mx-auto mt-10 bg-white border border-gray-200 sm:px-8 md:px-12 sm:py-8 sm:rounded-lg sm:shadow md:w-2/3">
|
||
<h3 class="text-lg font-bold text-purple-500 sm:text-xl md:text-2xl">How do I make changes and configure my
|
||
site?
|
||
</h3>
|
||
<p class="mt-2 text-base text-gray-600 sm:text-lg md:text-normal">You can easily change your site settings
|
||
inside
|
||
of your site dashboard by clicking the top right menu and clicking the settings button.</p>
|
||
</div>
|
||
<div
|
||
class="w-full px-6 py-6 mx-auto mt-10 bg-white border border-gray-200 sm:px-8 md:px-12 sm:py-8 sm:rounded-lg sm:shadow md:w-2/3">
|
||
<h3 class="text-lg font-bold text-purple-500 sm:text-xl md:text-2xl">How do I add a custom domain?</h3>
|
||
<p class="mt-2 text-base text-gray-600 sm:text-lg md:text-normal">You can easily change your site settings
|
||
inside
|
||
of your site dashboard by clicking the top right menu and clicking the settings button.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- faq 4 end -->
|
||
|
||
<!-- faq 5 start -->
|
||
<section class="section_divider">
|
||
<div>FAQ 5</div>
|
||
</section>
|
||
<section class=" dark:bg-gray-800">
|
||
<div class=" px-4 pt-20 pb-24 mx-auto max-w-7xl md:px-2 grid grid-cols-1 gap-24 md:grid-cols-2">
|
||
<div>
|
||
<h1 class="mb-6 text-2xl font-light text-gray-900 dark:text-gray-100 md:text-3xl">Basic Questions</h1>
|
||
<p class="mt-10 mb-3 font-semibold text-gray-900 dark:text-purple-400">What is accessibility?</p>
|
||
<p class="text-gray-600 dark:text-gray-100">
|
||
This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with
|
||
the web, and how we can make accessibility part of our web development workflow.
|
||
</p>
|
||
<p class="mt-10 mb-3 font-semibold text-gray-900 dark:text-purple-400">HTML: A good basis for accessibility?</p>
|
||
<p class="text-gray-600 dark:text-gray-100 ">A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose.</p>
|
||
<p class="mt-10 mb-3 font-semibold text-gray-900 dark:text-purple-400">CSS and JavaScript accessibility best practices?</p>
|
||
<p class="text-gray-600 dark:text-gray-100 ">
|
||
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some
|
||
CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h1 class="mb-6 text-2xl font-light md:text-3xl dark:text-gray-100 ">Advanced Questions</h1>
|
||
<p class="mt-10 mb-3 font-semibold text-gray-900 dark:text-purple-400">WAI-ARIA basics, WAI-ARIA basics, WAI-ARIA basics, WAI-ARIA basics?</p>
|
||
<p class="text-gray-600 dark:text-gray-100 ">
|
||
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that
|
||
can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a
|
||
basic level to improve accessibility.
|
||
</p>
|
||
<p class="mt-10 mb-3 font-semibold text-gray-900 dark:text-purple-400">Accessible multimedia?</p>
|
||
<p class="text-gray-600 dark:text-gray-100 ">
|
||
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by
|
||
assistive technologies and their users. This article shows how.
|
||
</p>
|
||
<p class="mt-10 mb-3 font-semibold text-gray-900 dark:text-purple-400">Mobile accessibility?</p>
|
||
<p class="text-gray-600 dark:text-gray-100 ">With web access on mobile devices being so popular, and popular platforms such as iOS and Android.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- faq 5 end -->
|
||
|
||
<!-- faq 6 start -->
|
||
<section class="section_divider">
|
||
<div>FAQ 6</div>
|
||
</section>
|
||
<div class="dark:bg-gray-800">
|
||
<section class="text-gray-700">
|
||
<div class="container px-5 py-24 mx-auto">
|
||
<div class="text-center mb-20">
|
||
<h1 class="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 dark:text-cyan-200 mb-4">
|
||
Frequently Asked Question
|
||
</h1>
|
||
<p class="text-base dark:text-cyan-300 leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
|
||
The most common questions about how our business works and what
|
||
can do for you.
|
||
</p>
|
||
</div>
|
||
<div class="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
|
||
<div class="w-full lg:w-1/2 px-4 py-2">
|
||
<details class="mb-4">
|
||
<summary class="font-semibold bg-gray-200 dark:bg-gray-800 dark:border-2 dark:border-cyan-200 dark:text-cyan-200 rounded-md py-2 px-4">
|
||
How Long is this site live?
|
||
</summary>
|
||
|
||
<span class="dark:text-cyan-300">
|
||
Laboris qui labore cillum culpa in sunt quis sint veniam.
|
||
Dolore ex aute deserunt esse ipsum elit aliqua. Aute quis
|
||
minim velit nostrud pariatur culpa magna in aute.
|
||
</span>
|
||
</details>
|
||
<details class="mb-4">
|
||
<summary class="font-semibold bg-gray-200 dark:bg-gray-800 dark:border-2 dark:border-cyan-200 dark:text-cyan-200 rounded-md py-2 px-4">
|
||
Can I install/upload anything I want on there?
|
||
</summary>
|
||
|
||
<span class="dark:text-cyan-300">
|
||
Laboris qui labore cillum culpa in sunt quis sint veniam.
|
||
Dolore ex aute deserunt esse ipsum elit aliqua. Aute quis
|
||
minim velit nostrud pariatur culpa magna in aute.
|
||
</span>
|
||
</details>
|
||
<details class="mb-4">
|
||
<summary class="font-semibold bg-gray-200 dark:bg-gray-800 dark:border-2 dark:border-cyan-200 dark:text-cyan-200 rounded-md py-2 px-4">
|
||
How can I migrate to another site?
|
||
</summary>
|
||
|
||
<span class="dark:text-cyan-300">
|
||
Laboris qui labore cillum culpa in sunt quis sint veniam.
|
||
Dolore ex aute deserunt esse ipsum elit aliqua. Aute quis
|
||
minim velit nostrud pariatur culpa magna in aute.
|
||
</span>
|
||
</details>
|
||
</div>
|
||
<div class="w-full lg:w-1/2 px-4 py-2">
|
||
<details class="mb-4">
|
||
<summary class="font-semibold bg-gray-200 dark:bg-gray-800 dark:border-2 dark:border-cyan-200 dark:text-cyan-200 rounded-md py-2 px-4">
|
||
Can I change the domain you give me?
|
||
</summary>
|
||
|
||
<span class="px-4 py-2 dark:text-cyan-300">
|
||
Laboris qui labore cillum culpa in sunt quis sint veniam.
|
||
Dolore ex aute deserunt esse ipsum elit aliqua. Aute quis
|
||
minim velit nostrud pariatur culpa magna in aute.
|
||
</span>
|
||
</details>
|
||
<details class="mb-4">
|
||
<summary class="font-semibold bg-gray-200 dark:bg-gray-800 dark:border-2 dark:border-cyan-200 dark:text-cyan-200 rounded-md py-2 px-4">
|
||
How many sites I can create at once?
|
||
</summary>
|
||
|
||
<span class="px-4 py-2 dark:text-cyan-300">
|
||
Laboris qui labore cillum culpa in sunt quis sint veniam.
|
||
Dolore ex aute deserunt esse ipsum elit aliqua. Aute quis
|
||
minim velit nostrud pariatur culpa magna in aute.
|
||
</span>
|
||
</details>
|
||
<details class="mb-4 ">
|
||
<summary class="font-semibold bg-gray-200 dark:bg-gray-800 dark:border-2 dark:border-cyan-200 dark:text-cyan-200 rounded-md py-2 px-4">
|
||
How can I communicate with you?
|
||
</summary>
|
||
|
||
<span class="px-4 py-2 dark:text-cyan-300">
|
||
Laboris qui labore cillum culpa in sunt quis sint veniam.
|
||
Dolore ex aute deserunt esse ipsum elit aliqua. Aute quis
|
||
minim velit nostrud pariatur culpa magna in aute.
|
||
</span>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- faq 6 end -->
|
||
|
||
<!-- start of script section -->
|
||
<script type="text/javascript">
|
||
let toogler = document.getElementById("dark_mood_toogler");
|
||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||
|
||
doc_html_el.addEventListener('keyup',(e)=>{
|
||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||
if(e.ctrlKey && e.keyCode =='220'){
|
||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||
|
||
}
|
||
})
|
||
doc_html_el.addEventListener('keyup',(e)=>{
|
||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||
if(e.ctrlKey && e.keyCode =='191'){
|
||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||
|
||
}
|
||
})
|
||
toogler.addEventListener('click',()=>{
|
||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||
console.log(doc_html_el.className);
|
||
})
|
||
</script>
|
||
<!-- end of script section -->
|
||
|
||
</body>
|
||
</html> |