Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-17 17:57:00 +00:00
Code Issues Projects Releases Wiki Activity

added 23 testimonial and 8 pricing component block's even tho they need to be more modified

Browse Source
This commit is contained in:
merajjahir
2022-02-23 20:01:58 +06:00
parent c0eeffa19d
commit b02f32073a
15 changed files with 7455 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1663
dist/tailshape.css vendored
View File

File diff suppressed because it is too large Load Diff

507
public/componets/accordion/10_accordion.html Normal file
View File

@@ -0,0 +1,507 @@
<!DOCTYPE html>
<html lang="en" class="">
<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>Accordion 10</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- accordion 10 start -->
<section class="section_divider">
<div>Accordion 10</div>
</section>
<!-- ====== FAQ Section Start -->
<section
x-data="
{
openFaq1: false,
openFaq2: false,
openFaq3: false,
openFaq4: false,
openFaq5: false,
openFaq6: false
}
"
class="
dark:bg-gray-800
bg-gray-300
pt-20
lg:pt-[120px]
pb-12
lg:pb-[90px]
relative
z-20
overflow-hidden
"
>
<div class="mx-20 ">
<div class="flex flex-wrap -mx-4">
<div class="w-full px-4">
<div class="text-center mx-auto mb-[60px] lg:mb-20 max-w-[520px]">
<span class="font-semibold text-lg text-primary mb-2 block">
FAQ
</span>
<h2
class="
font-bold
text-3xl
sm:text-4xl
md:text-[40px]
text-dark
mb-4
"
>
Any Questions? Look Here
</h2>
<p class="text-base text-body-color">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 px-4">
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq1 = !openFaq1"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq1" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq2 = !openFaq2"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq2" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq3 = !openFaq3"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq3" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4">
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq4 = !openFaq4"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq4" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq5 = !openFaq5"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq5" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq6 = !openFaq6"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq6" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 right-0 z-[-1]">
<svg
width="1440"
height="886"
viewBox="0 0 1440 886"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
opacity="0.5"
d="M193.307 -273.321L1480.87 1014.24L1121.85 1373.26C1121.85 1373.26 731.745 983.231 478.513 729.927C225.976 477.317 -165.714 85.6993 -165.714 85.6993L193.307 -273.321Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="1308.65"
y1="1142.58"
x2="602.827"
y2="-418.681"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3056D3" stop-opacity="0.36" />
<stop offset="1" stop-color="#F5F2FD" stop-opacity="0" />
<stop offset="1" stop-color="#F5F2FD" stop-opacity="0.096144" />
</linearGradient>
</defs>
</svg>
</div>
</section>
<!-- ====== FAQ Section End -->
<!-- accordion 10 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>

121
public/componets/accordion/11_accordion.html Normal file
View File

@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en" class="">
<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>Accordion 10</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- accordion 11 start -->
<section class="section_divider">
<div>Accordion 11</div>
</section>
<!-- component -->
<!-- This is an example component -->
<div class="max-w-2xl mx-auto bg-white p-16 rounded">
<div id="accordion-collapse" data-accordion="collapse">
<h2 id="accordion-collapse-heading-1">
<button type="button" class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium text-left border border-gray-200 dark:border-gray-700 border-b-0 text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-t-xl" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0 rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-collapse-body-1" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900 border-b-0">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive
components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a
href="https://flowbite.com/docs/getting-started/introduction/" target="_blank"
class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing
websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button" class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 border-b-0 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border border-gray-200 dark:border-gray-700 border-b-0">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the
Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/"
target="_blank" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a>
based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-3">
<button type="button" class="flex items-center border focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 border-gray-200 dark:border-gray-700 justify-between p-5 w-full font-medium text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
<div class="p-5 border border-gray-200 dark:border-gray-700 border-t-0">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from
Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another
difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers
sections of pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite,
Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best
of two worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc pl-5 dark:text-gray-400 text-gray-500">
<li><a href="https://flowbite.com/pro/" target="_blank"
class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" target="_blank"
class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
<script src="https://unpkg.com/flowbite@1.3.3/dist/flowbite.js"></script>
</div>
<!-- accordion 11 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>

26
public/componets/accordion/4_accordion.html
View File

@@ -142,5 +142,31 @@
<!-- accordion 4 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>

