added timeline , register ,section , eoor ,contact , blog ,article block component's
This commit is contained in:
merajjahir
@@ -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