mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-25 09:57:02 +00:00
321 lines
21 KiB
HTML
321 lines
21 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 30</title>
|
||
</head>
|
||
<body>
|
||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||
d
|
||
</button>
|
||
|
||
|
||
|
||
<!-- header 20 start -->
|
||
<div class="bg-gray-100 dark:bg-gray-800 ">
|
||
<nav class="bg-white dark:bg-gray-800 px-6 relative shadow-md">
|
||
<div class="flex flex-row justify-between items-center py-2">
|
||
<h3 class="font-semibold text-3xl text-gray-500 dark:text-cyan-300 dark:focus:text-cyan-600">Webapp</h3>
|
||
<div class="group flex flex-col items-center">
|
||
<button class="p-2 rounded-lg md:hidden">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-10 fill-current" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" /></svg>
|
||
</button>
|
||
<div class="hidden group-hover:block md:block absolute md:static bg-white dark:bg-gray-800 inset-x-0 top-16 py-3 shadow-md md:shadow-none text-gray-600">
|
||
<div class="flex flex-row justify-center items-center text-center font-semibold text-gray-500">
|
||
<a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/><path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/></svg>
|
||
Home
|
||
</a>
|
||
<a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/></svg>
|
||
Account
|
||
</a>
|
||
<a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/><path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/></svg>
|
||
Logout
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- header 20 end -->
|
||
|
||
|
||
<!-- hero 21 start -->
|
||
<section class="bg-white dark:bg-gray-900 py-24 ">
|
||
|
||
<div class="container flex flex-col px-6 mx-auto space-y-6 lg:h-[32rem] lg:py-16 lg:flex-row lg:items-center">
|
||
<div class="w-full lg:w-1/2">
|
||
<div class="lg:max-w-lg">
|
||
<h1 class="text-3xl text-left font-bold tracking-wide text-gray-800 dark:text-white lg:text-5xl">
|
||
Easiest way to create your website
|
||
</h1>
|
||
|
||
<div class="mt-8 space-y-5 ">
|
||
<p class="flex items-center -mx-2 text-gray-700 dark:text-gray-200">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
|
||
<span class="mx-2">Clean and Simple Layout</span>
|
||
</p>
|
||
|
||
<p class="flex items-center -mx-2 text-gray-700 dark:text-gray-200">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
|
||
<span class="mx-2">Just Copy Paste Codeing</span>
|
||
</p>
|
||
|
||
<p class="flex items-center -mx-2 text-gray-700 dark:text-gray-200">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
|
||
<span class="mx-2">Easy to Use</span>
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="w-full mt-8 bg-transparent border rounded-md lg:max-w-sm dark:border-gray-700 focus-within:border-blue-400 focus-within:ring focus-within:ring-blue-300 dark:focus-within:border-blue-400 focus-within:ring-opacity-40">
|
||
<form class="flex flex-col lg:flex-row">
|
||
<input type="email" placeholder="Enter your email address" class="flex-1 h-10 px-4 py-2 m-1 text-gray-700 placeholder-gray-400 bg-transparent border-none appearance-none dark:text-gray-200 focus:outline-none focus:placeholder-transparent focus:ring-0" />
|
||
|
||
<button type="button" class=" h-10 px-2 py-2 m-1 text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
|
||
Join Us
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-center w-full h-96 lg:w-1/2">
|
||
<img class="object-cover w-full h-full mx-auto rounded-md lg:max-w-2xl" src="https://images.unsplash.com/photo-1543269664-7eef42226a21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="glasses photo">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- hero 21 end -->
|
||
|
||
|
||
|
||
|
||
<!-- feature 9 start -->
|
||
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
||
<div class=" container flex flex-col mx-auto lg:flex-row">
|
||
<div class="w-full lg:w-1/3" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-size: cover;"></div>
|
||
<div class="flex flex-col w-full p-6 lg:w-2/3 md:p-8 lg:p-12">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 mb-8 dark:text-green-400">
|
||
<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||
</svg>
|
||
<h2 class="text-3xl font-semibold leading-none">Modern solutions to all kinds of problems</h2>
|
||
<p class="mt-4 mb-8 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non voluptatum rem amet!</p>
|
||
<button class="self-start px-10 py-3 text-lg font-medium rounded-3xl dark:bg-green-400 dark:text-gray-900">Get started</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- feature 9 end -->
|
||
|
||
|
||
|
||
<!-- start cta 14 -->
|
||
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
||
|
||
<div class="container m-auto px-6 ">
|
||
<div class="flex flex-col md:flex-row items-center justify-between relative w-100 h-auto md:h-64 bg-100 shadow-2xl rounded-lg p-8 dark:bg-gray-900">
|
||
<div class="w-8/12 text-2xl">
|
||
<img alt="quote" class="float-left mr-1" src="https://assets-global.website-files.com/5b5a66e9f3166b36708705fa/5cf8fb1f994fb7168d0d66fb_quote-intro.svg">
|
||
<span class="flex dark:text-yellow-100">We are team of developers with houndreds hours spend on coding, we create professional apps, webs.</span>
|
||
</div>
|
||
<div class="relative shadow-md font-medium my-5 py-2 px-4 text-white dark:text-gray-800 cursor-pointer bg-yellow-600 hover:bg-yellow-500 rounded text-lg text-center w-48">
|
||
<span class="absolute h-3 right-0 top-0 animate-ping inline-flex rounded-full bg-yellow-600">
|
||
</span>
|
||
Call now
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- end cta 14 -->
|
||
|
||
|
||
|
||
<!-- pricing 9 start -->
|
||
<section class="bg-gray-100 dark:bg-gray-900">
|
||
<div class="max-w-7xl px-4 py-24 mx-auto text-left md:text-center ">
|
||
|
||
<div class="grid grid-cols-1 gap-24 md:grid-cols-2">
|
||
<div>
|
||
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Developers</p>
|
||
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$9<span class="text-2xl font-medium text-gray-600 dark:text-gray-300"> per month</span></h1>
|
||
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400">
|
||
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
|
||
</p>
|
||
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
|
||
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
|
||
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Designers</p>
|
||
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$19<span class="text-2xl font-medium text-gray-600 dark:text-gray-300 "> per month</span></h1>
|
||
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400 ">
|
||
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
|
||
</p>
|
||
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
|
||
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
|
||
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- pricing 9 end -->
|
||
|
||
|
||
|
||
<!-- testimonial 13 start -->
|
||
|
||
<section class="bg-gray-800">
|
||
<div class="w-full px-4 py-20 mx-auto text-center max-w-7xl md:w-4/5 lg:w-4/6">
|
||
<h1 class="mt-3 mb-10 text-xl font-extrabold text-white md:leading-snug md:text-3xl">
|
||
“Implementation is a breeze, particularly because the team at Hellonext is
|
||
<span class="text-white bg-transparent bg-clip-border xl:bg-clip-text xl:text-transparent xl:bg-gradient-to-r from-green-400 to-purple-500"> very fast to respond and help </span>
|
||
where needed, even if it means rolling out new features on their platform. We're super happy and are loving how Hellonext brings us closer to the members of our community“
|
||
</h1>
|
||
<div class="mx-auto mb-3 shadow-lg avatar w-1/5">
|
||
<img src="https://www.hyperui.dev/photos/man-4.jpeg" alt="man standing up a mounten" class=" object-cover rounded-full h-20 w-20 mx-auto " />
|
||
</div>
|
||
<p class="text-base font-medium text-gray-200">example example</p>
|
||
<p class="text-xs font-medium text-gray-400">CEO, example</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- testimonial 13 end -->
|
||
|
||
|
||
<!-- footer 25 start -->
|
||
<footer class="px-4 pt-24 divide-y dark:bg-gray-900 dark:text-gray-100">
|
||
<div class="container flex flex-col justify-between py-10 mx-auto space-y-8 lg:flex-row lg:space-y-0">
|
||
<div class="lg:w-1/3">
|
||
<a rel="noopener noreferrer" href="#" class="flex justify-center space-x-3 lg:justify-start">
|
||
<div class="flex items-center justify-center w-12 h-12 rounded-full dark:bg-indigo-400">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="flex-shrink-0 w-5 h-5 rounded-full dark:text-gray-900">
|
||
<path d="M18.266 26.068l7.839-7.854 4.469 4.479c1.859 1.859 1.859 4.875 0 6.734l-1.104 1.104c-1.859 1.865-4.875 1.865-6.734 0zM30.563 2.531l-1.109-1.104c-1.859-1.859-4.875-1.859-6.734 0l-6.719 6.734-6.734-6.734c-1.859-1.859-4.875-1.859-6.734 0l-1.104 1.104c-1.859 1.859-1.859 4.875 0 6.734l6.734 6.734-6.734 6.734c-1.859 1.859-1.859 4.875 0 6.734l1.104 1.104c1.859 1.859 4.875 1.859 6.734 0l21.307-21.307c1.859-1.859 1.859-4.875 0-6.734z"></path>
|
||
</svg>
|
||
</div>
|
||
<span class="self-center text-2xl font-semibold">Brand name</span>
|
||
</a>
|
||
</div>
|
||
<div class="grid grid-cols-2 text-sm gap-x-3 gap-y-8 lg:w-2/3 sm:grid-cols-4">
|
||
<div class="space-y-3">
|
||
<h3 class="tracking-wide uppercase dark:text-gray-50">Product</h3>
|
||
<ul class="space-y-1">
|
||
<li>
|
||
<a rel="noopener noreferrer" href="#">Features</a>
|
||
</li>
|
||
<li>
|
||
<a rel="noopener noreferrer" href="#">Integrations</a>
|
||
</li>
|
||
<li>
|
||
<a rel="noopener noreferrer" href="#">Pricing</a>
|
||
</li>
|
||
<li>
|
||
<a rel="noopener noreferrer" href="#">FAQ</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<h3 class="tracking-wide uppercase dark:text-gray-50">Company</h3>
|
||
<ul class="space-y-1">
|
||
<li>
|
||
<a rel="noopener noreferrer" href="#">Privacy</a>
|
||
</li>
|
||
<li>
|
||
<a rel="noopener noreferrer" href="#">Terms of Service</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<h3 class="uppercase dark:text-gray-50">Developers</h3>
|
||
<ul class="space-y-1">
|
||
<li>
|
||
<a rel="noopener noreferrer" href="#">Public API</a>
|
||
</li>
|
||
<li>
|
||
<a rel="noopener noreferrer" href="#">Documentation</a>
|
||
</li>
|
||
<li>
|
||
<a rel="noopener noreferrer" href="#">Guides</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div class="uppercase dark:text-gray-50">Social media</div>
|
||
<div class="flex justify-start space-x-3">
|
||
<a rel="noopener noreferrer" href="#" title="Facebook" class="flex items-center p-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
|
||
<path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z"></path>
|
||
</svg>
|
||
</a>
|
||
<a rel="noopener noreferrer" href="#" title="Twitter" class="flex items-center p-1">
|
||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
|
||
<path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"></path>
|
||
</svg>
|
||
</a>
|
||
<a rel="noopener noreferrer" href="#" title="Instagram" class="flex items-center p-1">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="w-5 h-5 fill-current">
|
||
<path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z"></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="py-6 text-sm text-center dark:text-gray-400">© 1968 Company Co. All rights reserved.</div>
|
||
</footer>
|
||
|
||
<!-- footer 25 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> |