111
public/componets/accordion/5_accordion.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en" class="">
<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>Accordion 5</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- accordion 5 start -->
<section class="section_divider">
<div>Accordion 5</div>
</section>
<!-- component -->
<!-- This is an example component -->
<style>
.accordion {
width: 100%;
}
.panel {
display: none;
overflow: hidden;
}
</style>
<div class='flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto'>
<div class="bg-blue-200 mx-auto my-2">
<h2 class="bg-dark-800 p-4 text-center font-black">Accordion</h2>
<button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 1</button>
<div class="panel bg-blue-100 p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 2</button>
<div class="panel bg-blue-100 p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 3</button>
<div class="panel bg-blue-100 p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>
</div>
<script>
var accordElement = document.getElementsByClassName("accordion");
for (i = 0; i < accordElement.length; i++) {
accordElement[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<!-- accordion 5 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>

230
public/componets/accordion/6_accordion.html Normal file
View File

@@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="en" class="">
<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>Accordion 6</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- accordion 6 start -->
<section class="section_divider">
<div>Accordion 6</div>
</section>
<main class="p-5 bg-light-blue">
<div class="flex justify-center items-start my-2">
<div class="w-full sm:w-10/12 md:w-1/2 my-1">
<h2 class="text-xl font-semibold text-vnet-blue mb-2">FAQ - Order, Shipping, Etc.</h2>
<ul class="flex flex-col">
<li class="bg-white my-2 shadow-lg" x-data="accordion(1)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>When will my order arrive?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
x-ref="tab"
:style="handleToggle()"
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
>
<p class="p-3 text-gray-900">
Shipping time is set by our delivery partners, according to the delivery method chosen by you. Additional details can be found in the order confirmation
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(2)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>How do I track my order?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
Once shipped, you’ll get a confirmation email that includes a tracking number and additional information regarding tracking your order.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(3)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>What’s your return policy?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
We allow the return of all items within 30 days of your original order’s date. If you’re interested in returning your items, send us an email with your order number and we’ll ship a return label.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(4)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>How do I make changes to an existing order?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
Changes to an existing order can be made as long as the order is still in “processing” status. Please contact our team via email and we’ll make sure to apply the needed changes. If your order has already been shipped, we cannot apply any changes to it. If you are unhappy with your order when it arrives, please contact us for any changes you may require.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(5)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>What shipping options do you have?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
For USA domestic orders we offer FedEx and USPS shipping.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(6)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>What payment methods do you accept?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
Any method of payments acceptable by you. For example: We accept MasterCard, Visa, American Express, PayPal, JCB Discover, Gift Cards, etc.
</p>
</div>
</li>
</ul>
</div>
</div>
</main>
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('accordion', {
tab: 0
});
Alpine.data('accordion', (idx) => ({
init() {
this.idx = idx;
},
idx: -1,
handleClick() {
this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
},
handleRotate() {
return this.$store.accordion.tab === this.idx ? 'rotate-180' : '';
},
handleToggle() {
return this.$store.accordion.tab === this.idx ? `max-height: ${this.$refs.tab.scrollHeight}px` : '';
}
}));
})
</script>
<!-- accordion 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>

65
public/componets/accordion/7_accordion.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en" class="">
<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>Accordion 7</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- accordion 7 start -->
<section class="section_divider">
<div>Accordion 7</div>
</section>
<!-- component -->
<div class=" p-20 flex items-center justify-center bg-gray-100">
<div class="flex flex-col px-6 py-8 bg-white shadow-lg">
<h1 class="mb-8 font-extrabold text-gray-800 leading-6">Coronavirus - Facts,<br/> advice and measures</h1>
<ul class="flex flex-col space-y-4 text-gray-900">
<div class="bg-yellow-100 border-l-4 border-yellow-300 rounded-md w-full px-6 py-4 cursor-pointer">Facts and knowledge about COVID19</div>
<div class="bg-purple-100 border-l-4 border-purple-300 rounded-md w-full px-6 py-4 cursor-pointer">For the public</div>
<div class="bg-red-100 border-l-4 border-red-300 rounded-md w-full px-6 py-4 cursor-pointer">For the government</div>
<ul>
</div>
</div>
<!-- accordion 7 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>

138
public/componets/accordion/8_accordion.html Normal file
View File

