554 lines
36 KiB
HTML
554 lines
36 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">
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
|
<title>Template 7</title>
|
|
</head>
|
|
<body>
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
|
|
<!-- header 3 start -->
|
|
|
|
<header class="text-gray-600 dark:bg-gray-800 body-font">
|
|
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
|
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
|
|
</svg>
|
|
<span class="ml-3 text-xl dark:text-gray-400">Tailblocks</span>
|
|
</a>
|
|
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
|
|
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">First Link</a>
|
|
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Second Link</a>
|
|
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Third Link</a>
|
|
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Fourth Link</a>
|
|
</nav>
|
|
<button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
|
|
Button
|
|
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
|
|
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- header 3 end -->
|
|
|
|
|
|
<!-- hero 3 start -->
|
|
|
|
<div class="relative flex flex-col items-center justify-center min-h-screen bg-cover "
|
|
style="background-image:url('https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80')">
|
|
<div class="absolute inset-0 w-full h-full bg-black bg-opacity-75"></div>
|
|
|
|
<div class="flex flex-col max-w-6xl md:flex-row mx-auto">
|
|
<div class="container relative flex flex-col md:w-1/2 px-10 pb-5 pr-12 text-2xl font-hairline text-white">
|
|
<h2 class="relative z-20 text-5xl font-extrabold leading-tight text-white">Build a culture<br> that excels
|
|
</h2>
|
|
<p class="relative z-20 block mt-4 text-xl">We've created the ultimate resource for turning your culture
|
|
into a
|
|
super-powered productivity machine by encouraging collaboration growth, and incentives!</p>
|
|
<div class="flex mt-4">
|
|
<a href="#_"
|
|
class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-lg shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-8">Get
|
|
Started</a>
|
|
<a href="#_"
|
|
class="flex items-center self-start justify-center px-5 py-3 mt-5 ml-5 text-base font-medium leading-tight text-indigo-500 transition duration-150 ease-in-out bg-gray-200 border-transparent rounded-lg shadow hover:bg-white focus:outline-none focus:border-gray-100 focus:shadow-outline-gray md:py-4 md:text-lg md:px-8">How
|
|
It Works</a>
|
|
</div>
|
|
</div>
|
|
<div class="relative md:w-1/2 overflow-hidden rounded-lg shadow-2xl cursor-pointer group">
|
|
<div class="absolute flex items-center justify-center w-full h-full bg-black bg-opacity-25">
|
|
<span class="flex items-center justify-center w-20 h-20 bg-white bg-opacity-75 rounded-full">
|
|
<svg class="w-auto h-8 ml-1 text-indigo-600 fill-current" viewBox="0 0 52 66"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
|
|
fill-rule="nonzero" /></svg>
|
|
</span>
|
|
</div>
|
|
<img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3290&q=80"
|
|
class="object-cover w-full h-full">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- hero 3 end -->
|
|
|
|
|
|
<!-- accordion 2 start -->
|
|
|
|
|
|
<div class="flex items-center justify-center py-20 transition-height duration-300 from-purple-100 via-red-300 to-indigo-500 bg-gradient-to-br">
|
|
<div class='w-full max-w-lg px-10 py-8 mx-auto bg-white rounded-lg shadow-xl'>
|
|
<h1 class="text-xl mb-10 text-center">TAILWINDCSS ACCORDION WITH <code><details> <summary></code> HTML Tag</h1>
|
|
|
|
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
|
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 after:content-['+'] ">Morbi at sagittis velit</summary>
|
|
<p class="px-4 py-3">
|
|
Nunc posuere dapibus urna quis cursus. Mauris malesuada tincidunt diam vel placerat mi tincidunt ac. Nullam augue urna, venenatis ut blandit eget, auctor vel eros. In ut dolor ante
|
|
</p>
|
|
</details>
|
|
|
|
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
|
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">Etiam ut lacus in enim sagittis posuere at a elit</summary>
|
|
<p class="px-4 py-3 transition-all duration-700">
|
|
Fusce sed laoreet ex. Aenean justo nisl, eleifend eget eleifend sit amet, imperdiet id libero. Suspendisse et tempus leo, et lacinia arcu. Etiam at ante in est efficitur fringilla eleifend nec tellus. Integer sed auctor lectus, nec ullamcorper arcu. Nullam nec eros elit. Nulla tempor massa ut quam elementum dignissim. Sed eu pulvinar est, vel vehicula dolor. Pellentesque in ante vel elit facilisis consectetur eu id felis
|
|
</p>
|
|
</details>
|
|
|
|
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
|
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">
|
|
Nam auctor fringilla magna id porta
|
|
</summary>
|
|
<p class="px-4 py-3 transition-all duration-700">
|
|
Etiam maximus vitae eros eu vestibulum. Donec posuere, magna non tincidunt dignissim, magna tortor mollis augue, at maximus ante lacus vel tellus. Vestibulum vestibulum consectetur tortor id sagittis. Suspendisse nisi ipsum, pretium a lorem at, laoreet condimentum arcu
|
|
</p>
|
|
</details>
|
|
|
|
|
|
<!-- THE CSS -->
|
|
<style>
|
|
|
|
details[open] summary::after {
|
|
content: "-";
|
|
transition: all;
|
|
transition-duration: 1s;
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- accordion 2 end -->
|
|
|
|
|
|
<!-- team 1 start -->
|
|
<section class="dark:bg-gray-800 bg-white py-24">
|
|
<section class="container p-6 mx-auto ">
|
|
<h2 class="text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
|
|
|
|
<div class="flex items-center justify-center">
|
|
<div class="grid gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
<div class="w-full max-w-xs text-center">
|
|
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
|
|
|
|
<div class="mt-2">
|
|
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Ahmed Omer</h3>
|
|
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">CEO</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full max-w-xs text-center">
|
|
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
|
|
|
|
<div class="mt-2">
|
|
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Jane Doe</h3>
|
|
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Co-founder</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full max-w-xs text-center">
|
|
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
|
|
|
|
<div class="mt-2">
|
|
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Steve Ben</h3>
|
|
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">UI/UX</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full max-w-xs text-center">
|
|
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
|
|
|
|
<div class="mt-2">
|
|
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Patterson Johnson</h3>
|
|
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Software Engineer</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</section>
|
|
<!-- team 1 end -->
|
|
|
|
|
|
<!-- feature 2 start -->
|
|
|
|
<section class="bg-white dark:bg-gray-900 py-24">
|
|
<div class="container px-6 py-10 mx-auto">
|
|
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
|
|
|
|
<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-16 md:grid-cols-2 xl:grid-cols-3">
|
|
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
|
|
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
|
</svg>
|
|
</span>
|
|
|
|
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Copy & paste components</h1>
|
|
|
|
<p class="text-gray-500 dark:text-gray-300">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
|
</p>
|
|
|
|
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
|
<span class="mx-1">read more</span>
|
|
<svg class="w-4 h-4 mx-1" 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>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
|
|
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
|
</svg>
|
|
</span>
|
|
|
|
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Zero Configrations</h1>
|
|
|
|
<p class="text-gray-500 dark:text-gray-300">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
|
</p>
|
|
|
|
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
|
<span class="mx-1">read more</span>
|
|
<svg class="w-4 h-4 mx-1" 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>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
|
|
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
|
|
</svg>
|
|
</span>
|
|
|
|
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
|
|
|
|
<p class="text-gray-500 dark:text-gray-300">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
|
</p>
|
|
|
|
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
|
<span class="mx-1">read more</span>
|
|
<svg class="w-4 h-4 mx-1" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- feature 2 end -->
|
|
|
|
<!-- testimonial 3 start -->
|
|
|
|
<section class="text-gray-600 dark:bg-gray-800 body-font ">
|
|
<div class="container px-5 py-24 mx-auto">
|
|
<div class="flex flex-wrap -m-4">
|
|
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
|
<div class="h-full text-center">
|
|
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 dark:border-2 dark:border-indigo-500 bg-gray-100" src="https://dummyimage.com/302x302">
|
|
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
|
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
|
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
|
|
<p class="text-gray-500 dark:text-indigo-500">Senior Product Designer</p>
|
|
</div>
|
|
</div>
|
|
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
|
<div class="h-full text-center">
|
|
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500" src="https://dummyimage.com/300x300">
|
|
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
|
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
|
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
|
|
<p class="text-gray-500 dark:text-indigo-500">UI Develeoper</p>
|
|
</div>
|
|
</div>
|
|
<div class="lg:w-1/3 lg:mb-0 p-4">
|
|
<div class="h-full text-center">
|
|
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500 " src="https://dummyimage.com/305x305">
|
|
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
|
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
|
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
|
|
<p class="text-gray-500 dark:text-indigo-500">CTO</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- testimonial 3 end -->
|
|
|
|
|
|
|
|
<!-- card 2 start -->
|
|
<section class="flex flex-col md:flex-row justify-between dark:bg-gray-800 dark:text-gray-50 py-24">
|
|
<div class=" my-10 mx-auto max-w-xs p-6 rounded-md shadow-md dark:bg-gray-900 dark:text-gray-50">
|
|
<img src="https://source.unsplash.com/random/300x300/?1" alt="" class="object-cover object-center w-full rounded-md h-72 dark:bg-gray-500">
|
|
<div class="mt-6 mb-2">
|
|
<span class="block text-xs font-medium tracking-widest uppercase dark:text-green-400">Quisque</span>
|
|
<h2 class="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
|
|
</div>
|
|
<p class="dark:text-gray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
|
|
</div>
|
|
<div class=" my-10 mx-auto max-w-xs p-6 rounded-md shadow-md dark:bg-gray-900 dark:text-gray-50">
|
|
<img src="https://source.unsplash.com/random/300x300/?1" alt="" class="object-cover object-center w-full rounded-md h-72 dark:bg-gray-500">
|
|
<div class="mt-6 mb-2">
|
|
<span class="block text-xs font-medium tracking-widest uppercase dark:text-green-400">Quisque</span>
|
|
<h2 class="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
|
|
</div>
|
|
<p class="dark:text-gray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
|
|
</div>
|
|
<div class=" my-10 mx-auto max-w-xs p-6 rounded-md shadow-md dark:bg-gray-900 dark:text-gray-50">
|
|
<img src="https://source.unsplash.com/random/300x300/?1" alt="" class="object-cover object-center w-full rounded-md h-72 dark:bg-gray-500">
|
|
<div class="mt-6 mb-2">
|
|
<span class="block text-xs font-medium tracking-widest uppercase dark:text-green-400">Quisque</span>
|
|
<h2 class="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
|
|
</div>
|
|
<p class="dark:text-gray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- card 2 end -->
|
|
|
|
|
|
<!-- contact 1 start -->
|
|
|
|
<section class="py-24 dark:bg-gray-800 dark:text-gray-50">
|
|
<div class="grid container 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 -->
|
|
|
|
|
|
<!--footer 3 start -->
|
|
|
|
<footer class="bg-gray-900">
|
|
<div class="container px-4 py-16 mx-auto sm:px-6 lg:px-8">
|
|
<div class="lg:flex lg:gap-8">
|
|
<div>
|
|
<span class="block w-32 h-10 bg-gray-700 rounded-lg"></span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-8 mt-8 lg:mt-0 lg:grid-cols-5 lg:gap-y-16">
|
|
<div class="col-span-2">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-white">
|
|
Get the latest news!
|
|
</h2>
|
|
|
|
<p class="mt-6 text-gray-400">
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse non cupiditate quae nam molestias.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-2 lg:col-span-3 lg:flex lg:items-end">
|
|
<form class="w-full text-white">
|
|
<label for="email" class="sr-only"> Email </label>
|
|
|
|
<div class="p-2 border sm:flex sm:items-center border-white/10">
|
|
<input class="w-full h-12 p-3 text-sm font-medium tracking-widest placeholder-gray-400 uppercase bg-transparent border-none" type="email" id="email" placeholder="Enter your email">
|
|
|
|
<button class="w-full h-12 px-6 py-3 mt-1 text-sm font-bold tracking-wide uppercase bg-red-700 sm:ml-4 sm:flex-shrink-0 sm:w-auto sm:mt-0" type="submit">
|
|
Sign Up
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
|
<p class="font-bold text-white"> Services </p>
|
|
|
|
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
|
<a class="inline-block" href=""> 1on1 Coaching </a>
|
|
<a class="inline-block" href=""> Company Review </a>
|
|
<a class="inline-block" href=""> Accounts Review </a>
|
|
<a class="inline-block" href=""> HR Consulting </a>
|
|
<a class="inline-block" href=""> SEO Optimisation </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
|
<p class="font-bold text-white"> Company </p>
|
|
|
|
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
|
<a class="inline-block" href=""> About </a>
|
|
<a class="inline-block" href=""> Meet the Team </a>
|
|
<a class="inline-block" href=""> History </a>
|
|
<a class="inline-block" href=""> Careers </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
|
<p class="font-bold text-white"> Helpful Links </p>
|
|
|
|
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
|
<a class="inline-block" href=""> Contact </a>
|
|
<a class="inline-block" href=""> FAQs </a>
|
|
<a class="inline-block" href=""> Live Chat </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
|
<p class="font-bold text-white"> Legal </p>
|
|
|
|
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
|
<a class="inline-block" href=""> Accessibility </a>
|
|
<a class="inline-block" href=""> Returns Policy </a>
|
|
<a class="inline-block" href=""> Refund Policy </a>
|
|
<a class="inline-block" href=""> Hiring Statistics </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
|
<p class="font-bold text-white"> Downloads </p>
|
|
|
|
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
|
<a class="inline-block" href=""> Marketing Calendar </a>
|
|
<a class="inline-block" href=""> SEO Infographics </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="flex col-span-2 space-x-4 text-gray-500 lg:col-span-5">
|
|
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
|
<span class="sr-only"> Facebook </span>
|
|
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
|
<span class="sr-only"> Instagram </span>
|
|
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
|
<span class="sr-only"> Twitter </span>
|
|
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
|
<span class="sr-only"> GitHub </span>
|
|
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
|
<span class="sr-only"> Dribbble </span>
|
|
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-8 mt-12 border-t border-white/10">
|
|
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
<p class="text-xs text-center text-gray-400 lg:text-left">
|
|
Copyright © 2022. Company Name. All rights reserved.
|
|
</p>
|
|
|
|
<nav class="flex justify-center space-x-4 text-xs text-gray-400 lg:justify-end">
|
|
<a href=""> Terms & Conditions </a>
|
|
<a href=""> Privacy Policy </a>
|
|
<a href=""> Cookies </a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!--footer 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> |