mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-24 14:37:02 +00:00
637 lines
46 KiB
HTML
637 lines
46 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 6</title>
|
|
</head>
|
|
<body>
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
<!-- header 2 start -->
|
|
|
|
<section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-900 body-font">
|
|
<div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
|
|
<a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
|
|
|
|
<nav class="top-0 left-0 z-0 flex items-center justify-center w-full h-full py-5 -ml-0 space-x-5 text-base md:-ml-5 md:py-0 md:absolute">
|
|
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
|
<span class="block">Home</span>
|
|
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
|
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform dark:bg-gray-400 bg-gray-900" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
|
</span>
|
|
</a>
|
|
<a href="#_" class="relative font-medium leading-6 dark:text-gray-400 dark:hover:text-gray-200 text-gray-600 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
|
<span class="block">Features</span>
|
|
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
|
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
|
</span>
|
|
</a>
|
|
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
|
<span class="block">Pricing</span>
|
|
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
|
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
|
</span>
|
|
</a>
|
|
<a href="#_" class="relative font-medium leading-6 text-gray-600 transition duration-150 ease-out hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
|
<span class="block">Blog</span>
|
|
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
|
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
|
</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="relative z-10 inline-flex items-center space-x-3 md:ml-5 lg:justify-end">
|
|
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-gray-600 whitespace-no-wrap bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:shadow-none">
|
|
Sign in
|
|
</a>
|
|
<span class="inline-flex rounded-md shadow-sm">
|
|
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-blue-600 border border-blue-700 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
Sign up
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- header 2 end -->
|
|
|
|
|
|
<!-- hero 2 start -->
|
|
<div class="relative flex flex-col items-center justify-center min-h-screen dark:bg-gray-800 bg-white 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="container relative z-20 flex flex-col w-full px-5 pb-1 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 text-5xl font-extrabold leading-none text-purple-500 xl:text-6xl sm:text-center lg:text-left">
|
|
Designed with<br class="md:hidden lg:block"> <span class="text-gray-800">you in mind</span></h1>
|
|
<p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-xl sm:text-center lg:text-left">We've
|
|
crafted
|
|
the ultimate design tool that will help you build the design of your dreams. Built with configuration in
|
|
mind,
|
|
you can fully customize every aspect.</p>
|
|
<div class="relative 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-purple-500 border border-transparent rounded-full shadow hover:bg-purple-600 focus:outline-none focus:border-purple-600 focus:shadow-outline-purple md:py-4 md:text-lg xl:text-xl md:px-10">Get
|
|
Started</a>
|
|
<a href="#_"
|
|
class="relative flex items-center self-start justify-center py-3 pl-10 pr-5 mt-5 ml-5 text-base font-medium leading-tight text-gray-400 transition duration-150 ease-in-out bg-gray-100 border-transparent rounded-full shadow-sm md:pl-16 md:pr-10 hover:text-purple-500 focus:outline-none md:py-4 md:text-lg xl:text-xl">
|
|
<svg class="absolute left-0 w-6 h-6 ml-3 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
<span class="text-purple-500">How It Works</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-full px-5 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group xl:px-0">
|
|
<div class="absolute top-0 left-0 w-11/12 -mt-20 opacity-50">
|
|
<svg class="w-full h-full ml-4 text-purple-100 dark:text-gray-700" viewBox="0 0 200 200"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path fill="currentColor"
|
|
d="M45,-78C58.3,-70.3,69,-58.2,75.2,-44.4C81.3,-30.7,82.9,-15.3,83.5,0.4C84.2,16,83.8,32.1,76.5,43.9C69.2,55.7,55.1,63.3,41.2,69.4C27.3,75.4,13.6,80,-0.7,81.2C-15.1,82.5,-30.1,80.3,-41.2,72.6C-52.2,64.9,-59.2,51.6,-67.1,38.5C-75.1,25.5,-83.9,12.8,-83.8,0C-83.8,-12.7,-74.9,-25.4,-65.8,-36.4C-56.7,-47.4,-47.4,-56.7,-36.4,-65.7C-25.4,-74.7,-12.7,-83.5,1.6,-86.2C15.9,-89,31.8,-85.7,45,-78Z"
|
|
transform="translate(100 100)" />
|
|
</svg>
|
|
</div>
|
|
<div class="relative overflow-hidden rounded-md shadow-2xl cursor-pointer group">
|
|
<div class="absolute flex items-center justify-center w-full h-full">
|
|
<span class="flex items-center justify-center w-20 h-20 bg-purple-500 rounded-full shadow-2xl">
|
|
<svg class="w-auto h-8 ml-1 text-white 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-1493857671505-72967e2e2760?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&h=1603&q=80"
|
|
class="z-10 object-cover w-full h-full">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- hero 2 end -->
|
|
|
|
<!-- start cta 2 -->
|
|
<section class="flex justify-around py-24 dark:bg-gray-900">
|
|
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
|
<a href="#">
|
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
|
</a>
|
|
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
|
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
|
Read more
|
|
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
</a>
|
|
</div>
|
|
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
|
<a href="#">
|
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
|
</a>
|
|
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
|
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
|
Read more
|
|
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
|
<a href="#">
|
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
|
</a>
|
|
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
|
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
|
Read more
|
|
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
</a>
|
|
</div>
|
|
|
|
</section>
|
|
<!-- end cta 2 -->
|
|
|
|
|
|
<!-- feature 2 start -->
|
|
|
|
<section class="bg-white dark:bg-gray-800 p-24">
|
|
<div class="container 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 -->
|
|
|
|
|
|
|
|
<!-- pricing 2 start -->
|
|
|
|
<section x-data="{ toggle: 'basic' }"
|
|
class="relative py-24 bg-gray-200 dark:bg-gray-900 min-w-screen animation-fade animation-delay">
|
|
<div class="container w-full px-10 mx-auto sm:px-5 ">
|
|
<div class="sm:flex ">
|
|
<aside class="w-full sm:flex-initial">
|
|
<div @click="toggle = 'basic'"
|
|
:class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'basic' }"
|
|
class="flex mt-1 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
|
|
<div class="self-center flex-shrink p-5">
|
|
<svg x-show="toggle === 'basic'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
|
|
<polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
<svg x-show="toggle != 'basic'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
|
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
|
|
xml:space="preserve">
|
|
<ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-grow px-0 py-5 md:px-5">
|
|
<div class="text-2xl">Basic</div>
|
|
<div class="pt-1 text-sm">Start pack + 3 submissions</div>
|
|
</div>
|
|
<div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 5</div>
|
|
</div>
|
|
<div @click="toggle = 'silver'"
|
|
:class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'silver' }"
|
|
class="flex mt-3 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
|
|
<div class="self-center flex-shrink p-5">
|
|
<svg x-show="toggle === 'silver'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
|
|
<polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
<svg x-show="toggle != 'silver'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
|
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
|
|
xml:space="preserve">
|
|
<ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-grow px-0 py-5 md:px-5">
|
|
<div class="text-2xl">Silver</div>
|
|
<div class="pt-1 text-sm text-gray-500">Start pack + 10 submissions</div>
|
|
</div>
|
|
<div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 10</div>
|
|
</div>
|
|
<div @click="toggle = 'gold'" :class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'gold' }"
|
|
class="flex mt-3 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
|
|
<div class="self-center flex-shrink p-5">
|
|
<svg x-show="toggle === 'gold'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
|
|
<polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
<svg x-show="toggle != 'gold'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
|
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
|
|
xml:space="preserve">
|
|
<ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-grow px-0 py-5 md:px-5">
|
|
<div class="text-2xl">Gold</div>
|
|
<div class="pt-1 text-sm text-gray-500">Start pack + 20 submissions</div>
|
|
</div>
|
|
<div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 15</div>
|
|
</div>
|
|
</aside>
|
|
<div x-show="toggle === 'basic'"
|
|
class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
|
|
<div class="flex-grow px-8 py-5 dark:text-white dark:border-2 dark:rounded-l-md dark:border-emerald-300">
|
|
<div class="text-4xl">
|
|
Basic Package
|
|
</div>
|
|
<div class="mt-0 text-lg text-gray-500">3 Submissions</div>
|
|
|
|
<div class="flex mt-5 ">
|
|
<div class="self-center flex-shrink">
|
|
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
</div>
|
|
<div class="self-center flex-grow ml-3">Starter pack</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="self-center flex-shrink">
|
|
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
</div>
|
|
<div class="self-center flex-grow ml-3">3 Submissions</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="self-center flex-shrink">
|
|
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
</div>
|
|
<div class="self-center flex-grow ml-3">FREE Ebook</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="mt-8">
|
|
<a href="#">
|
|
<div
|
|
class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
|
|
Choose Package
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex w-64 h-full bg-blue-500 dark:border-l-2 bg-opacity-25 rounded-r md:flex-shrink bg-[url(https://picsum.photos/400/400?grayscale)]"
|
|
></div>
|
|
</div>
|
|
<div x-show="toggle === 'silver'"
|
|
class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
|
|
<div class="flex-grow px-8 py-5 dark:text-white">
|
|
<div class="text-4xl ">
|
|
Silver Package
|
|
</div>
|
|
<div class="mt-0 text-lg text-gray-500">10 Submissions</div>
|
|
|
|
<div class="flex mt-5">
|
|
<div class="self-center flex-shrink">
|
|
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
</div>
|
|
<div class="self-center flex-grow ml-3">Starter pack</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="self-center flex-shrink">
|
|
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
</div>
|
|
<div class="self-center flex-grow ml-3">10 Submissions</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="self-center flex-shrink">
|
|
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
</div>
|
|
<div class="self-center flex-grow ml-3">FREE Ebook</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="mt-8">
|
|
<a href="#">
|
|
<div
|
|
class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
|
|
Choose Package
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex w-64 h-full bg-blue-500 dark:border-l-2 dark:border-emerald-300 bg-opacity-25 rounded-r md:flex-shrink"
|
|
style="background: url('https://picsum.photos/400/400?grayscale');"></div>
|
|
</div>
|
|
<div x-show="toggle === 'gold'"
|
|
class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
|
|
<div class="flex-grow px-8 py-5 dark:text-white">
|
|
<div class="text-4xl">
|
|
Gold Package
|
|
</div>
|
|
<div class="mt-0 text-lg text-gray-500">20 Submissions</div>
|
|
|
|
<div class="flex mt-5">
|
|
<div class="self-center flex-shrink">
|
|
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
</div>
|
|
<div class="self-center flex-grow ml-3">Starter pack</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="self-center flex-shrink">
|
|
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
</div>
|
|
<div class="self-center flex-grow ml-3">20 Submissions</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="self-center flex-shrink">
|
|
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
|
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
|
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
|
391.88,166.392 " />
|
|
</svg>
|
|
</div>
|
|
<div class="self-center flex-grow ml-3">FREE Ebook</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="mt-8">
|
|
<a href="#">
|
|
<div
|
|
class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
|
|
Choose Package
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex w-64 h-full bg-blue-500 bg-opacity-25 dark:border-l-2 dark:border-emerald-300 rounded-r md:flex-shrink"
|
|
style="background: url('https://picsum.photos/400/400?grayscale');"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- pricing 2 end -->
|
|
|
|
|
|
<!--footer 2 start-->
|
|
|
|
<section class="pt-24 flex items-end w-full bg-white dark:bg-gray-800">
|
|
|
|
<footer class="w-full text-gray-700 bg-gray-100 dark:bg-gray-800 body-font">
|
|
<div
|
|
class="container flex flex-col flex-wrap px-5 py-24 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap">
|
|
<div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
|
|
<a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start">
|
|
<svg class="w-auto h-5 text-gray-900 dark:text-sky-300 fill-current" viewBox="0 0 202 69"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
|
fill-rule="nonzero" /></svg>
|
|
</a>
|
|
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Design, Code and Ship!</p>
|
|
<div class="mt-4">
|
|
<span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
|
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
class="w-5 h-5" viewBox="0 0 24 24">
|
|
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
|
</svg>
|
|
</a>
|
|
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
|
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
class="w-5 h-5" viewBox="0 0 24 24">
|
|
<path
|
|
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
|
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
|
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
|
|
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
|
|
</svg>
|
|
</a>
|
|
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
|
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
|
|
stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
|
|
<path stroke="none"
|
|
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z">
|
|
</path>
|
|
<circle cx="4" cy="4" r="2" stroke="none"></circle>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left">
|
|
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
|
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">About</h2>
|
|
<nav class="mb-10 list-none">
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Company</a>
|
|
</li>
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Careers</a>
|
|
</li>
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Blog</a>
|
|
</li>
|
|
</nav>
|
|
</div>
|
|
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
|
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 dark:text-sky-300 uppercase title-font">Support</h2>
|
|
<nav class="mb-10 list-none">
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Contact Support</a>
|
|
</li>
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Help Resources</a>
|
|
</li>
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Release Updates</a>
|
|
</li>
|
|
</nav>
|
|
</div>
|
|
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
|
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Platform
|
|
</h2>
|
|
<nav class="mb-10 list-none">
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Terms & Privacy</a>
|
|
</li>
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Pricing</a>
|
|
</li>
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">FAQ</a>
|
|
</li>
|
|
</nav>
|
|
</div>
|
|
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
|
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Contact</h2>
|
|
<nav class="mb-10 list-none">
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Send a Message</a>
|
|
</li>
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Request a Quote</a>
|
|
</li>
|
|
<li class="mt-3">
|
|
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">+123-456-7890</a>
|
|
</li>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-300 dark:bg-gray-700">
|
|
<div class="container px-5 py-4 mx-auto">
|
|
<p class="text-sm text-gray-700 dark:text-white capitalize xl:text-center">© 2020 All rights reserved </p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
</section>
|
|
<!--footer 2 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> |