mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-25 08:07:02 +00:00
470 lines
32 KiB
HTML
470 lines
32 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 10</title>
|
|
</head>
|
|
<body>
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!-- header 6 start -->
|
|
<header class="z-30 w-full px-2 py-4 bg-white sm:px-4 dark:bg-gray-800">
|
|
<div class="flex items-center justify-between mx-auto max-w-7xl">
|
|
<a href="/" title="Kutty Home Page" class="flex items-center">
|
|
<svg class="w-auto h-6 dark:fill-white fill-black" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
|
|
<path
|
|
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
|
|
fill=""
|
|
/>
|
|
<path
|
|
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
|
|
fill="#9E58E9"
|
|
/>
|
|
<path
|
|
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
|
|
fill="#7629C8"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Kutty</span>
|
|
</a>
|
|
<div class="flex items-center space-x-1">
|
|
<div class="hidden space-x-1 md:inline-flex mr-5">
|
|
<a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Features</a>
|
|
<a href="#fd" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Pricing</a>
|
|
<a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Blog</a>
|
|
<a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Company</a>
|
|
<a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Sign in</a>
|
|
</div>
|
|
<a href="#d" class="p-1 rounded ring-2 bg-blue-600 text-white text-sm hover:bg-blue-700">Get Started</a>
|
|
<div class="inline-flex md:hidden" x-data="{ open: false }">
|
|
<button class="flex-none px-2 btn btn-link btn-sm" @click="open = true">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
class="w-5 h-5"
|
|
>
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
<span class="sr-only">Open Menu</span>
|
|
</button>
|
|
<div class="absolute top-0 left-0 right-0 z-50 flex flex-col p-2 pb-4 m-2 space-y-3 bg-white dark:bg-gray-800 rounded shadow" x-show.transition="open" @click.away="open = false" x-cloak>
|
|
<button class="self-end flex-none px-2 ml-2 btn btn-link btn-icon" @click="open = false">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
<span class="sr-only">Close Menu</span>
|
|
</button>
|
|
<a href="#" class="w-full font-semibold dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-xs">Features</a>
|
|
<a href="#" class="w-full dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-xs">Pricing</a>
|
|
<a href="#" class="w-full dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-xs">Blog</a>
|
|
<a href="#" class="w-full dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-xs">Company</a>
|
|
<a href="#" class="w-full dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-xs">Sign in</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- header 6 end -->
|
|
|
|
|
|
<!-- hero 6 start -->
|
|
<div class="relative flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 bg-cover min-w-screen">
|
|
<div
|
|
class="flex flex-col items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
|
|
<div class="relative w-full pr-10 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group">
|
|
<div class="relative rounded-md">
|
|
<img src="https://cdn.devdojo.com/images/september2020/grow-together.png"
|
|
class="z-10 object-cover w-full h-full">
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="container relative z-20 flex flex-col w-full px-5 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
|
|
<h1
|
|
class="relative z-20 font-sans text-4xl font-extrabold leading-none text-black sm:text-5xl xl:text-6xl sm:text-center lg:text-left">
|
|
<span class="relative">
|
|
<span
|
|
class="absolute bottom-0 left-0 inline-block w-full h-4 mb-1 -ml-1 transform -skew-x-3 bg-yellow-200 dark:bg-amber-50 dark:opacity-20"></span>
|
|
<span class="relative">Learn Together,</span>
|
|
</span>
|
|
<span class="relative block text-yellow-400">Grow Together.</span>
|
|
</h1>
|
|
<p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-lg sm:text-center lg:text-left">Join our
|
|
community and thrive with us! We can all help each other, learn together, and grow together.</p>
|
|
<div class="relative flex items-center mt-10">
|
|
<a href="#_"
|
|
class="flex items-center self-start justify-center px-5 py-3 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-yellow-500 border border-transparent rounded-lg shadow hover:bg-yellow-600 focus:outline-none focus:border-yellow-600 focus:shadow-outline-yellow md:py-4 md:text-lg xl:text-xl md:px-10">Get
|
|
Started</a>
|
|
<a href="#_"
|
|
class="relative inline-block h-full ml-5 text-lg font-medium leading-tight text-gray-600 hover:text-yellow-600 dark:hover:text-gray-200 underline transition duration-150 ease-in-out border-transparent">
|
|
Try Our Service for Free
|
|
</a>
|
|
</div>
|
|
<p class="mt-6 text-xs text-gray-500 rounded-full">Already a member? <a href="#_"
|
|
class="font-medium text-yellow-500 underline">Login Here</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- hero 6 end -->
|
|
|
|
<!-- pricing 6 start -->
|
|
<section class="dark:bg-gray-800">
|
|
|
|
<div class="px-4 py-24 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
|
|
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
|
<div>
|
|
<p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-400">
|
|
Brand new
|
|
</p>
|
|
</div>
|
|
<h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 dark:bg-gradient-to-r dark:from-emerald-300 dark:to-cyan-300 dark:text-transparent dark:bg-clip-text sm:text-4xl md:mx-auto">
|
|
<span class="relative inline-block">
|
|
<svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 dark:text-emerald-800 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
|
|
<defs>
|
|
<pattern id="bc9273ce-29bb-4565-959b-714607d4d027" x="0" y="0" width=".135" height=".30">
|
|
<circle cx="1" cy="1" r=".7"></circle>
|
|
</pattern>
|
|
</defs>
|
|
<rect fill="url(#bc9273ce-29bb-4565-959b-714607d4d027)" width="52" height="24"></rect>
|
|
</svg>
|
|
<span class="relative">Choose</span>
|
|
</span>
|
|
your way. Advance everyday.
|
|
</h2>
|
|
<p class="text-base text-gray-700 dark:text-gray-300 md:text-lg">
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae.
|
|
</p>
|
|
</div>
|
|
<div class="grid max-w-md gap-10 row-gap-8 lg:max-w-screen-lg sm:row-gap-10 lg:grid-cols-3 xl:max-w-screen-lg sm:mx-auto">
|
|
<div class="flex flex-col transition duration-300 bg-white rounded shadow-sm hover:shadow">
|
|
<div class="relative w-full h-48">
|
|
<img src="https://images.pexels.com/photos/3184305/pexels-photo-3184305.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-full rounded-t" alt="Plan" />
|
|
</div>
|
|
<div class="flex flex-col justify-between flex-grow p-8 border border-t-0 rounded-b">
|
|
<div>
|
|
<div class="text-lg font-semibold">Basic</div>
|
|
<p class="text-sm text-gray-900">
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque.
|
|
</p>
|
|
<div class="mt-1 mb-4 mr-1 text-4xl font-bold sm:text-5xl">$12</div>
|
|
</div>
|
|
<a
|
|
href="/"
|
|
class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
|
|
>
|
|
Buy Basic
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col transition duration-300 bg-white rounded shadow-sm hover:shadow">
|
|
<div class="relative w-full h-48">
|
|
<img src="https://images.pexels.com/photos/3183181/pexels-photo-3183181.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-full rounded-t" alt="Plan" />
|
|
</div>
|
|
<div class="flex flex-col justify-between flex-grow p-8 border border-t-0 rounded-b">
|
|
<div>
|
|
<div class="text-lg font-semibold">Advanced</div>
|
|
<p class="text-sm text-gray-900">
|
|
A flower in my garden, a mystery in my panties. Heart attack never was so close.
|
|
</p>
|
|
<div class="mt-1 mb-4 mr-1 text-4xl font-bold sm:text-5xl">$38</div>
|
|
</div>
|
|
<a
|
|
href="/"
|
|
class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
|
|
>
|
|
Buy Advanced
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col transition duration-300 bg-white rounded shadow-sm hover:shadow">
|
|
<div class="relative w-full h-48">
|
|
<img src="https://images.pexels.com/photos/3182743/pexels-photo-3182743.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="object-cover w-full h-full rounded-t" alt="Plan" />
|
|
</div>
|
|
<div class="flex flex-col justify-between flex-grow p-8 border border-t-0 rounded-b">
|
|
<div>
|
|
<div class="text-lg font-semibold">Pro</div>
|
|
<p class="text-sm text-gray-900">
|
|
We never had the chance to. Maybe it was the eleven months he spent in the womb.
|
|
</p>
|
|
<div class="mt-1 mb-4 mr-1 text-4xl font-bold sm:text-5xl">$78</div>
|
|
</div>
|
|
<a
|
|
href="/"
|
|
class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
|
|
>
|
|
Buy Pro
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
<!-- pricing 6 end -->
|
|
|
|
|
|
|
|
<!-- testimonial 6 start -->
|
|
|
|
<section class="py-24 dark:bg-gray-900 ">
|
|
<div class="container px-4 mx-auto">
|
|
<div class="max-w-lg mx-auto mb-12 text-center">
|
|
<img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
|
|
<h2 class="my-2 text-3xl md:text-4xl font-bold font-heading dark:text-emerald-500">Lorem ipsum dolor sit amet consectutar domor</h2>
|
|
<p class="text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
|
|
</div>
|
|
<div class="flex flex-wrap max-w-5xl mx-auto mb-6">
|
|
<div class="w-full md:w-1/2 px-3 mb-6">
|
|
<div class="p-8 bg-white dark:bg-gray-800 dark:shadow-lg dark:border-2 dark:border-emerald-600 shadow rounded">
|
|
<div class="flex items-center mb-4">
|
|
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
|
|
<div class="pl-4">
|
|
<p class="text-xl dark:text-white">John Bailey</p>
|
|
<p class="text-teal-600">CEO</p>
|
|
</div>
|
|
</div>
|
|
<p class="leading-loose text-black dark:text-gray-300">
|
|
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-3 mb-6">
|
|
<div class="p-8 bg-white dark:bg-gray-800 dark:shadow-lg dark:border-2 dark:border-emerald-600 shadow rounded">
|
|
<div class="flex items-center mb-4">
|
|
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
|
|
<div class="pl-4">
|
|
<p class="text-xl dark:text-white">Julie Bailey</p>
|
|
<p class="text-teal-600">Head of Development</p>
|
|
</div>
|
|
</div>
|
|
<p class="leading-loose text-black dark:text-gray-300">
|
|
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-3 mb-6">
|
|
<div class="p-8 bg-white dark:bg-gray-800 dark:shadow-lg dark:border-2 dark:border-emerald-600 shadow rounded">
|
|
<div class="flex items-center mb-4">
|
|
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
|
|
<div class="pl-4">
|
|
<p class="text-xl dark:text-white">Julie Bailey</p>
|
|
<p class="text-teal-600">Head of Operations</p>
|
|
</div>
|
|
</div>
|
|
<p class="leading-loose text-black dark:text-gray-300">
|
|
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 px-3 mb-6">
|
|
<div class="p-8 bg-white dark:bg-gray-800 dark:shadow-lg dark:border-2 dark:border-emerald-600 shadow rounded">
|
|
<div class="flex items-center mb-4">
|
|
<img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
|
|
<div class="pl-4">
|
|
<p class="text-xl dark:text-white">Tom Brown</p>
|
|
<p class="text-teal-600">Head of Development</p>
|
|
</div>
|
|
</div>
|
|
<p class="leading-loose text-black dark:text-gray-300">
|
|
Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center"><a class="inline-block py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Show more Testimonials</a></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- testimonial 6 end -->
|
|
|
|
|
|
|
|
<!--footer 6 start-->
|
|
<footer class="bg-gray-50 dark:bg-gray-800">
|
|
<div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
|
|
<span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
|
|
|
|
<div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-3">
|
|
<div class="lg:order-last">
|
|
<p class="font-medium dark:text-gray-300 dark:hover:text-sky-300">
|
|
Newsletter
|
|
</p>
|
|
|
|
<form class="max-w-sm mt-4">
|
|
<div class="relative">
|
|
<label class="sr-only" for="email"> Email </label>
|
|
|
|
<input class="w-full py-4 pl-3 pr-16 text-sm border-2 border-gray-200 rounded-lg" id="email" type="email" placeholder="Enter your email address">
|
|
|
|
<button class="absolute p-2 text-white -translate-y-1/2 bg-blue-600 rounded-full hover:bg-blue-700 active:bg-blue-500 top-1/2 right-4" type="button">
|
|
<svg class="w-4 h-4 rotate-45 translate-x-[1px] -translate-y-[1px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="flex mt-8 space-x-6 text-gray-500">
|
|
<a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" 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 dark:text-gray-300 dark:hover:text-sky-300" 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 dark:text-gray-300 dark:hover:text-sky-300" 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 dark:text-gray-300 dark:hover:text-sky-300" 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 dark:text-gray-300 dark:hover:text-sky-300" 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 class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div>
|
|
<p class="font-medium dark:text-gray-300 ">
|
|
Company
|
|
</p>
|
|
|
|
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="font-medium dark:text-gray-300">
|
|
Services
|
|
</p>
|
|
|
|
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="font-medium dark:text-gray-300">
|
|
Helpful Links
|
|
</p>
|
|
|
|
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="font-medium dark:text-gray-300">
|
|
Legal
|
|
</p>
|
|
|
|
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms & Conditions </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
|
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-8 text-xs text-gray-500">
|
|
© 2022 Company Name
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
<!--footer 6 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> |