mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2026-01-01 22:57:01 +00:00
130 lines
6.1 KiB
HTML
130 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 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> |