Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-30 18:47:02 +00:00
Code Issues Projects Releases Wiki Activity
Files
ee869d7cf5ebb53c93e5dfed53d41515629cae1c
tailShape/public/componets/timeline/timeline.html
merajjahir ee869d7cf5 added features, card's and team
2022-03-01 19:22:41 +06:00

277 lines
19 KiB
HTML
Raw Blame History

<!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 </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- timeline 1 start -->
<section class="section_divider">
<div>Timeline 1</div>
</section>
<section class="dark:bg-gray-800 dark:text-gray-100">
<div class="container max-w-5xl px-4 py-12 mx-auto">
<div class="grid gap-4 mx-4 sm:grid-cols-12">
<div class="col-span-12 sm:col-span-3">
<div class="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:dark:bg-green-400">
<h3 class="text-3xl font-semibold">Morbi tempor</h3>
<span class="text-sm font-bold tracking-wider uppercase dark:text-gray-400">Vestibulum diam nunc</span>
</div>
</div>
<div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
<div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-700">
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
<h3 class="text-xl font-semibold tracking-wide">Donec porta enim vel </h3>
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Dec 2020</time>
<p class="mt-3">Pellentesque feugiat ante at nisl efficitur, in mollis orci scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
<h3 class="text-xl font-semibold tracking-wide">Aliquam sit amet nunc ut</h3>
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Jul 2019</time>
<p class="mt-3">Morbi vulputate aliquam libero non dictum. Aliquam sit amet nunc ut diam aliquet tincidunt nec nec dui. Donec mollis turpis eget egestas sodales.</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
<h3 class="text-xl font-semibold tracking-wide">Pellentesque habitant morbi</h3>
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Jan 2016</time>
<p class="mt-3">Suspendisse tincidunt, arcu nec faucibus efficitur, justo velit consectetur nisl, sit amet condimentum lacus orci nec purus. Mauris quis quam suscipit, vehicula felis id, vehicula enim.</p>
</div><!---->
</div>
</div>
</div>
</div>
</section>
<!-- timeline 1 end -->
<!-- timeline 2 start -->
<section class="section_divider">
<div>Timeline 2</div>
</section>
<div class="max-w-xl p-8 mx-auto dark:bg-gray-800 dark:text-gray-100">
<ul class="space-y-12">
<li class="flex items-start space-x-3">
<a rel="noopener noreferrer" href="#" class="flex items-center h-8 text-sm hover:underline">v3.2.0</a>
<div class="flex-1 space-y-2">
<div class="flex items-center justify-between space-x-4 dark:text-gray-400">
<a rel="noopener noreferrer" href="#" class="inline-flex items-center px-3 py-1 my-1 space-x-2 text-sm border rounded-full group dark:border-gray-700">
<span aria-hidden="true" class="h-1.5 w-1.5 rounded-full dark:bg-green-400"></span>
<span class="group-hover:underline dark:text-gray-100">Feature</span>
</a>
<span class="text-xs whitespace-nowrap">10h ago</span>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id. Morbi in vestibulum nec varius. Et diam cursus quis sed purus nam. Scelerisque amet elit non sit ut tincidunt condimentum. Nisl ultrices eu venenatis diam.</p>
</div>
</div>
</li>
<li class="flex items-start space-x-3">
<a rel="noopener noreferrer" href="#" class="flex items-center h-8 text-sm hover:underline">v3.1.9</a>
<div class="flex-1 space-y-2">
<div class="flex items-center justify-between space-x-4 dark:text-gray-400">
<a rel="noopener noreferrer" href="#" class="inline-flex items-center px-3 py-1 my-1 space-x-2 text-sm border rounded-full group dark:border-gray-700">
<span aria-hidden="true" class="h-1.5 w-1.5 rounded-full dark:bg-green-400"></span>
<span class="group-hover:underline dark:text-gray-100">Bugfix</span>
</a>
<span class="text-xs whitespace-nowrap">2 weeks ago</span>
</div>
<div class="space-y-2">
<p>Scelerisque amet elit non sit ut tincidunt condimentum. Nisi ultrices eu venenatis diam.</p>
<p>Illum quaerat ab inventore, eveniet repudiandae saepe, iste sed molestias laborum atque, quos reprehenderit fugit cumo!</p>
</div>
</div>
</li>
</ul>
</div>
<!-- timeline 2 end -->
<!-- timeline 3 start -->
<section class="section_divider">
<div>Timeline 3</div>
</section>
<ul class="p-4 lg:p-8 dark:bg-gray-800 dark:text-gray-100">
<li>
<article>
<a rel="noopener noreferrer" href="#" class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12 hover:dark:bg-gray-900">
<h3 class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9">Earum at ipsa aliquid quis, exercitationem est.</h3>
<time datetime="" class="row-start-1 mb-1 md:col-start-1 xl:col-span-2 dark:text-gray-400">Oct 13, 2020</time>
<p class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit eveniet est.</p>
</a>
</article>
</li>
<li>
<article>
<a rel="noopener noreferrer" href="#" class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12 hover:dark:bg-gray-900">
<h3 class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9">Earum at ipsa aliquid quis, exercitationem est.</h3>
<time datetime="" class="row-start-1 mb-1 md:col-start-1 xl:col-span-2 dark:text-gray-400">Oct 13, 2020</time>
<p class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit eveniet est.</p>
</a>
</article>
</li>
<li>
<article>
<a rel="noopener noreferrer" href="#" class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12 hover:dark:bg-gray-900">
<h3 class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9">Earum at ipsa aliquid quis, exercitationem est.</h3>
<time datetime="" class="row-start-1 mb-1 md:col-start-1 xl:col-span-2 dark:text-gray-400">Oct 13, 2020</time>
<p class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit eveniet est.</p>
</a>
</article>
</li>
<li>
<article>
<a rel="noopener noreferrer" href="#" class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12 hover:dark:bg-gray-900">
<h3 class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9">Earum at ipsa aliquid quis, exercitationem est.</h3>
<time datetime="" class="row-start-1 mb-1 md:col-start-1 xl:col-span-2 dark:text-gray-400">Oct 13, 2020</time>
<p class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit eveniet est.</p>
</a>
</article>
</li>
</ul>
<!-- timeline 3 end -->
<!-- timeline 4 start -->
<section class="section_divider">
<div>Timeline 4</div>
</section>
<section class="dark:bg-gray-800 dark:text-gray-100">
<div class="container px-4 py-16 mx-auto space-y-8 lg:max-w-3xl">
<h2 class="text-2xl font-bold md:text-4xl">Timeline</h2>
<div class="space-y-8">
<div>
<h3 class="mb-3 text-lg font-bold md:text-xl">2021</h3>
<ul class="space-y-4">
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li>
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li><!---->
</ul>
</div>
<div>
<h3 class="mb-3 text-lg font-bold md:text-xl">2020</h3>
<ul class="space-y-4">
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li>
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li>
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li><!---->
</ul>
</div>
<div>
<h3 class="mb-3 text-lg font-bold md:text-xl">2019</h3>
<ul class="space-y-4">
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li>
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li><!---->
</ul>
</div>
</div>
</div>
</section>
<!-- timeline 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>
Reference in New Issue View Git Blame Copy Permalink