@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="en" class="">
<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>Accordion 8</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- accordion 8 start -->
<section class="section_divider">
<div>Accordion 8</div>
</section>
<div class="container mx-auto">
<div class="m-8 rounded overflow-hidden">
<!-- accordion-tab -->
<div class="group outline-none accordion-section" tabindex="1">
<div
class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
>
<div class="group-focus:text-white transition ease duration-500">
Title for Tab - 1
</div>
<div
class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div
class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
>
<p class="p-2 text-gray-400 text-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
repellat amet doloribus consequuntur eos similique provident
tempora voluptates iure quia fuga dicta voluptatibus culpa
mollitia recusandae delectus id suscipit labore?
</p>
</div>
</div>
<!-- accordion-tab -->
<!-- accordion-tab -->
<div class="group outline-none accordion-section" tabindex="2">
<div
class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
>
<div class="group-focus:text-white transition ease duration-500">
Title for Tab - 2
</div>
<div
class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div
class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
>
<p class="p-2 text-gray-400 text-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
repellat amet doloribus consequuntur eos similique provident
tempora voluptates iure quia fuga dicta voluptatibus culpa
mollitia recusandae delectus id suscipit labore?
</p>
</div>
</div>
<!-- accordion-tab -->
<!-- accordion-tab -->
<div class="group outline-none accordion-section" tabindex="3">
<div
class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
>
<div class="group-focus:text-white transition ease duration-500">
Title for Tab - 3
</div>
<div
class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div
class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
>
<p class="p-2 text-gray-400 text-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
repellat amet doloribus consequuntur eos similique provident
tempora voluptates iure quia fuga dicta voluptatibus culpa
mollitia recusandae delectus id suscipit labore?
</p>
</div>
</div>
<!-- accordion-tab -->
</div>
</div>
<!-- accordion 8 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>

84
public/componets/accordion/9_accordion.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en" class="">
<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>Accordion 9</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- accordion 9 start -->
<section class="section_divider">
<div>Accordion 9</div>
</section>
<div x-data="accordion" class="max-w-md border border-gray-300 divide-y divide-gray-300">
<h3 class="text-lg">
<button x-bind="header('general')" class="flex items-center justify-between w-full px-4 py-2 font-medium focus:outline-black focus:border-blue-600">
<span>General</span>
<!-- Active: `transform rotate-180`, Inactive: `transform rotate-0` -->
<svg x-bind="headerIcon('general')" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
</svg>
</button>
</h3>
<div x-bind="section('general')" class="px-4 py-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim quis ante ut pellentesque. Quisque bibendum dapibus laoreet. Aliquam eget consectetur sem. Suspendisse massa lectus, rhoncus sed sollicitudin sed, auctor vel velit.
</div>
<h3 class="text-lg">
<button x-bind="header('settings')" class="flex items-center justify-between w-full px-4 py-2 font-medium focus:outline-black focus:border-blue-600">
<span>Settings</span>
<!-- Active: `transform rotate-180`, Inactive: `transform rotate-0` -->
<svg x-bind="headerIcon('settings')" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
</svg>
</button>
</h3>
<div x-bind="section('settings')" class="px-4 py-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim quis ante ut pellentesque. Quisque bibendum dapibus laoreet. Aliquam eget consectetur sem. Suspendisse massa lectus, rhoncus sed sollicitudin sed, auctor vel velit.
</div>
</div>
<!-- accordion 9 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>

931
public/componets/accordion/accordion.html
View File

