mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-17 15:07:02 +00:00
576 lines
40 KiB
HTML
576 lines
40 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 14</title>
|
||
</head>
|
||
<body>
|
||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||
d
|
||
</button>
|
||
|
||
|
||
<!-- header 10 start -->
|
||
|
||
<header class="z-30 w-full px-2 py-4 bg-white dark:bg-gray-800 sm:px-4">
|
||
<div class="flex items-center justify-between mx-auto max-w-7xl">
|
||
<a href="#" title=" Home Page" class="flex items-center">
|
||
<svg class="w-auto h-6 dark:fill-gray-300 fill-gray-800" 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="relative hidden space-x-1 md:inline-flex" x-data="{ one: false, two: false }">
|
||
<div class="relative">
|
||
<button class="flex items-center rounded-full btn btn-sm btn-white" @click="one = true">
|
||
Features
|
||
<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="flex-none w-4 h-4 ml-1 -mr-1 transition duration-200 ease-out transform"
|
||
:class="{ 'rotate-180': one }"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
<div
|
||
class="absolute top-0 z-50 w-screen max-w-md p-2 mx-0 my-12 text-sm text-gray-800 transform bg-white rounded shadow lg:left-1/2 lg:-translate-x-1/2"
|
||
x-show.transition.in.opacity.out.opacity="one"
|
||
@click.away="one = false"
|
||
x-cloak
|
||
>
|
||
<div class="grid grid-cols-2 gap-2 mb-2">
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
|
||
<p class="font-semibold">Shared Inbox</p>
|
||
Manage conversations at scale
|
||
</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
|
||
<p class="font-semibold">Reporting</p>
|
||
Real-time data at your fingertips
|
||
</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
|
||
<p class="font-semibold">Knowledge Base</p>
|
||
Instant answers for customers
|
||
</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
|
||
<p class="font-semibold">Live Chat</p>
|
||
Make your website more useful
|
||
</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">
|
||
<p class="font-semibold">In-app Messaging</p>
|
||
Engage people on your website
|
||
</a>
|
||
</div>
|
||
<a href="#" class="flex items-center justify-center p-3 font-medium transition bg-gray-200 rounded text-primary hover:bg-gray-300">
|
||
View all features
|
||
<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"
|
||
class="w-4 h-4 ml-1"
|
||
>
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="relative">
|
||
<button class="flex items-center rounded-full btn btn-sm btn-white" @click="two = true">
|
||
Blog
|
||
<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="flex-none w-4 h-4 ml-1 -mr-1 transition duration-200 ease-out transform"
|
||
:class="{ 'rotate-180': two }"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
<div
|
||
class="absolute top-0 z-50 w-screen max-w-md p-2 mx-0 my-12 text-sm text-gray-800 transform bg-white rounded shadow lg:left-1/2 lg:-translate-x-1/2"
|
||
x-show.transition.in.opacity.out.opacity="two"
|
||
@click.away="two = false"
|
||
x-cloak
|
||
>
|
||
<p class="pt-2 pl-3 mb-1 text-xs font-semibold tracking-wide text-gray-500 uppercase">Our popular posts</p>
|
||
<div class="flex flex-col space-y-1 font-medium text-gray-800">
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary"> Enable suspect commits, unminify JS, and track releases with Vercel and Sentry </a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Asynchronous CSV Exports with Discover</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary"> Automate Release Management with the Sentry Release GitHub Action </a>
|
||
<a href="#" class="flex items-center justify-center p-3 transition bg-gray-200 rounded text-primary hover:bg-gray-300">
|
||
View all blog posts
|
||
<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"
|
||
class="w-4 h-4 ml-1"
|
||
>
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="rounded-full btn btn-sm btn-white">Pricing</a>
|
||
</div>
|
||
<div class="flex items-center space-x-1">
|
||
<a href="#" class="hidden rounded-full btn btn-sm btn-white md:inline-flex">Sign in</a>
|
||
<a href="#" class="rounded-full btn btn-sm btn-dark">Sign up</a>
|
||
<div class="inline-flex md:hidden" x-data="{ open: false }">
|
||
<button class="flex-none px-2 btn btn-white 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 m-2 space-y-1 bg-white rounded shadow" x-show.transition="open" @click.away="open = false" x-cloak>
|
||
<button class="self-end flex-none px-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>
|
||
<div class="grid grid-cols-2 gap-1">
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Pricing</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Blog</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Sign in</a>
|
||
</div>
|
||
<p class="pt-2 pl-3 text-xs font-semibold tracking-wide text-gray-500 uppercase">Features</p>
|
||
<div class="grid grid-cols-2 gap-1">
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Shared Inbox</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Reporting</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Knowledge Base</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">Live Chat</a>
|
||
<a href="#" class="px-3 py-2 transition rounded hover:bg-gray-200 hover:text-primary">In-app Messaging</a>
|
||
</div>
|
||
<a href="#" class="flex items-center justify-center p-3 font-medium transition bg-gray-200 rounded text-primary hover:bg-gray-300">
|
||
View all features
|
||
<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"
|
||
class="w-4 h-4 ml-1"
|
||
>
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
<polyline points="12 5 19 12 12 19"></polyline>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- header 10 end -->
|
||
|
||
|
||
<!-- hero 10 start -->
|
||
<section class=" dark:bg-gray-800">
|
||
<div class="max-w-7xl px-4 py-24 grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
|
||
<div class="col-auto text-center md:col-span-7 lg:text-left">
|
||
<h1 class="mb-4 text-3xl font-bold leading-tight text-gray-900 dark:text-yellow-300 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready to start your journey?</h1>
|
||
<p class="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
|
||
Low-latency voice and video feels like you’re in the same room. Wave hello over video, watch friends stream their games, or gather up and have a drawing session with screen share.
|
||
</p>
|
||
</div>
|
||
<div class="col-auto md:col-span-4">
|
||
<form class="mb-6 border-0 rounded-lg shadow-xl ">
|
||
<div class="text-center text-gray-700 dark:text-yellow-200 uppercase font-semibold mb-4 border-0 card-header">
|
||
<p class="pt-2"> talk with us</p>
|
||
</div>
|
||
<div class="grid">
|
||
<label class="mx-auto ">
|
||
<span class="sr-only">First Name</span>
|
||
<input class=" bg-transparent px-5 pb-1 mt-5 border-b-2 outline-none text-gray-800 dark:text-yellow-300 border-gray-500 dark:border-yellow-300" type="text" placeholder="First Name" required="true" />
|
||
</label>
|
||
<label class="mx-auto">
|
||
<span class="sr-only">Email Address</span>
|
||
<input class=" bg-transparent px-5 pb-1 mt-5 border-b-2 outline-none text-gray-800 dark:text-yellow-300 border-gray-500 dark:border-yellow-300 " type="email" placeholder="Email Address" required="true" />
|
||
</label>
|
||
<label class="mx-auto">
|
||
<span class="sr-only">Password</span>
|
||
<input class=" bg-transparent px-5 pb-1 mt-5 border-b-2 outline-none text-gray-800 dark:text-yellow-300 border-gray-500 dark:border-yellow-300" type="password" placeholder="Password" required="true" />
|
||
</label>
|
||
|
||
<div class="px-6 py-4 ">
|
||
<button class="w-full py-2 rounded-lg bg-gray-800 text-gray-300 dark:text-gray-800 dark:bg-yellow-400" type="submit">Sign up for free</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="px-6 py-4 ">
|
||
<button class="w-full py-2 rounded-lg bg-blue-500 hover:bg-blue-400">
|
||
Continue with Google
|
||
</button>
|
||
</div>
|
||
</form>
|
||
<p class="text-xs text-center text-gray-600 dark:text-yellow-300">By signing up you agree to our <a href="#" class="text-primary">Terms of Service</a></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- hero 10 end -->
|
||
|
||
|
||
<!-- start cta 5 -->
|
||
<section class="flex justify-around py-24 bg-white shadow-md dark:bg-gray-800">
|
||
|
||
<div class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-900 dark:border-gray-700">
|
||
<a href="#">
|
||
<img class="p-8 rounded-t-lg" src="https://source.unsplash.com/random/?product" alt="product image">
|
||
</a>
|
||
<div class="px-5 pb-5">
|
||
<a href="#">
|
||
<h3 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport</h3>
|
||
</a>
|
||
<div class="flex items-center mt-2.5 mb-5">
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">5.0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
|
||
<a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add to cart</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="max-w-sm bg-white rounded-lg shadow-md dark:bg-gray-900 dark:border-gray-700">
|
||
<a href="#">
|
||
<img class="p-8 rounded-t-lg" src="https://source.unsplash.com/random/?product" alt="product image">
|
||
</a>
|
||
<div class="px-5 pb-5">
|
||
<a href="#">
|
||
<h3 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport</h3>
|
||
</a>
|
||
<div class="flex items-center mt-2.5 mb-5">
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<svg class="w-5 h-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
|
||
<span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">5.0</span>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
|
||
<a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Add to cart</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</section>
|
||
<!-- end cta 5 -->
|
||
|
||
|
||
|
||
|
||
<!-- 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 -->
|
||
|
||
|
||
<!-- pricing 10 start -->
|
||
|
||
<section class="py-24 dark:bg-gray-800 dark:text-gray-100">
|
||
<div class="container px-4 mx-auto">
|
||
<div class="max-w-2xl mx-auto mb-16 text-center">
|
||
<span class="font-bold tracking-wider uppercase dark:text-violet-400 text-purple-700">Pricing</span>
|
||
<h2 class="text-4xl font-bold lg:text-5xl">Choose your best plan</h2>
|
||
</div>
|
||
<div class="flex flex-wrap items-stretch -mx-4">
|
||
<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
|
||
<div class="flex flex-col p-6 space-y-6 rounded shadow sm:p-8 dark:bg-gray-900">
|
||
<div class="space-y-2">
|
||
<h4 class="text-2xl font-bold">Beginner</h4>
|
||
<span class="text-6xl font-bold">Free</span>
|
||
</div>
|
||
<p class="mt-3 leading-relaxed dark:text-gray-400">Etiam ac convallis enim, eget euismod dolor.</p>
|
||
<ul class="flex-1 mb-6 dark:text-gray-400">
|
||
<li class="flex mb-2 space-x-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Aenean quis</span>
|
||
</li>
|
||
<li class="flex mb-2 space-x-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500 ">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Morbi semper</span>
|
||
</li>
|
||
<li class="flex mb-2 space-x-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500 ">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Tristique enim nec</span>
|
||
</li>
|
||
</ul>
|
||
<button type="button" class="inline-block px-5 py-3 font-semibold tracking-wider text-center rounded dark:bg-violet-500 dark:text-gray-900 bg-purple-600 text-white">Get Started</button>
|
||
</div>
|
||
</div>
|
||
<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
|
||
<div class="flex flex-col p-6 space-y-6 rounded shadow sm:p-8 dark:bg-violet-400 dark:text-gray-900 bg-violet-700 first-letter:">
|
||
<div class="space-y-2">
|
||
<h4 class="text-2xl font-bold text-white">Pro</h4>
|
||
<span class="text-6xl font-bold text-white ">$24
|
||
<span class="text-sm tracking-wide">/month</span>
|
||
</span>
|
||
</div>
|
||
<p class="leading-relaxed text-white">Morbi cursus ut sapien sit amet consectetur.</p>
|
||
<ul class="flex-1 space-y-2">
|
||
<li class="flex items-center space-x-2 text-white">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 ">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Everything in Free</span>
|
||
</li>
|
||
<li class="flex items-center space-x-2 text-white">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Phasellus tellus</span>
|
||
</li>
|
||
<li class="flex items-center space-x-2 text-white">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Praesent faucibus</span>
|
||
</li>
|
||
<li class="flex items-center space-x-2 text-white">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Aenean et lectus blandit</span>
|
||
</li>
|
||
</ul>
|
||
<a rel="noopener noreferrer" href="#" class="inline-block w-full px-5 py-3 font-bold tracking-wider text-center rounded dark:bg-gray-800 dark:text-violet-400 bg-gray-300 text-purple-700">Get Started</a>
|
||
</div>
|
||
</div>
|
||
<div class="w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
|
||
<div class="p-6 space-y-6 rounded shadow sm:p-8 dark:bg-gray-900">
|
||
<div class="space-y-2">
|
||
<h4 class="text-2xl font-bold">Team</h4>
|
||
<span class="text-6xl font-bold">$72
|
||
<span class="text-sm tracking-wide">/month</span>
|
||
</span>
|
||
</div>
|
||
<p class="leading-relaxed dark:text-gray-400">Phasellus ultrices bibendum nibh in vehicula.</p>
|
||
<ul class="space-y-2 dark:text-gray-400">
|
||
<li class="flex items-start space-x-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Everything in Pro</span>
|
||
</li>
|
||
<li class="flex items-start space-x-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Fusce sem ligula</span>
|
||
</li>
|
||
<li class="flex items-start space-x-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Curabitur dictum</span>
|
||
</li>
|
||
<li class="flex items-start space-x-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Duis odio eros</span>
|
||
</li>
|
||
<li class="flex items-start space-x-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 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>
|
||
<span>Vivamus ut lectus ex</span>
|
||
</li>
|
||
</ul>
|
||
<a rel="noopener noreferrer" href="#" class="inline-block w-full px-5 py-3 font-semibold tracking-wider text-center rounded dark:bg-violet-400 dark:text-gray-900 bg-purple-600 text-white">Get Started</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- pricing 10 end -->
|
||
|
||
|
||
<!-- footer 10 start -->
|
||
|
||
<footer class="text-center dark:bg-emerald-900">
|
||
<div class="max-w-screen-xl px-4 py-12 mx-auto sm:px-6 lg:px-8">
|
||
<div class="max-w-3xl mx-auto space-y-6">
|
||
<div class="flex justify-center space-x-6">
|
||
<a class="text-blue-500 hover:text-opacity-75 dark:ring-green-300 dark:ring-2 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
|
||
<span class="sr-only"> Twitter </span>
|
||
|
||
<svg class="w-8 h-8" 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="text-gray-900 hover:text-opacity-75 dark:ring-2 dark:ring-green-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
|
||
<span class="sr-only"> GitHub </span>
|
||
|
||
<svg class="w-8 h-8" 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="text-pink-600 hover:text-opacity-75 dark:ring-2 dark:ring-green-300 dark:rounded-2xl" href="" target="_blank" rel="noreferrer">
|
||
<span class="sr-only"> Dribbble </span>
|
||
|
||
<svg class="w-8 h-8" 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>
|
||
|
||
<nav class="grid grid-cols-2 gap-4 p-6 dark:ring-2 dark:ring-green-300 text-sm font-medium bg-gray-100 rounded-lg sm:grid-cols-3 lg:grid-cols-6">
|
||
<a class="hover:opacity-75" href=""> Uses </a>
|
||
<a class="hover:opacity-75" href=""> Snippets </a>
|
||
<a class="hover:opacity-75" href=""> Bookmarks </a>
|
||
<a class="hover:opacity-75" href=""> Courses </a>
|
||
<a class="hover:opacity-75" href=""> Downloads </a>
|
||
<a class="hover:opacity-75" href=""> Projects </a>
|
||
</nav>
|
||
|
||
<p class="max-w-lg mx-auto text-xs text-gray-500 dark:text-white">
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, illo. Laborum ratione corrupti quasi ullam?
|
||
Voluptatum iusto at aperiam voluptas.
|
||
</p>
|
||
|
||
<p class="text-xs font-medium">
|
||
© 2022 Company
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- footer 10 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> |