mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-29 21:37:02 +00:00
165 lines
6.1 KiB
HTML
165 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
|
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
|
<title>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> |