added timeline , register ,section , eoor ,contact , blog ,article block component's
This commit is contained in:
merajjahir
3366
dist/tailshape.css
vendored
3366
dist/tailshape.css
vendored
File diff suppressed because it is too large
Load Diff
103
public/componets/article/1_article.html
Normal file
103
public/componets/article/1_article.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Article 1 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- article 1 start -->
|
||||
<section class="section_divider" id="article_1">
|
||||
<div>Article 1</div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<article class="max-w-2xl px-6 py-24 mx-auto space-y-12 ">
|
||||
<div class="w-full mx-auto space-y-4 text-center">
|
||||
<p class="text-xs font-semibold tracking-wider uppercase">#TailwindCSS</p>
|
||||
<h1 class="text-4xl font-bold leading-tight md:text-5xl">Interdum et malesuada fames ac ante ipsum primis in faucibus?</h1>
|
||||
<p class="text-sm dark:text-gray-400">by
|
||||
<a rel="noopener noreferrer" href="#" target="_blank" class="underline dark:text-green-400">
|
||||
<span itemprop="name">Leroy Jenkins</span>
|
||||
</a>on
|
||||
<time datetime="2021-02-12 15:34:18-0200">Feb 12th 2021</time>
|
||||
</p>
|
||||
</div>
|
||||
<div class="dark:text-gray-100">
|
||||
<p>Insert the actual text content here...</p>
|
||||
</div>
|
||||
<div class="pt-12 border-t dark:border-gray-700">
|
||||
<div class="flex flex-col space-y-4 md:space-y-0 md:space-x-6 md:flex-row">
|
||||
<img src="https://source.unsplash.com/75x75/?portrait" alt="" class="self-center flex-shrink-0 w-24 h-24 border rounded-full md:justify-self-start dark:bg-gray-500 dark:border-gray-700">
|
||||
<div class="flex flex-col">
|
||||
<h4 class="text-lg font-semibold">Leroy Jenkins</h4>
|
||||
<p class="dark:text-gray-400">Sed non nibh iaculis, posuere diam vitae, consectetur neque. Integer velit ligula, semper sed nisl in, cursus commodo elit. Pellentesque sit amet mi luctus ligula euismod lobortis ultricies et nibh.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center pt-4 space-x-4 align-center">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="GitHub" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
|
||||
<svg viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Dribble" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
|
||||
<path d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Twitter" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
|
||||
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Email" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
|
||||
<path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- article 1 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>
|
||||
95
public/componets/article/2_article.html
Normal file
95
public/componets/article/2_article.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Article 2 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- article 2 start -->
|
||||
<section class="section_divider" id="article_2">
|
||||
<div>Article 2</div>
|
||||
</section>
|
||||
|
||||
<section class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="max-w-2xl px-6 py-16 mx-auto space-y-12">
|
||||
<article class="space-y-8 dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="space-y-6">
|
||||
<h1 class="text-4xl font-bold md:tracking-tight md:text-5xl">Suspendisse ut magna et ipsum sodales accumsan.</h1>
|
||||
<div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center dark:text-gray-400">
|
||||
<div class="flex items-center md:space-x-2">
|
||||
<img src="https://source.unsplash.com/75x75/?portrait" alt="" class="w-4 h-4 border rounded-full dark:bg-gray-500 dark:border-gray-700">
|
||||
<p class="text-sm">Leroy Jenkins • July 19th, 2021</p>
|
||||
</div>
|
||||
<p class="flex-shrink-0 mt-3 text-sm md:mt-0">4 min read • 1,570 views</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dark:text-gray-100">
|
||||
<p>Insert the actual text content here...</p>
|
||||
</div>
|
||||
</article>
|
||||
<div>
|
||||
<div class="flex flex-wrap py-6 space-x-2 border-t border-dashed dark:border-gray-400">
|
||||
<a rel="noopener noreferrer" href="#" class="px-3 py-1 rounded-sm hover:underline dark:bg-green-400 dark:text-gray-900">#MambaUI</a>
|
||||
<a rel="noopener noreferrer" href="#" class="px-3 py-1 rounded-sm hover:underline dark:bg-green-400 dark:text-gray-900">#TailwindCSS</a>
|
||||
<a rel="noopener noreferrer" href="#" class="px-3 py-1 rounded-sm hover:underline dark:bg-green-400 dark:text-gray-900">#Angular</a>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-lg font-semibold">Related posts</h4>
|
||||
<ul class="ml-4 space-y-1 list-disc">
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="hover:underline">Nunc id magna mollis</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="hover:underline">Duis molestie, neque eget pretium lobortis</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="hover:underline">Mauris nec urna volutpat, aliquam lectus sit amet</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- article 2 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>
|
||||
76
public/componets/article/3_article.html
Normal file
76
public/componets/article/3_article.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Article 3 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- article 3 start -->
|
||||
<section class="section_divider" id="article_3">
|
||||
<div>Article 3</div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800 dark:text-gray-50">
|
||||
|
||||
<article class="max-w-2xl px-6 py-24 mx-auto space-y-16 dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="w-full mx-auto space-y-4">
|
||||
<h1 class="text-5xl font-bold leading-none">Interdum et malesuada fames ac ante ipsum primis in faucibus?</h1>
|
||||
<div class="flex flex-wrap space-x-2 text-sm dark:text-gray-400">
|
||||
<a rel="noopener noreferrer" href="#" class="p-1 hover:underline">#MambaUI</a>
|
||||
<a rel="noopener noreferrer" href="#" class="p-1 hover:underline">#TailwindCSS</a>
|
||||
<a rel="noopener noreferrer" href="#" class="p-1 hover:underline">#Angular</a>
|
||||
</div>
|
||||
<p class="text-sm dark:text-gray-400">by
|
||||
<a href="#" target="_blank" rel="noopener noreferrer" class="hover:underline dark:text-green-400">
|
||||
<span>Leroy Jenkins</span>
|
||||
</a>on
|
||||
<time datetime="2021-02-12 15:34:18-0200">Feb 12th 2021</time>
|
||||
</p>
|
||||
</div>
|
||||
<div class="dark:text-gray-100">
|
||||
<p>Insert the actual text content here...</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<!-- article 3 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
72
public/componets/article/4_article.html
Normal file
72
public/componets/article/4_article.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Article 4 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- article 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Article 4</div>
|
||||
</section>
|
||||
|
||||
<div class="p-5 mx-auto sm:p-10 md:p-16 dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="flex flex-col max-w-3xl mx-auto overflow-hidden rounded">
|
||||
<img src="https://source.unsplash.com/random/480x360" alt="" class="w-full h-60 sm:h-96 dark:bg-gray-500">
|
||||
<div class="p-6 pb-12 m-4 mx-auto -mt-16 space-y-6 lg:max-w-2xl sm:px-10 sm:mx-12 lg:rounded-md dark:bg-gray-900">
|
||||
<div class="space-y-2">
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block text-2xl font-semibold sm:text-3xl">The Best Activewear from the Nordstrom Anniversary Sale</a>
|
||||
<p class="text-xs dark:text-gray-400">By
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs hover:underline">Leroy Jenkins</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="dark:text-gray-100">
|
||||
<p>Insert the actual text content here...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- article 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>
|
||||
48
public/componets/article/5_article.html
Normal file
48
public/componets/article/5_article.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Article </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');
|
||||
|
||||
}
|
||||
})
|
||||
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>
|
||||
202
public/componets/article/article.html
Normal file
202
public/componets/article/article.html
Normal file
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Article </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- article 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Article 1</div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<article class="max-w-2xl px-6 py-24 mx-auto space-y-12 ">
|
||||
<div class="w-full mx-auto space-y-4 text-center">
|
||||
<p class="text-xs font-semibold tracking-wider uppercase">#TailwindCSS</p>
|
||||
<h1 class="text-4xl font-bold leading-tight md:text-5xl">Interdum et malesuada fames ac ante ipsum primis in faucibus?</h1>
|
||||
<p class="text-sm dark:text-gray-400">by
|
||||
<a rel="noopener noreferrer" href="#" target="_blank" class="underline dark:text-green-400">
|
||||
<span itemprop="name">Leroy Jenkins</span>
|
||||
</a>on
|
||||
<time datetime="2021-02-12 15:34:18-0200">Feb 12th 2021</time>
|
||||
</p>
|
||||
</div>
|
||||
<div class="dark:text-gray-100">
|
||||
<p>Insert the actual text content here...</p>
|
||||
</div>
|
||||
<div class="pt-12 border-t dark:border-gray-700">
|
||||
<div class="flex flex-col space-y-4 md:space-y-0 md:space-x-6 md:flex-row">
|
||||
<img src="https://source.unsplash.com/75x75/?portrait" alt="" class="self-center flex-shrink-0 w-24 h-24 border rounded-full md:justify-self-start dark:bg-gray-500 dark:border-gray-700">
|
||||
<div class="flex flex-col">
|
||||
<h4 class="text-lg font-semibold">Leroy Jenkins</h4>
|
||||
<p class="dark:text-gray-400">Sed non nibh iaculis, posuere diam vitae, consectetur neque. Integer velit ligula, semper sed nisl in, cursus commodo elit. Pellentesque sit amet mi luctus ligula euismod lobortis ultricies et nibh.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center pt-4 space-x-4 align-center">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="GitHub" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
|
||||
<svg viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Dribble" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
|
||||
<path d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Twitter" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
|
||||
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Email" class="p-2 rounded-md dark:text-gray-100 hover:dark:text-green-400">
|
||||
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current">
|
||||
<path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- article 1 end -->
|
||||
|
||||
<!-- article 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Article 2</div>
|
||||
</section>
|
||||
|
||||
<section class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="max-w-2xl px-6 py-16 mx-auto space-y-12">
|
||||
<article class="space-y-8 dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="space-y-6">
|
||||
<h1 class="text-4xl font-bold md:tracking-tight md:text-5xl">Suspendisse ut magna et ipsum sodales accumsan.</h1>
|
||||
<div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center dark:text-gray-400">
|
||||
<div class="flex items-center md:space-x-2">
|
||||
<img src="https://source.unsplash.com/75x75/?portrait" alt="" class="w-4 h-4 border rounded-full dark:bg-gray-500 dark:border-gray-700">
|
||||
<p class="text-sm">Leroy Jenkins • July 19th, 2021</p>
|
||||
</div>
|
||||
<p class="flex-shrink-0 mt-3 text-sm md:mt-0">4 min read • 1,570 views</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dark:text-gray-100">
|
||||
<p>Insert the actual text content here...</p>
|
||||
</div>
|
||||
</article>
|
||||
<div>
|
||||
<div class="flex flex-wrap py-6 space-x-2 border-t border-dashed dark:border-gray-400">
|
||||
<a rel="noopener noreferrer" href="#" class="px-3 py-1 rounded-sm hover:underline dark:bg-green-400 dark:text-gray-900">#MambaUI</a>
|
||||
<a rel="noopener noreferrer" href="#" class="px-3 py-1 rounded-sm hover:underline dark:bg-green-400 dark:text-gray-900">#TailwindCSS</a>
|
||||
<a rel="noopener noreferrer" href="#" class="px-3 py-1 rounded-sm hover:underline dark:bg-green-400 dark:text-gray-900">#Angular</a>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h4 class="text-lg font-semibold">Related posts</h4>
|
||||
<ul class="ml-4 space-y-1 list-disc">
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="hover:underline">Nunc id magna mollis</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="hover:underline">Duis molestie, neque eget pretium lobortis</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="hover:underline">Mauris nec urna volutpat, aliquam lectus sit amet</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- article 2 end -->
|
||||
|
||||
<!-- article 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Article 3</div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800 dark:text-gray-50">
|
||||
|
||||
<article class="max-w-2xl px-6 py-24 mx-auto space-y-16 dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="w-full mx-auto space-y-4">
|
||||
<h1 class="text-5xl font-bold leading-none">Interdum et malesuada fames ac ante ipsum primis in faucibus?</h1>
|
||||
<div class="flex flex-wrap space-x-2 text-sm dark:text-gray-400">
|
||||
<a rel="noopener noreferrer" href="#" class="p-1 hover:underline">#MambaUI</a>
|
||||
<a rel="noopener noreferrer" href="#" class="p-1 hover:underline">#TailwindCSS</a>
|
||||
<a rel="noopener noreferrer" href="#" class="p-1 hover:underline">#Angular</a>
|
||||
</div>
|
||||
<p class="text-sm dark:text-gray-400">by
|
||||
<a href="#" target="_blank" rel="noopener noreferrer" class="hover:underline dark:text-green-400">
|
||||
<span>Leroy Jenkins</span>
|
||||
</a>on
|
||||
<time datetime="2021-02-12 15:34:18-0200">Feb 12th 2021</time>
|
||||
</p>
|
||||
</div>
|
||||
<div class="dark:text-gray-100">
|
||||
<p>Insert the actual text content here...</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<!-- article 3 end -->
|
||||
|
||||
<!-- article 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Article 4</div>
|
||||
</section>
|
||||
|
||||
<div class="p-5 mx-auto sm:p-10 md:p-16 dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="flex flex-col max-w-3xl mx-auto overflow-hidden rounded">
|
||||
<img src="https://source.unsplash.com/random/480x360" alt="" class="w-full h-60 sm:h-96 dark:bg-gray-500">
|
||||
<div class="p-6 pb-12 m-4 mx-auto -mt-16 space-y-6 lg:max-w-2xl sm:px-10 sm:mx-12 lg:rounded-md dark:bg-gray-900">
|
||||
<div class="space-y-2">
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block text-2xl font-semibold sm:text-3xl">The Best Activewear from the Nordstrom Anniversary Sale</a>
|
||||
<p class="text-xs dark:text-gray-400">By
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs hover:underline">Leroy Jenkins</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="dark:text-gray-100">
|
||||
<p>Insert the actual text content here...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- article 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>
|
||||
122
public/componets/blog/1_blog.html
Normal file
122
public/componets/blog/1_blog.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Blog 1</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- blog 1 start -->
|
||||
<section class="section_divider" id="blog_1">
|
||||
<div>Blog 1</div>
|
||||
</section>
|
||||
|
||||
<section class="py-6 sm:py-12 dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container p-6 mx-auto space-y-8">
|
||||
<div class="space-y-2 text-center">
|
||||
<h2 class="text-3xl font-bold">Partem reprimique an pro</h2>
|
||||
<p class="font-serif text-sm dark:text-gray-400">Qualisque erroribus usu at, duo te agam soluta mucius.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-x-4 gap-y-8 md:grid-cols-2 lg:grid-cols-4">
|
||||
<article class="flex flex-col dark:bg-gray-900">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
|
||||
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?1">
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
|
||||
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
|
||||
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
|
||||
<span>June 1, 2020</span>
|
||||
<span>2.1K views</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="flex flex-col dark:bg-gray-900">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
|
||||
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?2">
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
|
||||
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
|
||||
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
|
||||
<span>June 2, 2020</span>
|
||||
<span>2.2K views</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="flex flex-col dark:bg-gray-900">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
|
||||
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?3">
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
|
||||
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
|
||||
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
|
||||
<span>June 3, 2020</span>
|
||||
<span>2.3K views</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="flex flex-col dark:bg-gray-900">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
|
||||
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?4">
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
|
||||
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
|
||||
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
|
||||
<span>June 4, 2020</span>
|
||||
<span>2.4K views</span>
|
||||
</div>
|
||||
</div>
|
||||
</article><!---->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- blog 1 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/blog/2_blog.html
Normal file
121
public/componets/blog/2_blog.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Blog 2</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- blog 2 start -->
|
||||
<section class="section_divider" id="blog_2">
|
||||
<div>Blog 2</div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12">
|
||||
<a rel="noopener noreferrer" href="#" class="block max-w-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 dark:bg-gray-900">
|
||||
<img src="https://source.unsplash.com/random/480x360" alt="" class="object-cover w-full h-64 rounded sm:h-96 lg:col-span-7 dark:bg-gray-500">
|
||||
<div class="p-6 space-y-2 lg:col-span-5">
|
||||
<h3 class="text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline">Noster tincidunt reprimique ad pro</h3>
|
||||
<span class="text-xs dark:text-gray-400">February 19, 2021</span>
|
||||
<p>Ei delenit sensibus liberavisse pri. Quod suscipit no nam. Est in graece fuisset, eos affert putent doctus id.</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?1">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 21, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?2">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 22, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?3">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 23, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?4">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 24, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?5">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 25, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?6">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 26, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a><!---->
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button type="button" class="px-6 py-3 text-sm rounded-md hover:underline dark:bg-gray-900 dark:text-gray-400">Load more posts...</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- blog 2 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>
|
||||
77
public/componets/blog/3_blog.html
Normal file
77
public/componets/blog/3_blog.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Blog 3 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- blog 3 start -->
|
||||
<section class="section_divider" id="blog_3">
|
||||
<div>Blog 3</div>
|
||||
</section>
|
||||
<section class="w-full mx-auto flex justify-center">
|
||||
|
||||
<div class="relative flex flex-col max-w-xl p-5 divide-y xl:flex-row xl:divide-y-0 xl:divide-x dark:bg-gray-900 dark:text-gray-100 divide-gray-700">
|
||||
<div class="p-3 space-y-1 xl:ml-6">
|
||||
<h3 class="text-3xl font-semibold">Lorem ipsum dolor sit amet</h3>
|
||||
<p class="text-sm dark:text-gray-400">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam possimus repellat incidunt odit eligendi mollitia quaerat autem nobis fugiat natus?</p>
|
||||
</div>
|
||||
<div class="flex items-center p-3 w-full space-x-3">
|
||||
<img alt="" src="https://source.unsplash.com/100x100/?portrait" class="object-cover w-12 h-12 rounded-full shadow dark:bg-gray-500">
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm">April 03, 2021</span>
|
||||
<div class="flex flex-wrap space-y-2">
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block px-2 py-1 text-sm font-semibold rounded-md dark:bg-green-400 dark:text-gray-900">javascript</a>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block px-2 py-1 text-sm font-semibold rounded-md dark:bg-green-400 dark:text-gray-900">serverless</a>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block px-2 py-1 text-sm font-semibold rounded-md dark:bg-green-400 dark:text-gray-900">aws</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- blog 3 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
77
public/componets/blog/4_blog.html
Normal file
77
public/componets/blog/4_blog.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Blog 4 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- blog 4 start -->
|
||||
<section class="section_divider" id="blog_4">
|
||||
<div>Blog 4</div>
|
||||
</section>
|
||||
<div class="dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container max-w-4xl px-10 py-6 mx-auto rounded-lg shadow-sm dark:bg-gray-900">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm dark:text-gray-400">Jun 1, 2020</span>
|
||||
<a rel="noopener noreferrer" href="#" class="px-2 py-1 font-bold rounded dark:bg-green-400 dark:text-gray-900">Javascript</a>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a rel="noopener noreferrer" href="#" class="text-2xl font-bold hover:underline">Nos creasse pendere crescit angelos etc</a>
|
||||
<p class="mt-2">Tamquam ita veritas res equidem. Ea in ad expertus paulatim poterunt. Imo volo aspi novi tur. Ferre hic neque vulgo hae athei spero. Tantumdem naturales excaecant notaverim etc cau perfacile occurrere. Loco visa to du huic at in dixi aër.</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<a rel="noopener noreferrer" href="#" class="hover:underline dark:text-green-400">Read more</a>
|
||||
<div>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center">
|
||||
<img src="https://source.unsplash.com/50x50/?portrait" alt="avatar" class="object-cover w-10 h-10 mx-4 rounded-full dark:bg-gray-500">
|
||||
<span class="hover:underline dark:text-gray-400">Leroy Jenkins</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- blog 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>
|
||||
69
public/componets/blog/5_blog.html
Normal file
69
public/componets/blog/5_blog.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Blog 5 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- blog 5 start -->
|
||||
<section class="section_divider" id="blog_5">
|
||||
<div>Blog 5</div>
|
||||
</section>
|
||||
|
||||
<div class=" mx-auto max-w-md p-6 overflow-hidden rounded-lg shadow dark:bg-gray-900 dark:text-gray-100">
|
||||
<article>
|
||||
<h2 class="text-xl font-bold">Sed diam massa, semper a condimentum</h2>
|
||||
<p class="mt-4 dark:text-gray-400">Morbi porttitor mi in diam scelerisque commodo. Proin sed laoreet libero. Fusce faucibus porttitor lacus, at blandit mauris blandit eget. Donec facilisis lorem et risus commodo, quis auctor nulla varius. Pellentesque facilisis feugiat turpis, id molestie augue semper quis. Nunc ornare eget est sit amet elementum.</p>
|
||||
<div class="flex items-center mt-8 space-x-4">
|
||||
<img src="https://source.unsplash.com/100x100/?portrait" alt="" class="w-10 h-10 rounded-full dark:bg-gray-500">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium">Leroy Jenkins</h3>
|
||||
<time datetime="2021-02-18" class="text-sm dark:text-gray-400">Feb 18th 2021</time>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<!-- blog 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>
|
||||
82
public/componets/blog/6_blog.html
Normal file
82
public/componets/blog/6_blog.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Blog 6 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- blog 6 start -->
|
||||
<section class="section_divider" id="blog_6">
|
||||
<div>Blog 6</div>
|
||||
</section>
|
||||
<div class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="container grid grid-cols-12 mx-auto dark:bg-gray-900">
|
||||
<div class="bg-no-repeat bg-cover dark:bg-gray-700 col-span-full lg:col-span-4" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;"></div>
|
||||
<div class="flex flex-col p-6 col-span-full row-span-full lg:col-span-8 lg:p-10">
|
||||
<div class="flex justify-start">
|
||||
<span class="px-2 py-1 text-xs rounded-full dark:bg-green-400 dark:text-gray-900">Label</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-semibold">Lorem ipsum dolor sit.</h1>
|
||||
<p class="flex-1 pt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, reprehenderit adipisci tempore voluptas laborum quod.</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center pt-2 pb-6 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="flex items-center justify-between pt-2">
|
||||
<div class="flex space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 dark:text-gray-400">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="self-center text-sm">by Leroy Jenkins</span>
|
||||
</div>
|
||||
<span class="text-xs">3 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- blog 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>
|
||||
104
public/componets/blog/7_blog.html
Normal file
104
public/componets/blog/7_blog.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Blog 7 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- blog 7 start -->
|
||||
<section class="section_divider" id="blog_7">
|
||||
<div>Blog 7</div>
|
||||
</section>
|
||||
<div class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="container grid grid-cols-12 mx-auto">
|
||||
<div class="flex flex-col justify-center col-span-12 align-middle bg-no-repeat bg-cover dark:bg-gray-700 lg:col-span-6 lg:h-auto" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;">
|
||||
<div class="flex flex-col items-center p-8 py-12 text-center">
|
||||
<span>12 June</span>
|
||||
<h1 class="py-4 text-5xl font-bold">Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
|
||||
<p class="pb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7">
|
||||
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col col-span-12 p-6 divide-y lg:col-span-6 lg:p-10 divide-gray-700">
|
||||
<div class="pt-6 pb-4 space-y-2">
|
||||
<span>12 June</span>
|
||||
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pt-6 pb-4 space-y-2">
|
||||
<span>12 June</span>
|
||||
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pt-6 pb-4 space-y-2">
|
||||
<span>12 June</span>
|
||||
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- blog 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>
|
||||
48
public/componets/blog/8_blog.html
Normal file
48
public/componets/blog/8_blog.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Blog </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');
|
||||
|
||||
}
|
||||
})
|
||||
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>
|
||||
372
public/componets/blog/blog.html
Normal file
372
public/componets/blog/blog.html
Normal file
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Blog </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- blog 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Blog 1</div>
|
||||
</section>
|
||||
|
||||
<section class="py-6 sm:py-12 dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container p-6 mx-auto space-y-8">
|
||||
<div class="space-y-2 text-center">
|
||||
<h2 class="text-3xl font-bold">Partem reprimique an pro</h2>
|
||||
<p class="font-serif text-sm dark:text-gray-400">Qualisque erroribus usu at, duo te agam soluta mucius.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-x-4 gap-y-8 md:grid-cols-2 lg:grid-cols-4">
|
||||
<article class="flex flex-col dark:bg-gray-900">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
|
||||
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?1">
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
|
||||
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
|
||||
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
|
||||
<span>June 1, 2020</span>
|
||||
<span>2.1K views</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="flex flex-col dark:bg-gray-900">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
|
||||
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?2">
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
|
||||
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
|
||||
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
|
||||
<span>June 2, 2020</span>
|
||||
<span>2.2K views</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="flex flex-col dark:bg-gray-900">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
|
||||
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?3">
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
|
||||
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
|
||||
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
|
||||
<span>June 3, 2020</span>
|
||||
<span>2.3K views</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="flex flex-col dark:bg-gray-900">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum">
|
||||
<img alt="" class="object-cover w-full h-52 dark:bg-gray-500" src="https://source.unsplash.com/200x200/?fashion?4">
|
||||
</a>
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
<a rel="noopener noreferrer" href="#" aria-label="Te nulla oportere reprimique his dolorum"></a>
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs tracking-wider uppercase hover:underline dark:text-green-400">Convenire</a>
|
||||
<h3 class="flex-1 py-2 text-lg font-semibold leading-snug">Te nulla oportere reprimique his dolorum</h3>
|
||||
<div class="flex flex-wrap justify-between pt-3 space-x-2 text-xs dark:text-gray-400">
|
||||
<span>June 4, 2020</span>
|
||||
<span>2.4K views</span>
|
||||
</div>
|
||||
</div>
|
||||
</article><!---->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- blog 1 end -->
|
||||
|
||||
<!-- blog 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Blog 2</div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12">
|
||||
<a rel="noopener noreferrer" href="#" class="block max-w-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 dark:bg-gray-900">
|
||||
<img src="https://source.unsplash.com/random/480x360" alt="" class="object-cover w-full h-64 rounded sm:h-96 lg:col-span-7 dark:bg-gray-500">
|
||||
<div class="p-6 space-y-2 lg:col-span-5">
|
||||
<h3 class="text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline">Noster tincidunt reprimique ad pro</h3>
|
||||
<span class="text-xs dark:text-gray-400">February 19, 2021</span>
|
||||
<p>Ei delenit sensibus liberavisse pri. Quod suscipit no nam. Est in graece fuisset, eos affert putent doctus id.</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?1">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 21, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?2">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 22, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?3">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 23, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?4">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 24, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?5">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 25, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a>
|
||||
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
|
||||
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?6">
|
||||
<div class="p-6 space-y-2">
|
||||
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
||||
<span class="text-xs dark:text-gray-400">January 26, 2021</span>
|
||||
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
||||
</div>
|
||||
</a><!---->
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<button type="button" class="px-6 py-3 text-sm rounded-md hover:underline dark:bg-gray-900 dark:text-gray-400">Load more posts...</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- blog 2 end -->
|
||||
|
||||
|
||||
<!-- blog 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Blog 3</div>
|
||||
</section>
|
||||
<section class="w-full mx-auto flex justify-center">
|
||||
|
||||
<div class="relative flex flex-col max-w-xl p-5 divide-y xl:flex-row xl:divide-y-0 xl:divide-x dark:bg-gray-900 dark:text-gray-100 divide-gray-700">
|
||||
<div class="p-3 space-y-1 xl:ml-6">
|
||||
<h3 class="text-3xl font-semibold">Lorem ipsum dolor sit amet</h3>
|
||||
<p class="text-sm dark:text-gray-400">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam possimus repellat incidunt odit eligendi mollitia quaerat autem nobis fugiat natus?</p>
|
||||
</div>
|
||||
<div class="flex items-center p-3 w-full space-x-3">
|
||||
<img alt="" src="https://source.unsplash.com/100x100/?portrait" class="object-cover w-12 h-12 rounded-full shadow dark:bg-gray-500">
|
||||
<div class="space-y-1">
|
||||
<span class="text-sm">April 03, 2021</span>
|
||||
<div class="flex flex-wrap space-y-2">
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block px-2 py-1 text-sm font-semibold rounded-md dark:bg-green-400 dark:text-gray-900">javascript</a>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block px-2 py-1 text-sm font-semibold rounded-md dark:bg-green-400 dark:text-gray-900">serverless</a>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-block px-2 py-1 text-sm font-semibold rounded-md dark:bg-green-400 dark:text-gray-900">aws</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- blog 3 end -->
|
||||
|
||||
|
||||
<!-- blog 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Blog 4</div>
|
||||
</section>
|
||||
<div class="dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="container max-w-4xl px-10 py-6 mx-auto rounded-lg shadow-sm dark:bg-gray-900">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm dark:text-gray-400">Jun 1, 2020</span>
|
||||
<a rel="noopener noreferrer" href="#" class="px-2 py-1 font-bold rounded dark:bg-green-400 dark:text-gray-900">Javascript</a>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a rel="noopener noreferrer" href="#" class="text-2xl font-bold hover:underline">Nos creasse pendere crescit angelos etc</a>
|
||||
<p class="mt-2">Tamquam ita veritas res equidem. Ea in ad expertus paulatim poterunt. Imo volo aspi novi tur. Ferre hic neque vulgo hae athei spero. Tantumdem naturales excaecant notaverim etc cau perfacile occurrere. Loco visa to du huic at in dixi aër.</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mt-4">
|
||||
<a rel="noopener noreferrer" href="#" class="hover:underline dark:text-green-400">Read more</a>
|
||||
<div>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center">
|
||||
<img src="https://source.unsplash.com/50x50/?portrait" alt="avatar" class="object-cover w-10 h-10 mx-4 rounded-full dark:bg-gray-500">
|
||||
<span class="hover:underline dark:text-gray-400">Leroy Jenkins</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- blog 4 end -->
|
||||
|
||||
<!-- blog 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Blog 5</div>
|
||||
</section>
|
||||
|
||||
<div class=" mx-auto max-w-md p-6 overflow-hidden rounded-lg shadow dark:bg-gray-900 dark:text-gray-100">
|
||||
<article>
|
||||
<h2 class="text-xl font-bold">Sed diam massa, semper a condimentum</h2>
|
||||
<p class="mt-4 dark:text-gray-400">Morbi porttitor mi in diam scelerisque commodo. Proin sed laoreet libero. Fusce faucibus porttitor lacus, at blandit mauris blandit eget. Donec facilisis lorem et risus commodo, quis auctor nulla varius. Pellentesque facilisis feugiat turpis, id molestie augue semper quis. Nunc ornare eget est sit amet elementum.</p>
|
||||
<div class="flex items-center mt-8 space-x-4">
|
||||
<img src="https://source.unsplash.com/100x100/?portrait" alt="" class="w-10 h-10 rounded-full dark:bg-gray-500">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium">Leroy Jenkins</h3>
|
||||
<time datetime="2021-02-18" class="text-sm dark:text-gray-400">Feb 18th 2021</time>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<!-- blog 5 end -->
|
||||
|
||||
|
||||
<!-- blog 6 start -->
|
||||
<section class="section_divider">
|
||||
<div>Blog 6</div>
|
||||
</section>
|
||||
<div class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="container grid grid-cols-12 mx-auto dark:bg-gray-900">
|
||||
<div class="bg-no-repeat bg-cover dark:bg-gray-700 col-span-full lg:col-span-4" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;"></div>
|
||||
<div class="flex flex-col p-6 col-span-full row-span-full lg:col-span-8 lg:p-10">
|
||||
<div class="flex justify-start">
|
||||
<span class="px-2 py-1 text-xs rounded-full dark:bg-green-400 dark:text-gray-900">Label</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-semibold">Lorem ipsum dolor sit.</h1>
|
||||
<p class="flex-1 pt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, reprehenderit adipisci tempore voluptas laborum quod.</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center pt-2 pb-6 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<div class="flex items-center justify-between pt-2">
|
||||
<div class="flex space-x-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 dark:text-gray-400">
|
||||
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="self-center text-sm">by Leroy Jenkins</span>
|
||||
</div>
|
||||
<span class="text-xs">3 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- blog 6 end -->
|
||||
|
||||
<!-- blog 7 start -->
|
||||
<section class="section_divider">
|
||||
<div>Blog 7</div>
|
||||
</section>
|
||||
<div class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="container grid grid-cols-12 mx-auto">
|
||||
<div class="flex flex-col justify-center col-span-12 align-middle bg-no-repeat bg-cover dark:bg-gray-700 lg:col-span-6 lg:h-auto" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;">
|
||||
<div class="flex flex-col items-center p-8 py-12 text-center">
|
||||
<span>12 June</span>
|
||||
<h1 class="py-4 text-5xl font-bold">Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
|
||||
<p class="pb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7">
|
||||
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col col-span-12 p-6 divide-y lg:col-span-6 lg:p-10 divide-gray-700">
|
||||
<div class="pt-6 pb-4 space-y-2">
|
||||
<span>12 June</span>
|
||||
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pt-6 pb-4 space-y-2">
|
||||
<span>12 June</span>
|
||||
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pt-6 pb-4 space-y-2">
|
||||
<span>12 June</span>
|
||||
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||
<span>Read more</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- blog 7 end -->
|
||||
|
||||
|
||||
<!-- blog 8 start -->
|
||||
<section class="section_divider">
|
||||
<div>Blog 8</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- blog 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>
|
||||
99
public/componets/contact/1_contact.html
Normal file
99
public/componets/contact/1_contact.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Contact 1 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- contact 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Contact 1 </div>
|
||||
</section>
|
||||
<section class="py-6 dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="grid max-w-6xl grid-cols-1 px-6 mx-auto lg:px-8 md:grid-cols-2 md:divide-x">
|
||||
<div class="py-6 md:py-0 md:px-6">
|
||||
<h1 class="text-4xl font-bold">Get in touch</h1>
|
||||
<p class="pt-2 pb-4">Fill in the form to start a conversation</p>
|
||||
<div class="space-y-4">
|
||||
<p class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
|
||||
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Fake address, 9999 City</span>
|
||||
</p>
|
||||
<p class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
|
||||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
|
||||
</svg>
|
||||
<span>123456789</span>
|
||||
</p>
|
||||
<p class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||
</svg>
|
||||
<span>contact@business.com</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form novalidate="" class="flex flex-col py-6 space-y-6 md:py-0 md:px-6 ng-untouched ng-pristine ng-valid">
|
||||
<label class="block">
|
||||
<span class="mb-1">Full name</span>
|
||||
<input type="text" placeholder="Leroy Jenkins" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="mb-1">Email address</span>
|
||||
<input type="email" placeholder="leroy@jenkins.com" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="mb-1">Message</span>
|
||||
<textarea rows="3" class="block w-full rounded-md focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800"></textarea>
|
||||
</label>
|
||||
<button type="button" class="self-center px-8 py-3 text-lg rounded focus:ring hover:ring focus:ring-opacity-75 dark:bg-green-400 dark:text-gray-900 focus:ring-green-400 hover:ring-green-400">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- contact 1 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>
|
||||
79
public/componets/contact/2_contact.html
Normal file
79
public/componets/contact/2_contact.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Contact 2 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- contact 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Contact 2</div>
|
||||
</section>
|
||||
<div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto rounded-lg md:grid-cols-2 md:px-12 lg:px-16 xl:px-32 dark:bg-gray-800 dark:text-gray-100">
|
||||
<div class="flex flex-col justify-between">
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
|
||||
<div class="dark:text-gray-400">Vivamus in nisl metus? Phasellus.</div>
|
||||
</div>
|
||||
<img src="assets/svg/doodle.svg" alt="" class="p-6 h-52 md:h-64">
|
||||
</div>
|
||||
<form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
|
||||
<div>
|
||||
<label for="name" class="text-sm">Full name</label>
|
||||
<input id="name" type="text" placeholder="" class="w-full p-3 rounded dark:bg-gray-800">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="text-sm">Email</label>
|
||||
<input id="email" type="email" class="w-full p-3 rounded dark:bg-gray-800">
|
||||
</div>
|
||||
<div>
|
||||
<label for="message" class="text-sm">Message</label>
|
||||
<textarea id="message" rows="3" class="w-full p-3 rounded dark:bg-gray-800"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-green-400 dark:text-gray-900">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- contact 2 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>
|
||||
74
public/componets/contact/3_contact.html
Normal file
74
public/componets/contact/3_contact.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Contact 3 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
<!-- contact 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Contact 3</div>
|
||||
</section>
|
||||
<section class="p-6 dark:text-gray-100">
|
||||
<form novalidate="" class="container w-full max-w-xl p-8 mx-auto space-y-6 rounded-md shadow dark:bg-gray-900 ng-untouched ng-pristine ng-valid">
|
||||
<h2 class="w-full text-3xl font-bold leading-tight">Contact us</h2>
|
||||
<div>
|
||||
<label for="name" class="block mb-1 ml-1">Name</label>
|
||||
<input id="name" type="text" placeholder="Your name" required="" class="block w-full p-2 rounded focus:outline-none focus:ring focus:ring-opacity-25 focus:ring-green-400 dark:bg-gray-800">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email" class="block mb-1 ml-1">Email</label>
|
||||
<input id="email" type="email" placeholder="Your email" required="" class="block w-full p-2 rounded focus:outline-none focus:ring focus:ring-opacity-25 focus:ring-green-400 dark:bg-gray-800">
|
||||
</div>
|
||||
<div>
|
||||
<label for="message" class="block mb-1 ml-1">Message</label>
|
||||
<textarea id="message" type="text" placeholder="Message..." class="block w-full p-2 rounded autoexpand focus:outline-none focus:ring focus:ring-opacity-25 focus:ring-green-400 dark:bg-gray-800"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="w-full px-4 py-2 font-bold rounded shadow focus:outline-none focus:ring hover:ring focus:ring-opacity-50 dark:bg-green-400 focus:ring-green-400 hover:ring-green-400 dark:text-gray-900">Send</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- contact 3 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
76
public/componets/contact/4_contact.html
Normal file
76
public/componets/contact/4_contact.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Contact 4 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- conatct 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Contact 4</div>
|
||||
</section>
|
||||
<section class="text-gray-600 body-font relative ">
|
||||
<div class="absolute inset-0 bg-gray-300">
|
||||
<iframe style="filter: grayscale(1) contrast(1.2) opacity(0.4);" marginheight="0" marginwidth="0" title="map" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101408.032631041!2d-122.15130744474018!3d37.41345079210977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb7495bec0189%3A0x7c17d44a466baf9b!2z4Kau4Ka-4KaJ4Kao4KeN4Kaf4KeH4KaH4KaoIOCmreCmv-CmiSwg4KaV4KeN4Kav4Ka-4Kay4Ka_4Kar4KeL4Kaw4KeN4Kao4Ka_4Kav4Ka84Ka-LCDgpq7gpr7gprDgp43gppXgpr_gpqgg4Kav4KeB4KaV4KeN4Kak4Kaw4Ka-4Ka34KeN4Kaf4KeN4Kaw!5e0!3m2!1sbn!2sbd!4v1646216286435!5m2!1sbn!2sbd" width="100%" height="100%" frameborder="0"></iframe>
|
||||
</div>
|
||||
<div class="container px-5 py-24 mx-auto flex ">
|
||||
<div class="lg:w-1/3 md:w-1/2 bg-white dark:bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
|
||||
<h2 class="text-gray-900 dark:text-emerald-300 text-lg mb-1 font-medium title-font">Feedback</h2>
|
||||
<p class="leading-relaxed mb-5 text-gray-600 dark:text-cyan-100">Post-ironic portland shabby chic echo park, banjo fashion axe</p>
|
||||
<div class="relative mb-4">
|
||||
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Email</label>
|
||||
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
||||
</div>
|
||||
<div class="relative mb-4">
|
||||
<label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Message</label>
|
||||
<textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
|
||||
</div>
|
||||
<button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 dark:bg-cyan-100 dark:hover:bg-emerald-100 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
|
||||
<p class="text-xs text-gray-500 dark:text-cyan-100 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral artisan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- conatct 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>
|
||||
91
public/componets/contact/5_contact.html
Normal file
91
public/componets/contact/5_contact.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Contact 5 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- contact 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Contact 5</div>
|
||||
</section>
|
||||
<section class="text-gray-600 body-font relative">
|
||||
<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
|
||||
<div class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
|
||||
<iframe class="absolute inset-0" style="filter: grayscale(1) contrast(1.2) opacity(0.4);" title="map" marginheight="0" marginwidth="0" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101408.032631041!2d-122.15130744474018!3d37.41345079210977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb7495bec0189%3A0x7c17d44a466baf9b!2z4Kau4Ka-4KaJ4Kao4KeN4Kaf4KeH4KaH4KaoIOCmreCmv-CmiSwg4KaV4KeN4Kav4Ka-4Kay4Ka_4Kar4KeL4Kaw4KeN4Kao4Ka_4Kav4Ka84Ka-LCDgpq7gpr7gprDgp43gppXgpr_gpqgg4Kav4KeB4KaV4KeN4Kak4Kaw4Ka-4Ka34KeN4Kaf4KeN4Kaw!5e0!3m2!1sbn!2sbd!4v1646216286435!5m2!1sbn!2sbd" width="100%" height="100%" frameborder="0"></iframe>
|
||||
<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
|
||||
<div class="lg:w-1/2 px-6">
|
||||
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2>
|
||||
<p class="mt-1">Photo booth tattooed prism, portland taiyaki hoodie neutra typewriter</p>
|
||||
</div>
|
||||
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
|
||||
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
|
||||
<a class="text-indigo-500 leading-relaxed">example@email.com</a>
|
||||
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
|
||||
<p class="leading-relaxed">123-456-7890</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
|
||||
<div class=" bg-white dark:bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
|
||||
<h2 class="text-gray-900 dark:text-emerald-300 text-lg mb-1 font-medium title-font">Feedback</h2>
|
||||
<p class="leading-relaxed mb-5 text-gray-600 dark:text-cyan-100">Post-ironic portland shabby chic echo park, banjo fashion axe</p>
|
||||
<div class="relative mb-4">
|
||||
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Email</label>
|
||||
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
||||
</div>
|
||||
<div class="relative mb-4">
|
||||
<label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Message</label>
|
||||
<textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
|
||||
</div>
|
||||
<button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 dark:bg-cyan-100 dark:hover:bg-emerald-100 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
|
||||
<p class="text-xs text-gray-500 dark:text-cyan-100 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral artisan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- contact 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>
|
||||
118
public/componets/contact/6_contact.html
Normal file
118
public/componets/contact/6_contact.html
Normal file
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Contact 6 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- contact 6 start -->
|
||||
<section class="section_divider">
|
||||
<div>Contact 6</div>
|
||||
</section>
|
||||
<section class="text-gray-600 body-font relative dark:bg-gray-800">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-col text-center w-full mb-12">
|
||||
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900 dark:text-emerald-300">Contact Us</h1>
|
||||
<p class="lg:w-2/3 mx-auto leading-relaxed text-base dark:text-emerald-100">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify.</p>
|
||||
</div>
|
||||
<div class="lg:w-1/2 md:w-2/3 mx-auto">
|
||||
<div class="flex flex-wrap -m-2">
|
||||
<div class="p-2 w-1/2">
|
||||
<div class="relative">
|
||||
<label for="name" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Name</label>
|
||||
<input type="text" id="name" name="name" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 w-1/2">
|
||||
<div class="relative">
|
||||
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Email</label>
|
||||
<input type="email" id="email" name="email" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 w-full">
|
||||
<div class="relative">
|
||||
<label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Message</label>
|
||||
<textarea id="message" name="message" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 w-full">
|
||||
<button class="flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 dark:bg-emerald-400 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
|
||||
</div>
|
||||
<div class="p-2 w-full pt-8 mt-8 border-t border-gray-200 dark:border-cyan-100 text-center">
|
||||
<a class="text-indigo-500 dark:text-emerald-300">example@email.com</a>
|
||||
<p class="leading-normal my-5 dark:text-cyan-100">49 Smith St.
|
||||
<br>Saint Cloud, MN 56301
|
||||
</p>
|
||||
<span class="inline-flex">
|
||||
<a class="text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- contact 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>
|
||||
85
public/componets/contact/7_contact.html
Normal file
85
public/componets/contact/7_contact.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Contact 7 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- contact 7 start -->
|
||||
<section class="section_divider" id="contact_7">
|
||||
<div>Contact 7</div>
|
||||
</section>
|
||||
<!-- component -->
|
||||
<section class="w-full text-gray-900 py-36 bg-center bg-cover bg-no-repeat bg-[url('https://images.unsplash.com/photo-1623479322729-28b25c16b011?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=1280')]" >
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-4 flex items-center justify-center">
|
||||
<div class="lg:w-3/6 lg:pr-0 pr-0">
|
||||
<h1 class="font-medium text-5xl text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
|
||||
<p class="leading-relaxed mt-4 text-white">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="lg:w-3/6 xl:w-2/5 md:w-full bg-gray-50 dark:bg-gray-800 p-8 flex flex-col lg:ml-auto w-full mt-10 lg:mt-0 rounded-md">
|
||||
<div class="relative mb-4">
|
||||
<label for="full-name" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Name</label>
|
||||
<input type="text" id="name" name="name" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
|
||||
</div>
|
||||
<div class="relative mb-4">
|
||||
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Email</label>
|
||||
<input type="email" id="email" name="email" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
|
||||
</div>
|
||||
<div class="relative mb-4">
|
||||
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Phone</label>
|
||||
<input type="email" id="phone" name="phone" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
|
||||
</div>
|
||||
<div class="relative mb-4">
|
||||
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Message</label>
|
||||
<textarea id="message" name="message" rows="4" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out"> </textarea>
|
||||
</div>
|
||||
<button class="text-white bg-indigo-500 rounded-md border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 dark:bg-emerald-300 dark:text-gray-800 dark:font-bold text-lg">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- contact 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>
|
||||
1100
public/componets/contact/8_contact.html
Normal file
1100
public/componets/contact/8_contact.html
Normal file
File diff suppressed because it is too large
Load Diff
111
public/componets/contact/9_contact.html
Normal file
111
public/componets/contact/9_contact.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Contact 9 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- contact 9 start -->
|
||||
<section class="section_divider" id="contact_9">
|
||||
<div>Contact 9</div>
|
||||
</section>
|
||||
<div class="relative px-4 w-full bg-gray-50 dark:bg-gray-800">
|
||||
<div class="mx-auto max-w-5xl py-10">
|
||||
|
||||
<div>
|
||||
<span class="absolute top-0 left-0 hidden md:block opacity-10">
|
||||
<svg width="250" height="600" fill="none" viewBox="0 0 250 600" aria-hidden="true">
|
||||
<pattern id="pattern-rectangles" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="10" height="10" class="text-green-500" fill="currentColor" />
|
||||
</pattern>
|
||||
<rect width="250" height="600" fill="url(#pattern-rectangles)" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="absolute bottom-0 right-0 opacity-20">
|
||||
<svg width="300" height="300" fill="none" viewBox="0 0 300 300" aria-hidden="true">
|
||||
<pattern id="pattern-circles" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
|
||||
<circle id="pattern-circle" cx="10" cy="10" r="5" class="fill-current text-green-500" />
|
||||
</pattern>
|
||||
<rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="relative space-y-5">
|
||||
|
||||
<h2 class="text-center text-5xl text-green-500 font-light">Contact Us</h2>
|
||||
|
||||
<p class="mx-auto py-5 max-w-3xl text-center text-base text-gray-600 dark:text-gray-300">Atque sint nemo vero sequi veniam, numquam fugiat aperiam doloremque, itaque officia exercitationem! Excepturi deleniti accusantium minus quibusdam dolores doloremque natus fugit!</p>
|
||||
|
||||
<div class="flex flex-wrap justify-between items-center text-base">
|
||||
<div class="m-2.5 inline-flex items-center">
|
||||
<span class="text-gray-600 dark:text-emerald-400 font-semibold">18 avenue des Champs-Élysées, 75008 Paris</span>
|
||||
</div>
|
||||
<div class="m-2.5 inline-flex items-center">
|
||||
<span class="text-gray-600 dark:text-emerald-400 font-semibold">357-233-9644</span>
|
||||
</div>
|
||||
<div class="m-2.5 inline-flex items-center">
|
||||
<span class="text-gray-600 dark:text-emerald-400 font-semibold">my-email@fancymail.com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="relative mt-16 rounded border-2 border-gray-200">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8827.330741966553!2d2.308756110118289!3d48.87000842543867!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fc4f8f3049b%3A0xcbb47407434935db!2s18%20Av.%20des%20Champs-%C3%89lys%C3%A9es%2C%2075008%20Paris!5e0!3m2!1sfr!2sfr!4v1635492407441!5m2!1sfr!2sfr"
|
||||
title="map" scrolling="no" frameborder="0"
|
||||
width="100%" height="450"
|
||||
class=""
|
||||
loading="lazy">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- contact 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>
|
||||
1448
public/componets/contact/contact.html
Normal file
1448
public/componets/contact/contact.html
Normal file
File diff suppressed because it is too large
Load Diff
120
public/componets/error/1_error.html
Normal file
120
public/componets/error/1_error.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>404-- 1 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- error 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 1</div>
|
||||
</section>
|
||||
<div class="flex items-center justify-center w-full min-h-screen bg-gray-100 dark:bg-gray-800">
|
||||
<div class="flex flex-col text-gray-700 lg:flex-row lg:space-x-16 lg:space-x-reverse">
|
||||
<div class="order-1 max-w-md px-2 text-sm md:text-base lg:px-0">
|
||||
<header class="mb-6">
|
||||
<h2 class="text-4xl font-bold leading-none text-gray-400 select-none lg:text-6xl">404.</h2>
|
||||
<h3 class="text-xl font-light leading-normal lg:text-3xl md:text-3xl">Sorry, we couldn't find this page.</h3>
|
||||
</header>
|
||||
|
||||
<p class="max-w-sm mb-5 leading-5 md:leading-7">
|
||||
Don't worry, sometimes even we make mistakes.
|
||||
You can find plenty of other things on our homepage.
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="inline px-4 py-2 text-sm font-medium leading-5 text-white uppercase transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg shadow focus:outline-none focus:shadow-outline-blue active:bg-blue-600 hover:bg-blue-700">
|
||||
Back to Homepage
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="max-w-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2395 1800" class="w-full max-w-sm" width="400">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-10,.cls-13,.cls-14,.cls-15,.cls-17,.cls-5,.cls-6{stroke:#000}.cls-13,.cls-14,.cls-8{stroke-linecap:round;stroke-linejoin:round}.cls-10,.cls-12,.cls-13,.cls-14,.cls-15,.cls-17,.cls-3,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke-width:3px}.cls-10,.cls-12,.cls-15,.cls-17,.cls-3,.cls-5,.cls-6,.cls-7,.cls-9{stroke-miterlimit:10}.cls-3{fill:#818181}.cls-12,.cls-3,.cls-7,.cls-8,.cls-9{stroke:#191818}.cls-5{fill:#4ea7f1}.cls-14,.cls-6{fill:#f8f3ed}.cls-7{fill:#333}.cls-13,.cls-8{fill:none}.cls-9{fill:#f8f59c}.cls-10{fill:#f3d2c9}.cls-15{fill:#8bb174}.cls-17{fill:#da4e22}
|
||||
</style>
|
||||
</defs>
|
||||
<path d="M1073.3 1016.93c-43.75-72.44-119.63-96.48-144.56-103.2h0a121.1 121.1 0 01-6-58.67c5.65-38.81 14.87-101.89 15.77-106.5L750 821.89l-191.73 64.42c3.64 3 51.12 45.51 80.31 71.69a121.07 121.07 0 0133 48.89h0c-14.84 21.13-57.72 88.19-44.92 171.84 12.09 79 67.16 129 103.83 162.39a396.42 396.42 0 0088 60.44 121.54 121.54 0 0098.43 19.6c5.76-1.34 16.84-4.18 27.22-7.38 4.58-1.42 10.4-3.23 17.06-5.57v0l1.1-.41 1.1-.39h0c6.61-2.47 12.24-4.8 16.67-6.65 10-4.19 20.35-9.11 25.63-11.77a121.54 121.54 0 0063-78.09 396.28 396.28 0 0028.85-102.77c6.82-49.07 17.06-122.78-24.25-191.2z" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke="#000" fill="#d6b49a"/>
|
||||
<ellipse cx="748.2" cy="816.89" rx="202.22" ry="30.98" transform="rotate(-19.91 748.327 816.983)" stroke-miterlimit="10" fill="#020202" stroke-width="3" stroke="#000"/>
|
||||
<path class="cls-3" d="M959 1447l-.09 82.82c0 6.19 6.66 11.22 14.88 11.23h.3c8.22 0 14.9-5 14.9-11.2l.09-81.9c0-.53-6.95-1-15.39-1H959M1749 1447l-.09 82.82c0 6.19 6.66 11.22 14.88 11.23h.3c8.22 0 14.9-5 14.9-11.2l.09-81.9c0-.53-7-1-15.39-1H1749"/>
|
||||
<path d="M1825.5 1426.5H755.25a10.75 10.75 0 00-10.75 10.75h0a10.75 10.75 0 0010.75 10.75H1815a10.75 10.75 0 0010.74-11l-.24-10.5" fill="#dcdbda" stroke-miterlimit="10" stroke-width="3" stroke="#000"/>
|
||||
<path class="cls-5" d="M701.74 867.5s-38.62 147.5-32.18 209.29c3.84 36.88 2.64 98 1 141.4a52.4 52.4 0 01-104.76-1.3c-.27-22-2.78-38.74-.5-51.2 13.67-74.81-7.27-76 5.08-144.26q3.17-11.08 6.56-22.29c11.82-39 24.77-75.25 38.5-110.61 14.74-1.39 31.2-5.77 48.93-9.73 13.63-3.04 26.1-7.58 37.37-11.3zM719.77 1182.37c-8.92 0-15.45-12.93-18-18-17.59-34.83 9-95.59 19.32-117.16 9.86 22.2 34.32 82.46 16.74 117.16-2.66 5.15-9.17 18-18.06 18z"/>
|
||||
<path class="cls-6" d="M1915.78 1027c-110.75-95.83-248-74.53-267.79-71.13-190.52 30.41-344.62 100-368.21 188.29a549.59 549.59 0 00-11.7 55.33c-47.15-8-126.29-11.92-172.38 38.22l-.23.26c-13.09 14.32-3.91 37.46 15.39 39.47 11.56 1.2 25.45 2.36 41.11 3.12 32.51 1.58 102.09 52 145.66 85.51a156.16 156.16 0 00106.71 52.93h.66c12.09 8.11 44 27.11 88.17 26.43a153 153 0 0066.95-16.73l160.38-2.2c74.24 21.55 133.85 19.3 170.18 14.75 52.21-6.53 71.81-19.57 80.58-26.78 30.3-25 41.33-63.94 49.13-102.93 16.02-80.11-9.78-202.48-104.61-284.54z"/>
|
||||
<path class="cls-6" d="M1267 1198c-9.38-27.55-23.66-79.78-24.88-129.15a393.76 393.76 0 0112.55-108.79 334.61 334.61 0 01-32.62-173.74 17.07 17.07 0 0126-13l132.1 82.11a320.21 320.21 0 01150.63-4.18l119.81-98a13.73 13.73 0 0122.29 8.61 456.39 456.39 0 01-16.57 202.39 188.88 188.88 0 017.14 87.26"/>
|
||||
<path class="cls-5" d="M583.29 1375.5H583s-8.5-.11-16.44-7.73c-6.25-6-.85-32.43 18-63.08 16.1 31.14 20.08 57.13 14.16 63.08-7.6 7.69-15.43 7.73-15.43 7.73z"/>
|
||||
<path class="cls-7" d="M2024.5 1260.5c14.81 6.82 38.24 20.41 54 46 36.42 59.15 9.28 145.76-41.37 191.33-36.76 33.08-79.09 38.28-112.39 42.57-19.52 2.51-110 13.78-172.14-42.57-12.57-11.4-42-38.11-37.66-71.13 2.25-17 13.79-39.69 33.47-46 37.71-12.14 60.28 50.17 131.09 57.83 10.2 1.1 53.88 4.58 88-23 5.59-4.52 14.81-13 26-32 11.5-19.53 30.93-60.01 31-123.03z"/>
|
||||
<path class="cls-8" d="M1560.5 1428.5s69-32 85-94"/>
|
||||
<path class="cls-7" d="M1530.83 851.27l119.81-98a13.73 13.73 0 0122.29 8.61c3.24 22.58 4.13 45.46 4.35 81S1665 911 1656.5 964.5a284.8 284.8 0 00-125.67-113.23z"/>
|
||||
<path class="cls-8" d="M1408.5 1420.5c-1.77-1.54-8.83-8-9-17.67-.11-7.92 4.52-13.56 6-15.33 12.18-14.84 33.82-8.35 59-15 11.91-3.15 28.36-10.22 46-28"/>
|
||||
<ellipse class="cls-7" cx="1452.5" cy="998.5" rx="153" ry="117"/>
|
||||
<circle class="cls-9" cx="1355" cy="991" r="31.5"/>
|
||||
<path class="cls-10" d="M1672.5 762.5s-70 95-77 117c-5.24 16.45 18.62 8.3 31 3.14a2.87 2.87 0 013.69 3.88l-8.3 17.53a6.35 6.35 0 007.75 8.74l9.91-3.3a2.87 2.87 0 013.56 3.83l-3.59 17.18 17 34a457.51 457.51 0 0016-202z"/>
|
||||
<path class="cls-7" d="M1379.5 855.5c-43.86-27.19-89.35-56.1-133.21-83.29-9.07-5.62-23.66 1.62-23.79 12.29-.27 22.81-4 48.1 3 83 3.77 18.84 5.45 28.58 9.26 41.5a315.06 315.06 0 0019.74 50.5 199 199 0 0118-29c5.75-7.71 26.56-34.42 64-56a221.93 221.93 0 0143-19z"/>
|
||||
<path d="M1222.5 782.5s75.38 65.94 84.71 83.21c.55 1 2.89 5.62 1.16 7.71-3.3 4-17.41-6.08-23.87-.92a6.77 6.77 0 00-1.62 1.92 8 8 0 00.75 8.68c2.16 2.87 5 7.47 4.73 11.84a6.33 6.33 0 01-1.15 3.63c-1.93 2.36-5.52 2.38-6.51 2.38-6.55 0-10.09-6.31-10.25-6.6a4.65 4.65 0 00-6 .13 3.51 3.51 0 00-.94 2 8.85 8.85 0 00.82 5.06c2.17 4.39-.37 18.55-1.85 24.93a93.65 93.65 0 01-11 27c-9-19.66-21.15-51-27-89a326.82 326.82 0 01-3.49-62.74c.38-7.83 1.01-14.43 1.51-19.23z" fill="#f3d2c9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke="#000"/>
|
||||
<circle class="cls-12" cx="1355" cy="991" r="22.5"/>
|
||||
<circle class="cls-9" cx="1557" cy="991" r="31.5"/>
|
||||
<circle class="cls-12" cx="1557" cy="991" r="22.5"/>
|
||||
<path class="cls-10" d="M1445.26 997.13l10.24 1.37 9.39-1.34a2.14 2.14 0 012.11 3.27l-9.09 14.28a3 3 0 01-4.94.08l-9.77-14.33a2.15 2.15 0 012.06-3.33z"/>
|
||||
<path class="cls-13" d="M1454.74 1016.08s2.76 17.42-17.24 15.42M1455.63 1017.08s-2.76 17.42 17.24 15.42"/>
|
||||
<path class="cls-14" d="M1664.5 1001.5L1735 980M1667 1017l66.5 10.5M1244 1017l-60.5 13.5M1246.5 1000.5L1180 990"/>
|
||||
<path class="cls-15" d="M497.79 404c44.57 20.37 95.3 66.11 155.71 124.48 92.79 89.66 150.8 234.43 169 289-5.77 2.68-30.23-42.68-36-40-19.27-52.74-57.27-138.85-139-223-66.8-68.78-125-119.67-172-142zM745.55 850.16c-74.68-63-179.26-139.49-214.14-152.89-89.78-34.5-169.48-49.55-221.09-50.06q8.32-8.54 16.67-17.06c49-.22 119.61 13.39 199 41 31.84 11.09 153.72 90.48 241 170.65z"/>
|
||||
<path class="cls-15" d="M823.54 819.3c-17.76-23.9-59.56-97.14-83.92-120.77a597.13 597.13 0 00-166.5-113.78l-22.31 8.44a635.18 635.18 0 01182.77 131.33c17.7 18.29 54.44 85.77 68.42 104z"/>
|
||||
<path class="cls-7" d="M1479.5 1367.5l34 76a192.85 192.85 0 01-51-1s-29.19-3.39-48.59-18c-13.48-10.12-14.12-17.25-14.29-19.38-.78-9.74 5.64-16.63 8.13-19l.75-.68c9-7.86 25-8.93 26-9 10.24-.63 24.39-3.28 45-8.94z"/>
|
||||
<path d="M1173.28 1285.23l30.22-89.73a156.61 156.61 0 00-60 11 149.83 149.83 0 00-38 23c-1 .85-15 12.88-15.5 24.47v1.26c.23 9.77 7.33 16 10.06 18l.82.6c8.37 5.92 18.58 5.26 33.63 5.63 8.49.21 12.73.32 18 1a113.17 113.17 0 0120.77 4.77z" fill="#333" stroke="#191818" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="cls-17" d="M292.3 344.49l-28.05-15.3a40.34 40.34 0 01-20.8-39.64l2.35-22.21a61.8 61.8 0 0126.57-44.52 29.52 29.52 0 0129.48-2.22 82.16 82.16 0 008.28 3.32 234.66 234.66 0 0186.78 54.37l-43.47 78.83z"/>
|
||||
<path class="cls-17" d="M318.73 318l-.69.05a40.94 40.94 0 00-37 32l-2.68 12.12a53.57 53.57 0 0033.25 61.63l82.49 31.4 12.7-90.2-57-38.69a48.91 48.91 0 00-31.07-8.31zM465 262.82l-32.13-42.59A53.66 53.66 0 00379 200l-10.53 2.21A31.57 31.57 0 00348.89 251l27 38.3 84.61 30.61z"/>
|
||||
<circle class="cls-9" cx="395.47" cy="335.18" r="65.13"/>
|
||||
<path class="cls-17" d="M410.35 262.8l-3.18 24.43c-1.27 9.71 1.05 18.92 6.5 25.82l43.66 55.28 25.6 66.79a188.3 188.3 0 0013.53-28.27s9.66-27.18 8.55-57.61c-2-56.48-41.85-101.41-48.51-108.74a21.18 21.18 0 00-11-7c-8.32-2-15.23 2.41-18.82 4.69-11.98 7.61-15.44 20.66-16.33 24.61z"/>
|
||||
<path class="cls-17" d="M393 455.33l-49.4-22.83a42.53 42.53 0 01-21-55.8l10.27-23.18a56 56 0 0170.16-30l59.18 21.35A54.61 54.61 0 01497.69 404a72.53 72.53 0 01-17.51 34.08c-22.74 24.35-55.11 23-60.87 22.72a83.93 83.93 0 01-26.31-5.47zM220.48 538.45l-4.1-14.15a39.86 39.86 0 0120.26-46.64 44.74 44.74 0 0146.87 4c12.59 4.22 69.55 24.82 98.81 84.49a161.75 161.75 0 0116.25 66.83 8.26 8.26 0 01-12.57 7.19zM173.88 677.25L191 690a87.06 87.06 0 0016.42 9.6 175.79 175.79 0 0021.43 7.83c15.81 4.64 54.81 16.06 98.18.1 33.26-12.24 53.93-35 64.71-49.86a7 7 0 00-4.9-11.16l-188.3-21.35a32.86 32.86 0 00-33 17.77 27.41 27.41 0 008.34 34.32z"/>
|
||||
<path class="cls-17" d="M160.14 576a63.93 63.93 0 0032.92 42l57.42 29.55c3.85 1.51 9.48 3.61 16.37 5.82a265.52 265.52 0 0045 10.4c27.27 3.24 57.36-5.36 74.44-11.41a13.29 13.29 0 008.07-17c-10.22-28.29-25.28-44.58-33.77-52.46-15.68-14.55-34.71-24.26-49.92-32a314.15 314.15 0 00-29.59-13.23l-48.9-13.51a63.9 63.9 0 00-48.09 5.84l-4.91 2.74A39.23 39.23 0 00160.14 576zM525.79 497.88a10.12 10.12 0 00-10.16 11.81c4 23.68 14.18 75.92 28.34 89.12 18.47 17.22 48.15 116.37 130.7 95.46 56.68-14.36 39.26-73.52 22.76-109.22a117 117 0 00-41.89-48.75A228.19 228.19 0 00597 509a260 260 0 00-71.21-11.12z"/>
|
||||
<path class="cls-15" d="M857.63 805c2.87-1.5-27.13-292.5-111.13-404.5s-104-130-104-130-2 85 34 145 78 160 90 182 56 223 56 223z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- error 1 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>
|
||||
207
public/componets/error/2_error.html
Normal file
207
public/componets/error/2_error.html
Normal file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>404-- 2 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- error 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 2</div>
|
||||
</section>
|
||||
<section class="px-4 py-8 text-center dark:bg-gray-800">
|
||||
<div class="mx-auto max-w-auto md:max-w-lg h-screen">
|
||||
<svg class="mb-8" id="fd59ce54-f850-4dfc-bc34-dd7d379d600e" data-name="Layer 1"
|
||||
xmlns="http://www.w3.org/2000/svg" width="650" height="500" viewBox="0 0 1074.392 584.231">
|
||||
<title>Page not found</title>
|
||||
<ellipse cx="540.64346" cy="549.3094" rx="527.5" ry="34.9216" fill="#f2f2f2" />
|
||||
<path
|
||||
d="M583.47969,324.89424c-85.94407,0-147.651,55.13938-147.651,183.79791,0,145.813,61.70691,184.41057,147.651,184.41057s151.327-42.27352,151.327-184.41057C734.80664,356.75255,669.42376,324.89424,583.47969,324.89424Zm.56495,319.80837c-59.52686,0-90.62592-34.92288-90.62592-135.9163,0-89.11185,32.37209-136.10461,91.899-136.10461s91.899,30.86774,91.899,136.10461C677.21663,607.23367,643.5715,644.70261,584.04464,644.70261Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#2f2e41" />
|
||||
<path
|
||||
d="M384.36531,591.40121H348.831V486.76183A20.95585,20.95585,0,0,0,327.87517,465.806h-8.32638a20.95585,20.95585,0,0,0-20.95586,20.95585V591.40121H198.36285a11.96327,11.96327,0,0,1-10.57763-17.552l106.0824-200.78034A20.95585,20.95585,0,0,0,284.28724,344.33l-6.26231-2.9572a20.95585,20.95585,0,0,0-27.4293,9.07005L121.21416,592.4754a28.41578,28.41578,0,0,0-3.35584,13.39612v0a28.41583,28.41583,0,0,0,28.41584,28.41583H298.59293v66.16727a25.119,25.119,0,0,0,25.119,25.119h.00005a25.119,25.119,0,0,0,25.119-25.119V634.28739h35.53428a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,384.36531,591.40121Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#ff8000" />
|
||||
<path
|
||||
d="M1042.36183,591.40121h-35.53428V486.76183A20.95585,20.95585,0,0,0,985.87169,465.806h-8.32638a20.95585,20.95585,0,0,0-20.95586,20.95585V591.40121H856.35937a11.96326,11.96326,0,0,1-10.57763-17.552L951.86413,373.06891A20.95586,20.95586,0,0,0,942.28376,344.33l-6.26231-2.9572a20.95586,20.95586,0,0,0-27.42931,9.07005L779.21068,592.4754a28.41578,28.41578,0,0,0-3.35584,13.39612v0a28.41583,28.41583,0,0,0,28.41583,28.41583H956.58945v66.16727a25.119,25.119,0,0,0,25.119,25.119h0a25.119,25.119,0,0,0,25.119-25.119V634.28739h35.53428a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,1042.36183,591.40121Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#ff8000" />
|
||||
<path
|
||||
d="M394.16787,579.148H358.63358V474.50864a20.95585,20.95585,0,0,0-20.95585-20.95586h-8.32638a20.95586,20.95586,0,0,0-20.95586,20.95586V579.148H208.16541a11.96327,11.96327,0,0,1-10.57763-17.552L303.67017,360.81572a20.95586,20.95586,0,0,0-9.58037-28.73893l-6.26231-2.9572a20.95586,20.95586,0,0,0-27.42931,9.07L131.01672,580.2222a28.41582,28.41582,0,0,0-3.35584,13.39613v0a28.41583,28.41583,0,0,0,28.41583,28.41583H308.39549v66.16727a25.119,25.119,0,0,0,25.119,25.119h.00005a25.119,25.119,0,0,0,25.119-25.119V622.0342h35.53429a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,394.16787,579.148Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1060.74162,579.148h-35.53428V474.50864a20.95586,20.95586,0,0,0-20.95586-20.95586H995.9251a20.95586,20.95586,0,0,0-20.95586,20.95586V579.148H874.73916a11.96327,11.96327,0,0,1-10.57763-17.552L970.24392,360.81572a20.95586,20.95586,0,0,0-9.58037-28.73893l-6.26231-2.9572a20.95586,20.95586,0,0,0-27.42931,9.07L797.59047,580.2222a28.41582,28.41582,0,0,0-3.35584,13.39613v0a28.41583,28.41583,0,0,0,28.41583,28.41583H974.96924v66.16727a25.119,25.119,0,0,0,25.119,25.119h0a25.119,25.119,0,0,0,25.119-25.119V622.0342h35.53428a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,1060.74162,579.148Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M603.0848,313.86637c-85.94407,0-147.651,55.13937-147.651,183.79791,0,145.813,61.70691,184.41057,147.651,184.41057s151.327-42.27352,151.327-184.41057C754.41175,345.72467,689.02887,313.86637,603.0848,313.86637Zm.565,319.80836c-59.52686,0-90.62592-34.92287-90.62592-135.91629,0-89.11185,32.37209-136.10461,91.899-136.10461s91.899,30.86774,91.899,136.10461C696.82174,596.20579,663.17661,633.67473,603.64975,633.67473Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<circle cx="471.14108" cy="18.25044" r="12.90118" fill="#2f2e41" />
|
||||
<ellipse cx="502.60736" cy="46.88476" rx="36.18622" ry="46.88476" fill="#2f2e41" />
|
||||
<path
|
||||
d="M565.66136,237.49419c-18.1276,0-33.1413-17.27052-35.77576-39.80484a60.9759,60.9759,0,0,0-.41046,7.07991c0,25.89373,16.20114,46.88476,36.18622,46.88476s36.18623-20.991,36.18623-46.88476a60.9759,60.9759,0,0,0-.41046-7.07991C598.80267,220.22367,583.789,237.49419,565.66136,237.49419Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path
|
||||
d="M639.29619,342.07326c-.77711,3.19345-4.12792,5.751-7.83881,7.53791-7.80188,3.75682-17.4253,4.87788-26.7597,5.25418a45.17622,45.17622,0,0,1-7.1445-.132,20.5371,20.5371,0,0,1-12.25052-5.63141,1.68086,1.68086,0,0,1,.04371-2.84388c4.9694-5.45888,13.2622-8.80605,21.61613-11.21609,6.3344-1.82743,17.3813-6.56089,24.29013-5.9221C637.94444,329.73864,640.2774,338.04112,639.29619,342.07326Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#3f3d56" />
|
||||
<path
|
||||
d="M639.29619,342.07326c-.77711,3.19345-4.12792,5.751-7.83881,7.53791-7.80188,3.75682-17.4253,4.87788-26.7597,5.25418a45.17622,45.17622,0,0,1-7.1445-.132,20.5371,20.5371,0,0,1-12.25052-5.63141,1.68086,1.68086,0,0,1,.04371-2.84388c4.9694-5.45888,13.2622-8.80605,21.61613-11.21609,6.3344-1.82743,17.3813-6.56089,24.29013-5.9221C637.94444,329.73864,640.2774,338.04112,639.29619,342.07326Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path
|
||||
d="M540.09786,318.2059a19.76967,19.76967,0,0,0-1.1987,15.07476,26.33914,26.33914,0,0,0,8.82921,12.49683c10.09467,8.09163,23.98784,9.20512,36.92477,9.09278a284.6495,284.6495,0,0,0,33.90525-2.32384,40.53788,40.53788,0,0,0,11.00143-2.55442c4.22242-1.82679,7.93282-5.17756,9.436-9.5257s.43625-9.67246-3.13383-12.57428c-3.13686-2.54969-7.46265-2.9004-11.49775-3.14289l-23.08764-1.38745c2.281-2.30839,5.31816-3.614,8.09586-5.29216,3.68523-2.22642,6.13358-5.96455,8.81312-9.33471a129.00143,129.00143,0,0,1,13.4386-13.817c.75138,4.31038,3.4782,7.8499,6.68733,10.824s6.90841,5.36845,10.2439,8.20013c8.0786,6.85838,13.89583,16.1669,22.39215,22.50043a43.82885,43.82885,0,0,0,16.04862-8.0122l-3.30209-5.98141a3.94,3.94,0,0,0-1.24459-1.55282c-.93465-.575-2.13975-.27872-3.225-.44144-2.90082-.435-4.16771-3.784-5.306-6.48737-3.12491-7.42173-9.108-13.17993-14.21783-19.40381a98.00854,98.00854,0,0,1-9.99577-14.72284c-1.71652-3.10162-3.288-6.33107-5.61746-9.00321s-5.59358-4.773-9.1385-4.78051c-3.13222-.00662-6.02122,1.58355-8.71422,3.18308a230.47679,230.47679,0,0,0-23.63018,16.09894c-3.94376,3.0617-7.86306,6.29645-12.48933,8.17393-1.94748.79035-4.00044,1.33052-5.86924,2.29223-3.27313,1.6844-5.75721,4.53435-8.43128,7.06415C566.27712,311.89225,553.219,317.73841,540.09786,318.2059Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#3f3d56" />
|
||||
<path
|
||||
d="M588.3737,253.98251a23.77444,23.77444,0,0,1-1.73379,8.03335,10.04492,10.04492,0,0,1-5.76772,5.57269,12.37513,12.37513,0,0,1-5.62306.18249,10.88232,10.88232,0,0,1-4.58151-1.56071c-2.16484-1.48837-3.24415-4.14413-3.63748-6.74325-.39333-2.596-.21714-5.24857-.46885-7.86342a42.94439,42.94439,0,0,0-1.202-6.25549c-.16993-.68282-.343-1.36248-.51294-2.04216-.16674-.67967-.33037-1.35935-.48141-2.039-.13847-.63878-.26745-1.28068-.37761-1.92574-.09123-.54436-.173-1.09189-.23285-1.64255a18.42329,18.42329,0,0,0-.80867-4.81118,14.60727,14.60727,0,0,0-1.68659-2.854c-.28635-.40906-.56326-.81811-.81815-1.24292a5.88984,5.88984,0,0,1-.97226-3.74763,3.286,3.286,0,0,1,.14788-.601c.02516-.07552.05347-.151.085-.2234A1.80187,1.80187,0,0,0,560.932,223.07a3.43341,3.43341,0,0,0-.14788-1.77783,11.31808,11.31808,0,0,0-.95974-2.28761c-.2643-.47829-1.16108-1.34046-1.16738-1.888-.0126-1.10132,2.13972-1.98867,3.01134-2.42291a16.79623,16.79623,0,0,1,8.59657-1.74323c1.90369.129,3.9679.71428,5.0189,2.30962.944,1.438.81807,3.30081,1.22085,4.97169a1.47068,1.47068,0,0,0,.29892.66393,1.34135,1.34135,0,0,0,.73948.33982,4.54948,4.54948,0,0,0,1.416.05666h.00315a2.93138,2.93138,0,0,0,.37128-.05351,4.957,4.957,0,0,0,2.03271-.8779q.58531-.15576,1.18-.25488a.25112.25112,0,0,0,.04725-.00945c1.57646,4.97482,1.781,10.30836,3.07111,15.37444.63874,2.52044,1.55442,5.00943,1.6834,7.60225.00945.11327.0126.2297.01575.34612.0189.83386-.04717,1.674-.0126,2.50472a6.981,6.981,0,0,0,.12591,1.1139,15.61121,15.61121,0,0,0,.52546,1.74325l.00945.02831c.05977.18251.11643.36817.16363.55381.03457.1353.06607.26747.09127.40277l.00311.00943A14.93754,14.93754,0,0,1,588.3737,253.98251Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fbbebe" />
|
||||
<circle cx="503.23669" cy="44.99678" r="18.56511" fill="#fbbebe" />
|
||||
<path
|
||||
d="M684.15711,304.03278a30.445,30.445,0,0,0-5.236-14.10317q.72216,4.29513,1.44748,8.58714a3.214,3.214,0,0,1-3.36688-1.03523,10.33663,10.33663,0,0,1-1.76529-3.27565,67.46571,67.46571,0,0,0-8.2095-14.73567c-11.81876-.98489-23.50223-5.88418-33.89555-11.59532-10.39643-5.708-20.12582-12.5519-30.38382-18.50217a43.57346,43.57346,0,0,0-5.54436-2.832c-3.20954-1.287-6.81242-1.95406-9.85526-3.46759-.2045-.1007-.409-.20767-.61043-.31781a12.57834,12.57834,0,0,1-1.94459-1.30584,10.34363,10.34363,0,0,1-.93139-.8559,20.35115,20.35115,0,0,1-3.55886-5.95341c-1.63308-3.61232-2.21524-7.97041-3.84517-11.58274a11.20292,11.20292,0,0,1,2.50156-1.76525h.00315c.13213-.06924.2643-.13532.39962-.19824a11.9404,11.9404,0,0,1,2.00437-.73317q.58531-.15576,1.18-.25488a.25112.25112,0,0,0,.04725-.00945,11.56564,11.56564,0,0,1,5.49085.43424c2.58652.87477,4.76711,2.62115,6.94148,4.27313a114.02006,114.02006,0,0,1,10.14787,8.04908c1.79357,1.718,3.4298,3.606,5.35868,5.16676a42.14393,42.14393,0,0,0,5.05662,3.35116q15.65613,9.32658,31.31525,18.65005c3.53365,2.1051,7.07046,4.21019,10.52553,6.438,5.24855,3.38578,10.30828,7.05474,15.36493,10.72057q4.46978,3.23787,8.93647,6.47889a9.72771,9.72771,0,0,1,2.533,2.3411,8.4724,8.4724,0,0,1,1.12337,3.433A31.3874,31.3874,0,0,1,684.15711,304.03278Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fbbebe" />
|
||||
<path
|
||||
d="M592.97726,267.9441c-1.25235,5.61674-6.92888,9.012-9.89617,13.94586-3.68784,6.12335-2.18378,13.241-.79922,20.25484q-3.79485,3.27095-7.59285,6.54186c-1.39708,1.19886-2.79417,2.404-4.29827,3.46444a57.35064,57.35064,0,0,1-6.85966,3.93956q-3.3606,1.72752-6.72119,3.45814a32.1282,32.1282,0,0,1-6.57961,2.78793c-4.41473,1.13278-9.10318.33982-13.4707-.97232a6.08761,6.08761,0,0,1-1.47264-.601,2.39351,2.39351,0,0,1-.69854-.63248,3.91067,3.91067,0,0,1-.44365-2.53933c.44365-7.35052,2.24036-14.54686,4.03081-21.68971a85.2598,85.2598,0,0,1,3.84832-12.57708,85.0766,85.0766,0,0,1,5.41538-10.151,68.36751,68.36751,0,0,1,7.92948-11.51353,18.47881,18.47881,0,0,0,3.67525-4.73882c1.11706-2.54876.686-5.472.91252-8.24732a17.14844,17.14844,0,0,1,1.63312-6.0069v-.00315a17.09326,17.09326,0,0,1,1.74321-2.88232q.45788,1.06671.91568,2.13027.30209.69855.59783,1.394.38706.89679.7678,1.78728,1.09973,2.55823,2.19637,5.11327a21.58968,21.58968,0,0,0,3.33538,5.944,6.49923,6.49923,0,0,0,11.12337-.85275,21.26125,21.26125,0,0,0,2.27185-6.0132,19.21547,19.21547,0,0,0,.25175-7.83509c-.75835-5.00945-2.88862-10.12585-4.43678-14.77972a14.94511,14.94511,0,0,1-1.07927-4.871,3.35144,3.35144,0,0,1,.05662-.56011c.00945-.04719.0189-.09754.02834-.14473a11.9404,11.9404,0,0,1,2.00437-.73317q.58531-.15576,1.18-.25488,2.04378,11.06355,4.09377,22.12709c.0315.17307.0661.34613.09756.52234.19509,1.05726.39333,2.11454.61358,3.16865.19828.95657.41223,1.91.65137,2.85715l.00945.02831c.08182.321.16678.63877.2549.95658l.00311.00943c.2423.86848.5129,1.73065.81811,2.58024C590.93825,257.47528,594.16355,262.62946,592.97726,267.9441Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#ff8000" />
|
||||
<path
|
||||
d="M668.32144,346.87707a6.58269,6.58269,0,0,0,.61,3.14328c1.16192,2.12353,3.94981,2.60625,6.36228,2.80484a188.37688,188.37688,0,0,0,42.2657-1.28774,4.88565,4.88565,0,0,0,2.15136-.66766c1.98985-1.39509.76329-4.7951-1.40951-5.88355s-4.75126-.82614-7.1353-1.29748a22.47912,22.47912,0,0,1-6.67794-2.89617q-7.25234-4.16669-14.293-8.68808c-2.79453-1.79464-6.09272-3.70993-9.23987-2.64587C672.43,332.34264,668.26533,337.68065,668.32144,346.87707Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#3f3d56" />
|
||||
<path
|
||||
d="M564.43732,240.87367v.00315c-.022.13215-.04406.26116-.07237.39018-.0346.214-.07551.43108-.11642.645-.39018,1.99812-.86847,3.98678-1.41913,5.96287-1.5104,5.45939-3.53366,10.83069-5.54121,16.12332q-8.08055,21.28692-16.16423,42.577c-1.35936,3.57457-2.71554,7.15228-4.26054,10.65448-.516,1.16741-1.04782,2.34424-1.57647,3.53368-1.89427,4.25737-3.713,8.65322-4.31716,13.18436a27.44976,27.44976,0,0,0-.19194,9.04027c.60416,2.97042,2.40718,5.8716,5.22969,6.96977,1.37823.53808,3.35113,1.25865,2.97355,2.69037-.2045.78665-1.09817,1.17055-1.90057,1.3027a7.31234,7.31234,0,0,1-5.966-1.718c-1.50725-1.33732-2.66518-3.41725-4.66959-3.64065-1.38767-.151-2.66518.67966-3.93643,1.26178-5.18564,2.36942-11.22719.71114-16.674-.9723.42794-2.20579,2.64318-3.65953,4.84267-4.10006,2.19949-.44367,4.47449-.129,6.718-.18879a3.50958,3.50958,0,0,0,2.04216-.52549,3.70545,3.70545,0,0,0,1.10132-1.88169,78.96356,78.96356,0,0,0,3.21273-13.14661c.7237-4.66645,1.02581-9.40527,2.05787-14.01507.80241-3.59661,2.0422-7.07991,3.10572-10.61044a224.68238,224.68238,0,0,0,5.0598-22.07674,78.02019,78.02019,0,0,0,1.42543-9.36751c.17935-2.6117.09438-5.236.34609-7.83826a60.8877,60.8877,0,0,1,2.11141-9.99683q1.44427-5.34769,2.88547-10.68911c1.42544-5.2706,2.95465-10.74572,6.567-14.84264a13.96159,13.96159,0,0,1,10.02834-4.78915,9.8819,9.8819,0,0,1,2.13027.22969c.11639.02831.23285.05664.34923.0881a8.63447,8.63447,0,0,1,2.17437.89995c1.11388-.708,1.68025-.45942,2.41974.63246a6.97319,6.97319,0,0,1,.88107,3.79485A52.42378,52.42378,0,0,1,564.43732,240.87367Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fbbebe" />
|
||||
<path
|
||||
d="M565.66136,245.0461l-.0472.04719-.25486.25488-2.5299,2.52675-1.23976-5.20767-4.25109-17.854a9.8819,9.8819,0,0,1,2.13027.22969,3.286,3.286,0,0,1,.14788-.601l.20135.68911,1.44118,4.90245,2.72811,9.30773.45,1.53241v.00315Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#ff8000" />
|
||||
<path
|
||||
d="M581.71523,188.0873a12.58165,12.58165,0,0,1-3.70049,8.89583,12.31392,12.31392,0,0,1-1.36008,1.17634,12.52812,12.52812,0,0,1-7.53567,2.52415H554.023a12.5902,12.5902,0,0,1,0-25.18037h15.096A12.62919,12.62919,0,0,1,581.71523,188.0873Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#2f2e41" />
|
||||
<circle cx="532.81499" cy="18.25044" r="12.90118" fill="#2f2e41" />
|
||||
<path
|
||||
d="M595.55433,163.23377c-.15825,0-.31505.00628-.472.01193a12.89776,12.89776,0,0,1,0,25.77849c.15694.00565.31374.01193.472.01193a12.90117,12.90117,0,1,0,0-25.80235Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path
|
||||
d="M534.19508,163.23377c.15825,0,.31505.00628.472.01193a12.89776,12.89776,0,0,0,0,25.77849c-.157.00565-.31375.01193-.472.01193a12.90118,12.90118,0,0,1,0-25.80235Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path
|
||||
d="M576.65466,198.15947a12.52812,12.52812,0,0,1-7.53567,2.52415H554.023a12.52833,12.52833,0,0,1-7.53574-2.52415Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path d="M674.13958,291.64042s3.25228,9.37161,6.229,6.87633L677.996,286.26693Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fbbebe" />
|
||||
<path
|
||||
d="M1069.91781,577.43414a20.81252,20.81252,0,1,0,2.7716-39.91524l.52093,10.7122-5.06814-9.18045a20.734,20.734,0,0,0-10.68367,11.72261,20.40847,20.40847,0,0,0-1.19713,5.62986A20.80856,20.80856,0,0,0,1069.91781,577.43414Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M1094.99516,701.67756c-1.78906-9.11027,5.9633-17.1868,13.62086-22.43651s16.605-10.40779,19.21775-19.31684c3.755-12.80387-7.43-24.52981-16.13564-34.64176a125.30044,125.30044,0,0,1-16.52359-24.55738c-1.81107-3.5325-3.47558-7.22528-3.95221-11.16626-.68641-5.67546,1.13693-11.32309,2.9739-16.73673q9.17925-27.05169,19.62843-53.65005"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1070.77493,574.6762a20.81252,20.81252,0,1,0,2.7716-39.91524l.52093,10.7122-5.06815-9.18045a20.734,20.734,0,0,0-10.68366,11.72261,20.40847,20.40847,0,0,0-1.19713,5.62986A20.80855,20.80855,0,0,0,1070.77493,574.6762Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1092.45136,515.47266a20.78819,20.78819,0,0,1,14.97993-13.19764l1.71361,10.18378,3.177-10.69566a20.81,20.81,0,1,1-19.87057,13.70952Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M1093.59418,511.7954a20.7882,20.7882,0,0,1,14.97993-13.19763l1.71361,10.18378,3.177-10.69567a20.81,20.81,0,1,1-19.87057,13.70952Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1108.04474,625.48885a20.81,20.81,0,0,0,18.419-37.02267l-2.44121,8.21926-1.73105-10.30382a.36183.36183,0,0,0-.053-.0201,20.81113,20.81113,0,1,0-14.1938,39.12733Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M1109.035,621.76417a20.81,20.81,0,0,0,18.419-37.02267l-2.44121,8.21926-1.73105-10.30382a.3621.3621,0,0,0-.053-.0201,20.81113,20.81113,0,1,0-14.1938,39.12733Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1086.37782,660.05148a20.80131,20.80131,0,1,0,4.01058-16.29737l9.27267,13.95654-12.66994-7.40768A20.61638,20.61638,0,0,0,1086.37782,660.05148Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M1087.23494,657.29354a20.80131,20.80131,0,1,0,4.01058-16.29737l9.27267,13.95655-12.66994-7.40769A20.61626,20.61626,0,0,0,1087.23494,657.29354Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M72.06146,628.13325a13.67421,13.67421,0,1,0,1.821-26.225l.34227,7.03811-3.32987-6.03172a13.62263,13.62263,0,0,0-7.01936,7.702,13.40883,13.40883,0,0,0-.78654,3.69893A13.6716,13.6716,0,0,0,72.06146,628.13325Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M88.53774,709.76344c-1.17545-5.98561,3.918-11.292,8.94915-14.7412s10.90978-6.8381,12.62642-12.69151c2.46711-8.41238-4.88167-16.11653-10.60142-22.76027A82.32442,82.32442,0,0,1,88.6556,643.43581a22.20962,22.20962,0,0,1-2.59668-7.33643c-.451-3.72888.747-7.43947,1.95391-10.99634q6.03093-17.77346,12.89623-35.24906"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M72.62461,626.32123a13.6742,13.6742,0,1,0,1.821-26.225l.34227,7.03812L71.458,601.10258a13.62262,13.62262,0,0,0-7.01936,7.702,13.40912,13.40912,0,0,0-.78654,3.69892A13.67158,13.67158,0,0,0,72.62461,626.32123Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M86.86641,587.42343a13.65822,13.65822,0,0,1,9.84209-8.67109l1.12587,6.69093,2.08737-7.02725a13.67252,13.67252,0,1,1-13.05533,9.00741Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M87.61727,585.0074a13.65822,13.65822,0,0,1,9.84209-8.67108l1.12587,6.69093L100.6726,576a13.67252,13.67252,0,1,1-13.05533,9.0074Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M97.11155,659.70607a13.67255,13.67255,0,0,0,12.10164-24.32457l-1.60392,5.4002-1.13733-6.76979a.238.238,0,0,0-.0348-.0132,13.67329,13.67329,0,1,0-9.32559,25.70736Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M97.76214,657.25889a13.67255,13.67255,0,0,0,12.10164-24.32457l-1.60392,5.4002-1.13733-6.7698a.238.238,0,0,0-.0348-.0132,13.67329,13.67329,0,1,0-9.32559,25.70737Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M82.876,682.41435a13.66684,13.66684,0,1,0,2.635-10.70767l6.09231,9.16971-8.32438-4.867A13.54535,13.54535,0,0,0,82.876,682.41435Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M83.43913,680.60233a13.66684,13.66684,0,1,0,2.635-10.70767l6.09231,9.16971-8.32439-4.867A13.54535,13.54535,0,0,0,83.43913,680.60233Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<ellipse cx="480.946" cy="319.1155" rx="17" ry="22" fill="#2f2e41" />
|
||||
<ellipse cx="573.446" cy="319.6155" rx="17" ry="22" fill="#2f2e41" />
|
||||
<path
|
||||
d="M623.5,542.5c0,9.94-13.88,18-31,18s-31-8.06-31-18c0-8.61,10.41-15.81,24.32-17.57a50.10353,50.10353,0,0,1,6.68-.43,50.69869,50.69869,0,0,1,11.13,1.2C615.25,528.29,623.5,534.84,623.5,542.5Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#2f2e41" />
|
||||
<ellipse cx="484.946" cy="314.1155" rx="17" ry="22" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<ellipse cx="577.446" cy="314.6155" rx="17" ry="22" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<ellipse cx="533.446" cy="379.6155" rx="31" ry="18" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M604,527.2a4.93658,4.93658,0,0,1-1.32,3.392A4.33873,4.33873,0,0,1,599.5,532h-10a4.66433,4.66433,0,0,1-4.5-4.8,4.90458,4.90458,0,0,1,.82-2.74134A47.02,47.02,0,0,1,592.5,524a47.66454,47.66454,0,0,1,11.13,1.28A5.06656,5.06656,0,0,1,604,527.2Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fff" />
|
||||
<circle cx="484.946" cy="308.1155" r="5" fill="#fff" />
|
||||
<circle cx="577.946" cy="308.1155" r="5" fill="#fff" />
|
||||
<circle cx="582.946" cy="355.1155" r="5" fill="#ff8000" opacity="0.3" />
|
||||
<circle cx="460.946" cy="355.1155" r="5" fill="#ff8000" opacity="0.3" />
|
||||
</svg>
|
||||
<h2 class="mb-2 text-5xl font-heading">404 Error</h2>
|
||||
<p class="mb-6 text-gray-500"> Page not found. The requested URL was not found on this server or
|
||||
The page has been moved or removed from the website.
|
||||
</p>
|
||||
<div>
|
||||
<a class="px-4 text-orange-500 hover:underline" href="#">Home</a>
|
||||
<a class="px-4 text-orange-500 hover:underline" href="#">Contact us</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- error 2 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>
|
||||
92
public/componets/error/3_error.html
Normal file
92
public/componets/error/3_error.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>404-- 3 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- error 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 3</div>
|
||||
</section>
|
||||
<main aria-labelledby="pageTitle" class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 dark:text-gray-300">
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex flex-col items-start space-y-3 sm:flex-row sm:space-y-0 sm:items-center sm:space-x-3">
|
||||
<p class="font-semibold text-danger-light text-9xl dark:text-danger">404</p>
|
||||
<div class="space-y-2">
|
||||
<h1 id="pageTitle" class="flex items-center space-x-2">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-red-600 dark:text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
||||
</svg>
|
||||
<span class="text-xl font-medium text-gray-600 sm:text-2xl dark:text-light">
|
||||
Oops! Page not found.
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-base font-normal text-gray-600 dark:text-gray-300">
|
||||
The page you are looking for was not found.
|
||||
</p>
|
||||
<p class="text-base font-normal text-gray-600 dark:text-gray-300">
|
||||
You may return to
|
||||
<a href="../index.html" class="text-blue-600 hover:underline dark:text-blue-500">home page</a> or try
|
||||
using the search form.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="#" method="POST">
|
||||
<div class="flex items-center justify-center">
|
||||
<input type="text" name="search" placeholder="What are you looking for?" class="w-full px-4 py-2 rounded-l-md focus:outline-none placeholder:text-gray-800 text-gray-800 font-bold ">
|
||||
<button class="p-2 text-white rounded-r-md bg-cyan-800 dark:bg-cyan-900 hover:bg-cyan-800 dark:hover:bg-cyan-900 focus:outline-none ">
|
||||
<span class="sr-only">Search</span>
|
||||
<svg aria-hidden="true" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- error 3 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
67
public/componets/error/4_error.html
Normal file
67
public/componets/error/4_error.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>404-- 4 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- error 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 4</div>
|
||||
</section>
|
||||
<section class="flex items-center h-screen sm:p-16 dark:bg-gray-900 dark:text-gray-100">
|
||||
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8 space-y-8 text-center sm:max-w-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-40 h-40 dark:text-gray-600">
|
||||
<path fill="currentColor" d="M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z"></path>
|
||||
<rect width="176" height="32" x="168" y="320" fill="currentColor"></rect>
|
||||
<polygon fill="currentColor" points="210.63 228.042 186.588 206.671 207.958 182.63 184.042 161.37 162.671 185.412 138.63 164.042 117.37 187.958 141.412 209.329 120.042 233.37 143.958 254.63 165.329 230.588 189.37 251.958 210.63 228.042"></polygon>
|
||||
<polygon fill="currentColor" points="383.958 182.63 360.042 161.37 338.671 185.412 314.63 164.042 293.37 187.958 317.412 209.329 296.042 233.37 319.958 254.63 341.329 230.588 365.37 251.958 386.63 228.042 362.588 206.671 383.958 182.63"></polygon>
|
||||
</svg>
|
||||
<p class="text-3xl">Looks like our services are currently offline</p>
|
||||
<a rel="noopener noreferrer" href="#" class="px-8 py-3 font-semibold rounded dark:bg-green-400 dark:text-gray-900">Back to homepage</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- error 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>
|
||||
69
public/componets/error/5_error.html
Normal file
69
public/componets/error/5_error.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>404-- 5 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- error 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 5</div>
|
||||
</section>
|
||||
|
||||
<div class="bg-gray-100 h-screen justify-center">
|
||||
<div class="mt-24 m-auto text-center">
|
||||
<svg class=" animate-bounce mx-auto" enable-background="new 0 0 226 249.135" height="249.135" id="Layer_1" overflow="visible" version="1.1" viewBox="0 0 226 249.135" width="226" xml:space="preserve" ><circle cx="113" cy="113" fill="#FFE585" r="109"/><line enable-background="new " fill="none" opacity="0.29" stroke="#6E6E96" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" x1="88.866" x2="136.866" y1="245.135" y2="245.135"/><line enable-background="new " fill="none" opacity="0.17" stroke="#6E6E96" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" x1="154.732" x2="168.732" y1="245.135" y2="245.135"/><line enable-background="new " fill="none" opacity="0.17" stroke="#6E6E96" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" x1="69.732" x2="58.732" y1="245.135" y2="245.135"/><circle cx="68.732" cy="93" fill="#6E6E96" r="9"/><path d="M115.568,5.947c-1.026,0-2.049,0.017-3.069,0.045 c54.425,1.551,98.069,46.155,98.069,100.955c0,55.781-45.219,101-101,101c-55.781,0-101-45.219-101-101 c0-8.786,1.124-17.309,3.232-25.436c-3.393,10.536-5.232,21.771-5.232,33.436c0,60.199,48.801,109,109,109s109-48.801,109-109 S175.768,5.947,115.568,5.947z" enable-background="new " fill="#FF9900" opacity="0.24"/><circle cx="156.398" cy="93" fill="#6E6E96" r="9"/><ellipse cx="67.732" cy="140.894" enable-background="new " fill="#FF0000" opacity="0.18" rx="17.372" ry="8.106"/><ellipse cx="154.88" cy="140.894" enable-background="new " fill="#FF0000" opacity="0.18" rx="17.371" ry="8.106"/><path d="M13,118.5C13,61.338,59.338,15,116.5,15c55.922,0,101.477,44.353,103.427,99.797 c0.044-1.261,0.073-2.525,0.073-3.797C220,50.802,171.199,2,111,2S2,50.802,2,111c0,50.111,33.818,92.318,79.876,105.06 C41.743,201.814,13,163.518,13,118.5z" fill="#FFEFB5"/><circle cx="113" cy="113" fill="none" r="109" stroke="#6E6E96" stroke-width="8"/></svg>
|
||||
<div class=" tracking-widest mt-4">
|
||||
<span class="text-gray-500 text-6xl block"><span>4 0 4</span></span>
|
||||
<span class="text-gray-500 text-xl">Sorry, We couldn't find what you are looking for!</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 text-center">
|
||||
<a href="" class="text-gray-500 font-mono text-xl bg-gray-200 p-3 rounded-md hover:shadow-md">Go back </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- error 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>
|
||||
48
public/componets/error/6_error.html
Normal file
48
public/componets/error/6_error.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>404 </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');
|
||||
|
||||
}
|
||||
})
|
||||
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>
|
||||
363
public/componets/error/error.html
Normal file
363
public/componets/error/error.html
Normal file
@@ -0,0 +1,363 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>404 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- error 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 1</div>
|
||||
</section>
|
||||
<div class="flex items-center justify-center w-full min-h-screen bg-gray-100 dark:bg-gray-800">
|
||||
<div class="flex flex-col text-gray-700 lg:flex-row lg:space-x-16 lg:space-x-reverse">
|
||||
<div class="order-1 max-w-md px-2 text-sm md:text-base lg:px-0">
|
||||
<header class="mb-6">
|
||||
<h2 class="text-4xl font-bold leading-none text-gray-400 select-none lg:text-6xl">404.</h2>
|
||||
<h3 class="text-xl font-light leading-normal lg:text-3xl md:text-3xl">Sorry, we couldn't find this page.</h3>
|
||||
</header>
|
||||
|
||||
<p class="max-w-sm mb-5 leading-5 md:leading-7">
|
||||
Don't worry, sometimes even we make mistakes.
|
||||
You can find plenty of other things on our homepage.
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="inline px-4 py-2 text-sm font-medium leading-5 text-white uppercase transition-colors duration-150 bg-blue-600 border border-transparent rounded-lg shadow focus:outline-none focus:shadow-outline-blue active:bg-blue-600 hover:bg-blue-700">
|
||||
Back to Homepage
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="max-w-lg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2395 1800" class="w-full max-w-sm" width="400">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-10,.cls-13,.cls-14,.cls-15,.cls-17,.cls-5,.cls-6{stroke:#000}.cls-13,.cls-14,.cls-8{stroke-linecap:round;stroke-linejoin:round}.cls-10,.cls-12,.cls-13,.cls-14,.cls-15,.cls-17,.cls-3,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{stroke-width:3px}.cls-10,.cls-12,.cls-15,.cls-17,.cls-3,.cls-5,.cls-6,.cls-7,.cls-9{stroke-miterlimit:10}.cls-3{fill:#818181}.cls-12,.cls-3,.cls-7,.cls-8,.cls-9{stroke:#191818}.cls-5{fill:#4ea7f1}.cls-14,.cls-6{fill:#f8f3ed}.cls-7{fill:#333}.cls-13,.cls-8{fill:none}.cls-9{fill:#f8f59c}.cls-10{fill:#f3d2c9}.cls-15{fill:#8bb174}.cls-17{fill:#da4e22}
|
||||
</style>
|
||||
</defs>
|
||||
<path d="M1073.3 1016.93c-43.75-72.44-119.63-96.48-144.56-103.2h0a121.1 121.1 0 01-6-58.67c5.65-38.81 14.87-101.89 15.77-106.5L750 821.89l-191.73 64.42c3.64 3 51.12 45.51 80.31 71.69a121.07 121.07 0 0133 48.89h0c-14.84 21.13-57.72 88.19-44.92 171.84 12.09 79 67.16 129 103.83 162.39a396.42 396.42 0 0088 60.44 121.54 121.54 0 0098.43 19.6c5.76-1.34 16.84-4.18 27.22-7.38 4.58-1.42 10.4-3.23 17.06-5.57v0l1.1-.41 1.1-.39h0c6.61-2.47 12.24-4.8 16.67-6.65 10-4.19 20.35-9.11 25.63-11.77a121.54 121.54 0 0063-78.09 396.28 396.28 0 0028.85-102.77c6.82-49.07 17.06-122.78-24.25-191.2z" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke="#000" fill="#d6b49a"/>
|
||||
<ellipse cx="748.2" cy="816.89" rx="202.22" ry="30.98" transform="rotate(-19.91 748.327 816.983)" stroke-miterlimit="10" fill="#020202" stroke-width="3" stroke="#000"/>
|
||||
<path class="cls-3" d="M959 1447l-.09 82.82c0 6.19 6.66 11.22 14.88 11.23h.3c8.22 0 14.9-5 14.9-11.2l.09-81.9c0-.53-6.95-1-15.39-1H959M1749 1447l-.09 82.82c0 6.19 6.66 11.22 14.88 11.23h.3c8.22 0 14.9-5 14.9-11.2l.09-81.9c0-.53-7-1-15.39-1H1749"/>
|
||||
<path d="M1825.5 1426.5H755.25a10.75 10.75 0 00-10.75 10.75h0a10.75 10.75 0 0010.75 10.75H1815a10.75 10.75 0 0010.74-11l-.24-10.5" fill="#dcdbda" stroke-miterlimit="10" stroke-width="3" stroke="#000"/>
|
||||
<path class="cls-5" d="M701.74 867.5s-38.62 147.5-32.18 209.29c3.84 36.88 2.64 98 1 141.4a52.4 52.4 0 01-104.76-1.3c-.27-22-2.78-38.74-.5-51.2 13.67-74.81-7.27-76 5.08-144.26q3.17-11.08 6.56-22.29c11.82-39 24.77-75.25 38.5-110.61 14.74-1.39 31.2-5.77 48.93-9.73 13.63-3.04 26.1-7.58 37.37-11.3zM719.77 1182.37c-8.92 0-15.45-12.93-18-18-17.59-34.83 9-95.59 19.32-117.16 9.86 22.2 34.32 82.46 16.74 117.16-2.66 5.15-9.17 18-18.06 18z"/>
|
||||
<path class="cls-6" d="M1915.78 1027c-110.75-95.83-248-74.53-267.79-71.13-190.52 30.41-344.62 100-368.21 188.29a549.59 549.59 0 00-11.7 55.33c-47.15-8-126.29-11.92-172.38 38.22l-.23.26c-13.09 14.32-3.91 37.46 15.39 39.47 11.56 1.2 25.45 2.36 41.11 3.12 32.51 1.58 102.09 52 145.66 85.51a156.16 156.16 0 00106.71 52.93h.66c12.09 8.11 44 27.11 88.17 26.43a153 153 0 0066.95-16.73l160.38-2.2c74.24 21.55 133.85 19.3 170.18 14.75 52.21-6.53 71.81-19.57 80.58-26.78 30.3-25 41.33-63.94 49.13-102.93 16.02-80.11-9.78-202.48-104.61-284.54z"/>
|
||||
<path class="cls-6" d="M1267 1198c-9.38-27.55-23.66-79.78-24.88-129.15a393.76 393.76 0 0112.55-108.79 334.61 334.61 0 01-32.62-173.74 17.07 17.07 0 0126-13l132.1 82.11a320.21 320.21 0 01150.63-4.18l119.81-98a13.73 13.73 0 0122.29 8.61 456.39 456.39 0 01-16.57 202.39 188.88 188.88 0 017.14 87.26"/>
|
||||
<path class="cls-5" d="M583.29 1375.5H583s-8.5-.11-16.44-7.73c-6.25-6-.85-32.43 18-63.08 16.1 31.14 20.08 57.13 14.16 63.08-7.6 7.69-15.43 7.73-15.43 7.73z"/>
|
||||
<path class="cls-7" d="M2024.5 1260.5c14.81 6.82 38.24 20.41 54 46 36.42 59.15 9.28 145.76-41.37 191.33-36.76 33.08-79.09 38.28-112.39 42.57-19.52 2.51-110 13.78-172.14-42.57-12.57-11.4-42-38.11-37.66-71.13 2.25-17 13.79-39.69 33.47-46 37.71-12.14 60.28 50.17 131.09 57.83 10.2 1.1 53.88 4.58 88-23 5.59-4.52 14.81-13 26-32 11.5-19.53 30.93-60.01 31-123.03z"/>
|
||||
<path class="cls-8" d="M1560.5 1428.5s69-32 85-94"/>
|
||||
<path class="cls-7" d="M1530.83 851.27l119.81-98a13.73 13.73 0 0122.29 8.61c3.24 22.58 4.13 45.46 4.35 81S1665 911 1656.5 964.5a284.8 284.8 0 00-125.67-113.23z"/>
|
||||
<path class="cls-8" d="M1408.5 1420.5c-1.77-1.54-8.83-8-9-17.67-.11-7.92 4.52-13.56 6-15.33 12.18-14.84 33.82-8.35 59-15 11.91-3.15 28.36-10.22 46-28"/>
|
||||
<ellipse class="cls-7" cx="1452.5" cy="998.5" rx="153" ry="117"/>
|
||||
<circle class="cls-9" cx="1355" cy="991" r="31.5"/>
|
||||
<path class="cls-10" d="M1672.5 762.5s-70 95-77 117c-5.24 16.45 18.62 8.3 31 3.14a2.87 2.87 0 013.69 3.88l-8.3 17.53a6.35 6.35 0 007.75 8.74l9.91-3.3a2.87 2.87 0 013.56 3.83l-3.59 17.18 17 34a457.51 457.51 0 0016-202z"/>
|
||||
<path class="cls-7" d="M1379.5 855.5c-43.86-27.19-89.35-56.1-133.21-83.29-9.07-5.62-23.66 1.62-23.79 12.29-.27 22.81-4 48.1 3 83 3.77 18.84 5.45 28.58 9.26 41.5a315.06 315.06 0 0019.74 50.5 199 199 0 0118-29c5.75-7.71 26.56-34.42 64-56a221.93 221.93 0 0143-19z"/>
|
||||
<path d="M1222.5 782.5s75.38 65.94 84.71 83.21c.55 1 2.89 5.62 1.16 7.71-3.3 4-17.41-6.08-23.87-.92a6.77 6.77 0 00-1.62 1.92 8 8 0 00.75 8.68c2.16 2.87 5 7.47 4.73 11.84a6.33 6.33 0 01-1.15 3.63c-1.93 2.36-5.52 2.38-6.51 2.38-6.55 0-10.09-6.31-10.25-6.6a4.65 4.65 0 00-6 .13 3.51 3.51 0 00-.94 2 8.85 8.85 0 00.82 5.06c2.17 4.39-.37 18.55-1.85 24.93a93.65 93.65 0 01-11 27c-9-19.66-21.15-51-27-89a326.82 326.82 0 01-3.49-62.74c.38-7.83 1.01-14.43 1.51-19.23z" fill="#f3d2c9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke="#000"/>
|
||||
<circle class="cls-12" cx="1355" cy="991" r="22.5"/>
|
||||
<circle class="cls-9" cx="1557" cy="991" r="31.5"/>
|
||||
<circle class="cls-12" cx="1557" cy="991" r="22.5"/>
|
||||
<path class="cls-10" d="M1445.26 997.13l10.24 1.37 9.39-1.34a2.14 2.14 0 012.11 3.27l-9.09 14.28a3 3 0 01-4.94.08l-9.77-14.33a2.15 2.15 0 012.06-3.33z"/>
|
||||
<path class="cls-13" d="M1454.74 1016.08s2.76 17.42-17.24 15.42M1455.63 1017.08s-2.76 17.42 17.24 15.42"/>
|
||||
<path class="cls-14" d="M1664.5 1001.5L1735 980M1667 1017l66.5 10.5M1244 1017l-60.5 13.5M1246.5 1000.5L1180 990"/>
|
||||
<path class="cls-15" d="M497.79 404c44.57 20.37 95.3 66.11 155.71 124.48 92.79 89.66 150.8 234.43 169 289-5.77 2.68-30.23-42.68-36-40-19.27-52.74-57.27-138.85-139-223-66.8-68.78-125-119.67-172-142zM745.55 850.16c-74.68-63-179.26-139.49-214.14-152.89-89.78-34.5-169.48-49.55-221.09-50.06q8.32-8.54 16.67-17.06c49-.22 119.61 13.39 199 41 31.84 11.09 153.72 90.48 241 170.65z"/>
|
||||
<path class="cls-15" d="M823.54 819.3c-17.76-23.9-59.56-97.14-83.92-120.77a597.13 597.13 0 00-166.5-113.78l-22.31 8.44a635.18 635.18 0 01182.77 131.33c17.7 18.29 54.44 85.77 68.42 104z"/>
|
||||
<path class="cls-7" d="M1479.5 1367.5l34 76a192.85 192.85 0 01-51-1s-29.19-3.39-48.59-18c-13.48-10.12-14.12-17.25-14.29-19.38-.78-9.74 5.64-16.63 8.13-19l.75-.68c9-7.86 25-8.93 26-9 10.24-.63 24.39-3.28 45-8.94z"/>
|
||||
<path d="M1173.28 1285.23l30.22-89.73a156.61 156.61 0 00-60 11 149.83 149.83 0 00-38 23c-1 .85-15 12.88-15.5 24.47v1.26c.23 9.77 7.33 16 10.06 18l.82.6c8.37 5.92 18.58 5.26 33.63 5.63 8.49.21 12.73.32 18 1a113.17 113.17 0 0120.77 4.77z" fill="#333" stroke="#191818" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="cls-17" d="M292.3 344.49l-28.05-15.3a40.34 40.34 0 01-20.8-39.64l2.35-22.21a61.8 61.8 0 0126.57-44.52 29.52 29.52 0 0129.48-2.22 82.16 82.16 0 008.28 3.32 234.66 234.66 0 0186.78 54.37l-43.47 78.83z"/>
|
||||
<path class="cls-17" d="M318.73 318l-.69.05a40.94 40.94 0 00-37 32l-2.68 12.12a53.57 53.57 0 0033.25 61.63l82.49 31.4 12.7-90.2-57-38.69a48.91 48.91 0 00-31.07-8.31zM465 262.82l-32.13-42.59A53.66 53.66 0 00379 200l-10.53 2.21A31.57 31.57 0 00348.89 251l27 38.3 84.61 30.61z"/>
|
||||
<circle class="cls-9" cx="395.47" cy="335.18" r="65.13"/>
|
||||
<path class="cls-17" d="M410.35 262.8l-3.18 24.43c-1.27 9.71 1.05 18.92 6.5 25.82l43.66 55.28 25.6 66.79a188.3 188.3 0 0013.53-28.27s9.66-27.18 8.55-57.61c-2-56.48-41.85-101.41-48.51-108.74a21.18 21.18 0 00-11-7c-8.32-2-15.23 2.41-18.82 4.69-11.98 7.61-15.44 20.66-16.33 24.61z"/>
|
||||
<path class="cls-17" d="M393 455.33l-49.4-22.83a42.53 42.53 0 01-21-55.8l10.27-23.18a56 56 0 0170.16-30l59.18 21.35A54.61 54.61 0 01497.69 404a72.53 72.53 0 01-17.51 34.08c-22.74 24.35-55.11 23-60.87 22.72a83.93 83.93 0 01-26.31-5.47zM220.48 538.45l-4.1-14.15a39.86 39.86 0 0120.26-46.64 44.74 44.74 0 0146.87 4c12.59 4.22 69.55 24.82 98.81 84.49a161.75 161.75 0 0116.25 66.83 8.26 8.26 0 01-12.57 7.19zM173.88 677.25L191 690a87.06 87.06 0 0016.42 9.6 175.79 175.79 0 0021.43 7.83c15.81 4.64 54.81 16.06 98.18.1 33.26-12.24 53.93-35 64.71-49.86a7 7 0 00-4.9-11.16l-188.3-21.35a32.86 32.86 0 00-33 17.77 27.41 27.41 0 008.34 34.32z"/>
|
||||
<path class="cls-17" d="M160.14 576a63.93 63.93 0 0032.92 42l57.42 29.55c3.85 1.51 9.48 3.61 16.37 5.82a265.52 265.52 0 0045 10.4c27.27 3.24 57.36-5.36 74.44-11.41a13.29 13.29 0 008.07-17c-10.22-28.29-25.28-44.58-33.77-52.46-15.68-14.55-34.71-24.26-49.92-32a314.15 314.15 0 00-29.59-13.23l-48.9-13.51a63.9 63.9 0 00-48.09 5.84l-4.91 2.74A39.23 39.23 0 00160.14 576zM525.79 497.88a10.12 10.12 0 00-10.16 11.81c4 23.68 14.18 75.92 28.34 89.12 18.47 17.22 48.15 116.37 130.7 95.46 56.68-14.36 39.26-73.52 22.76-109.22a117 117 0 00-41.89-48.75A228.19 228.19 0 00597 509a260 260 0 00-71.21-11.12z"/>
|
||||
<path class="cls-15" d="M857.63 805c2.87-1.5-27.13-292.5-111.13-404.5s-104-130-104-130-2 85 34 145 78 160 90 182 56 223 56 223z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- error 1 end -->
|
||||
|
||||
<!-- error 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 2</div>
|
||||
</section>
|
||||
<section class="px-4 py-8 text-center dark:bg-gray-800">
|
||||
<div class="mx-auto max-w-auto md:max-w-lg h-screen">
|
||||
<svg class="mb-8" id="fd59ce54-f850-4dfc-bc34-dd7d379d600e" data-name="Layer 1"
|
||||
xmlns="http://www.w3.org/2000/svg" width="650" height="500" viewBox="0 0 1074.392 584.231">
|
||||
<title>Page not found</title>
|
||||
<ellipse cx="540.64346" cy="549.3094" rx="527.5" ry="34.9216" fill="#f2f2f2" />
|
||||
<path
|
||||
d="M583.47969,324.89424c-85.94407,0-147.651,55.13938-147.651,183.79791,0,145.813,61.70691,184.41057,147.651,184.41057s151.327-42.27352,151.327-184.41057C734.80664,356.75255,669.42376,324.89424,583.47969,324.89424Zm.56495,319.80837c-59.52686,0-90.62592-34.92288-90.62592-135.9163,0-89.11185,32.37209-136.10461,91.899-136.10461s91.899,30.86774,91.899,136.10461C677.21663,607.23367,643.5715,644.70261,584.04464,644.70261Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#2f2e41" />
|
||||
<path
|
||||
d="M384.36531,591.40121H348.831V486.76183A20.95585,20.95585,0,0,0,327.87517,465.806h-8.32638a20.95585,20.95585,0,0,0-20.95586,20.95585V591.40121H198.36285a11.96327,11.96327,0,0,1-10.57763-17.552l106.0824-200.78034A20.95585,20.95585,0,0,0,284.28724,344.33l-6.26231-2.9572a20.95585,20.95585,0,0,0-27.4293,9.07005L121.21416,592.4754a28.41578,28.41578,0,0,0-3.35584,13.39612v0a28.41583,28.41583,0,0,0,28.41584,28.41583H298.59293v66.16727a25.119,25.119,0,0,0,25.119,25.119h.00005a25.119,25.119,0,0,0,25.119-25.119V634.28739h35.53428a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,384.36531,591.40121Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#ff8000" />
|
||||
<path
|
||||
d="M1042.36183,591.40121h-35.53428V486.76183A20.95585,20.95585,0,0,0,985.87169,465.806h-8.32638a20.95585,20.95585,0,0,0-20.95586,20.95585V591.40121H856.35937a11.96326,11.96326,0,0,1-10.57763-17.552L951.86413,373.06891A20.95586,20.95586,0,0,0,942.28376,344.33l-6.26231-2.9572a20.95586,20.95586,0,0,0-27.42931,9.07005L779.21068,592.4754a28.41578,28.41578,0,0,0-3.35584,13.39612v0a28.41583,28.41583,0,0,0,28.41583,28.41583H956.58945v66.16727a25.119,25.119,0,0,0,25.119,25.119h0a25.119,25.119,0,0,0,25.119-25.119V634.28739h35.53428a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,1042.36183,591.40121Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#ff8000" />
|
||||
<path
|
||||
d="M394.16787,579.148H358.63358V474.50864a20.95585,20.95585,0,0,0-20.95585-20.95586h-8.32638a20.95586,20.95586,0,0,0-20.95586,20.95586V579.148H208.16541a11.96327,11.96327,0,0,1-10.57763-17.552L303.67017,360.81572a20.95586,20.95586,0,0,0-9.58037-28.73893l-6.26231-2.9572a20.95586,20.95586,0,0,0-27.42931,9.07L131.01672,580.2222a28.41582,28.41582,0,0,0-3.35584,13.39613v0a28.41583,28.41583,0,0,0,28.41583,28.41583H308.39549v66.16727a25.119,25.119,0,0,0,25.119,25.119h.00005a25.119,25.119,0,0,0,25.119-25.119V622.0342h35.53429a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,394.16787,579.148Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1060.74162,579.148h-35.53428V474.50864a20.95586,20.95586,0,0,0-20.95586-20.95586H995.9251a20.95586,20.95586,0,0,0-20.95586,20.95586V579.148H874.73916a11.96327,11.96327,0,0,1-10.57763-17.552L970.24392,360.81572a20.95586,20.95586,0,0,0-9.58037-28.73893l-6.26231-2.9572a20.95586,20.95586,0,0,0-27.42931,9.07L797.59047,580.2222a28.41582,28.41582,0,0,0-3.35584,13.39613v0a28.41583,28.41583,0,0,0,28.41583,28.41583H974.96924v66.16727a25.119,25.119,0,0,0,25.119,25.119h0a25.119,25.119,0,0,0,25.119-25.119V622.0342h35.53428a21.44307,21.44307,0,0,0,21.44307-21.44307v0A21.44307,21.44307,0,0,0,1060.74162,579.148Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M603.0848,313.86637c-85.94407,0-147.651,55.13937-147.651,183.79791,0,145.813,61.70691,184.41057,147.651,184.41057s151.327-42.27352,151.327-184.41057C754.41175,345.72467,689.02887,313.86637,603.0848,313.86637Zm.565,319.80836c-59.52686,0-90.62592-34.92287-90.62592-135.91629,0-89.11185,32.37209-136.10461,91.899-136.10461s91.899,30.86774,91.899,136.10461C696.82174,596.20579,663.17661,633.67473,603.64975,633.67473Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<circle cx="471.14108" cy="18.25044" r="12.90118" fill="#2f2e41" />
|
||||
<ellipse cx="502.60736" cy="46.88476" rx="36.18622" ry="46.88476" fill="#2f2e41" />
|
||||
<path
|
||||
d="M565.66136,237.49419c-18.1276,0-33.1413-17.27052-35.77576-39.80484a60.9759,60.9759,0,0,0-.41046,7.07991c0,25.89373,16.20114,46.88476,36.18622,46.88476s36.18623-20.991,36.18623-46.88476a60.9759,60.9759,0,0,0-.41046-7.07991C598.80267,220.22367,583.789,237.49419,565.66136,237.49419Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path
|
||||
d="M639.29619,342.07326c-.77711,3.19345-4.12792,5.751-7.83881,7.53791-7.80188,3.75682-17.4253,4.87788-26.7597,5.25418a45.17622,45.17622,0,0,1-7.1445-.132,20.5371,20.5371,0,0,1-12.25052-5.63141,1.68086,1.68086,0,0,1,.04371-2.84388c4.9694-5.45888,13.2622-8.80605,21.61613-11.21609,6.3344-1.82743,17.3813-6.56089,24.29013-5.9221C637.94444,329.73864,640.2774,338.04112,639.29619,342.07326Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#3f3d56" />
|
||||
<path
|
||||
d="M639.29619,342.07326c-.77711,3.19345-4.12792,5.751-7.83881,7.53791-7.80188,3.75682-17.4253,4.87788-26.7597,5.25418a45.17622,45.17622,0,0,1-7.1445-.132,20.5371,20.5371,0,0,1-12.25052-5.63141,1.68086,1.68086,0,0,1,.04371-2.84388c4.9694-5.45888,13.2622-8.80605,21.61613-11.21609,6.3344-1.82743,17.3813-6.56089,24.29013-5.9221C637.94444,329.73864,640.2774,338.04112,639.29619,342.07326Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path
|
||||
d="M540.09786,318.2059a19.76967,19.76967,0,0,0-1.1987,15.07476,26.33914,26.33914,0,0,0,8.82921,12.49683c10.09467,8.09163,23.98784,9.20512,36.92477,9.09278a284.6495,284.6495,0,0,0,33.90525-2.32384,40.53788,40.53788,0,0,0,11.00143-2.55442c4.22242-1.82679,7.93282-5.17756,9.436-9.5257s.43625-9.67246-3.13383-12.57428c-3.13686-2.54969-7.46265-2.9004-11.49775-3.14289l-23.08764-1.38745c2.281-2.30839,5.31816-3.614,8.09586-5.29216,3.68523-2.22642,6.13358-5.96455,8.81312-9.33471a129.00143,129.00143,0,0,1,13.4386-13.817c.75138,4.31038,3.4782,7.8499,6.68733,10.824s6.90841,5.36845,10.2439,8.20013c8.0786,6.85838,13.89583,16.1669,22.39215,22.50043a43.82885,43.82885,0,0,0,16.04862-8.0122l-3.30209-5.98141a3.94,3.94,0,0,0-1.24459-1.55282c-.93465-.575-2.13975-.27872-3.225-.44144-2.90082-.435-4.16771-3.784-5.306-6.48737-3.12491-7.42173-9.108-13.17993-14.21783-19.40381a98.00854,98.00854,0,0,1-9.99577-14.72284c-1.71652-3.10162-3.288-6.33107-5.61746-9.00321s-5.59358-4.773-9.1385-4.78051c-3.13222-.00662-6.02122,1.58355-8.71422,3.18308a230.47679,230.47679,0,0,0-23.63018,16.09894c-3.94376,3.0617-7.86306,6.29645-12.48933,8.17393-1.94748.79035-4.00044,1.33052-5.86924,2.29223-3.27313,1.6844-5.75721,4.53435-8.43128,7.06415C566.27712,311.89225,553.219,317.73841,540.09786,318.2059Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#3f3d56" />
|
||||
<path
|
||||
d="M588.3737,253.98251a23.77444,23.77444,0,0,1-1.73379,8.03335,10.04492,10.04492,0,0,1-5.76772,5.57269,12.37513,12.37513,0,0,1-5.62306.18249,10.88232,10.88232,0,0,1-4.58151-1.56071c-2.16484-1.48837-3.24415-4.14413-3.63748-6.74325-.39333-2.596-.21714-5.24857-.46885-7.86342a42.94439,42.94439,0,0,0-1.202-6.25549c-.16993-.68282-.343-1.36248-.51294-2.04216-.16674-.67967-.33037-1.35935-.48141-2.039-.13847-.63878-.26745-1.28068-.37761-1.92574-.09123-.54436-.173-1.09189-.23285-1.64255a18.42329,18.42329,0,0,0-.80867-4.81118,14.60727,14.60727,0,0,0-1.68659-2.854c-.28635-.40906-.56326-.81811-.81815-1.24292a5.88984,5.88984,0,0,1-.97226-3.74763,3.286,3.286,0,0,1,.14788-.601c.02516-.07552.05347-.151.085-.2234A1.80187,1.80187,0,0,0,560.932,223.07a3.43341,3.43341,0,0,0-.14788-1.77783,11.31808,11.31808,0,0,0-.95974-2.28761c-.2643-.47829-1.16108-1.34046-1.16738-1.888-.0126-1.10132,2.13972-1.98867,3.01134-2.42291a16.79623,16.79623,0,0,1,8.59657-1.74323c1.90369.129,3.9679.71428,5.0189,2.30962.944,1.438.81807,3.30081,1.22085,4.97169a1.47068,1.47068,0,0,0,.29892.66393,1.34135,1.34135,0,0,0,.73948.33982,4.54948,4.54948,0,0,0,1.416.05666h.00315a2.93138,2.93138,0,0,0,.37128-.05351,4.957,4.957,0,0,0,2.03271-.8779q.58531-.15576,1.18-.25488a.25112.25112,0,0,0,.04725-.00945c1.57646,4.97482,1.781,10.30836,3.07111,15.37444.63874,2.52044,1.55442,5.00943,1.6834,7.60225.00945.11327.0126.2297.01575.34612.0189.83386-.04717,1.674-.0126,2.50472a6.981,6.981,0,0,0,.12591,1.1139,15.61121,15.61121,0,0,0,.52546,1.74325l.00945.02831c.05977.18251.11643.36817.16363.55381.03457.1353.06607.26747.09127.40277l.00311.00943A14.93754,14.93754,0,0,1,588.3737,253.98251Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fbbebe" />
|
||||
<circle cx="503.23669" cy="44.99678" r="18.56511" fill="#fbbebe" />
|
||||
<path
|
||||
d="M684.15711,304.03278a30.445,30.445,0,0,0-5.236-14.10317q.72216,4.29513,1.44748,8.58714a3.214,3.214,0,0,1-3.36688-1.03523,10.33663,10.33663,0,0,1-1.76529-3.27565,67.46571,67.46571,0,0,0-8.2095-14.73567c-11.81876-.98489-23.50223-5.88418-33.89555-11.59532-10.39643-5.708-20.12582-12.5519-30.38382-18.50217a43.57346,43.57346,0,0,0-5.54436-2.832c-3.20954-1.287-6.81242-1.95406-9.85526-3.46759-.2045-.1007-.409-.20767-.61043-.31781a12.57834,12.57834,0,0,1-1.94459-1.30584,10.34363,10.34363,0,0,1-.93139-.8559,20.35115,20.35115,0,0,1-3.55886-5.95341c-1.63308-3.61232-2.21524-7.97041-3.84517-11.58274a11.20292,11.20292,0,0,1,2.50156-1.76525h.00315c.13213-.06924.2643-.13532.39962-.19824a11.9404,11.9404,0,0,1,2.00437-.73317q.58531-.15576,1.18-.25488a.25112.25112,0,0,0,.04725-.00945,11.56564,11.56564,0,0,1,5.49085.43424c2.58652.87477,4.76711,2.62115,6.94148,4.27313a114.02006,114.02006,0,0,1,10.14787,8.04908c1.79357,1.718,3.4298,3.606,5.35868,5.16676a42.14393,42.14393,0,0,0,5.05662,3.35116q15.65613,9.32658,31.31525,18.65005c3.53365,2.1051,7.07046,4.21019,10.52553,6.438,5.24855,3.38578,10.30828,7.05474,15.36493,10.72057q4.46978,3.23787,8.93647,6.47889a9.72771,9.72771,0,0,1,2.533,2.3411,8.4724,8.4724,0,0,1,1.12337,3.433A31.3874,31.3874,0,0,1,684.15711,304.03278Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fbbebe" />
|
||||
<path
|
||||
d="M592.97726,267.9441c-1.25235,5.61674-6.92888,9.012-9.89617,13.94586-3.68784,6.12335-2.18378,13.241-.79922,20.25484q-3.79485,3.27095-7.59285,6.54186c-1.39708,1.19886-2.79417,2.404-4.29827,3.46444a57.35064,57.35064,0,0,1-6.85966,3.93956q-3.3606,1.72752-6.72119,3.45814a32.1282,32.1282,0,0,1-6.57961,2.78793c-4.41473,1.13278-9.10318.33982-13.4707-.97232a6.08761,6.08761,0,0,1-1.47264-.601,2.39351,2.39351,0,0,1-.69854-.63248,3.91067,3.91067,0,0,1-.44365-2.53933c.44365-7.35052,2.24036-14.54686,4.03081-21.68971a85.2598,85.2598,0,0,1,3.84832-12.57708,85.0766,85.0766,0,0,1,5.41538-10.151,68.36751,68.36751,0,0,1,7.92948-11.51353,18.47881,18.47881,0,0,0,3.67525-4.73882c1.11706-2.54876.686-5.472.91252-8.24732a17.14844,17.14844,0,0,1,1.63312-6.0069v-.00315a17.09326,17.09326,0,0,1,1.74321-2.88232q.45788,1.06671.91568,2.13027.30209.69855.59783,1.394.38706.89679.7678,1.78728,1.09973,2.55823,2.19637,5.11327a21.58968,21.58968,0,0,0,3.33538,5.944,6.49923,6.49923,0,0,0,11.12337-.85275,21.26125,21.26125,0,0,0,2.27185-6.0132,19.21547,19.21547,0,0,0,.25175-7.83509c-.75835-5.00945-2.88862-10.12585-4.43678-14.77972a14.94511,14.94511,0,0,1-1.07927-4.871,3.35144,3.35144,0,0,1,.05662-.56011c.00945-.04719.0189-.09754.02834-.14473a11.9404,11.9404,0,0,1,2.00437-.73317q.58531-.15576,1.18-.25488,2.04378,11.06355,4.09377,22.12709c.0315.17307.0661.34613.09756.52234.19509,1.05726.39333,2.11454.61358,3.16865.19828.95657.41223,1.91.65137,2.85715l.00945.02831c.08182.321.16678.63877.2549.95658l.00311.00943c.2423.86848.5129,1.73065.81811,2.58024C590.93825,257.47528,594.16355,262.62946,592.97726,267.9441Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#ff8000" />
|
||||
<path
|
||||
d="M668.32144,346.87707a6.58269,6.58269,0,0,0,.61,3.14328c1.16192,2.12353,3.94981,2.60625,6.36228,2.80484a188.37688,188.37688,0,0,0,42.2657-1.28774,4.88565,4.88565,0,0,0,2.15136-.66766c1.98985-1.39509.76329-4.7951-1.40951-5.88355s-4.75126-.82614-7.1353-1.29748a22.47912,22.47912,0,0,1-6.67794-2.89617q-7.25234-4.16669-14.293-8.68808c-2.79453-1.79464-6.09272-3.70993-9.23987-2.64587C672.43,332.34264,668.26533,337.68065,668.32144,346.87707Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#3f3d56" />
|
||||
<path
|
||||
d="M564.43732,240.87367v.00315c-.022.13215-.04406.26116-.07237.39018-.0346.214-.07551.43108-.11642.645-.39018,1.99812-.86847,3.98678-1.41913,5.96287-1.5104,5.45939-3.53366,10.83069-5.54121,16.12332q-8.08055,21.28692-16.16423,42.577c-1.35936,3.57457-2.71554,7.15228-4.26054,10.65448-.516,1.16741-1.04782,2.34424-1.57647,3.53368-1.89427,4.25737-3.713,8.65322-4.31716,13.18436a27.44976,27.44976,0,0,0-.19194,9.04027c.60416,2.97042,2.40718,5.8716,5.22969,6.96977,1.37823.53808,3.35113,1.25865,2.97355,2.69037-.2045.78665-1.09817,1.17055-1.90057,1.3027a7.31234,7.31234,0,0,1-5.966-1.718c-1.50725-1.33732-2.66518-3.41725-4.66959-3.64065-1.38767-.151-2.66518.67966-3.93643,1.26178-5.18564,2.36942-11.22719.71114-16.674-.9723.42794-2.20579,2.64318-3.65953,4.84267-4.10006,2.19949-.44367,4.47449-.129,6.718-.18879a3.50958,3.50958,0,0,0,2.04216-.52549,3.70545,3.70545,0,0,0,1.10132-1.88169,78.96356,78.96356,0,0,0,3.21273-13.14661c.7237-4.66645,1.02581-9.40527,2.05787-14.01507.80241-3.59661,2.0422-7.07991,3.10572-10.61044a224.68238,224.68238,0,0,0,5.0598-22.07674,78.02019,78.02019,0,0,0,1.42543-9.36751c.17935-2.6117.09438-5.236.34609-7.83826a60.8877,60.8877,0,0,1,2.11141-9.99683q1.44427-5.34769,2.88547-10.68911c1.42544-5.2706,2.95465-10.74572,6.567-14.84264a13.96159,13.96159,0,0,1,10.02834-4.78915,9.8819,9.8819,0,0,1,2.13027.22969c.11639.02831.23285.05664.34923.0881a8.63447,8.63447,0,0,1,2.17437.89995c1.11388-.708,1.68025-.45942,2.41974.63246a6.97319,6.97319,0,0,1,.88107,3.79485A52.42378,52.42378,0,0,1,564.43732,240.87367Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fbbebe" />
|
||||
<path
|
||||
d="M565.66136,245.0461l-.0472.04719-.25486.25488-2.5299,2.52675-1.23976-5.20767-4.25109-17.854a9.8819,9.8819,0,0,1,2.13027.22969,3.286,3.286,0,0,1,.14788-.601l.20135.68911,1.44118,4.90245,2.72811,9.30773.45,1.53241v.00315Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#ff8000" />
|
||||
<path
|
||||
d="M581.71523,188.0873a12.58165,12.58165,0,0,1-3.70049,8.89583,12.31392,12.31392,0,0,1-1.36008,1.17634,12.52812,12.52812,0,0,1-7.53567,2.52415H554.023a12.5902,12.5902,0,0,1,0-25.18037h15.096A12.62919,12.62919,0,0,1,581.71523,188.0873Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#2f2e41" />
|
||||
<circle cx="532.81499" cy="18.25044" r="12.90118" fill="#2f2e41" />
|
||||
<path
|
||||
d="M595.55433,163.23377c-.15825,0-.31505.00628-.472.01193a12.89776,12.89776,0,0,1,0,25.77849c.15694.00565.31374.01193.472.01193a12.90117,12.90117,0,1,0,0-25.80235Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path
|
||||
d="M534.19508,163.23377c.15825,0,.31505.00628.472.01193a12.89776,12.89776,0,0,0,0,25.77849c-.157.00565-.31375.01193-.472.01193a12.90118,12.90118,0,0,1,0-25.80235Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path
|
||||
d="M576.65466,198.15947a12.52812,12.52812,0,0,1-7.53567,2.52415H554.023a12.52833,12.52833,0,0,1-7.53574-2.52415Z"
|
||||
transform="translate(-63.054 -157.8845)" opacity="0.1" />
|
||||
<path d="M674.13958,291.64042s3.25228,9.37161,6.229,6.87633L677.996,286.26693Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fbbebe" />
|
||||
<path
|
||||
d="M1069.91781,577.43414a20.81252,20.81252,0,1,0,2.7716-39.91524l.52093,10.7122-5.06814-9.18045a20.734,20.734,0,0,0-10.68367,11.72261,20.40847,20.40847,0,0,0-1.19713,5.62986A20.80856,20.80856,0,0,0,1069.91781,577.43414Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M1094.99516,701.67756c-1.78906-9.11027,5.9633-17.1868,13.62086-22.43651s16.605-10.40779,19.21775-19.31684c3.755-12.80387-7.43-24.52981-16.13564-34.64176a125.30044,125.30044,0,0,1-16.52359-24.55738c-1.81107-3.5325-3.47558-7.22528-3.95221-11.16626-.68641-5.67546,1.13693-11.32309,2.9739-16.73673q9.17925-27.05169,19.62843-53.65005"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1070.77493,574.6762a20.81252,20.81252,0,1,0,2.7716-39.91524l.52093,10.7122-5.06815-9.18045a20.734,20.734,0,0,0-10.68366,11.72261,20.40847,20.40847,0,0,0-1.19713,5.62986A20.80855,20.80855,0,0,0,1070.77493,574.6762Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1092.45136,515.47266a20.78819,20.78819,0,0,1,14.97993-13.19764l1.71361,10.18378,3.177-10.69566a20.81,20.81,0,1,1-19.87057,13.70952Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M1093.59418,511.7954a20.7882,20.7882,0,0,1,14.97993-13.19763l1.71361,10.18378,3.177-10.69567a20.81,20.81,0,1,1-19.87057,13.70952Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1108.04474,625.48885a20.81,20.81,0,0,0,18.419-37.02267l-2.44121,8.21926-1.73105-10.30382a.36183.36183,0,0,0-.053-.0201,20.81113,20.81113,0,1,0-14.1938,39.12733Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M1109.035,621.76417a20.81,20.81,0,0,0,18.419-37.02267l-2.44121,8.21926-1.73105-10.30382a.3621.3621,0,0,0-.053-.0201,20.81113,20.81113,0,1,0-14.1938,39.12733Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M1086.37782,660.05148a20.80131,20.80131,0,1,0,4.01058-16.29737l9.27267,13.95654-12.66994-7.40768A20.61638,20.61638,0,0,0,1086.37782,660.05148Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M1087.23494,657.29354a20.80131,20.80131,0,1,0,4.01058-16.29737l9.27267,13.95655-12.66994-7.40769A20.61626,20.61626,0,0,0,1087.23494,657.29354Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M72.06146,628.13325a13.67421,13.67421,0,1,0,1.821-26.225l.34227,7.03811-3.32987-6.03172a13.62263,13.62263,0,0,0-7.01936,7.702,13.40883,13.40883,0,0,0-.78654,3.69893A13.6716,13.6716,0,0,0,72.06146,628.13325Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M88.53774,709.76344c-1.17545-5.98561,3.918-11.292,8.94915-14.7412s10.90978-6.8381,12.62642-12.69151c2.46711-8.41238-4.88167-16.11653-10.60142-22.76027A82.32442,82.32442,0,0,1,88.6556,643.43581a22.20962,22.20962,0,0,1-2.59668-7.33643c-.451-3.72888.747-7.43947,1.95391-10.99634q6.03093-17.77346,12.89623-35.24906"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M72.62461,626.32123a13.6742,13.6742,0,1,0,1.821-26.225l.34227,7.03812L71.458,601.10258a13.62262,13.62262,0,0,0-7.01936,7.702,13.40912,13.40912,0,0,0-.78654,3.69892A13.67158,13.67158,0,0,0,72.62461,626.32123Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M86.86641,587.42343a13.65822,13.65822,0,0,1,9.84209-8.67109l1.12587,6.69093,2.08737-7.02725a13.67252,13.67252,0,1,1-13.05533,9.00741Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M87.61727,585.0074a13.65822,13.65822,0,0,1,9.84209-8.67108l1.12587,6.69093L100.6726,576a13.67252,13.67252,0,1,1-13.05533,9.0074Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M97.11155,659.70607a13.67255,13.67255,0,0,0,12.10164-24.32457l-1.60392,5.4002-1.13733-6.76979a.238.238,0,0,0-.0348-.0132,13.67329,13.67329,0,1,0-9.32559,25.70736Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M97.76214,657.25889a13.67255,13.67255,0,0,0,12.10164-24.32457l-1.60392,5.4002-1.13733-6.7698a.238.238,0,0,0-.0348-.0132,13.67329,13.67329,0,1,0-9.32559,25.70737Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M82.876,682.41435a13.66684,13.66684,0,1,0,2.635-10.70767l6.09231,9.16971-8.32438-4.867A13.54535,13.54535,0,0,0,82.876,682.41435Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#57b894" />
|
||||
<path
|
||||
d="M83.43913,680.60233a13.66684,13.66684,0,1,0,2.635-10.70767l6.09231,9.16971-8.32439-4.867A13.54535,13.54535,0,0,0,83.43913,680.60233Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<ellipse cx="480.946" cy="319.1155" rx="17" ry="22" fill="#2f2e41" />
|
||||
<ellipse cx="573.446" cy="319.6155" rx="17" ry="22" fill="#2f2e41" />
|
||||
<path
|
||||
d="M623.5,542.5c0,9.94-13.88,18-31,18s-31-8.06-31-18c0-8.61,10.41-15.81,24.32-17.57a50.10353,50.10353,0,0,1,6.68-.43,50.69869,50.69869,0,0,1,11.13,1.2C615.25,528.29,623.5,534.84,623.5,542.5Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#2f2e41" />
|
||||
<ellipse cx="484.946" cy="314.1155" rx="17" ry="22" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<ellipse cx="577.446" cy="314.6155" rx="17" ry="22" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<ellipse cx="533.446" cy="379.6155" rx="31" ry="18" fill="none" stroke="#3f3d56" stroke-miterlimit="10" />
|
||||
<path
|
||||
d="M604,527.2a4.93658,4.93658,0,0,1-1.32,3.392A4.33873,4.33873,0,0,1,599.5,532h-10a4.66433,4.66433,0,0,1-4.5-4.8,4.90458,4.90458,0,0,1,.82-2.74134A47.02,47.02,0,0,1,592.5,524a47.66454,47.66454,0,0,1,11.13,1.28A5.06656,5.06656,0,0,1,604,527.2Z"
|
||||
transform="translate(-63.054 -157.8845)" fill="#fff" />
|
||||
<circle cx="484.946" cy="308.1155" r="5" fill="#fff" />
|
||||
<circle cx="577.946" cy="308.1155" r="5" fill="#fff" />
|
||||
<circle cx="582.946" cy="355.1155" r="5" fill="#ff8000" opacity="0.3" />
|
||||
<circle cx="460.946" cy="355.1155" r="5" fill="#ff8000" opacity="0.3" />
|
||||
</svg>
|
||||
<h2 class="mb-2 text-5xl font-heading">404 Error</h2>
|
||||
<p class="mb-6 text-gray-500"> Page not found. The requested URL was not found on this server or
|
||||
The page has been moved or removed from the website.
|
||||
</p>
|
||||
<div>
|
||||
<a class="px-4 text-orange-500 hover:underline" href="#">Home</a>
|
||||
<a class="px-4 text-orange-500 hover:underline" href="#">Contact us</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- error 2 end -->
|
||||
|
||||
<!-- error 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 3</div>
|
||||
</section>
|
||||
<main aria-labelledby="pageTitle" class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 dark:text-gray-300">
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="flex flex-col items-start space-y-3 sm:flex-row sm:space-y-0 sm:items-center sm:space-x-3">
|
||||
<p class="font-semibold text-danger-light text-9xl dark:text-danger">404</p>
|
||||
<div class="space-y-2">
|
||||
<h1 id="pageTitle" class="flex items-center space-x-2">
|
||||
<svg aria-hidden="true" class="w-6 h-6 text-red-600 dark:text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
||||
</svg>
|
||||
<span class="text-xl font-medium text-gray-600 sm:text-2xl dark:text-light">
|
||||
Oops! Page not found.
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-base font-normal text-gray-600 dark:text-gray-300">
|
||||
The page you are looking for was not found.
|
||||
</p>
|
||||
<p class="text-base font-normal text-gray-600 dark:text-gray-300">
|
||||
You may return to
|
||||
<a href="../index.html" class="text-blue-600 hover:underline dark:text-blue-500">home page</a> or try
|
||||
using the search form.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="#" method="POST">
|
||||
<div class="flex items-center justify-center">
|
||||
<input type="text" name="search" placeholder="What are you looking for?" class="w-full px-4 py-2 rounded-l-md focus:outline-none placeholder:text-gray-800 text-gray-800 font-bold ">
|
||||
<button class="p-2 text-white rounded-r-md bg-cyan-800 dark:bg-cyan-900 hover:bg-cyan-800 dark:hover:bg-cyan-900 focus:outline-none ">
|
||||
<span class="sr-only">Search</span>
|
||||
<svg aria-hidden="true" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- error 3 end -->
|
||||
|
||||
<!-- error 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 4</div>
|
||||
</section>
|
||||
<section class="flex items-center h-screen sm:p-16 dark:bg-gray-900 dark:text-gray-100">
|
||||
<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8 space-y-8 text-center sm:max-w-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-40 h-40 dark:text-gray-600">
|
||||
<path fill="currentColor" d="M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16ZM403.078,403.078a207.253,207.253,0,1,1,44.589-66.125A207.332,207.332,0,0,1,403.078,403.078Z"></path>
|
||||
<rect width="176" height="32" x="168" y="320" fill="currentColor"></rect>
|
||||
<polygon fill="currentColor" points="210.63 228.042 186.588 206.671 207.958 182.63 184.042 161.37 162.671 185.412 138.63 164.042 117.37 187.958 141.412 209.329 120.042 233.37 143.958 254.63 165.329 230.588 189.37 251.958 210.63 228.042"></polygon>
|
||||
<polygon fill="currentColor" points="383.958 182.63 360.042 161.37 338.671 185.412 314.63 164.042 293.37 187.958 317.412 209.329 296.042 233.37 319.958 254.63 341.329 230.588 365.37 251.958 386.63 228.042 362.588 206.671 383.958 182.63"></polygon>
|
||||
</svg>
|
||||
<p class="text-3xl">Looks like our services are currently offline</p>
|
||||
<a rel="noopener noreferrer" href="#" class="px-8 py-3 font-semibold rounded dark:bg-green-400 dark:text-gray-900">Back to homepage</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- error 4 end -->
|
||||
|
||||
<!-- error 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Error 5</div>
|
||||
</section>
|
||||
|
||||
<div class="bg-gray-100 h-screen justify-center">
|
||||
<div class="mt-24 m-auto text-center">
|
||||
<svg class=" animate-bounce mx-auto" enable-background="new 0 0 226 249.135" height="249.135" id="Layer_1" overflow="visible" version="1.1" viewBox="0 0 226 249.135" width="226" xml:space="preserve" ><circle cx="113" cy="113" fill="#FFE585" r="109"/><line enable-background="new " fill="none" opacity="0.29" stroke="#6E6E96" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" x1="88.866" x2="136.866" y1="245.135" y2="245.135"/><line enable-background="new " fill="none" opacity="0.17" stroke="#6E6E96" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" x1="154.732" x2="168.732" y1="245.135" y2="245.135"/><line enable-background="new " fill="none" opacity="0.17" stroke="#6E6E96" stroke-linecap="round" stroke-linejoin="round" stroke-width="8" x1="69.732" x2="58.732" y1="245.135" y2="245.135"/><circle cx="68.732" cy="93" fill="#6E6E96" r="9"/><path d="M115.568,5.947c-1.026,0-2.049,0.017-3.069,0.045 c54.425,1.551,98.069,46.155,98.069,100.955c0,55.781-45.219,101-101,101c-55.781,0-101-45.219-101-101 c0-8.786,1.124-17.309,3.232-25.436c-3.393,10.536-5.232,21.771-5.232,33.436c0,60.199,48.801,109,109,109s109-48.801,109-109 S175.768,5.947,115.568,5.947z" enable-background="new " fill="#FF9900" opacity="0.24"/><circle cx="156.398" cy="93" fill="#6E6E96" r="9"/><ellipse cx="67.732" cy="140.894" enable-background="new " fill="#FF0000" opacity="0.18" rx="17.372" ry="8.106"/><ellipse cx="154.88" cy="140.894" enable-background="new " fill="#FF0000" opacity="0.18" rx="17.371" ry="8.106"/><path d="M13,118.5C13,61.338,59.338,15,116.5,15c55.922,0,101.477,44.353,103.427,99.797 c0.044-1.261,0.073-2.525,0.073-3.797C220,50.802,171.199,2,111,2S2,50.802,2,111c0,50.111,33.818,92.318,79.876,105.06 C41.743,201.814,13,163.518,13,118.5z" fill="#FFEFB5"/><circle cx="113" cy="113" fill="none" r="109" stroke="#6E6E96" stroke-width="8"/></svg>
|
||||
<div class=" tracking-widest mt-4">
|
||||
<span class="text-gray-500 text-6xl block"><span>4 0 4</span></span>
|
||||
<span class="text-gray-500 text-xl">Sorry, We couldn't find what you are looking for!</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 text-center">
|
||||
<a href="" class="text-gray-500 font-mono text-xl bg-gray-200 p-3 rounded-md hover:shadow-md">Go back </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- error 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>
|
||||
48
public/componets/others/others.html
Normal file
48
public/componets/others/others.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Other </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');
|
||||
|
||||
}
|
||||
})
|
||||
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>
|
||||
175
public/componets/register/1_register.html
Normal file
175
public/componets/register/1_register.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Register 1 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- register 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 1 </div>
|
||||
</section>
|
||||
|
||||
<div class="flex p-1 py-12 bg-white dark:bg-gray-800 justify-center place-content-center">
|
||||
<div class="max-w-lg overflow-hidden border border-gray-200 rounded-lg">
|
||||
<form class="w-full max-w-lg">
|
||||
<div class="p-10 pb-6">
|
||||
<div class="flex flex-wrap mb-6 -mx-3">
|
||||
<div class="w-full px-3 mb-6 md:w-1/2 md:mb-0">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-first-name">
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white"
|
||||
id="grid-first-name" type="text" placeholder="Jane">
|
||||
</div>
|
||||
<div class="w-full px-3 md:w-1/2">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-last-name">
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-last-name" type="text" placeholder="Doe">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap -mx-3">
|
||||
<div class="w-full px-3 mb-6">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-email" type="email" placeholder="janedoe@example.com">
|
||||
</div>
|
||||
<div class="w-full px-3 mb-6">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-password">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-password" type="password" placeholder="***********">
|
||||
</div>
|
||||
<div class="w-full px-3 mb-6">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-number">
|
||||
Phone number
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-email" type="text" placeholder="+91 XXX XXX XXXX">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<span class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase">Address</span>
|
||||
<textarea
|
||||
class="block w-full px-4 py-3 mt-1 mb-3 text-gray-700 bg-gray-200 border border-gray-200 rounded form-textarea focus:outline-none"
|
||||
rows="4" placeholder=""></textarea>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-wrap m-6 mb-2 -mx-3">
|
||||
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-city">
|
||||
City
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-city" type="text" placeholder="Albuquerque">
|
||||
</div>
|
||||
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-state">
|
||||
State
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select
|
||||
class="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-state">
|
||||
<option>New Mexico</option>
|
||||
<option>Missouri</option>
|
||||
<option>Texas</option>
|
||||
</select>
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-zip">
|
||||
Zip
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-zip" type="text" placeholder="90210">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-5 text-center bg-gray-900">
|
||||
<div class="relative flex flex-col items-start mr-1 text-sm">
|
||||
<span class="mr-1 text-gray-500 dark:text-cyan-300">Already have an account?</span>
|
||||
<a href="#_" class="block font-medium text-indigo-600 underline">Login Here</a>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="inline-flex items-center px-6 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 dark:bg-black dark:text-cyan-300 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700">
|
||||
Register Now
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- register 1 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>
|
||||
99
public/componets/register/2_register.html
Normal file
99
public/componets/register/2_register.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Register 2 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- register 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 2</div>
|
||||
</section>
|
||||
<section class="h-screen font-sans bg-[url('https://source.unsplash.com/random/?trees')] grayscale bg-cover">
|
||||
<div class="container mx-auto h-full flex flex-1 justify-center items-center">
|
||||
<div class="w-full max-w-lg">
|
||||
<div class="leading-loose">
|
||||
<form class="max-w-xl m-4 p-10 bg-white rounded shadow-xl">
|
||||
<p class="text-gray-800 font-medium">Register</p>
|
||||
<div class="">
|
||||
<label class="block text-sm text-gray-00" for="cus_name">Name</label>
|
||||
<input class="w-full px-5 py-1 text-gray-700 bg-gray-200 rounded" id="cus_name" name="cus_name" type="text" required="" placeholder="Your Name" aria-label="Name">
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="block text-sm text-gray-600" for="cus_email">Email</label>
|
||||
<input class="w-full px-5 py-4 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Your Email" aria-label="Email">
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class=" block text-sm text-gray-600" for="cus_email">Address</label>
|
||||
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Street" aria-label="Email">
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="hidden text-sm block text-gray-600" for="cus_email">City</label>
|
||||
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="City" aria-label="Email">
|
||||
</div>
|
||||
<div class="inline-block mt-2 w-1/2 pr-1">
|
||||
<label class="hidden block text-sm text-gray-600" for="cus_email">Country</label>
|
||||
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Country" aria-label="Email">
|
||||
</div>
|
||||
<div class="inline-block mt-2 -mx-1 pl-1 w-1/2">
|
||||
<label class="hidden block text-sm text-gray-600" for="cus_email">Zip</label>
|
||||
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Zip" aria-label="Email">
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="px-4 py-1 text-white font-light tracking-wider bg-gray-900 rounded" type="submit">Register</button>
|
||||
</div>
|
||||
<a class="inline-block right-0 align-baseline font-bold text-sm text-500 hover:text-blue-800" href="login.html">
|
||||
Already have an account ?
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- register 2 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>
|
||||
154
public/componets/register/3_register.html
Normal file
154
public/componets/register/3_register.html
Normal file
@@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Register 3 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- register 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 3</div>
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-1 lg:grid-cols-2 bg-white dark:bg-gray-800">
|
||||
<div class="w-full px-4 py-20 mx-auto xl:py-32 md:w-3/5 lg:w-4/5 xl:w-3/5">
|
||||
<h1 class="mb-4 -mt-3 text-2xl font-extrabold leading-snug tracking-tight text-left dark:text-emerald-300 text-gray-900 md:text-4xl">Sign up to our product today for free</h1>
|
||||
<div class="mt-8 space-y-10">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<a href="#" class="my-3 flex bg-blue-500 text-white justify-center items-center rounded py-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-1">
|
||||
<path
|
||||
d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28 c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233 c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934 C20.485,11.453,20.404,10.884,20.283,10.356z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Continue with</span> Google
|
||||
</a>
|
||||
<a href="#" class="my-3 flex bg-black text-white justify-center items-center rounded py-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-2">
|
||||
<path
|
||||
d="M19.665,16.811c-0.287,0.664-0.627,1.275-1.021,1.837c-0.537,0.767-0.978,1.297-1.316,1.592 c-0.525,0.482-1.089,0.73-1.692,0.744c-0.432,0-0.954-0.123-1.562-0.373c-0.61-0.249-1.17-0.371-1.683-0.371 c-0.537,0-1.113,0.122-1.73,0.371c-0.616,0.25-1.114,0.381-1.495,0.393c-0.577,0.025-1.154-0.229-1.729-0.764 c-0.367-0.32-0.826-0.87-1.377-1.648c-0.59-0.829-1.075-1.794-1.455-2.891c-0.407-1.187-0.611-2.335-0.611-3.447 c0-1.273,0.275-2.372,0.826-3.292c0.434-0.74,1.01-1.323,1.73-1.751C7.271,6.782,8.051,6.563,8.89,6.549 c0.46,0,1.063,0.142,1.81,0.422s1.227,0.422,1.436,0.422c0.158,0,0.689-0.167,1.593-0.498c0.853-0.307,1.573-0.434,2.163-0.384 c1.6,0.129,2.801,0.759,3.6,1.895c-1.43,0.867-2.137,2.08-2.123,3.637c0.012,1.213,0.453,2.222,1.317,3.023 c0.392,0.372,0.829,0.659,1.315,0.863C19.895,16.236,19.783,16.529,19.665,16.811L19.665,16.811z M15.998,2.38 c0,0.95-0.348,1.838-1.039,2.659c-0.836,0.976-1.846,1.541-2.941,1.452c-0.014-0.114-0.021-0.234-0.021-0.36 c0-0.913,0.396-1.889,1.103-2.688c0.352-0.404,0.8-0.741,1.343-1.009c0.542-0.264,1.054-0.41,1.536-0.435 C15.992,2.127,15.998,2.254,15.998,2.38L15.998,2.38z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only ">Continue with</span> Apple
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center border-b border-gray-200" style="line-height: 0px">
|
||||
<span class="p-2 text-xs font-semibold tracking-wide text-gray-600 uppercase bg-white" style="line-height: 0px">Or</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="mt-8 space-y-4">
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-emerald-300">Your Email</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm " type="email" placeholder="Ex. james@bond.com" inputmode="email" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-emerald-300">Your Password</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm " type="password" placeholder="••••••••" required />
|
||||
</label>
|
||||
<input type="submit" class="w-full bg-black text-white rounded py-2 " value="Register" />
|
||||
</form>
|
||||
<div class="pt-6 mt-6 text-sm font-medium text-gray-700 border-t border-gray-200 dark:text-emerald-300">
|
||||
Already have an account?
|
||||
<a href="#" class="text-emerald-700 hover:text-emerald-900">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-20 space-y-10 bg-gray-100 xl:py-32 md:px-40 lg:px-20 xl:px-40">
|
||||
<a href="/" title="Go to Kutty Home Page">
|
||||
<svg class="w-auto h-6 " width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
|
||||
<path
|
||||
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
|
||||
fill="#1A202C"
|
||||
/>
|
||||
<path
|
||||
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
|
||||
fill="#9E58E9"
|
||||
/>
|
||||
<path
|
||||
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
|
||||
fill="#7629C8"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only"> Home Page</span>
|
||||
</a>
|
||||
<div class="flex space-x-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-xl font-medium text-purple-700">Free account</h2>
|
||||
<p class="mt-1 text-gray-700">Create apps, connect databases and add-on services, and collaborate on your apps, for free.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-xl font-medium text-purple-700">Your app platform</h2>
|
||||
<p class="mt-1 text-gray-700">A platform for apps, with app management & instant scaling, for development and production.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-xl font-medium text-purple-700">Deploy now</h2>
|
||||
<p class="mt-1 text-gray-700">Go from code to running app in minutes. Deploy, scale, and deliver your app to the world.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-xl font-medium text-purple-700">Free account</h2>
|
||||
<p class="mt-1 text-gray-700">Create apps, connect databases and add-on services, and collaborate on your apps, for free.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- register 3 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
105
public/componets/register/4_register.html
Normal file
105
public/componets/register/4_register.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Register 4 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- register 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 4</div>
|
||||
</section>
|
||||
|
||||
<section class="px-4 py-24 dark:bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="w-full mx-auto space-y-5 sm:w-8/12 md:w-6/12 lg:w-4/12 xl:w-3/12">
|
||||
<h1 class="text-4xl font-semibold text-center text-gray-900 dark:text-cyan-300">Sign up</h1>
|
||||
<div class="pb-6 space-y-2 border-b border-gray-200">
|
||||
<a href="#" class="my-3 flex bg-blue-500 text-white justify-center items-center rounded py-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-1">
|
||||
<path
|
||||
d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28 c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233 c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934 C20.485,11.453,20.404,10.884,20.283,10.356z"
|
||||
/>
|
||||
</svg>
|
||||
Continue with Google
|
||||
</a>
|
||||
<a href="#" class="my-3 flex bg-black text-white justify-center items-center rounded py-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-1">
|
||||
<path
|
||||
d="M19.665,16.811c-0.287,0.664-0.627,1.275-1.021,1.837c-0.537,0.767-0.978,1.297-1.316,1.592 c-0.525,0.482-1.089,0.73-1.692,0.744c-0.432,0-0.954-0.123-1.562-0.373c-0.61-0.249-1.17-0.371-1.683-0.371 c-0.537,0-1.113,0.122-1.73,0.371c-0.616,0.25-1.114,0.381-1.495,0.393c-0.577,0.025-1.154-0.229-1.729-0.764 c-0.367-0.32-0.826-0.87-1.377-1.648c-0.59-0.829-1.075-1.794-1.455-2.891c-0.407-1.187-0.611-2.335-0.611-3.447 c0-1.273,0.275-2.372,0.826-3.292c0.434-0.74,1.01-1.323,1.73-1.751C7.271,6.782,8.051,6.563,8.89,6.549 c0.46,0,1.063,0.142,1.81,0.422s1.227,0.422,1.436,0.422c0.158,0,0.689-0.167,1.593-0.498c0.853-0.307,1.573-0.434,2.163-0.384 c1.6,0.129,2.801,0.759,3.6,1.895c-1.43,0.867-2.137,2.08-2.123,3.637c0.012,1.213,0.453,2.222,1.317,3.023 c0.392,0.372,0.829,0.659,1.315,0.863C19.895,16.236,19.783,16.529,19.665,16.811L19.665,16.811z M15.998,2.38 c0,0.95-0.348,1.838-1.039,2.659c-0.836,0.976-1.846,1.541-2.941,1.452c-0.014-0.114-0.021-0.234-0.021-0.36 c0-0.913,0.396-1.889,1.103-2.688c0.352-0.404,0.8-0.741,1.343-1.009c0.542-0.264,1.054-0.41,1.536-0.435 C15.992,2.127,15.998,2.254,15.998,2.38L15.998,2.38z"
|
||||
/>
|
||||
</svg>
|
||||
Continue with Apple
|
||||
</a>
|
||||
</div>
|
||||
<form class="space-y-4">
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Name</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="text" placeholder="Your full name" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Your Email</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="email" placeholder="Ex. james@bond.com" inputmode="email" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Create a password</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="password" placeholder="••••••••" required />
|
||||
</label>
|
||||
<input type="submit" class=" w-full bg-black text-white rounded py-2" value="Sign Up" />
|
||||
</form>
|
||||
<p class="my-8 text-xs font-medium text-center text-gray-700">
|
||||
By clicking "Sign Up" you agree to our
|
||||
<a href="#" class="text-cyan-700 hover:text-cyan-900">Terms of Service</a>
|
||||
and
|
||||
<a href="#" class="text-cyan-700 hover:text-cyan-900">Privacy Policy</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- register 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>
|
||||
108
public/componets/register/5_register.html
Normal file
108
public/componets/register/5_register.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Register 5 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
<!-- register 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 5</div>
|
||||
</section>
|
||||
<section class="bg-gray-50 dark:bg-gray-800">
|
||||
<div class="px-4 py-20 mx-auto max-w-7xl">
|
||||
<a href="/" title="Kutty Home Page" class="flex items-center justify-start sm:justify-center">
|
||||
<svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
|
||||
<path
|
||||
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
|
||||
fill="#1A202C"
|
||||
/>
|
||||
<path
|
||||
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
|
||||
fill="#9E58E9"
|
||||
/>
|
||||
<path
|
||||
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
|
||||
fill="#7629C8"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">some Text</span>
|
||||
</a>
|
||||
<div
|
||||
class="w-full px-0 pt-5 pb-6 mx-auto mt-4 mb-0 space-y-4 bg-transparent border-0 border-gray-200 rounded-lg md:bg-white dark:md:bg-gray-800 md:border sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-4/12 md:px-6 sm:mt-8 sm:mb-5"
|
||||
>
|
||||
<h1 class="mb-5 text-xl font-light text-left text-gray-800 dark:text-cyan-300 dark:text-sm dark:border-b dark:border-cyan-100 dark:pb-2 sm:text-center">Sign up to our product today for free</h1>
|
||||
<form class="pb-1 space-y-4">
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Name</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="text" placeholder="Your full name" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300 ">Your Email</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="email" placeholder="Ex. james@bond.com" inputmode="email" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300 ">Create a password</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="password" placeholder="••••••••" required />
|
||||
</label>
|
||||
<div class="flex flex-col items-start justify-between sm:items-center sm:flex-row">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" class="form-checkbox" />
|
||||
<span class="block ml-2 text-xs font-medium text-gray-700 cursor-pointer">Agree to Privacy Policy</span>
|
||||
</label>
|
||||
<input type="submit" class="w-full mt-5 bg-black rounded text-white px-2 py-1 hover:border hover:border-black hover:bg-white hover:text-black cursor-pointer sm:w-auto sm:mt-0" value="Sign up" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<p class="my-0 text-xs font-medium text-center text-gray-700 dark:text-cyan-300 sm:my-5">
|
||||
Already have an account?
|
||||
<a href="#" class="text-cyan-700 hover:text-cyan-900">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- register 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>
|
||||
449
public/componets/register/register.html
Normal file
449
public/componets/register/register.html
Normal file
@@ -0,0 +1,449 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Register </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- register 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 1 </div>
|
||||
</section>
|
||||
|
||||
<div class="flex p-1 py-12 bg-white dark:bg-gray-800 justify-center place-content-center">
|
||||
<div class="max-w-lg overflow-hidden border border-gray-200 rounded-lg">
|
||||
<form class="w-full max-w-lg">
|
||||
<div class="p-10 pb-6">
|
||||
<div class="flex flex-wrap mb-6 -mx-3">
|
||||
<div class="w-full px-3 mb-6 md:w-1/2 md:mb-0">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-first-name">
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white"
|
||||
id="grid-first-name" type="text" placeholder="Jane">
|
||||
</div>
|
||||
<div class="w-full px-3 md:w-1/2">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-last-name">
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-last-name" type="text" placeholder="Doe">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap -mx-3">
|
||||
<div class="w-full px-3 mb-6">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-email" type="email" placeholder="janedoe@example.com">
|
||||
</div>
|
||||
<div class="w-full px-3 mb-6">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-password">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-password" type="password" placeholder="***********">
|
||||
</div>
|
||||
<div class="w-full px-3 mb-6">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-number">
|
||||
Phone number
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-email" type="text" placeholder="+91 XXX XXX XXXX">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
<span class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase">Address</span>
|
||||
<textarea
|
||||
class="block w-full px-4 py-3 mt-1 mb-3 text-gray-700 bg-gray-200 border border-gray-200 rounded form-textarea focus:outline-none"
|
||||
rows="4" placeholder=""></textarea>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-wrap m-6 mb-2 -mx-3">
|
||||
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-city">
|
||||
City
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-city" type="text" placeholder="Albuquerque">
|
||||
</div>
|
||||
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-state">
|
||||
State
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select
|
||||
class="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-state">
|
||||
<option>New Mexico</option>
|
||||
<option>Missouri</option>
|
||||
<option>Texas</option>
|
||||
</select>
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
|
||||
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20">
|
||||
<path
|
||||
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
|
||||
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
||||
for="grid-zip">
|
||||
Zip
|
||||
</label>
|
||||
<input
|
||||
class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
id="grid-zip" type="text" placeholder="90210">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-5 text-center bg-gray-900">
|
||||
<div class="relative flex flex-col items-start mr-1 text-sm">
|
||||
<span class="mr-1 text-gray-500 dark:text-cyan-300">Already have an account?</span>
|
||||
<a href="#_" class="block font-medium text-indigo-600 underline">Login Here</a>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="inline-flex items-center px-6 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 dark:bg-black dark:text-cyan-300 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700">
|
||||
Register Now
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- register 1 end -->
|
||||
|
||||
|
||||
|
||||
<!-- register 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 2</div>
|
||||
</section>
|
||||
<section class="h-screen font-sans bg-[url('https://source.unsplash.com/random/?trees')] grayscale bg-cover">
|
||||
<div class="container mx-auto h-full flex flex-1 justify-center items-center">
|
||||
<div class="w-full max-w-lg">
|
||||
<div class="leading-loose">
|
||||
<form class="max-w-xl m-4 p-10 bg-white rounded shadow-xl">
|
||||
<p class="text-gray-800 font-medium">Register</p>
|
||||
<div class="">
|
||||
<label class="block text-sm text-gray-00" for="cus_name">Name</label>
|
||||
<input class="w-full px-5 py-1 text-gray-700 bg-gray-200 rounded" id="cus_name" name="cus_name" type="text" required="" placeholder="Your Name" aria-label="Name">
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="block text-sm text-gray-600" for="cus_email">Email</label>
|
||||
<input class="w-full px-5 py-4 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Your Email" aria-label="Email">
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class=" block text-sm text-gray-600" for="cus_email">Address</label>
|
||||
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Street" aria-label="Email">
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<label class="hidden text-sm block text-gray-600" for="cus_email">City</label>
|
||||
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="City" aria-label="Email">
|
||||
</div>
|
||||
<div class="inline-block mt-2 w-1/2 pr-1">
|
||||
<label class="hidden block text-sm text-gray-600" for="cus_email">Country</label>
|
||||
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Country" aria-label="Email">
|
||||
</div>
|
||||
<div class="inline-block mt-2 -mx-1 pl-1 w-1/2">
|
||||
<label class="hidden block text-sm text-gray-600" for="cus_email">Zip</label>
|
||||
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Zip" aria-label="Email">
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button class="px-4 py-1 text-white font-light tracking-wider bg-gray-900 rounded" type="submit">Register</button>
|
||||
</div>
|
||||
<a class="inline-block right-0 align-baseline font-bold text-sm text-500 hover:text-blue-800" href="login.html">
|
||||
Already have an account ?
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<!-- register 2 end -->
|
||||
|
||||
<!-- register 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 3</div>
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-1 lg:grid-cols-2 bg-white dark:bg-gray-800">
|
||||
<div class="w-full px-4 py-20 mx-auto xl:py-32 md:w-3/5 lg:w-4/5 xl:w-3/5">
|
||||
<h1 class="mb-4 -mt-3 text-2xl font-extrabold leading-snug tracking-tight text-left dark:text-emerald-300 text-gray-900 md:text-4xl">Sign up to our product today for free</h1>
|
||||
<div class="mt-8 space-y-10">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<a href="#" class="my-3 flex bg-blue-500 text-white justify-center items-center rounded py-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-1">
|
||||
<path
|
||||
d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28 c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233 c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934 C20.485,11.453,20.404,10.884,20.283,10.356z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Continue with</span> Google
|
||||
</a>
|
||||
<a href="#" class="my-3 flex bg-black text-white justify-center items-center rounded py-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-2">
|
||||
<path
|
||||
d="M19.665,16.811c-0.287,0.664-0.627,1.275-1.021,1.837c-0.537,0.767-0.978,1.297-1.316,1.592 c-0.525,0.482-1.089,0.73-1.692,0.744c-0.432,0-0.954-0.123-1.562-0.373c-0.61-0.249-1.17-0.371-1.683-0.371 c-0.537,0-1.113,0.122-1.73,0.371c-0.616,0.25-1.114,0.381-1.495,0.393c-0.577,0.025-1.154-0.229-1.729-0.764 c-0.367-0.32-0.826-0.87-1.377-1.648c-0.59-0.829-1.075-1.794-1.455-2.891c-0.407-1.187-0.611-2.335-0.611-3.447 c0-1.273,0.275-2.372,0.826-3.292c0.434-0.74,1.01-1.323,1.73-1.751C7.271,6.782,8.051,6.563,8.89,6.549 c0.46,0,1.063,0.142,1.81,0.422s1.227,0.422,1.436,0.422c0.158,0,0.689-0.167,1.593-0.498c0.853-0.307,1.573-0.434,2.163-0.384 c1.6,0.129,2.801,0.759,3.6,1.895c-1.43,0.867-2.137,2.08-2.123,3.637c0.012,1.213,0.453,2.222,1.317,3.023 c0.392,0.372,0.829,0.659,1.315,0.863C19.895,16.236,19.783,16.529,19.665,16.811L19.665,16.811z M15.998,2.38 c0,0.95-0.348,1.838-1.039,2.659c-0.836,0.976-1.846,1.541-2.941,1.452c-0.014-0.114-0.021-0.234-0.021-0.36 c0-0.913,0.396-1.889,1.103-2.688c0.352-0.404,0.8-0.741,1.343-1.009c0.542-0.264,1.054-0.41,1.536-0.435 C15.992,2.127,15.998,2.254,15.998,2.38L15.998,2.38z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only ">Continue with</span> Apple
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center border-b border-gray-200" style="line-height: 0px">
|
||||
<span class="p-2 text-xs font-semibold tracking-wide text-gray-600 uppercase bg-white" style="line-height: 0px">Or</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="mt-8 space-y-4">
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-emerald-300">Your Email</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm " type="email" placeholder="Ex. james@bond.com" inputmode="email" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-emerald-300">Your Password</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm " type="password" placeholder="••••••••" required />
|
||||
</label>
|
||||
<input type="submit" class="w-full bg-black text-white rounded py-2 " value="Register" />
|
||||
</form>
|
||||
<div class="pt-6 mt-6 text-sm font-medium text-gray-700 border-t border-gray-200 dark:text-emerald-300">
|
||||
Already have an account?
|
||||
<a href="#" class="text-emerald-700 hover:text-emerald-900">Sign Up</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-20 space-y-10 bg-gray-100 xl:py-32 md:px-40 lg:px-20 xl:px-40">
|
||||
<a href="/" title="Go to Kutty Home Page">
|
||||
<svg class="w-auto h-6 " width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
|
||||
<path
|
||||
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
|
||||
fill="#1A202C"
|
||||
/>
|
||||
<path
|
||||
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
|
||||
fill="#9E58E9"
|
||||
/>
|
||||
<path
|
||||
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
|
||||
fill="#7629C8"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only"> Home Page</span>
|
||||
</a>
|
||||
<div class="flex space-x-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-xl font-medium text-purple-700">Free account</h2>
|
||||
<p class="mt-1 text-gray-700">Create apps, connect databases and add-on services, and collaborate on your apps, for free.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-xl font-medium text-purple-700">Your app platform</h2>
|
||||
<p class="mt-1 text-gray-700">A platform for apps, with app management & instant scaling, for development and production.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-xl font-medium text-purple-700">Deploy now</h2>
|
||||
<p class="mt-1 text-gray-700">Go from code to running app in minutes. Deploy, scale, and deliver your app to the world.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-xl font-medium text-purple-700">Free account</h2>
|
||||
<p class="mt-1 text-gray-700">Create apps, connect databases and add-on services, and collaborate on your apps, for free.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- register 3 end -->
|
||||
|
||||
|
||||
<!-- register 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 4</div>
|
||||
</section>
|
||||
|
||||
<section class="px-4 py-24 dark:bg-gray-800">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="w-full mx-auto space-y-5 sm:w-8/12 md:w-6/12 lg:w-4/12 xl:w-3/12">
|
||||
<h1 class="text-4xl font-semibold text-center text-gray-900 dark:text-cyan-300">Sign up</h1>
|
||||
<div class="pb-6 space-y-2 border-b border-gray-200">
|
||||
<a href="#" class="my-3 flex bg-blue-500 text-white justify-center items-center rounded py-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-1">
|
||||
<path
|
||||
d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28 c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233 c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934 C20.485,11.453,20.404,10.884,20.283,10.356z"
|
||||
/>
|
||||
</svg>
|
||||
Continue with Google
|
||||
</a>
|
||||
<a href="#" class="my-3 flex bg-black text-white justify-center items-center rounded py-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-1">
|
||||
<path
|
||||
d="M19.665,16.811c-0.287,0.664-0.627,1.275-1.021,1.837c-0.537,0.767-0.978,1.297-1.316,1.592 c-0.525,0.482-1.089,0.73-1.692,0.744c-0.432,0-0.954-0.123-1.562-0.373c-0.61-0.249-1.17-0.371-1.683-0.371 c-0.537,0-1.113,0.122-1.73,0.371c-0.616,0.25-1.114,0.381-1.495,0.393c-0.577,0.025-1.154-0.229-1.729-0.764 c-0.367-0.32-0.826-0.87-1.377-1.648c-0.59-0.829-1.075-1.794-1.455-2.891c-0.407-1.187-0.611-2.335-0.611-3.447 c0-1.273,0.275-2.372,0.826-3.292c0.434-0.74,1.01-1.323,1.73-1.751C7.271,6.782,8.051,6.563,8.89,6.549 c0.46,0,1.063,0.142,1.81,0.422s1.227,0.422,1.436,0.422c0.158,0,0.689-0.167,1.593-0.498c0.853-0.307,1.573-0.434,2.163-0.384 c1.6,0.129,2.801,0.759,3.6,1.895c-1.43,0.867-2.137,2.08-2.123,3.637c0.012,1.213,0.453,2.222,1.317,3.023 c0.392,0.372,0.829,0.659,1.315,0.863C19.895,16.236,19.783,16.529,19.665,16.811L19.665,16.811z M15.998,2.38 c0,0.95-0.348,1.838-1.039,2.659c-0.836,0.976-1.846,1.541-2.941,1.452c-0.014-0.114-0.021-0.234-0.021-0.36 c0-0.913,0.396-1.889,1.103-2.688c0.352-0.404,0.8-0.741,1.343-1.009c0.542-0.264,1.054-0.41,1.536-0.435 C15.992,2.127,15.998,2.254,15.998,2.38L15.998,2.38z"
|
||||
/>
|
||||
</svg>
|
||||
Continue with Apple
|
||||
</a>
|
||||
</div>
|
||||
<form class="space-y-4">
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Name</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="text" placeholder="Your full name" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Your Email</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="email" placeholder="Ex. james@bond.com" inputmode="email" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Create a password</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="password" placeholder="••••••••" required />
|
||||
</label>
|
||||
<input type="submit" class=" w-full bg-black text-white rounded py-2" value="Sign Up" />
|
||||
</form>
|
||||
<p class="my-8 text-xs font-medium text-center text-gray-700">
|
||||
By clicking "Sign Up" you agree to our
|
||||
<a href="#" class="text-cyan-700 hover:text-cyan-900">Terms of Service</a>
|
||||
and
|
||||
<a href="#" class="text-cyan-700 hover:text-cyan-900">Privacy Policy</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- register 4 end -->
|
||||
|
||||
<!-- register 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Register 5</div>
|
||||
</section>
|
||||
<section class="bg-gray-50 dark:bg-gray-800">
|
||||
<div class="px-4 py-20 mx-auto max-w-7xl">
|
||||
<a href="/" title="Kutty Home Page" class="flex items-center justify-start sm:justify-center">
|
||||
<svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
|
||||
<path
|
||||
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
|
||||
fill="#1A202C"
|
||||
/>
|
||||
<path
|
||||
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
|
||||
fill="#9E58E9"
|
||||
/>
|
||||
<path
|
||||
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
|
||||
fill="#7629C8"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">some Text</span>
|
||||
</a>
|
||||
<div
|
||||
class="w-full px-0 pt-5 pb-6 mx-auto mt-4 mb-0 space-y-4 bg-transparent border-0 border-gray-200 rounded-lg md:bg-white dark:md:bg-gray-800 md:border sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-4/12 md:px-6 sm:mt-8 sm:mb-5"
|
||||
>
|
||||
<h1 class="mb-5 text-xl font-light text-left text-gray-800 dark:text-cyan-300 dark:text-sm dark:border-b dark:border-cyan-100 dark:pb-2 sm:text-center">Sign up to our product today for free</h1>
|
||||
<form class="pb-1 space-y-4">
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Name</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="text" placeholder="Your full name" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300 ">Your Email</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="email" placeholder="Ex. james@bond.com" inputmode="email" required />
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300 ">Create a password</span>
|
||||
<input class="w-full border rounded p-1 placeholder:text-sm" type="password" placeholder="••••••••" required />
|
||||
</label>
|
||||
<div class="flex flex-col items-start justify-between sm:items-center sm:flex-row">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" class="form-checkbox" />
|
||||
<span class="block ml-2 text-xs font-medium text-gray-700 cursor-pointer">Agree to Privacy Policy</span>
|
||||
</label>
|
||||
<input type="submit" class="w-full mt-5 bg-black rounded text-white px-2 py-1 hover:border hover:border-black hover:bg-white hover:text-black cursor-pointer sm:w-auto sm:mt-0" value="Sign up" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<p class="my-0 text-xs font-medium text-center text-gray-700 dark:text-cyan-300 sm:my-5">
|
||||
Already have an account?
|
||||
<a href="#" class="text-cyan-700 hover:text-cyan-900">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- register 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>
|
||||
103
public/componets/section/1_section.html
Normal file
103
public/componets/section/1_section.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Section 1 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- section 1 start -->
|
||||
<section class="section_divider" id="section_1">
|
||||
<div>Section 1</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="items-center lg:flex">
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Who I am</h2>
|
||||
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400 lg:max-w-md">
|
||||
Hi I am jane , software engineer <a class="font-bold text-blue-600 dark:text-blue-400" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
|
||||
</p>
|
||||
|
||||
<div class="flex items-center mt-6 -mx-2">
|
||||
<a class="mx-2" href="#" aria-label="Twitter">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Facebook">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Linkden">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Github">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 lg:mt-0 lg:w-1/2">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="max-w-lg">
|
||||
<img class="object-cover object-center w-full h-64 rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- section 1 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>
|
||||
142
public/componets/section/2_section.html
Normal file
142
public/componets/section/2_section.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Section 2 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- section 2 start -->
|
||||
<section class="section_divider" id="section_2">
|
||||
<div>Section 2</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="lg:flex lg:-mx-2">
|
||||
<div class="space-y-3 lg:w-1/5 lg:px-2 lg:space-y-4">
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Jackets & Coats</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Hoodies</a>
|
||||
<a href="#" class="block font-medium text-blue-600 dark:text-blue-500 hover:underline">T-shirts & Vests</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Shirts</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Blazers & Suits</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Jeans</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Trousers</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Shorts</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Underwear</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 lg:mt-0 lg:px-2 lg:w-4/5 ">
|
||||
<div class="flex items-center justify-between text-sm tracking-widest uppercase ">
|
||||
<p class="text-gray-500 dark:text-gray-300">6 Items</p>
|
||||
<div class="flex items-center">
|
||||
<p class="text-gray-500 dark:text-gray-300">Sort</p>
|
||||
<select class="font-medium text-gray-700 bg-transparent dark:text-gray-500 focus:outline-none">
|
||||
<option value="#">Recommended</option>
|
||||
<option value="#">Size</option>
|
||||
<option value="#">Price</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
|
||||
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" alt="T-Shirt">
|
||||
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200">Printed T-shirt</h4>
|
||||
<p class="text-blue-500">$12.55</p>
|
||||
|
||||
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
</svg>
|
||||
<span class="mx-1">Add to cart</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
|
||||
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1620799139507-2a76f79a2f4d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=966&q=80" alt="T-Shirt">
|
||||
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200"> Slub jersey T-shirt</h4>
|
||||
<p class="text-blue-500">$18.70</p>
|
||||
|
||||
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
</svg>
|
||||
<span class="mx-1">Add to cart</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
|
||||
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1603320409990-02d834987237?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="T-Shirt">
|
||||
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200">T-shirt with a motif</h4>
|
||||
<p class="text-blue-500">$16.55</p>
|
||||
|
||||
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
</svg>
|
||||
<span class="mx-1">Add to cart</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
|
||||
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1603320410149-db26b12d5c2b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" alt="T-Shirt">
|
||||
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200">Art T-shirt</h4>
|
||||
<p class="text-blue-500">$12.55</p>
|
||||
|
||||
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
</svg>
|
||||
<span class="mx-1">Add to cart</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- section 2 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>
|
||||
73
public/componets/section/3_section.html
Normal file
73
public/componets/section/3_section.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Section 3 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- section 3 start -->
|
||||
<section class="section_divider" id="section_3">
|
||||
<div>Section 3 </div>
|
||||
</section>
|
||||
|
||||
<section class="bg-gray-100 dark:bg-gray-900 lg:py-12 lg:flex lg:justify-center">
|
||||
<div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
|
||||
<div class="lg:w-1/2">
|
||||
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xl px-6 py-12 lg:max-w-5xl lg:w-1/2">
|
||||
<h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-blue-600 dark:text-blue-400">Idea</span></h2>
|
||||
<p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
|
||||
|
||||
<div class="mt-8">
|
||||
<a href="#" class="px-5 py-2 font-semibold text-gray-100 transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Start Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- section 3 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
48
public/componets/section/4_section.html
Normal file
48
public/componets/section/4_section.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Section 4 </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');
|
||||
|
||||
}
|
||||
})
|
||||
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>
|
||||
220
public/componets/section/section.html
Normal file
220
public/componets/section/section.html
Normal file
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Section </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- section 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Section 1</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="items-center lg:flex">
|
||||
<div class="lg:w-1/2">
|
||||
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Who I am</h2>
|
||||
|
||||
<p class="mt-4 text-gray-500 dark:text-gray-400 lg:max-w-md">
|
||||
Hi I am jane , software engineer <a class="font-bold text-blue-600 dark:text-blue-400" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
|
||||
</p>
|
||||
|
||||
<div class="flex items-center mt-6 -mx-2">
|
||||
<a class="mx-2" href="#" aria-label="Twitter">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Facebook">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Linkden">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#" aria-label="Github">
|
||||
<svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 lg:mt-0 lg:w-1/2">
|
||||
<div class="flex items-center justify-center lg:justify-end">
|
||||
<div class="max-w-lg">
|
||||
<img class="object-cover object-center w-full h-64 rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- section 1 end -->
|
||||
|
||||
<!-- section 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Section 2</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
<div class="lg:flex lg:-mx-2">
|
||||
<div class="space-y-3 lg:w-1/5 lg:px-2 lg:space-y-4">
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Jackets & Coats</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Hoodies</a>
|
||||
<a href="#" class="block font-medium text-blue-600 dark:text-blue-500 hover:underline">T-shirts & Vests</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Shirts</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Blazers & Suits</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Jeans</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Trousers</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Shorts</a>
|
||||
<a href="#" class="block font-medium text-gray-500 dark:text-gray-300 hover:underline">Underwear</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 lg:mt-0 lg:px-2 lg:w-4/5 ">
|
||||
<div class="flex items-center justify-between text-sm tracking-widest uppercase ">
|
||||
<p class="text-gray-500 dark:text-gray-300">6 Items</p>
|
||||
<div class="flex items-center">
|
||||
<p class="text-gray-500 dark:text-gray-300">Sort</p>
|
||||
<select class="font-medium text-gray-700 bg-transparent dark:text-gray-500 focus:outline-none">
|
||||
<option value="#">Recommended</option>
|
||||
<option value="#">Size</option>
|
||||
<option value="#">Price</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
|
||||
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1583743814966-8936f5b7be1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" alt="T-Shirt">
|
||||
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200">Printed T-shirt</h4>
|
||||
<p class="text-blue-500">$12.55</p>
|
||||
|
||||
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
</svg>
|
||||
<span class="mx-1">Add to cart</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
|
||||
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1620799139507-2a76f79a2f4d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=966&q=80" alt="T-Shirt">
|
||||
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200"> Slub jersey T-shirt</h4>
|
||||
<p class="text-blue-500">$18.70</p>
|
||||
|
||||
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
</svg>
|
||||
<span class="mx-1">Add to cart</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
|
||||
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1603320409990-02d834987237?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="T-Shirt">
|
||||
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200">T-shirt with a motif</h4>
|
||||
<p class="text-blue-500">$16.55</p>
|
||||
|
||||
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
</svg>
|
||||
<span class="mx-1">Add to cart</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center w-full max-w-lg mx-auto">
|
||||
<img class="object-cover w-full rounded-md h-72 xl:h-80" src="https://images.unsplash.com/photo-1603320410149-db26b12d5c2b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80" alt="T-Shirt">
|
||||
<h4 class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-200">Art T-shirt</h4>
|
||||
<p class="text-blue-500">$12.55</p>
|
||||
|
||||
<button class="flex items-center justify-center w-full px-2 py-2 mt-4 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-gray-800 rounded-md hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mx-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
</svg>
|
||||
<span class="mx-1">Add to cart</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- section 2 end -->
|
||||
|
||||
<!-- section 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Section 3 </div>
|
||||
</section>
|
||||
|
||||
<section class="bg-gray-100 dark:bg-gray-900 lg:py-12 lg:flex lg:justify-center">
|
||||
<div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
|
||||
<div class="lg:w-1/2">
|
||||
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-xl px-6 py-12 lg:max-w-5xl lg:w-1/2">
|
||||
<h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-blue-600 dark:text-blue-400">Idea</span></h2>
|
||||
<p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
|
||||
|
||||
<div class="mt-8">
|
||||
<a href="#" class="px-5 py-2 font-semibold text-gray-100 transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Start Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- section 3 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
132
public/componets/sidebar/1_sidebar.html
Normal file
132
public/componets/sidebar/1_sidebar.html
Normal file
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Sidebar 1 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- sidebar 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 1</div>
|
||||
</section>
|
||||
|
||||
<div class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
|
||||
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<div class="relative mt-6">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring" placeholder="Search"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between flex-1 mt-6">
|
||||
<nav>
|
||||
<a class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Dashboard</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Accounts</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
|
||||
<hr class="my-6 border-gray-200 dark:border-gray-600" />
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center px-4 -mx-2">
|
||||
<img class="object-cover mx-2 rounded-full h-9 w-9" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar"/>
|
||||
<h4 class="mx-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">John Doe</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar 1 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>
|
||||
104
public/componets/sidebar/2_sidebar.html
Normal file
104
public/componets/sidebar/2_sidebar.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Sidebar 2 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- sidebar 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 2</div>
|
||||
</section>
|
||||
|
||||
<div class="flex flex-col w-64 h-screen py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
|
||||
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<div class="flex flex-col items-center mt-6 -mx-2">
|
||||
<img class="object-cover w-24 h-24 mx-2 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
|
||||
<h4 class="mx-2 mt-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">John Doe</h4>
|
||||
<p class="mx-2 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:underline">john@example.com</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between flex-1 mt-6">
|
||||
<nav>
|
||||
<a class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-200" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Dashboard</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Accounts</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar 2 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>
|
||||
96
public/componets/sidebar/3_sidebar.html
Normal file
96
public/componets/sidebar/3_sidebar.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Sidebar 3 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- sidebar 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 3</div>
|
||||
</section>
|
||||
<aside class="w-full p-6 sm:w-60 dark:bg-gray-900 dark:text-gray-100">
|
||||
<nav class="space-y-8 text-sm">
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-sm font-semibold tracking-widest uppercase dark:text-gray-400">Getting Started</h2>
|
||||
<div class="flex flex-col space-y-1">
|
||||
<a rel="noopener noreferrer" href="#">Installation</a>
|
||||
<a rel="noopener noreferrer" href="#">Plugins</a>
|
||||
<a rel="noopener noreferrer" href="#">Migrations</a>
|
||||
<a rel="noopener noreferrer" href="#">Appearance</a>
|
||||
<a rel="noopener noreferrer" href="#">Mamba UI</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-sm font-semibold tracking-widest uppercase dark:text-gray-400">Dashboard</h2>
|
||||
<div class="flex flex-col space-y-1">
|
||||
<a rel="noopener noreferrer" href="#">Header</a>
|
||||
<a rel="noopener noreferrer" href="#">Drawer</a>
|
||||
<a rel="noopener noreferrer" href="#">Page Title</a>
|
||||
<a rel="noopener noreferrer" href="#">Menus</a>
|
||||
<a rel="noopener noreferrer" href="#">Sidebar</a>
|
||||
<a rel="noopener noreferrer" href="#">Footer</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-sm font-semibold tracking-widest uppercase dark:text-gray-400">Pages</h2>
|
||||
<div class="flex flex-col space-y-1">
|
||||
<a rel="noopener noreferrer" href="#">Homepage</a>
|
||||
<a rel="noopener noreferrer" href="#">Users</a>
|
||||
<a rel="noopener noreferrer" href="#">Tools</a>
|
||||
<a rel="noopener noreferrer" href="#">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-sm font-semibold tracking-widest uppercase dark:text-gray-400">Misc</h2>
|
||||
<div class="flex flex-col space-y-1">
|
||||
<a rel="noopener noreferrer" href="#">Tutorials</a>
|
||||
<a rel="noopener noreferrer" href="#">Changelog</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- sidebar 3 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
133
public/componets/sidebar/4_sidebar.html
Normal file
133
public/componets/sidebar/4_sidebar.html
Normal file
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Sidebar 4 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- sidebar 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 4</div>
|
||||
</section>
|
||||
<div class="h-full p-3 space-y-2 w-60 dark:bg-gray-900 dark:text-gray-100">
|
||||
<div class="flex items-center p-2 space-x-4">
|
||||
<img src="https://source.unsplash.com/100x100/?portrait" alt="" class="w-12 h-12 rounded-full dark:bg-gray-500">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Leroy Jenkins</h2>
|
||||
<span class="flex items-center space-x-1">
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs hover:underline dark:text-gray-400">View profile</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-700">
|
||||
<ul class="pt-2 pb-4 space-y-1 text-sm">
|
||||
<li class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M68.983,382.642l171.35,98.928a32.082,32.082,0,0,0,32,0l171.352-98.929a32.093,32.093,0,0,0,16-27.713V157.071a32.092,32.092,0,0,0-16-27.713L272.334,30.429a32.086,32.086,0,0,0-32,0L68.983,129.358a32.09,32.09,0,0,0-16,27.713V354.929A32.09,32.09,0,0,0,68.983,382.642ZM272.333,67.38l155.351,89.691V334.449L272.333,246.642ZM256.282,274.327l157.155,88.828-157.1,90.7L99.179,363.125ZM84.983,157.071,240.333,67.38v179.2L84.983,334.39Z"></path>
|
||||
</svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
||||
</svg>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M448.205,392.507c30.519-27.2,47.8-63.455,47.8-101.078,0-39.984-18.718-77.378-52.707-105.3C410.218,158.963,366.432,144,320,144s-90.218,14.963-123.293,42.131C162.718,214.051,144,251.445,144,291.429s18.718,77.378,52.707,105.3c33.075,27.168,76.861,42.13,123.293,42.13,6.187,0,12.412-.273,18.585-.816l10.546,9.141A199.849,199.849,0,0,0,480,496h16V461.943l-4.686-4.685A199.17,199.17,0,0,1,448.205,392.507ZM370.089,423l-21.161-18.341-7.056.865A180.275,180.275,0,0,1,320,406.857c-79.4,0-144-51.781-144-115.428S240.6,176,320,176s144,51.781,144,115.429c0,31.71-15.82,61.314-44.546,83.358l-9.215,7.071,4.252,12.035a231.287,231.287,0,0,0,37.882,67.817A167.839,167.839,0,0,1,370.089,423Z"></path>
|
||||
<path d="M60.185,317.476a220.491,220.491,0,0,0,34.808-63.023l4.22-11.975-9.207-7.066C62.918,214.626,48,186.728,48,156.857,48,96.833,109.009,48,184,48c55.168,0,102.767,26.43,124.077,64.3,3.957-.192,7.931-.3,11.923-.3q12.027,0,23.834,1.167c-8.235-21.335-22.537-40.811-42.2-56.961C270.072,30.279,228.3,16,184,16S97.928,30.279,66.364,56.206C33.886,82.885,16,118.63,16,156.857c0,35.8,16.352,70.295,45.25,96.243a188.4,188.4,0,0,1-40.563,60.729L16,318.515V352H32a190.643,190.643,0,0,0,85.231-20.125,157.3,157.3,0,0,1-5.071-33.645A158.729,158.729,0,0,1,60.185,317.476Z"></path>
|
||||
</svg>
|
||||
<span>Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M203.247,386.414,208,381.185V355.4L130.125,191H93.875L16,355.4v27.042l4.234,4.595a124.347,124.347,0,0,0,91.224,39.982h.42A124.343,124.343,0,0,0,203.247,386.414ZM176,368.608a90.924,90.924,0,0,1-64.231,26.413h-.33A90.907,90.907,0,0,1,48,369.667V362.6l64-135.112L176,362.6Z"></path>
|
||||
<path d="M418.125,191h-36.25L304,355.4v27.042l4.234,4.595a124.347,124.347,0,0,0,91.224,39.982h.42a124.343,124.343,0,0,0,91.369-40.607L496,381.185V355.4ZM464,368.608a90.924,90.924,0,0,1-64.231,26.413h-.33A90.907,90.907,0,0,1,336,369.667V362.6l64-135.112L464,362.6Z"></path>
|
||||
<path d="M272,196.659A56.223,56.223,0,0,0,309.659,159H416V127H309.659a55.991,55.991,0,0,0-107.318,0H96v32H202.341A56.223,56.223,0,0,0,240,196.659V463H136v32H376V463H272ZM232,143a24,24,0,1,1,24,24A24,24,0,0,1,232,143Z"></path>
|
||||
</svg>
|
||||
<span>Orders</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M453.122,79.012a128,128,0,0,0-181.087.068l-15.511,15.7L241.142,79.114l-.1-.1a128,128,0,0,0-181.02,0l-6.91,6.91a128,128,0,0,0,0,181.019L235.485,449.314l20.595,21.578.491-.492.533.533L276.4,450.574,460.032,266.94a128.147,128.147,0,0,0,0-181.019ZM437.4,244.313,256.571,425.146,75.738,244.313a96,96,0,0,1,0-135.764l6.911-6.91a96,96,0,0,1,135.713-.051l38.093,38.787,38.274-38.736a96,96,0,0,1,135.765,0l6.91,6.909A96.11,96.11,0,0,1,437.4,244.313Z"></path>
|
||||
</svg>
|
||||
<span>Wishlist</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="pt-4 pb-2 space-y-1 text-sm">
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M245.151,168a88,88,0,1,0,88,88A88.1,88.1,0,0,0,245.151,168Zm0,144a56,56,0,1,1,56-56A56.063,56.063,0,0,1,245.151,312Z"></path>
|
||||
<path d="M464.7,322.319l-31.77-26.153a193.081,193.081,0,0,0,0-80.332l31.77-26.153a19.941,19.941,0,0,0,4.606-25.439l-32.612-56.483a19.936,19.936,0,0,0-24.337-8.73l-38.561,14.447a192.038,192.038,0,0,0-69.54-40.192L297.49,32.713A19.936,19.936,0,0,0,277.762,16H212.54a19.937,19.937,0,0,0-19.728,16.712L186.05,73.284a192.03,192.03,0,0,0-69.54,40.192L77.945,99.027a19.937,19.937,0,0,0-24.334,8.731L21,164.245a19.94,19.94,0,0,0,4.61,25.438l31.767,26.151a193.081,193.081,0,0,0,0,80.332l-31.77,26.153A19.942,19.942,0,0,0,21,347.758l32.612,56.483a19.937,19.937,0,0,0,24.337,8.73l38.562-14.447a192.03,192.03,0,0,0,69.54,40.192l6.762,40.571A19.937,19.937,0,0,0,212.54,496h65.222a19.936,19.936,0,0,0,19.728-16.712l6.763-40.572a192.038,192.038,0,0,0,69.54-40.192l38.564,14.449a19.938,19.938,0,0,0,24.334-8.731L469.3,347.755A19.939,19.939,0,0,0,464.7,322.319Zm-50.636,57.12-48.109-18.024-7.285,7.334a159.955,159.955,0,0,1-72.625,41.973l-10,2.636L267.6,464h-44.89l-8.442-50.642-10-2.636a159.955,159.955,0,0,1-72.625-41.973l-7.285-7.334L76.241,379.439,53.8,340.562l39.629-32.624-2.7-9.973a160.9,160.9,0,0,1,0-83.93l2.7-9.972L53.8,171.439l22.446-38.878,48.109,18.024,7.285-7.334a159.955,159.955,0,0,1,72.625-41.973l10-2.636L222.706,48H267.6l8.442,50.642,10,2.636a159.955,159.955,0,0,1,72.625,41.973l7.285,7.334,48.109-18.024,22.447,38.877-39.629,32.625,2.7,9.972a160.9,160.9,0,0,1,0,83.93l-2.7,9.973,39.629,32.623Z"></path>
|
||||
</svg>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M440,424V88H352V13.005L88,58.522V424H16v32h86.9L352,490.358V120h56V456h88V424ZM320,453.642,120,426.056V85.478L320,51Z"></path>
|
||||
<rect width="32" height="64" x="256" y="232"></rect>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar 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>
|
||||
152
public/componets/sidebar/5_sidebar.html
Normal file
152
public/componets/sidebar/5_sidebar.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Sidebar 5 </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- sidebar 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 5</div>
|
||||
</section>
|
||||
<div class="flex flex-col h-full p-3 w-60 dark:bg-gray-900 dark:text-gray-100">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2>Dashboard</h2>
|
||||
<button class="p-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-100">
|
||||
<rect width="352" height="32" x="80" y="96"></rect>
|
||||
<rect width="352" height="32" x="80" y="240"></rect>
|
||||
<rect width="352" height="32" x="80" y="384"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center py-4">
|
||||
<button type="submit" class="p-2 focus:outline-none focus:ring">
|
||||
<svg fill="currentColor" viewBox="0 0 512 512" class="w-5 h-5 dark:text-gray-400">
|
||||
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<input type="search" name="Search" placeholder="Search..." class="w-full py-2 pl-10 text-sm dark:border-transparent rounded-md focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<ul class="pt-2 pb-4 space-y-1 text-sm">
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M469.666,216.45,271.078,33.749a34,34,0,0,0-47.062.98L41.373,217.373,32,226.745V496H208V328h96V496H480V225.958ZM248.038,56.771c.282,0,.108.061-.013.18C247.9,56.832,247.756,56.771,248.038,56.771ZM448,464H336V328a32,32,0,0,0-32-32H208a32,32,0,0,0-32,32V464H64V240L248.038,57.356c.013-.012.014-.023.024-.035L448,240Z"></path>
|
||||
</svg>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
||||
</svg>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M448.205,392.507c30.519-27.2,47.8-63.455,47.8-101.078,0-39.984-18.718-77.378-52.707-105.3C410.218,158.963,366.432,144,320,144s-90.218,14.963-123.293,42.131C162.718,214.051,144,251.445,144,291.429s18.718,77.378,52.707,105.3c33.075,27.168,76.861,42.13,123.293,42.13,6.187,0,12.412-.273,18.585-.816l10.546,9.141A199.849,199.849,0,0,0,480,496h16V461.943l-4.686-4.685A199.17,199.17,0,0,1,448.205,392.507ZM370.089,423l-21.161-18.341-7.056.865A180.275,180.275,0,0,1,320,406.857c-79.4,0-144-51.781-144-115.428S240.6,176,320,176s144,51.781,144,115.429c0,31.71-15.82,61.314-44.546,83.358l-9.215,7.071,4.252,12.035a231.287,231.287,0,0,0,37.882,67.817A167.839,167.839,0,0,1,370.089,423Z"></path>
|
||||
<path d="M60.185,317.476a220.491,220.491,0,0,0,34.808-63.023l4.22-11.975-9.207-7.066C62.918,214.626,48,186.728,48,156.857,48,96.833,109.009,48,184,48c55.168,0,102.767,26.43,124.077,64.3,3.957-.192,7.931-.3,11.923-.3q12.027,0,23.834,1.167c-8.235-21.335-22.537-40.811-42.2-56.961C270.072,30.279,228.3,16,184,16S97.928,30.279,66.364,56.206C33.886,82.885,16,118.63,16,156.857c0,35.8,16.352,70.295,45.25,96.243a188.4,188.4,0,0,1-40.563,60.729L16,318.515V352H32a190.643,190.643,0,0,0,85.231-20.125,157.3,157.3,0,0,1-5.071-33.645A158.729,158.729,0,0,1,60.185,317.476Z"></path>
|
||||
</svg>
|
||||
<span>Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M203.247,386.414,208,381.185V355.4L130.125,191H93.875L16,355.4v27.042l4.234,4.595a124.347,124.347,0,0,0,91.224,39.982h.42A124.343,124.343,0,0,0,203.247,386.414ZM176,368.608a90.924,90.924,0,0,1-64.231,26.413h-.33A90.907,90.907,0,0,1,48,369.667V362.6l64-135.112L176,362.6Z"></path>
|
||||
<path d="M418.125,191h-36.25L304,355.4v27.042l4.234,4.595a124.347,124.347,0,0,0,91.224,39.982h.42a124.343,124.343,0,0,0,91.369-40.607L496,381.185V355.4ZM464,368.608a90.924,90.924,0,0,1-64.231,26.413h-.33A90.907,90.907,0,0,1,336,369.667V362.6l64-135.112L464,362.6Z"></path>
|
||||
<path d="M272,196.659A56.223,56.223,0,0,0,309.659,159H416V127H309.659a55.991,55.991,0,0,0-107.318,0H96v32H202.341A56.223,56.223,0,0,0,240,196.659V463H136v32H376V463H272ZM232,143a24,24,0,1,1,24,24A24,24,0,0,1,232,143Z"></path>
|
||||
</svg>
|
||||
<span>Orders</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm dark:bg-gray-800 dark:text-gray-50">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M453.122,79.012a128,128,0,0,0-181.087.068l-15.511,15.7L241.142,79.114l-.1-.1a128,128,0,0,0-181.02,0l-6.91,6.91a128,128,0,0,0,0,181.019L235.485,449.314l20.595,21.578.491-.492.533.533L276.4,450.574,460.032,266.94a128.147,128.147,0,0,0,0-181.019ZM437.4,244.313,256.571,425.146,75.738,244.313a96,96,0,0,1,0-135.764l6.911-6.91a96,96,0,0,1,135.713-.051l38.093,38.787,38.274-38.736a96,96,0,0,1,135.765,0l6.91,6.909A96.11,96.11,0,0,1,437.4,244.313Z"></path>
|
||||
</svg>
|
||||
<span>Wishlist</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M245.151,168a88,88,0,1,0,88,88A88.1,88.1,0,0,0,245.151,168Zm0,144a56,56,0,1,1,56-56A56.063,56.063,0,0,1,245.151,312Z"></path>
|
||||
<path d="M464.7,322.319l-31.77-26.153a193.081,193.081,0,0,0,0-80.332l31.77-26.153a19.941,19.941,0,0,0,4.606-25.439l-32.612-56.483a19.936,19.936,0,0,0-24.337-8.73l-38.561,14.447a192.038,192.038,0,0,0-69.54-40.192L297.49,32.713A19.936,19.936,0,0,0,277.762,16H212.54a19.937,19.937,0,0,0-19.728,16.712L186.05,73.284a192.03,192.03,0,0,0-69.54,40.192L77.945,99.027a19.937,19.937,0,0,0-24.334,8.731L21,164.245a19.94,19.94,0,0,0,4.61,25.438l31.767,26.151a193.081,193.081,0,0,0,0,80.332l-31.77,26.153A19.942,19.942,0,0,0,21,347.758l32.612,56.483a19.937,19.937,0,0,0,24.337,8.73l38.562-14.447a192.03,192.03,0,0,0,69.54,40.192l6.762,40.571A19.937,19.937,0,0,0,212.54,496h65.222a19.936,19.936,0,0,0,19.728-16.712l6.763-40.572a192.038,192.038,0,0,0,69.54-40.192l38.564,14.449a19.938,19.938,0,0,0,24.334-8.731L469.3,347.755A19.939,19.939,0,0,0,464.7,322.319Zm-50.636,57.12-48.109-18.024-7.285,7.334a159.955,159.955,0,0,1-72.625,41.973l-10,2.636L267.6,464h-44.89l-8.442-50.642-10-2.636a159.955,159.955,0,0,1-72.625-41.973l-7.285-7.334L76.241,379.439,53.8,340.562l39.629-32.624-2.7-9.973a160.9,160.9,0,0,1,0-83.93l2.7-9.972L53.8,171.439l22.446-38.878,48.109,18.024,7.285-7.334a159.955,159.955,0,0,1,72.625-41.973l10-2.636L222.706,48H267.6l8.442,50.642,10,2.636a159.955,159.955,0,0,1,72.625,41.973l7.285,7.334,48.109-18.024,22.447,38.877-39.629,32.625,2.7,9.972a160.9,160.9,0,0,1,0,83.93l-2.7,9.973,39.629,32.623Z"></path>
|
||||
</svg>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M440,424V88H352V13.005L88,58.522V424H16v32h86.9L352,490.358V120h56V456h88V424ZM320,453.642,120,426.056V85.478L320,51Z"></path>
|
||||
<rect width="32" height="64" x="256" y="232"></rect>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center p-2 mt-12 space-x-4 justify-self-end">
|
||||
<img src="https://source.unsplash.com/100x100/?portrait" alt="" class="w-12 h-12 rounded-lg dark:bg-gray-500">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Leroy Jenkins</h2>
|
||||
<span class="flex items-center space-x-1">
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs hover:underline dark:text-gray-400">View profile</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- sidebar 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>
|
||||
423
public/componets/sidebar/sidebar.html
Normal file
423
public/componets/sidebar/sidebar.html
Normal file
@@ -0,0 +1,423 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Sidebar </title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- sidebar 1 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 1</div>
|
||||
</section>
|
||||
|
||||
<div class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
|
||||
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<div class="relative mt-6">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring" placeholder="Search"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between flex-1 mt-6">
|
||||
<nav>
|
||||
<a class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Dashboard</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Accounts</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
|
||||
<hr class="my-6 border-gray-200 dark:border-gray-600" />
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center px-4 -mx-2">
|
||||
<img class="object-cover mx-2 rounded-full h-9 w-9" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar"/>
|
||||
<h4 class="mx-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">John Doe</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar 1 end -->
|
||||
|
||||
|
||||
<!-- sidebar 2 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 2</div>
|
||||
</section>
|
||||
|
||||
<div class="flex flex-col w-64 h-screen py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
|
||||
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Brand</h2>
|
||||
|
||||
<div class="flex flex-col items-center mt-6 -mx-2">
|
||||
<img class="object-cover w-24 h-24 mx-2 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
|
||||
<h4 class="mx-2 mt-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">John Doe</h4>
|
||||
<p class="mx-2 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:underline">john@example.com</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-between flex-1 mt-6">
|
||||
<nav>
|
||||
<a class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-200" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Dashboard</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Accounts</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Tickets</span>
|
||||
</a>
|
||||
|
||||
<a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
|
||||
<span class="mx-4 font-medium">Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar 2 end -->
|
||||
|
||||
|
||||
<!-- sidebar 3 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 3</div>
|
||||
</section>
|
||||
<aside class="w-full p-6 sm:w-60 dark:bg-gray-900 dark:text-gray-100">
|
||||
<nav class="space-y-8 text-sm">
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-sm font-semibold tracking-widest uppercase dark:text-gray-400">Getting Started</h2>
|
||||
<div class="flex flex-col space-y-1">
|
||||
<a rel="noopener noreferrer" href="#">Installation</a>
|
||||
<a rel="noopener noreferrer" href="#">Plugins</a>
|
||||
<a rel="noopener noreferrer" href="#">Migrations</a>
|
||||
<a rel="noopener noreferrer" href="#">Appearance</a>
|
||||
<a rel="noopener noreferrer" href="#">Mamba UI</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-sm font-semibold tracking-widest uppercase dark:text-gray-400">Dashboard</h2>
|
||||
<div class="flex flex-col space-y-1">
|
||||
<a rel="noopener noreferrer" href="#">Header</a>
|
||||
<a rel="noopener noreferrer" href="#">Drawer</a>
|
||||
<a rel="noopener noreferrer" href="#">Page Title</a>
|
||||
<a rel="noopener noreferrer" href="#">Menus</a>
|
||||
<a rel="noopener noreferrer" href="#">Sidebar</a>
|
||||
<a rel="noopener noreferrer" href="#">Footer</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-sm font-semibold tracking-widest uppercase dark:text-gray-400">Pages</h2>
|
||||
<div class="flex flex-col space-y-1">
|
||||
<a rel="noopener noreferrer" href="#">Homepage</a>
|
||||
<a rel="noopener noreferrer" href="#">Users</a>
|
||||
<a rel="noopener noreferrer" href="#">Tools</a>
|
||||
<a rel="noopener noreferrer" href="#">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h2 class="text-sm font-semibold tracking-widest uppercase dark:text-gray-400">Misc</h2>
|
||||
<div class="flex flex-col space-y-1">
|
||||
<a rel="noopener noreferrer" href="#">Tutorials</a>
|
||||
<a rel="noopener noreferrer" href="#">Changelog</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- sidebar 3 end -->
|
||||
|
||||
<!-- sidebar 4 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 4</div>
|
||||
</section>
|
||||
<div class="h-full p-3 space-y-2 w-60 dark:bg-gray-900 dark:text-gray-100">
|
||||
<div class="flex items-center p-2 space-x-4">
|
||||
<img src="https://source.unsplash.com/100x100/?portrait" alt="" class="w-12 h-12 rounded-full dark:bg-gray-500">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Leroy Jenkins</h2>
|
||||
<span class="flex items-center space-x-1">
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs hover:underline dark:text-gray-400">View profile</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divide-y divide-gray-700">
|
||||
<ul class="pt-2 pb-4 space-y-1 text-sm">
|
||||
<li class="dark:bg-gray-800 dark:text-gray-50">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M68.983,382.642l171.35,98.928a32.082,32.082,0,0,0,32,0l171.352-98.929a32.093,32.093,0,0,0,16-27.713V157.071a32.092,32.092,0,0,0-16-27.713L272.334,30.429a32.086,32.086,0,0,0-32,0L68.983,129.358a32.09,32.09,0,0,0-16,27.713V354.929A32.09,32.09,0,0,0,68.983,382.642ZM272.333,67.38l155.351,89.691V334.449L272.333,246.642ZM256.282,274.327l157.155,88.828-157.1,90.7L99.179,363.125ZM84.983,157.071,240.333,67.38v179.2L84.983,334.39Z"></path>
|
||||
</svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
||||
</svg>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M448.205,392.507c30.519-27.2,47.8-63.455,47.8-101.078,0-39.984-18.718-77.378-52.707-105.3C410.218,158.963,366.432,144,320,144s-90.218,14.963-123.293,42.131C162.718,214.051,144,251.445,144,291.429s18.718,77.378,52.707,105.3c33.075,27.168,76.861,42.13,123.293,42.13,6.187,0,12.412-.273,18.585-.816l10.546,9.141A199.849,199.849,0,0,0,480,496h16V461.943l-4.686-4.685A199.17,199.17,0,0,1,448.205,392.507ZM370.089,423l-21.161-18.341-7.056.865A180.275,180.275,0,0,1,320,406.857c-79.4,0-144-51.781-144-115.428S240.6,176,320,176s144,51.781,144,115.429c0,31.71-15.82,61.314-44.546,83.358l-9.215,7.071,4.252,12.035a231.287,231.287,0,0,0,37.882,67.817A167.839,167.839,0,0,1,370.089,423Z"></path>
|
||||
<path d="M60.185,317.476a220.491,220.491,0,0,0,34.808-63.023l4.22-11.975-9.207-7.066C62.918,214.626,48,186.728,48,156.857,48,96.833,109.009,48,184,48c55.168,0,102.767,26.43,124.077,64.3,3.957-.192,7.931-.3,11.923-.3q12.027,0,23.834,1.167c-8.235-21.335-22.537-40.811-42.2-56.961C270.072,30.279,228.3,16,184,16S97.928,30.279,66.364,56.206C33.886,82.885,16,118.63,16,156.857c0,35.8,16.352,70.295,45.25,96.243a188.4,188.4,0,0,1-40.563,60.729L16,318.515V352H32a190.643,190.643,0,0,0,85.231-20.125,157.3,157.3,0,0,1-5.071-33.645A158.729,158.729,0,0,1,60.185,317.476Z"></path>
|
||||
</svg>
|
||||
<span>Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M203.247,386.414,208,381.185V355.4L130.125,191H93.875L16,355.4v27.042l4.234,4.595a124.347,124.347,0,0,0,91.224,39.982h.42A124.343,124.343,0,0,0,203.247,386.414ZM176,368.608a90.924,90.924,0,0,1-64.231,26.413h-.33A90.907,90.907,0,0,1,48,369.667V362.6l64-135.112L176,362.6Z"></path>
|
||||
<path d="M418.125,191h-36.25L304,355.4v27.042l4.234,4.595a124.347,124.347,0,0,0,91.224,39.982h.42a124.343,124.343,0,0,0,91.369-40.607L496,381.185V355.4ZM464,368.608a90.924,90.924,0,0,1-64.231,26.413h-.33A90.907,90.907,0,0,1,336,369.667V362.6l64-135.112L464,362.6Z"></path>
|
||||
<path d="M272,196.659A56.223,56.223,0,0,0,309.659,159H416V127H309.659a55.991,55.991,0,0,0-107.318,0H96v32H202.341A56.223,56.223,0,0,0,240,196.659V463H136v32H376V463H272ZM232,143a24,24,0,1,1,24,24A24,24,0,0,1,232,143Z"></path>
|
||||
</svg>
|
||||
<span>Orders</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M453.122,79.012a128,128,0,0,0-181.087.068l-15.511,15.7L241.142,79.114l-.1-.1a128,128,0,0,0-181.02,0l-6.91,6.91a128,128,0,0,0,0,181.019L235.485,449.314l20.595,21.578.491-.492.533.533L276.4,450.574,460.032,266.94a128.147,128.147,0,0,0,0-181.019ZM437.4,244.313,256.571,425.146,75.738,244.313a96,96,0,0,1,0-135.764l6.911-6.91a96,96,0,0,1,135.713-.051l38.093,38.787,38.274-38.736a96,96,0,0,1,135.765,0l6.91,6.909A96.11,96.11,0,0,1,437.4,244.313Z"></path>
|
||||
</svg>
|
||||
<span>Wishlist</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="pt-4 pb-2 space-y-1 text-sm">
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M245.151,168a88,88,0,1,0,88,88A88.1,88.1,0,0,0,245.151,168Zm0,144a56,56,0,1,1,56-56A56.063,56.063,0,0,1,245.151,312Z"></path>
|
||||
<path d="M464.7,322.319l-31.77-26.153a193.081,193.081,0,0,0,0-80.332l31.77-26.153a19.941,19.941,0,0,0,4.606-25.439l-32.612-56.483a19.936,19.936,0,0,0-24.337-8.73l-38.561,14.447a192.038,192.038,0,0,0-69.54-40.192L297.49,32.713A19.936,19.936,0,0,0,277.762,16H212.54a19.937,19.937,0,0,0-19.728,16.712L186.05,73.284a192.03,192.03,0,0,0-69.54,40.192L77.945,99.027a19.937,19.937,0,0,0-24.334,8.731L21,164.245a19.94,19.94,0,0,0,4.61,25.438l31.767,26.151a193.081,193.081,0,0,0,0,80.332l-31.77,26.153A19.942,19.942,0,0,0,21,347.758l32.612,56.483a19.937,19.937,0,0,0,24.337,8.73l38.562-14.447a192.03,192.03,0,0,0,69.54,40.192l6.762,40.571A19.937,19.937,0,0,0,212.54,496h65.222a19.936,19.936,0,0,0,19.728-16.712l6.763-40.572a192.038,192.038,0,0,0,69.54-40.192l38.564,14.449a19.938,19.938,0,0,0,24.334-8.731L469.3,347.755A19.939,19.939,0,0,0,464.7,322.319Zm-50.636,57.12-48.109-18.024-7.285,7.334a159.955,159.955,0,0,1-72.625,41.973l-10,2.636L267.6,464h-44.89l-8.442-50.642-10-2.636a159.955,159.955,0,0,1-72.625-41.973l-7.285-7.334L76.241,379.439,53.8,340.562l39.629-32.624-2.7-9.973a160.9,160.9,0,0,1,0-83.93l2.7-9.972L53.8,171.439l22.446-38.878,48.109,18.024,7.285-7.334a159.955,159.955,0,0,1,72.625-41.973l10-2.636L222.706,48H267.6l8.442,50.642,10,2.636a159.955,159.955,0,0,1,72.625,41.973l7.285,7.334,48.109-18.024,22.447,38.877-39.629,32.625,2.7,9.972a160.9,160.9,0,0,1,0,83.93l-2.7,9.973,39.629,32.623Z"></path>
|
||||
</svg>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M440,424V88H352V13.005L88,58.522V424H16v32h86.9L352,490.358V120h56V456h88V424ZM320,453.642,120,426.056V85.478L320,51Z"></path>
|
||||
<rect width="32" height="64" x="256" y="232"></rect>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar 4 end -->
|
||||
|
||||
<!-- sidebar 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Sidebar 5</div>
|
||||
</section>
|
||||
<div class="flex flex-col h-full p-3 w-60 dark:bg-gray-900 dark:text-gray-100">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2>Dashboard</h2>
|
||||
<button class="p-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-100">
|
||||
<rect width="352" height="32" x="80" y="96"></rect>
|
||||
<rect width="352" height="32" x="80" y="240"></rect>
|
||||
<rect width="352" height="32" x="80" y="384"></rect>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center py-4">
|
||||
<button type="submit" class="p-2 focus:outline-none focus:ring">
|
||||
<svg fill="currentColor" viewBox="0 0 512 512" class="w-5 h-5 dark:text-gray-400">
|
||||
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
<input type="search" name="Search" placeholder="Search..." class="w-full py-2 pl-10 text-sm dark:border-transparent rounded-md focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<ul class="pt-2 pb-4 space-y-1 text-sm">
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M469.666,216.45,271.078,33.749a34,34,0,0,0-47.062.98L41.373,217.373,32,226.745V496H208V328h96V496H480V225.958ZM248.038,56.771c.282,0,.108.061-.013.18C247.9,56.832,247.756,56.771,248.038,56.771ZM448,464H336V328a32,32,0,0,0-32-32H208a32,32,0,0,0-32,32V464H64V240L248.038,57.356c.013-.012.014-.023.024-.035L448,240Z"></path>
|
||||
</svg>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
||||
</svg>
|
||||
<span>Search</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M448.205,392.507c30.519-27.2,47.8-63.455,47.8-101.078,0-39.984-18.718-77.378-52.707-105.3C410.218,158.963,366.432,144,320,144s-90.218,14.963-123.293,42.131C162.718,214.051,144,251.445,144,291.429s18.718,77.378,52.707,105.3c33.075,27.168,76.861,42.13,123.293,42.13,6.187,0,12.412-.273,18.585-.816l10.546,9.141A199.849,199.849,0,0,0,480,496h16V461.943l-4.686-4.685A199.17,199.17,0,0,1,448.205,392.507ZM370.089,423l-21.161-18.341-7.056.865A180.275,180.275,0,0,1,320,406.857c-79.4,0-144-51.781-144-115.428S240.6,176,320,176s144,51.781,144,115.429c0,31.71-15.82,61.314-44.546,83.358l-9.215,7.071,4.252,12.035a231.287,231.287,0,0,0,37.882,67.817A167.839,167.839,0,0,1,370.089,423Z"></path>
|
||||
<path d="M60.185,317.476a220.491,220.491,0,0,0,34.808-63.023l4.22-11.975-9.207-7.066C62.918,214.626,48,186.728,48,156.857,48,96.833,109.009,48,184,48c55.168,0,102.767,26.43,124.077,64.3,3.957-.192,7.931-.3,11.923-.3q12.027,0,23.834,1.167c-8.235-21.335-22.537-40.811-42.2-56.961C270.072,30.279,228.3,16,184,16S97.928,30.279,66.364,56.206C33.886,82.885,16,118.63,16,156.857c0,35.8,16.352,70.295,45.25,96.243a188.4,188.4,0,0,1-40.563,60.729L16,318.515V352H32a190.643,190.643,0,0,0,85.231-20.125,157.3,157.3,0,0,1-5.071-33.645A158.729,158.729,0,0,1,60.185,317.476Z"></path>
|
||||
</svg>
|
||||
<span>Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M203.247,386.414,208,381.185V355.4L130.125,191H93.875L16,355.4v27.042l4.234,4.595a124.347,124.347,0,0,0,91.224,39.982h.42A124.343,124.343,0,0,0,203.247,386.414ZM176,368.608a90.924,90.924,0,0,1-64.231,26.413h-.33A90.907,90.907,0,0,1,48,369.667V362.6l64-135.112L176,362.6Z"></path>
|
||||
<path d="M418.125,191h-36.25L304,355.4v27.042l4.234,4.595a124.347,124.347,0,0,0,91.224,39.982h.42a124.343,124.343,0,0,0,91.369-40.607L496,381.185V355.4ZM464,368.608a90.924,90.924,0,0,1-64.231,26.413h-.33A90.907,90.907,0,0,1,336,369.667V362.6l64-135.112L464,362.6Z"></path>
|
||||
<path d="M272,196.659A56.223,56.223,0,0,0,309.659,159H416V127H309.659a55.991,55.991,0,0,0-107.318,0H96v32H202.341A56.223,56.223,0,0,0,240,196.659V463H136v32H376V463H272ZM232,143a24,24,0,1,1,24,24A24,24,0,0,1,232,143Z"></path>
|
||||
</svg>
|
||||
<span>Orders</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm dark:bg-gray-800 dark:text-gray-50">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M453.122,79.012a128,128,0,0,0-181.087.068l-15.511,15.7L241.142,79.114l-.1-.1a128,128,0,0,0-181.02,0l-6.91,6.91a128,128,0,0,0,0,181.019L235.485,449.314l20.595,21.578.491-.492.533.533L276.4,450.574,460.032,266.94a128.147,128.147,0,0,0,0-181.019ZM437.4,244.313,256.571,425.146,75.738,244.313a96,96,0,0,1,0-135.764l6.911-6.91a96,96,0,0,1,135.713-.051l38.093,38.787,38.274-38.736a96,96,0,0,1,135.765,0l6.91,6.909A96.11,96.11,0,0,1,437.4,244.313Z"></path>
|
||||
</svg>
|
||||
<span>Wishlist</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M245.151,168a88,88,0,1,0,88,88A88.1,88.1,0,0,0,245.151,168Zm0,144a56,56,0,1,1,56-56A56.063,56.063,0,0,1,245.151,312Z"></path>
|
||||
<path d="M464.7,322.319l-31.77-26.153a193.081,193.081,0,0,0,0-80.332l31.77-26.153a19.941,19.941,0,0,0,4.606-25.439l-32.612-56.483a19.936,19.936,0,0,0-24.337-8.73l-38.561,14.447a192.038,192.038,0,0,0-69.54-40.192L297.49,32.713A19.936,19.936,0,0,0,277.762,16H212.54a19.937,19.937,0,0,0-19.728,16.712L186.05,73.284a192.03,192.03,0,0,0-69.54,40.192L77.945,99.027a19.937,19.937,0,0,0-24.334,8.731L21,164.245a19.94,19.94,0,0,0,4.61,25.438l31.767,26.151a193.081,193.081,0,0,0,0,80.332l-31.77,26.153A19.942,19.942,0,0,0,21,347.758l32.612,56.483a19.937,19.937,0,0,0,24.337,8.73l38.562-14.447a192.03,192.03,0,0,0,69.54,40.192l6.762,40.571A19.937,19.937,0,0,0,212.54,496h65.222a19.936,19.936,0,0,0,19.728-16.712l6.763-40.572a192.038,192.038,0,0,0,69.54-40.192l38.564,14.449a19.938,19.938,0,0,0,24.334-8.731L469.3,347.755A19.939,19.939,0,0,0,464.7,322.319Zm-50.636,57.12-48.109-18.024-7.285,7.334a159.955,159.955,0,0,1-72.625,41.973l-10,2.636L267.6,464h-44.89l-8.442-50.642-10-2.636a159.955,159.955,0,0,1-72.625-41.973l-7.285-7.334L76.241,379.439,53.8,340.562l39.629-32.624-2.7-9.973a160.9,160.9,0,0,1,0-83.93l2.7-9.972L53.8,171.439l22.446-38.878,48.109,18.024,7.285-7.334a159.955,159.955,0,0,1,72.625-41.973l10-2.636L222.706,48H267.6l8.442,50.642,10,2.636a159.955,159.955,0,0,1,72.625,41.973l7.285,7.334,48.109-18.024,22.447,38.877-39.629,32.625,2.7,9.972a160.9,160.9,0,0,1,0,83.93l-2.7,9.973,39.629,32.623Z"></path>
|
||||
</svg>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="rounded-sm">
|
||||
<a rel="noopener noreferrer" href="#" class="flex items-center p-2 space-x-3 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current dark:text-gray-400">
|
||||
<path d="M440,424V88H352V13.005L88,58.522V424H16v32h86.9L352,490.358V120h56V456h88V424ZM320,453.642,120,426.056V85.478L320,51Z"></path>
|
||||
<rect width="32" height="64" x="256" y="232"></rect>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center p-2 mt-12 space-x-4 justify-self-end">
|
||||
<img src="https://source.unsplash.com/100x100/?portrait" alt="" class="w-12 h-12 rounded-lg dark:bg-gray-500">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Leroy Jenkins</h2>
|
||||
<span class="flex items-center space-x-1">
|
||||
<a rel="noopener noreferrer" href="#" class="text-xs hover:underline dark:text-gray-400">View profile</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- sidebar 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>
|
||||
84
public/componets/timeline/10_timeline.html
Normal file
84
public/componets/timeline/10_timeline.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Timeline 10</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- timeline 10 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 10</div>
|
||||
</section>
|
||||
<section class="pl-20 py-10 dark:bg-slate-500">
|
||||
<ol class="relative border-l border-gray-200 dark:border-gray-700">
|
||||
<li class="mb-10 ml-6">
|
||||
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Application UI v2.0.0 <span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">Latest</span></h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on January 13th, 2022</time>
|
||||
<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-100">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
|
||||
<a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"><svg class="mr-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z" clip-rule="evenodd"></path></svg> Download ZIP</a>
|
||||
</li>
|
||||
<li class="mb-10 ml-6">
|
||||
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
<h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Figma v1.3.0</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 7th, 2021</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
|
||||
</li>
|
||||
<li class="mb-10 ml-6">
|
||||
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
<h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.2.2</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 2nd, 2021</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- timeline 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>
|
||||
100
public/componets/timeline/11_timeline.html
Normal file
100
public/componets/timeline/11_timeline.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Timeline 11</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- timeline 11 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 11</div>
|
||||
</section>
|
||||
|
||||
<section class="dark:bg-slate-500">
|
||||
<ol class="items-center sm:flex p-10">
|
||||
<li class="relative mb-6 sm:mb-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
<div class="mt-3 sm:pr-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.0.0</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 2, 2021</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="relative mb-6 sm:mb-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
<div class="mt-3 sm:pr-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.2.0</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 23, 2021</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="relative mb-6 sm:mb-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
<div class="mt-3 sm:pr-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.3.0</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on January 5, 2022</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<!-- timeline 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>
|
||||
130
public/componets/timeline/12_timeline.html
Normal file
130
public/componets/timeline/12_timeline.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Timeline 12</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- timeline 12 start -->
|
||||
<section class="section_divider" id="timeline_12">
|
||||
<div>Timeline 12</div>
|
||||
</section>
|
||||
|
||||
<div class="bg-black text-white py-8">
|
||||
<div class="container mx-auto flex flex-col items-start md:flex-row my-12 md:my-24">
|
||||
<div class="flex flex-col w-full sticky md:top-36 lg:w-1/3 mt-2 md:mt-12 px-8">
|
||||
<p class="ml-2 text-yellow-300 uppercase tracking-loose">Working Process</p>
|
||||
<p class="text-3xl md:text-4xl leading-normal md:leading-relaxed mb-2">Working Process of Fest</p>
|
||||
<p class="text-sm md:text-base text-gray-50 mb-4">
|
||||
Here’s your guide to the tech fest 2021 process. Go through all the steps to know the exact process of the
|
||||
fest.
|
||||
</p>
|
||||
<a href="#"
|
||||
class="bg-transparent mr-auto hover:bg-yellow-300 text-yellow-300 hover:text-white rounded shadow hover:shadow-lg py-2 px-4 border border-yellow-300 hover:border-transparent">
|
||||
Explore Now</a>
|
||||
</div>
|
||||
<div class="ml-0 md:ml-12 lg:w-2/3 sticky">
|
||||
<div class="container mx-auto w-full h-full">
|
||||
<div class="relative wrap overflow-hidden p-10 h-full">
|
||||
<div class="border-2-2 border-yellow-555 absolute h-full border"
|
||||
style="right: 50%; border: 2px solid #FFC100; border-radius: 1%;"></div>
|
||||
<div class="border-2-2 border-yellow-555 absolute h-full border"
|
||||
style="left: 50%; border: 2px solid #FFC100; border-radius: 1%;"></div>
|
||||
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
|
||||
<div class="order-1 w-5/12"></div>
|
||||
<div class="order-1 w-5/12 px-1 py-4 text-right">
|
||||
<p class="mb-3 text-base text-yellow-300">1-6 May, 2021</p>
|
||||
<h4 class="mb-3 font-bold text-lg md:text-2xl">Registration</h4>
|
||||
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
|
||||
Pick your favourite event(s) and register in that event by filling the form corresponding to that
|
||||
event. Its that easy :)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8 flex justify-between items-center w-full right-timeline">
|
||||
<div class="order-1 w-5/12"></div>
|
||||
<div class="order-1 w-5/12 px-1 py-4 text-left">
|
||||
<p class="mb-3 text-base text-yellow-300">6-9 May, 2021</p>
|
||||
<h4 class="mb-3 font-bold text-lg md:text-2xl">Participation</h4>
|
||||
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
|
||||
Participate online. The links for your registered events will be sent to you via email and whatsapp
|
||||
groups. Use those links and show your talent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full ">
|
||||
<div class="order-1 w-5/12"></div>
|
||||
<div class="order-1 w-5/12 px-1 py-4 text-right">
|
||||
<p class="mb-3 text-base text-yellow-300"> 10 May, 2021</p>
|
||||
<h4 class="mb-3 font-bold text-lg md:text-2xl">Result Declaration</h4>
|
||||
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
|
||||
The ultimate genius will be revealed by our judging panel on 10th May, 2021 and the resukts will be
|
||||
announced on the whatsapp groups and will be mailed to you.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex justify-between items-center w-full right-timeline">
|
||||
<div class="order-1 w-5/12"></div>
|
||||
|
||||
<div class="order-1 w-5/12 px-1 py-4">
|
||||
<p class="mb-3 text-base text-yellow-300">12 May, 2021</p>
|
||||
<h4 class="mb-3 font-bold text-lg md:text-2xl text-left">Prize Distribution</h4>
|
||||
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
|
||||
The winners will be contacted by our team for their addresses and the winning goodies will be sent at
|
||||
their addresses.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="mx-auto -mt-36 md:-mt-36" src="https://user-images.githubusercontent.com/54521023/116968861-ef21a000-acd2-11eb-95ac-a34b5b490265.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- timeline 12 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>
|
||||
@@ -7,7 +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>
|
||||
<title>Timeline </title>
|
||||
<title>Timeline 4</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
147
public/componets/timeline/5_timeline.html
Normal file
147
public/componets/timeline/5_timeline.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Timeline 5</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- timeline 5 start -->
|
||||
<section class="section_divider" id="timeline_5">
|
||||
<div>Timeline 5 </div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800">
|
||||
|
||||
<div class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative py-20">
|
||||
<h1 class="text-3xl text-center font-bold text-blue-500">Timeline with Tailwindcss</h1>
|
||||
<div class="border-l-2 mt-10">
|
||||
<!-- Card 1 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-blue-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-blue-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-blue-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-pink-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-pink-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-pink-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-green-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-green-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-green-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-purple-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-purple-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-purple-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 5 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-yellow-600 text-white rounded mb-10 flex-col md:flex-row">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-yellow-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 -mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-yellow-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- timeline 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>
|
||||
142
public/componets/timeline/6_timeline.html
Normal file
142
public/componets/timeline/6_timeline.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Timeline 6</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- timeline 6 start -->
|
||||
<section class="section_divider" id="timeline_6">
|
||||
<div>Timeline 6</div>
|
||||
</section>
|
||||
|
||||
<div class=" bg-blue-500 py-6 flex flex-col justify-center sm:py-12">
|
||||
<div class="py-3 sm:max-w-xl sm:mx-auto w-full px-2 sm:px-0">
|
||||
|
||||
<div class="relative text-gray-700 antialiased text-sm font-semibold">
|
||||
|
||||
<!-- Vertical bar running through middle -->
|
||||
<div class="hidden sm:block w-1 bg-blue-300 absolute h-full left-1/2 transform -translate-x-1/2"></div>
|
||||
|
||||
<!-- Left section, set by justify-start and sm:pr-8 -->
|
||||
<div class="mt-6 sm:mt-0 sm:mb-12">
|
||||
<div class="flex flex-col sm:flex-row items-center">
|
||||
<div class="flex justify-start w-full mx-auto items-center">
|
||||
<div class="w-full sm:w-1/2 sm:pr-8">
|
||||
<div class="p-4 bg-white rounded shadow">
|
||||
Now this is a story all about how,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right section, set by justify-end and sm:pl-8 -->
|
||||
<div class="mt-6 sm:mt-0 sm:mb-12">
|
||||
<div class="flex flex-col sm:flex-row items-center">
|
||||
<div class="flex justify-end w-full mx-auto items-center">
|
||||
<div class="w-full sm:w-1/2 sm:pl-8">
|
||||
<div class="p-4 bg-white rounded shadow">
|
||||
My life got flipped turned upside down,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left section, set by justify-start and sm:pr-8 -->
|
||||
<div class="mt-6 sm:mt-0 sm:mb-12">
|
||||
<div class="flex flex-col sm:flex-row items-center">
|
||||
<div class="flex justify-start w-full mx-auto items-center">
|
||||
<div class="w-full sm:w-1/2 sm:pr-8">
|
||||
<div class="p-4 bg-white rounded shadow">
|
||||
And I'd like to take a minute, just sit right there,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right section, set by justify-end and sm:pl-8 -->
|
||||
<div class="mt-6 sm:mt-0">
|
||||
<div class="flex flex-col sm:flex-row items-center">
|
||||
<div class="flex justify-end w-full mx-auto items-center">
|
||||
<div class="w-full sm:w-1/2 sm:pl-8">
|
||||
<div class="p-4 bg-white rounded shadow">
|
||||
I'll tell you how I became the Prince of a town called Bel Air.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- timeline 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>
|
||||
165
public/componets/timeline/7_timeline.html
Normal file
165
public/componets/timeline/7_timeline.html
Normal file
@@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Timeline 7</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- timeline 7 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 7 </div>
|
||||
</section>
|
||||
|
||||
<div class="min-h-screen bg-gray-100 dark:bg-gray-800">
|
||||
|
||||
<div class="min-h-screen flex justify-center">
|
||||
<div class="w-2/3 mx-auto">
|
||||
<div class="flex flex-row w-full">
|
||||
<!-- left col -->
|
||||
|
||||
<div class="w-2/5 px-2 py-10">
|
||||
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5">
|
||||
<div class="text-gray-600 mb-2 flex justify-between">
|
||||
<div class="font-bold">
|
||||
Ad corpori
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<button class="text-blue-500 mr-2 hover:text-blue-300 transition duration-200"><i class="far fa-edit"></i></button>
|
||||
<button class="text-red-500 hover:text-red-300 transition duration-200"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-600">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis culpa deserunt, dignissimos dolor esse fugit ipsam minus odit officiis placeat qui, quidem quis soluta vero? Adipisci alias eius et iure nam nihil reiciendis saepe, voluptatem. Alias cumque dicta dignissimos ea et laborum, minima similique.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--line column-->
|
||||
<div class="w-1/5 flex justify-center">
|
||||
<div class="relative flex h-full w-1 bg-green-300 items-center justify-center">
|
||||
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-2 border-green-300 leading-none text-center z-10 bg-white font-thin">
|
||||
<div>20</div>
|
||||
<div>September</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--right column-->
|
||||
<div class="w-2/5 px-2 py-10 ">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-full">
|
||||
<!-- left col -->
|
||||
|
||||
<div class="w-2/5 px-2 py-10">
|
||||
|
||||
</div>
|
||||
<!--line column-->
|
||||
<div class="w-1/5 flex justify-center">
|
||||
<div class="relative flex h-full w-1 bg-green-300 items-center justify-center">
|
||||
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-2 border-green-300 leading-none text-center z-10 bg-white font-thin">
|
||||
<div>20</div>
|
||||
<div>wdfggfd</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--right column-->
|
||||
<div class="w-2/5 px-2 py-10 ">
|
||||
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5">
|
||||
<div class="text-gray-600 mb-2 flex justify-between">
|
||||
<div class="font-bold">
|
||||
Svetlana Torn
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-600">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis enim esse fuga modi quisquam veritatis?
|
||||
Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis culpa deserunt, dignissimos dolor esse fugit ipsam minus odit officiis placeat qui, quidem quis soluta vero? Adipisci alias eius et iure nam nihil reiciendis saepe, voluptatem. Alias cumque dicta dignissimos ea et laborum, minima similique.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-full">
|
||||
<!-- left col -->
|
||||
|
||||
<div class="w-2/5 px-2 py-10">
|
||||
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5">
|
||||
<div class="text-gray-600 mb-2 flex justify-between">
|
||||
<div class="font-bold">
|
||||
Svjatoslav Torn
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<button class="text-blue-500 mr-2 hover:text-blue-300 transition duration-200"><i class="far fa-edit"></i></button>
|
||||
<button class="text-red-500 hover:text-red-300 transition duration-200"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-600">
|
||||
amet Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis culpa deserunt, dignissimos dolor esse fugit ipsam minus odit officiis placeat qui, quidem quis soluta vero? Adipisci alias eius et iure nam nihil reiciendis saepe, voluptatem. Alias cumque dicta dignissimos ea et laborum, minima similique.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--line column-->
|
||||
<div class="w-1/5 flex justify-center">
|
||||
<div class="relative flex h-full w-1 bg-green-300 items-center justify-center">
|
||||
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-2 border-green-300 leading-none text-center z-10 bg-white font-thin">
|
||||
<div>20</div>
|
||||
<div>amet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--right column-->
|
||||
<div class="w-2/5 px-2 py-10 ">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- timeline 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>
|
||||
80
public/componets/timeline/8_timeline.html
Normal file
80
public/componets/timeline/8_timeline.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Timeline 8</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- timeline 8 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 8</div>
|
||||
</section>
|
||||
|
||||
<section class="dark:bg-slate-600">
|
||||
<ol class="ml-20 py-5 relative border-l border-gray-200 dark:border-gray-700">
|
||||
<li class="mb-10 ml-4">
|
||||
<div class="absolute w-3 h-3 bg-gray-200 rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
|
||||
<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">February 2022</time>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Application UI code in Tailwind CSS</h3>
|
||||
<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
|
||||
<a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></a>
|
||||
</li>
|
||||
<li class="mb-10 ml-4">
|
||||
<div class="absolute w-3 h-3 bg-gray-200 rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
|
||||
<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">March 2022</time>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Marketing UI design in Figma</h3>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
|
||||
</li>
|
||||
<li class="ml-4">
|
||||
<div class="absolute w-3 h-3 bg-gray-200 rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
|
||||
<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">April 2022</time>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">E-Commerce UI code in Tailwind CSS</h3>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- timeline 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>
|
||||
114
public/componets/timeline/9_timeline.html
Normal file
114
public/componets/timeline/9_timeline.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
||||
<title>Timeline 9</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- timeline 9 start -->
|
||||
<section class="section_divider" id="timeline_9">
|
||||
<div>Timeline 9</div>
|
||||
</section>
|
||||
<h3 class="text-2xl text-gray-700 font-bold mb-6 ml-20 mt-10">Latest News</h3>
|
||||
|
||||
<ol class="border-l-2 border-purple-600 ml-20 mb-10">
|
||||
<li>
|
||||
<div class="md:flex flex-start">
|
||||
<div class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
|
||||
<div class="flex justify-between mb-4">
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">New Web Design</a>
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">04 / 02 / 2022</a>
|
||||
</div>
|
||||
<p class="text-gray-700 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.</p>
|
||||
<button type="button" class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true">Preview</button>
|
||||
<button type="button" class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" data-mdb-ripple="true">See demo</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="md:flex flex-start">
|
||||
<div class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
|
||||
<div class="flex justify-between mb-4">
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">21 000 Job Seekers</a>
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">12 / 01 / 2022</a>
|
||||
</div>
|
||||
<p class="text-gray-700 mb-6">Libero expedita explicabo eius fugiat quia aspernatur autem laudantium error architecto recusandae natus sapiente sit nam eaque, consectetur porro molestiae ipsam an deleniti.</p>
|
||||
<button type="button" class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true">Preview</button>
|
||||
<button type="button" class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" data-mdb-ripple="true">See demo</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="md:flex flex-start">
|
||||
<div class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
|
||||
<div class="flex justify-between mb-4">
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">Awesome Employers</a>
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">21 / 12 / 2021</a>
|
||||
</div>
|
||||
<p class="text-gray-700 mb-6">Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.</p>
|
||||
<button type="button" class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true">Preview</button>
|
||||
<button type="button" class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" data-mdb-ripple="true">See demo</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<!-- timeline 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>
|
||||
@@ -245,6 +245,582 @@
|
||||
|
||||
<!-- timeline 4 end -->
|
||||
|
||||
<!-- timeline 5 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 5 </div>
|
||||
</section>
|
||||
<section class="dark:bg-gray-800">
|
||||
|
||||
<div class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative py-20">
|
||||
<h1 class="text-3xl text-center font-bold text-blue-500">Timeline with Tailwindcss</h1>
|
||||
<div class="border-l-2 mt-10">
|
||||
<!-- Card 1 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-blue-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-blue-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-blue-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-pink-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-pink-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-pink-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-green-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-green-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-green-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-purple-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-purple-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-purple-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 5 -->
|
||||
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-yellow-600 text-white rounded mb-10 flex-col md:flex-row">
|
||||
<!-- Dot Follwing the Left Vertical Line -->
|
||||
<div class="w-5 h-5 bg-yellow-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 -mt-2 md:mt-0"></div>
|
||||
|
||||
<!-- Line that connecting the box with the vertical line -->
|
||||
<div class="w-10 h-1 bg-yellow-300 absolute -left-10 z-0"></div>
|
||||
|
||||
<!-- Content that showing in the box -->
|
||||
<div class="flex-auto">
|
||||
<h1 class="text-lg">Day 1</h1>
|
||||
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
||||
<h3>Classroom</h3>
|
||||
</div>
|
||||
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- timeline 5 end -->
|
||||
|
||||
|
||||
<!-- timeline 6 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 6</div>
|
||||
</section>
|
||||
|
||||
<div class=" bg-blue-500 py-6 flex flex-col justify-center sm:py-12">
|
||||
<div class="py-3 sm:max-w-xl sm:mx-auto w-full px-2 sm:px-0">
|
||||
|
||||
<div class="relative text-gray-700 antialiased text-sm font-semibold">
|
||||
|
||||
<!-- Vertical bar running through middle -->
|
||||
<div class="hidden sm:block w-1 bg-blue-300 absolute h-full left-1/2 transform -translate-x-1/2"></div>
|
||||
|
||||
<!-- Left section, set by justify-start and sm:pr-8 -->
|
||||
<div class="mt-6 sm:mt-0 sm:mb-12">
|
||||
<div class="flex flex-col sm:flex-row items-center">
|
||||
<div class="flex justify-start w-full mx-auto items-center">
|
||||
<div class="w-full sm:w-1/2 sm:pr-8">
|
||||
<div class="p-4 bg-white rounded shadow">
|
||||
Now this is a story all about how,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right section, set by justify-end and sm:pl-8 -->
|
||||
<div class="mt-6 sm:mt-0 sm:mb-12">
|
||||
<div class="flex flex-col sm:flex-row items-center">
|
||||
<div class="flex justify-end w-full mx-auto items-center">
|
||||
<div class="w-full sm:w-1/2 sm:pl-8">
|
||||
<div class="p-4 bg-white rounded shadow">
|
||||
My life got flipped turned upside down,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left section, set by justify-start and sm:pr-8 -->
|
||||
<div class="mt-6 sm:mt-0 sm:mb-12">
|
||||
<div class="flex flex-col sm:flex-row items-center">
|
||||
<div class="flex justify-start w-full mx-auto items-center">
|
||||
<div class="w-full sm:w-1/2 sm:pr-8">
|
||||
<div class="p-4 bg-white rounded shadow">
|
||||
And I'd like to take a minute, just sit right there,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right section, set by justify-end and sm:pl-8 -->
|
||||
<div class="mt-6 sm:mt-0">
|
||||
<div class="flex flex-col sm:flex-row items-center">
|
||||
<div class="flex justify-end w-full mx-auto items-center">
|
||||
<div class="w-full sm:w-1/2 sm:pl-8">
|
||||
<div class="p-4 bg-white rounded shadow">
|
||||
I'll tell you how I became the Prince of a town called Bel Air.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- timeline 6 end -->
|
||||
|
||||
<!-- timeline 7 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 7 </div>
|
||||
</section>
|
||||
|
||||
<div class="min-h-screen bg-gray-100 dark:bg-gray-800">
|
||||
|
||||
<div class="min-h-screen flex justify-center">
|
||||
<div class="w-2/3 mx-auto">
|
||||
<div class="flex flex-row w-full">
|
||||
<!-- left col -->
|
||||
|
||||
<div class="w-2/5 px-2 py-10">
|
||||
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5">
|
||||
<div class="text-gray-600 mb-2 flex justify-between">
|
||||
<div class="font-bold">
|
||||
Svjatoslav Torn
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<button class="text-blue-500 mr-2 hover:text-blue-300 transition duration-200"><i class="far fa-edit"></i></button>
|
||||
<button class="text-red-500 hover:text-red-300 transition duration-200"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-600">
|
||||
amet Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis culpa deserunt, dignissimos dolor esse fugit ipsam minus odit officiis placeat qui, quidem quis soluta vero? Adipisci alias eius et iure nam nihil reiciendis saepe, voluptatem. Alias cumque dicta dignissimos ea et laborum, minima similique.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--line column-->
|
||||
<div class="w-1/5 flex justify-center">
|
||||
<div class="relative flex h-full w-1 bg-green-300 items-center justify-center">
|
||||
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-2 border-green-300 leading-none text-center z-10 bg-white font-thin">
|
||||
<div>20</div>
|
||||
<div>September</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--right column-->
|
||||
<div class="w-2/5 px-2 py-10 ">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-full">
|
||||
<!-- left col -->
|
||||
|
||||
<div class="w-2/5 px-2 py-10">
|
||||
|
||||
</div>
|
||||
<!--line column-->
|
||||
<div class="w-1/5 flex justify-center">
|
||||
<div class="relative flex h-full w-1 bg-green-300 items-center justify-center">
|
||||
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-2 border-green-300 leading-none text-center z-10 bg-white font-thin">
|
||||
<div>20</div>
|
||||
<div>amet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--right column-->
|
||||
<div class="w-2/5 px-2 py-10 ">
|
||||
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5">
|
||||
<div class="text-gray-600 mb-2 flex justify-between">
|
||||
<div class="font-bold">
|
||||
Svetlana Torn
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-600">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis enim esse fuga modi quisquam veritatis?
|
||||
consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis culpa deserunt, dignissimos dolor esse fugit ipsam minus odit officiis placeat qui, quidem quis soluta vero? Adipisci alias eius et iure nam nihil reiciendis saepe, voluptatem. Alias cumque dicta dignissimos ea et laborum, minima similique.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-full">
|
||||
<!-- left col -->
|
||||
|
||||
<div class="w-2/5 px-2 py-10">
|
||||
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5">
|
||||
<div class="text-gray-600 mb-2 flex justify-between">
|
||||
<div class="font-bold">
|
||||
Svjatoslav Torn
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<button class="text-blue-500 mr-2 hover:text-blue-300 transition duration-200"><i class="far fa-edit"></i></button>
|
||||
<button class="text-red-500 hover:text-red-300 transition duration-200"><i class="far fa-trash-alt"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-600">
|
||||
consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis culpa deserunt, dignissimos dolor esse fugit ipsam minus odit officiis placeat qui, quidem quis soluta vero? Adipisci alias eius et iure nam nihil reiciendis saepe, voluptatem. Alias cumque dicta dignissimos ea et laborum, minima similique.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--line column-->
|
||||
<div class="w-1/5 flex justify-center">
|
||||
<div class="relative flex h-full w-1 bg-green-300 items-center justify-center">
|
||||
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-2 border-green-300 leading-none text-center z-10 bg-white font-thin">
|
||||
<div>20</div>
|
||||
<div>consectetur</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--right column-->
|
||||
<div class="w-2/5 px-2 py-10 ">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- timeline 7 end -->
|
||||
|
||||
<!-- timeline 8 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 8</div>
|
||||
</section>
|
||||
|
||||
<section class="dark:bg-slate-600">
|
||||
<ol class="ml-20 py-5 relative border-l border-gray-200 dark:border-gray-700">
|
||||
<li class="mb-10 ml-4">
|
||||
<div class="absolute w-3 h-3 bg-gray-200 rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
|
||||
<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">February 2022</time>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Application UI code in Tailwind CSS</h3>
|
||||
<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
|
||||
<a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></a>
|
||||
</li>
|
||||
<li class="mb-10 ml-4">
|
||||
<div class="absolute w-3 h-3 bg-gray-200 rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
|
||||
<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">March 2022</time>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Marketing UI design in Figma</h3>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
|
||||
</li>
|
||||
<li class="ml-4">
|
||||
<div class="absolute w-3 h-3 bg-gray-200 rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
|
||||
<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">April 2022</time>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">E-Commerce UI code in Tailwind CSS</h3>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- timeline 8 end -->
|
||||
|
||||
<!-- timeline 9 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 9</div>
|
||||
</section>
|
||||
<h3 class="text-2xl text-gray-700 font-bold mb-6 ml-20 mt-10">Latest News</h3>
|
||||
|
||||
<ol class="border-l-2 border-purple-600 ml-20 mb-10">
|
||||
<li>
|
||||
<div class="md:flex flex-start">
|
||||
<div class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
|
||||
<div class="flex justify-between mb-4">
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">New Web Design</a>
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">04 / 02 / 2022</a>
|
||||
</div>
|
||||
<p class="text-gray-700 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.</p>
|
||||
<button type="button" class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true">Preview</button>
|
||||
<button type="button" class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" data-mdb-ripple="true">See demo</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="md:flex flex-start">
|
||||
<div class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
|
||||
<div class="flex justify-between mb-4">
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">21 000 Job Seekers</a>
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">12 / 01 / 2022</a>
|
||||
</div>
|
||||
<p class="text-gray-700 mb-6">Libero expedita explicabo eius fugiat quia aspernatur autem laudantium error architecto recusandae natus sapiente sit nam eaque, consectetur porro molestiae ipsam an deleniti.</p>
|
||||
<button type="button" class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true">Preview</button>
|
||||
<button type="button" class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" data-mdb-ripple="true">See demo</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="md:flex flex-start">
|
||||
<div class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
|
||||
<div class="flex justify-between mb-4">
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">Awesome Employers</a>
|
||||
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">21 / 12 / 2021</a>
|
||||
</div>
|
||||
<p class="text-gray-700 mb-6">Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.</p>
|
||||
<button type="button" class="inline-block px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true">Preview</button>
|
||||
<button type="button" class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" data-mdb-ripple="true">See demo</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<!-- timeline 9 end -->
|
||||
|
||||
<!-- timeline 10 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 10</div>
|
||||
</section>
|
||||
<section class="pl-20 py-10 dark:bg-slate-500">
|
||||
<ol class="relative border-l border-gray-200 dark:border-gray-700">
|
||||
<li class="mb-10 ml-6">
|
||||
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Application UI v2.0.0 <span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">Latest</span></h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on January 13th, 2022</time>
|
||||
<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-100">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.</p>
|
||||
<a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"><svg class="mr-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z" clip-rule="evenodd"></path></svg> Download ZIP</a>
|
||||
</li>
|
||||
<li class="mb-10 ml-6">
|
||||
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
<h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Figma v1.3.0</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 7th, 2021</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
|
||||
</li>
|
||||
<li class="mb-10 ml-6">
|
||||
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
<h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.2.2</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 2nd, 2021</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- timeline 10 end -->
|
||||
|
||||
<!-- timeline 11 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 11</div>
|
||||
</section>
|
||||
|
||||
<section class="dark:bg-slate-500">
|
||||
<ol class="items-center sm:flex p-10">
|
||||
<li class="relative mb-6 sm:mb-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
<div class="mt-3 sm:pr-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.0.0</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 2, 2021</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="relative mb-6 sm:mb-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
<div class="mt-3 sm:pr-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.2.0</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 23, 2021</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="relative mb-6 sm:mb-0">
|
||||
<div class="flex items-center">
|
||||
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
|
||||
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
|
||||
</div>
|
||||
<div class="mt-3 sm:pr-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.3.0</h3>
|
||||
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on January 5, 2022</time>
|
||||
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<!-- timeline 11 end -->
|
||||
|
||||
<!-- timeline 12 start -->
|
||||
<section class="section_divider">
|
||||
<div>Timeline 12</div>
|
||||
</section>
|
||||
|
||||
<div class="bg-black text-white py-8">
|
||||
<div class="container mx-auto flex flex-col items-start md:flex-row my-12 md:my-24">
|
||||
<div class="flex flex-col w-full sticky md:top-36 lg:w-1/3 mt-2 md:mt-12 px-8">
|
||||
<p class="ml-2 text-yellow-300 uppercase tracking-loose">Working Process</p>
|
||||
<p class="text-3xl md:text-4xl leading-normal md:leading-relaxed mb-2">Working Process of Fest</p>
|
||||
<p class="text-sm md:text-base text-gray-50 mb-4">
|
||||
Here’s your guide to the tech fest 2021 process. Go through all the steps to know the exact process of the
|
||||
fest.
|
||||
</p>
|
||||
<a href="#"
|
||||
class="bg-transparent mr-auto hover:bg-yellow-300 text-yellow-300 hover:text-white rounded shadow hover:shadow-lg py-2 px-4 border border-yellow-300 hover:border-transparent">
|
||||
Explore Now</a>
|
||||
</div>
|
||||
<div class="ml-0 md:ml-12 lg:w-2/3 sticky">
|
||||
<div class="container mx-auto w-full h-full">
|
||||
<div class="relative wrap overflow-hidden p-10 h-full">
|
||||
<div class="border-2-2 border-yellow-555 absolute h-full border"
|
||||
style="right: 50%; border: 2px solid #FFC100; border-radius: 1%;"></div>
|
||||
<div class="border-2-2 border-yellow-555 absolute h-full border"
|
||||
style="left: 50%; border: 2px solid #FFC100; border-radius: 1%;"></div>
|
||||
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
|
||||
<div class="order-1 w-5/12"></div>
|
||||
<div class="order-1 w-5/12 px-1 py-4 text-right">
|
||||
<p class="mb-3 text-base text-yellow-300">1-6 May, 2021</p>
|
||||
<h4 class="mb-3 font-bold text-lg md:text-2xl">Registration</h4>
|
||||
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
|
||||
Pick your favourite event(s) and register in that event by filling the form corresponding to that
|
||||
event. Its that easy :)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8 flex justify-between items-center w-full right-timeline">
|
||||
<div class="order-1 w-5/12"></div>
|
||||
<div class="order-1 w-5/12 px-1 py-4 text-left">
|
||||
<p class="mb-3 text-base text-yellow-300">6-9 May, 2021</p>
|
||||
<h4 class="mb-3 font-bold text-lg md:text-2xl">Participation</h4>
|
||||
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
|
||||
Participate online. The links for your registered events will be sent to you via email and whatsapp
|
||||
groups. Use those links and show your talent.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full ">
|
||||
<div class="order-1 w-5/12"></div>
|
||||
<div class="order-1 w-5/12 px-1 py-4 text-right">
|
||||
<p class="mb-3 text-base text-yellow-300"> 10 May, 2021</p>
|
||||
<h4 class="mb-3 font-bold text-lg md:text-2xl">Result Declaration</h4>
|
||||
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
|
||||
The ultimate genius will be revealed by our judging panel on 10th May, 2021 and the resukts will be
|
||||
announced on the whatsapp groups and will be mailed to you.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8 flex justify-between items-center w-full right-timeline">
|
||||
<div class="order-1 w-5/12"></div>
|
||||
|
||||
<div class="order-1 w-5/12 px-1 py-4">
|
||||
<p class="mb-3 text-base text-yellow-300">12 May, 2021</p>
|
||||
<h4 class="mb-3 font-bold text-lg md:text-2xl text-left">Prize Distribution</h4>
|
||||
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
|
||||
The winners will be contacted by our team for their addresses and the winning goodies will be sent at
|
||||
their addresses.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="mx-auto -mt-36 md:-mt-36" src="https://user-images.githubusercontent.com/54521023/116968861-ef21a000-acd2-11eb-95ac-a34b5b490265.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- timeline 12 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
Reference in New Issue
Block a user