@@ -7,6 +7,7 @@
<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>
<script defer src="https://unpkg.com/alpinejs@3.2.3/dist/cdn.min.js"></script>
<title>Accordion</title>
</head>
<body>
@@ -356,6 +357,936 @@
<!-- accordion 4 end -->
<!-- accordion 5 start -->
<section class="section_divider">
<div>Accordion 5</div>
</section>
<!-- component -->
<!-- This is an example component -->
<style>
.accordion {
width: 100%;
}
.panel {
display: none;
overflow: hidden;
}
</style>
<div class='flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto'>
<div class="bg-blue-200 mx-auto my-2">
<h2 class="bg-dark-800 p-4 text-center font-black">Accordion</h2>
<button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 1</button>
<div class="panel bg-blue-100 p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 2</button>
<div class="panel bg-blue-100 p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="border-solid border-4 border-light-blue-500 text-left accordion p-4 font-black bg-yellow-500 hover:bg-red-700 focus:bg-red-700 rounded-sm">Section 3</button>
<div class="panel bg-blue-100 p-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
</div>
</div>
<script>
var accordElement = document.getElementsByClassName("accordion");
for (i = 0; i < accordElement.length; i++) {
accordElement[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
<!-- accordion 5 end -->
<!-- accordion 6 start -->
<section class="section_divider">
<div>Accordion 6</div>
</section>
<main class="p-5 bg-light-blue">
<div class="flex justify-center items-start my-2">
<div class="w-full sm:w-10/12 md:w-1/2 my-1">
<h2 class="text-xl font-semibold text-vnet-blue mb-2">FAQ - Order, Shipping, Etc.</h2>
<ul class="flex flex-col">
<li class="bg-white my-2 shadow-lg" x-data="accordion(1)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>When will my order arrive?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
x-ref="tab"
:style="handleToggle()"
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
>
<p class="p-3 text-gray-900">
Shipping time is set by our delivery partners, according to the delivery method chosen by you. Additional details can be found in the order confirmation
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(2)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>How do I track my order?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
Once shipped, you’ll get a confirmation email that includes a tracking number and additional information regarding tracking your order.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(3)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>What’s your return policy?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
We allow the return of all items within 30 days of your original order’s date. If you’re interested in returning your items, send us an email with your order number and we’ll ship a return label.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(4)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>How do I make changes to an existing order?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
Changes to an existing order can be made as long as the order is still in “processing” status. Please contact our team via email and we’ll make sure to apply the needed changes. If your order has already been shipped, we cannot apply any changes to it. If you are unhappy with your order when it arrives, please contact us for any changes you may require.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(5)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>What shipping options do you have?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
For USA domestic orders we offer FedEx and USPS shipping.
</p>
</div>
</li>
<li class="bg-white my-2 shadow-lg" x-data="accordion(6)">
<h2
@click="handleClick()"
class="flex flex-row justify-between items-center font-semibold p-3 cursor-pointer"
>
<span>What payment methods do you accept?</span>
<svg
:class="handleRotate()"
class="fill-current text-purple-700 h-6 w-6 transform transition-transform duration-500"
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
<div
class="border-l-2 border-purple-600 overflow-hidden max-h-0 duration-500 transition-all"
x-ref="tab"
:style="handleToggle()"
>
<p class="p-3 text-gray-900">
Any method of payments acceptable by you. For example: We accept MasterCard, Visa, American Express, PayPal, JCB Discover, Gift Cards, etc.
</p>
</div>
</li>
</ul>
</div>
</div>
</main>
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('accordion', {
tab: 0
});
Alpine.data('accordion', (idx) => ({
init() {
this.idx = idx;
},
idx: -1,
handleClick() {
this.$store.accordion.tab = this.$store.accordion.tab === this.idx ? 0 : this.idx;
},
handleRotate() {
return this.$store.accordion.tab === this.idx ? 'rotate-180' : '';
},
handleToggle() {
return this.$store.accordion.tab === this.idx ? `max-height: ${this.$refs.tab.scrollHeight}px` : '';
}
}));
})
</script>
<!-- accordion 6 end -->
<!-- accordion 7 start -->
<section class="section_divider">
<div>Accordion 7</div>
</section>
<!-- component -->
<div class=" p-20 flex items-center justify-center bg-gray-100">
<div class="flex flex-col px-6 py-8 bg-white shadow-lg">
<h1 class="mb-8 font-extrabold text-gray-800 leading-6">Coronavirus - Facts,<br/> advice and measures</h1>
<ul class="flex flex-col space-y-4 text-gray-900">
<div class="bg-yellow-100 border-l-4 border-yellow-300 rounded-md w-full px-6 py-4 cursor-pointer">Facts and knowledge about COVID19</div>
<div class="bg-purple-100 border-l-4 border-purple-300 rounded-md w-full px-6 py-4 cursor-pointer">For the public</div>
<div class="bg-red-100 border-l-4 border-red-300 rounded-md w-full px-6 py-4 cursor-pointer">For the government</div>
<ul>
</div>
</div>
<!-- accordion 7 end -->
<!-- accordion 8 start -->
<section class="section_divider">
<div>Accordion 8</div>
</section>
<div class="container mx-auto">
<div class="m-8 rounded overflow-hidden">
<!-- accordion-tab -->
<div class="group outline-none accordion-section" tabindex="1">
<div
class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
>
<div class="group-focus:text-white transition ease duration-500">
Title for Tab - 1
</div>
<div
class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div
class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
>
<p class="p-2 text-gray-400 text-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
repellat amet doloribus consequuntur eos similique provident
tempora voluptates iure quia fuga dicta voluptatibus culpa
mollitia recusandae delectus id suscipit labore?
</p>
</div>
</div>
<!-- accordion-tab -->
<!-- accordion-tab -->
<div class="group outline-none accordion-section" tabindex="2">
<div
class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
>
<div class="group-focus:text-white transition ease duration-500">
Title for Tab - 2
</div>
<div
class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div
class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
>
<p class="p-2 text-gray-400 text-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
repellat amet doloribus consequuntur eos similique provident
tempora voluptates iure quia fuga dicta voluptatibus culpa
mollitia recusandae delectus id suscipit labore?
</p>
</div>
</div>
<!-- accordion-tab -->
<!-- accordion-tab -->
<div class="group outline-none accordion-section" tabindex="3">
<div
class="group bg-gray-900 flex justify-between px-4 py-3 items-center text-gray-500 transition ease duration-500 cursor-pointer pr-10 relative"
>
<div class="group-focus:text-white transition ease duration-500">
Title for Tab - 3
</div>
<div
class="h-8 w-8 border border-gray-700 rounded-full items-center inline-flex justify-center transform transition ease duration-500 group-focus:text-white group-focus:-rotate-180 absolute top-0 right-0 mb-auto ml-auto mt-2 mr-2"
>
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div
class="group-focus:max-h-screen max-h-0 bg-gray-800 px-4 overflow-hidden ease duration-500"
>
<p class="p-2 text-gray-400 text-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
repellat amet doloribus consequuntur eos similique provident
tempora voluptates iure quia fuga dicta voluptatibus culpa
mollitia recusandae delectus id suscipit labore?
</p>
</div>
</div>
<!-- accordion-tab -->
</div>
</div>
<!-- accordion 8 end -->
<!-- accordion 9 start -->
<section class="section_divider">
<div>Accordion 9</div>
</section>
<div x-data="accordion" class="max-w-md border border-gray-300 divide-y divide-gray-300">
<h3 class="text-lg">
<button x-bind="header('general')" class="flex items-center justify-between w-full px-4 py-2 font-medium focus:outline-black focus:border-blue-600">
<span>General</span>
<!-- Active: `transform rotate-180`, Inactive: `transform rotate-0` -->
<svg x-bind="headerIcon('general')" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
</svg>
</button>
</h3>
<div x-bind="section('general')" class="px-4 py-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim quis ante ut pellentesque. Quisque bibendum dapibus laoreet. Aliquam eget consectetur sem. Suspendisse massa lectus, rhoncus sed sollicitudin sed, auctor vel velit.
</div>
<h3 class="text-lg">
<button x-bind="header('settings')" class="flex items-center justify-between w-full px-4 py-2 font-medium focus:outline-black focus:border-blue-600">
<span>Settings</span>
<!-- Active: `transform rotate-180`, Inactive: `transform rotate-0` -->
<svg x-bind="headerIcon('settings')" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
</svg>
</button>
</h3>
<div x-bind="section('settings')" class="px-4 py-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim quis ante ut pellentesque. Quisque bibendum dapibus laoreet. Aliquam eget consectetur sem. Suspendisse massa lectus, rhoncus sed sollicitudin sed, auctor vel velit.
</div>
</div>
<!-- accordion 9 end -->
<!-- accordion 10 start -->
<section class="section_divider">
<div>Accordion 10</div>
</section>
<!-- ====== FAQ Section Start -->
<section
x-data="
{
openFaq1: false,
openFaq2: false,
openFaq3: false,
openFaq4: false,
openFaq5: false,
openFaq6: false
}
"
class="
dark:bg-gray-800
bg-gray-300
pt-20
lg:pt-[120px]
pb-12
lg:pb-[90px]
relative
z-20
overflow-hidden
"
>
<div class="mx-20 ">
<div class="flex flex-wrap -mx-4">
<div class="w-full px-4">
<div class="text-center mx-auto mb-[60px] lg:mb-20 max-w-[520px]">
<span class="font-semibold text-lg text-primary mb-2 block">
FAQ
</span>
<h2
class="
font-bold
text-3xl
sm:text-4xl
md:text-[40px]
text-dark
mb-4
"
>
Any Questions? Look Here
</h2>
<p class="text-base text-body-color">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="flex flex-wrap -mx-4">
<div class="w-full lg:w-1/2 px-4">
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq1 = !openFaq1"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq1" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq2 = !openFaq2"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq2" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq3 = !openFaq3"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq3" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4">
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq4 = !openFaq4"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq4" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq5 = !openFaq5"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq5" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
<div
class="
single-faq
w-full
bg-white
border border-[#F3F4FE]
rounded-lg
p-4
sm:p-8
lg:px-6
xl:px-8
mb-8
"
>
<button
class="faq-btn flex w-full text-left"
@click="openFaq6 = !openFaq6"
>
<div
class="
w-full
max-w-[40px]
h-10
flex
items-center
justify-center
rounded-lg
bg-primary
text-primary
bg-opacity-5
mr-5
"
>
<svg
width="17"
height="10"
viewBox="0 0 17 10"
class="fill-current icon"
>
<path
d="M7.28687 8.43257L7.28679 8.43265L7.29496 8.43985C7.62576 8.73124 8.02464 8.86001 8.41472 8.86001C8.83092 8.86001 9.22376 8.69083 9.53447 8.41713L9.53454 8.41721L9.54184 8.41052L15.7631 2.70784L15.7691 2.70231L15.7749 2.69659C16.0981 2.38028 16.1985 1.80579 15.7981 1.41393C15.4803 1.1028 14.9167 1.00854 14.5249 1.38489L8.41472 7.00806L2.29995 1.38063L2.29151 1.37286L2.28271 1.36548C1.93092 1.07036 1.38469 1.06804 1.03129 1.41393L1.01755 1.42738L1.00488 1.44184C0.69687 1.79355 0.695778 2.34549 1.0545 2.69659L1.05999 2.70196L1.06565 2.70717L7.28687 8.43257Z"
fill="#3056D3"
stroke="#3056D3"
/>
</svg>
</div>
<div class="w-full">
<h4 class="text-lg font-semibold text-black">
How long we deliver your first blog post?
</h4>
</div>
</button>
<div x-show="openFaq6" class="faq-content pl-[62px]">
<p class="text-base text-body-color leading-relaxed py-3">
It takes 2-3 weeks to get your first blog post ready. That
includes the in-depth research & creation of your monthly
content marketing strategy that we do before writing your
first blog post, Ipsum available .
</p>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-0 right-0 z-[-1]">
<svg
width="1440"
height="886"
viewBox="0 0 1440 886"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
opacity="0.5"
d="M193.307 -273.321L1480.87 1014.24L1121.85 1373.26C1121.85 1373.26 731.745 983.231 478.513 729.927C225.976 477.317 -165.714 85.6993 -165.714 85.6993L193.307 -273.321Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="1308.65"
y1="1142.58"
x2="602.827"
y2="-418.681"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3056D3" stop-opacity="0.36" />
<stop offset="1" stop-color="#F5F2FD" stop-opacity="0" />
<stop offset="1" stop-color="#F5F2FD" stop-opacity="0.096144" />
</linearGradient>
</defs>
</svg>
</div>
</section>
<!-- ====== FAQ Section End -->
<!-- accordion 10 end -->
<!-- accordion 11 start -->
<section class="section_divider">
<div>Accordion 11</div>
</section>
<!-- component -->
<!-- This is an example component -->
<div class="max-w-2xl mx-auto bg-white p-16 rounded">
<div id="accordion-collapse" data-accordion="collapse">
<h2 id="accordion-collapse-heading-1">
<button type="button" class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium text-left border border-gray-200 dark:border-gray-700 border-b-0 text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-t-xl" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0 rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-collapse-body-1" aria-labelledby="accordion-collapse-heading-1">
<div class="p-5 border border-gray-200 dark:border-gray-700 dark:bg-gray-900 border-b-0">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive
components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a
href="https://flowbite.com/docs/getting-started/introduction/" target="_blank"
class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing
websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button" class="flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 border-b-0 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden" aria-labelledby="accordion-collapse-heading-2">
<div class="p-5 border border-gray-200 dark:border-gray-700 border-b-0">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the
Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/"
target="_blank" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a>
based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-3">
<button type="button" class="flex items-center border focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 border-gray-200 dark:border-gray-700 justify-between p-5 w-full font-medium text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
<div class="p-5 border border-gray-200 dark:border-gray-700 border-t-0">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from
Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another
difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers
sections of pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite,
Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best
of two worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="list-disc pl-5 dark:text-gray-400 text-gray-500">
<li><a href="https://flowbite.com/pro/" target="_blank"
class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" target="_blank"
class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
<script src="https://unpkg.com/flowbite@1.3.3/dist/flowbite.js"></script>
</div>
<!-- accordion 11 end -->
<!-- start of script section -->
<script type="text/javascript">
let toogler = document.getElementById("dark_mood_toogler");

1265
public/componets/pricing/pricing.html Normal file
View File

File diff suppressed because it is too large Load Diff

304
public/componets/testimonial/11_testimonial.html Normal file
View File

@@ -0,0 +1,304 @@
<!DOCTYPE html>
<html lang="en">
<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://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" defer></script>
<title>Testimonial 11</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- testimonial 11 start -->
<section class="section_divider">
<div>Testimonail 11</div>
</section>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<section class="bg-white">
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
<h2 class="text-4xl font-bold tracking-tight text-center sm:text-5xl">
Read trusted reviews from our customers
</h2>
<div class="mt-12 swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100 rounded-lg">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4">
<div class="flex space-x-0.5 justify-center text-green-500">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
</div>
</div>
<p class="mt-4 text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
voluptatem alias ut provident sapiente repellendus.
</p>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100 rounded-lg">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4">
<div class="flex space-x-0.5 justify-center text-green-500">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
</div>
</div>
<p class="mt-4 text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
voluptatem alias ut provident sapiente repellendus.
</p>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="p-8 bg-gray-100 rounded-lg">
<div class="flex items-center">
<img
src="https://www.hyperui.dev/photos/man-4.jpeg"
alt=""
class="object-cover w-16 h-16 rounded-full"
/>
<div class="ml-4">
<div class="flex space-x-0.5 justify-center text-green-500">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<p class="mt-1 text-lg font-medium text-gray-700">Katie</p>
</div>
</div>
<p class="mt-4 text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
voluptatem alias ut provident sapiente repellendus.
</p>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<script>
const swiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
spaceBetween: 32,
centeredSlides: true,
autoplay: {
delay: 8000,
},
breakpoints: {
640: {
slidesPerView: 1.5,
},
1024: {
slidesPerView: 3,
},
},
})
</script>
<!-- testimonial 11 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');
}
})
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>

