mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-18 17:17:01 +00:00
146 lines
8.1 KiB
HTML
146 lines
8.1 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 3</title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
<!-- faq 3 start -->
|
|
<section class="section_divider" id="faq_3">
|
|
<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 -->
|
|
|
|
|
|
<!-- 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> |