128
public/componets/testimonial/17_testimonial.html Normal file
View File

@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">
<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">
<title>Testimonial 1</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- testimonail 17 start -->
<section class="section_divider">
<div>Testimonial 17</div>
</section>
<section class="bg-indigo-100 dark:bg-gray-800 ">
<div class="w-full h-screen">
<div class="flex flex-col lg:grid lg:gap-4 2xl:gap-6 lg:grid-cols-4 2xl:row-span-2 2xl:pb-8 ml-2 pt-4 px-6">
<!-- Beginning of the component about Daniel Clifford -->
<div class="bg-indigo-600 lg:order-1 lg:row-span-1 2xl:row-span-1 lg:col-span-2 rounded-lg shadow-xl mb-5 lg:mb-0">
<div class="mx-6 my-8 2xl:mx-10">
<img class="w-8 md:w-9 lg:w-10 2xl:w-20 h-8 md:h-9 lg:h-10 2xl:h-20 rounded-full border-2 ml-1 lg:ml-3 2xl:ml-0 md:-mt-1 2xl:-mt-4" src="https://images.pexels.com/photos/3775534/pexels-photo-3775534.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-20 2xl:mx-8">Daniel Clifford</h1>
<h2 class="text-white text-opacity-50 text-xs md:text-base 2xl:text-2xl pl-12 lg:pl-16 2xl:pl-20 2xl:my-2 2xl:mx-8">Verified Graduate</h2>
</div>
<div class="-mt-6 relative">
<p class="text-white text-xl 2xl:text-4xl font-bold px-7 lg:px-9 2xl:pt-6 2xl:mx-2">I received a job offer mid-course, and the subjects I learned were current, if not more so, in the company I joined. I honestly feel I got every penny’s worth.</p>
<br />
<p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl px-7 lg:px-9 mb-3 2xl:pb-8 2xl:mx-2">“ I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a transition and have heard some people who had an amazing experience here. I signed up for the free intro course and found it incredibly fun! I enrolled shortly thereafter. The next 12 weeks was the best - and most grueling - time of my life. Since completing the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”</p>
</div>
</div>
<!-- Ending of the component about Daniel Clifford -->
<!-- Beginning of the component about Jonathan Walters -->
<div class="bg-gray-900 lg:order-2 lg:row-span-1 2xl:row-span-1 lg:col-span-1 rounded-lg shadow-xl pb-4 mb-5 lg:mb-0">
<div class="mx-8 2xl:mx-10 my-10">
<img class="w-8 md:w-9 2xl:w-20 h-8 md:h-9 2xl:h-20 rounded-full border-2 -ml-1 -mt-2 lg:-mt-4" src="https://images.pexels.com/photos/634021/pexels-photo-634021.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 2xl:pl-24 -mt-8 md:-mt-10 2xl:-mt-16">Jonathan Walters</h1>
<h2 class="text-white text-xs md:text-base 2xl:text-2xl text-opacity-50 pl-11 md:pl-12 2xl:pl-24">Verified Graduate</h2>
</div>
<div class="-mt-8 mx-1 lg:mx-2">
<p class="text-white text-lg lg:text-xl 2xl:text-4xl font-semibold pt-1 px-6 2xl:px-8 lg:pl-5 lg:pr-8">The team was very supportive and kept me motivated</p>
<br />
<p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl pl-6 lg:pl-5 pr-4 -mt-1 lg:mt-6 2xl:mt-2 2xl:px-8">“ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer for a big company. This was one of the best investments I’ve made in myself. ”</p>
</div>
</div>
<!-- Ending of the component about Jonathan Walters -->
<!-- Beginning of the component about Jeanette Harmon -->
<div class="bg-primary-color-white lg:order-3 lg:row-span-2 2xl:row-span-1 lg:col-span-1 rounded-lg shadow-xl mb-5 lg:mb-0 2xl:mb-8">
<div class="mx-8 my-10 lg:my-8">
<img class="w-8 md:w-9 lg:w-11 2xl:w-20 h-8 md:h-9 lg:h-11 2xl:h-20 rounded-full border-2 -mt-3 -ml-1 lg:-ml-0" src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="primary-color-blackish-blue text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 lg:pl-14 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-16">Jeanette Harmon</h1>
<h2 class="primary-color-blackish-blue-opacity text-xs md:text-base 2xl:text-2xl pl-11 md:pl-12 lg:pl-14 2xl:pl-24">Verified Graduate</h2>
</div>
<div class="-mt-4 ml-5 mr-11">
<p class="primary-color-blackish-blue text-xl 2xl:text-4xl font-bold px-2 lg:px-3 -mt-6 lg:-mt-5 2xl:mt-12 2xl:pb-6">An overall wonderful and rewarding experience</p>
<br />
<p class="primary-color-blackish-blue-opacity font-medium md:text-sm 2xl:text-3xl pl-2 lg:pl-3 lg:pr-4 mb-6 2xl:pt-2 -mt-3">“ Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love. ”</p>
</div>
</div>
<!-- Ending of the component about Jeanette Harmon -->
<!-- Beginning of the component about Patrick Abrams -->
<div class="bg-purple-800 lg:order-4 lg:row-span-2 2xl:row-span-1 col-span-2 rounded-lg shadow-xl mb-5 lg:mb-0 2xl:mb-8 lg:pb-14 2xl:pb-20">
<div class="mx-8 my-8">
<img class="w-8 md:w-9 lg:w-10 2xl:w-20 h-8 md:h-9 lg:h-10 2xl:h-20 rounded-full border-2 lg:-mt-3" src="https://images.pexels.com/photos/3778603/pexels-photo-3778603.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="text-white text-xs md:text-base 2xl:text-2xl pl-12 md:pl-14 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-11 2xl:-mt-16">Patrick Abrams</h1>
<h2 class="text-white text-xs md:text-base 2xl:text-2xl text-opacity-50 pl-12 md:pl-14 2xl:pl-24">Verified Graduate</h2>
</div>
<div class="px-3 -mt-3 mb-5 lg:mb-0">
<p class="text-white text-lg 2xl:text-4xl font-semibold px-4 -mt-3 lg:-mt-6 2xl:mt-8">Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and learning from their experiences was easy.</p>
<br />
<p class="text-white text-opacity-50 font-medium md:text-sm 2xl:text-3xl px-4 mt-1 lg:-mt-3 2xl:mt-6">“ The staff seem genuinely concerned about my progress which I find really refreshing. The program gave me the confidence necessary to be able to go out in the world and present myself as a capable junior developer. The standard is above the rest. You will get the personal attention you need from an incredible community of lgart and amazing people. ”</p>
</div>
</div>
<!-- Ending of the component about Patrick Abrams -->
<!-- Beginning of the component about Kira Whittle -->
<div class="bg-white lg:order-2 lg:row-span-4 lg:col-span-1 rounded-lg shadow-xl mb-5 lg:pb-4 ">
<div class="mx-8 my-8 lg:pl-1">
<img class="w-8 md:w-9 lg:w-12 2xl:w-20 h-8 md:h-9 lg:h-12 2xl:h-20 rounded-full border-2 lg:-mt-4 -ml-1 lg:-ml-4" src="https://images.pexels.com/photos/3762804/pexels-photo-3762804.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
<h1 class="primary-color-blackish-blue text-xs md:text-base 2xl:text-2xl pl-10 md:pl-12 2xl:pl-24 -mt-8 md:-mt-10 lg:-mt-12 2xl:-mt-16">Kira Whittle</h1>
<h2 class="primary-color-blackish-blue-opacity text-xs md:text-base 2xl:text-sm pl-10 md:pl-12 2xl:pl-24">Verified Graduate</h2>
</div>
<div class="px-3 lg:px-5 lg:-mt-4 mb-5 lg:mb-0">
<p class="primary-color-blackish-blue text-xl 2xl:text-4xl font-semibold px-4 lg:px-0 -mt-2 lg:-mt-0">Such a life-changing experience. Highly recommended!</p>
<br />
<p class="primary-color-blackish-blue-opacity font-medium md:text-sm 2xl:text-2xl px-4 lg:px-0 2xl:px-4 lg:pr-3 lg:pb-3 mt-2 lg:-mt-1 2xl:mt-2 2xl:pb-64">“ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from professionals who can help me learn programming step by step. I was encouraged to enroll by a former student of theirs who can only say wonderful things about the program. The entire curriculum and staff did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial could ever have. In fact, I’ve often referred to it during interviews as an example of my developent experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 100% recommend! ”</p>
</div>
</div>
<!-- Ending of the component about Kira Whittle -->
</div>
</div>
</section>
<!-- testimonail 17 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');
}
})
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>

40
public/componets/testimonial/1_testimonial.html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<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">
<title>Testimonial 1</title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- 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');
}
})
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>

1986
public/componets/testimonial/testimonial.html Normal file
View File

File diff suppressed because it is too large Load Diff