mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-25 11:47:01 +00:00
1339 lines
72 KiB
HTML
1339 lines
72 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>
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
<title>Template 18</title>
|
|
</head>
|
|
<body>
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
|
|
|
|
<!-- header 14 start -->
|
|
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
|
<div class="container px-6 py-4 mx-auto">
|
|
<div class="md:flex md:items-center md:justify-between">
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-xl font-semibold text-gray-700">
|
|
<a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<div class="flex md:hidden">
|
|
<button @click="mobile_nav_status=!mobile_nav_status" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
|
|
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
|
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
|
<div :class="mobile_nav_status ? 'block flex-1 md:flex md:items-center md:justify-between' : 'hidden flex-1 md:flex md:items-center md:justify-between' " >
|
|
<div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
|
|
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
|
|
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
|
|
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
|
|
<a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
|
|
</div>
|
|
|
|
<div class="flex items-center mt-4 md:mt-0">
|
|
<button class="hidden mx-4 text-gray-600 transition-colors duration-200 transform md:block dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 focus:outline-none" aria-label="show notifications">
|
|
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
|
|
<div class="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
|
|
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" class="object-cover w-full h-full" alt="avatar">
|
|
</div>
|
|
|
|
<h3 class="mx-2 text-sm font-medium text-gray-700 dark:text-gray-200 md:hidden">Khatab wedaa</h3>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- header 14 end -->
|
|
|
|
|
|
<!-- hero 16 start -->
|
|
<section class= " dark:bg-gradient-to-b dark:from-emerald-600 dark:to-cyan-800 pb-24">
|
|
<div class="">
|
|
<div class="container flex flex-col items-center px-4 py-16 pb-24 mx-auto text-center lg:pb-56 md:py-32 md:px-10 lg:px-32 dark:text-coolGray-900">
|
|
<h1 class="text-5xl font-bold leading-none sm:text-6xl xl:max-w-3xl dark:text-coolGray-900">Provident blanditiis wlk exercitationem</h1>
|
|
<p class="mt-6 mb-8 text-lg sm:mb-12 xl:max-w-3xl dark:text-gray-900">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
|
|
<div class="flex flex-wrap justify-center">
|
|
<button type="button" class="px-8 py-3 m-2 text-lg font-semibold transition duration-500 border-b-2 hover:rounded hover:border border-gray-300 dark:border-x-0 dark:border-y-0 dark:rounded dark:bg-gray-800 dark:text-gray-50 dark:hover:border-x-2 dark:hover:border-y-2 dark:hover:bg-transparent dark:hover:text-gray-800 dark:hover:border-gray-800 ">Get started</button>
|
|
<button type="button" class="px-8 py-3 m-2 text-lg transition duration-500 border rounded hover:border-b-2 hover:border-t-0 hover:border-x-0 hover:rounded-none dark:hover:rounded dark:border-gray-700 dark:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50">Learn more</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <img src="https://source.unsplash.com/random/480x320" alt="" class="w-5/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 dark:bg-gray-800"> -->
|
|
<img src="https://images.unsplash.com/photo-1645119675435-fc5b106eddeb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=320&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY0NTMzODQyMQ&ixlib=rb-1.2.1&q=80&w=480" class=" w-3/6 mx-auto mb-12 -mt-20 rounded-lg shadow-md lg:-mt-40 dark:bg-gray-800" alt="">
|
|
</section>
|
|
|
|
<!-- hero 16 end -->
|
|
|
|
|
|
|
|
<!-- section 5 start -->
|
|
<section class="py-24 lg:pt-[120px] pb-12 lg:pb-[90px] overflow-hidden dark:bg-gray-800">
|
|
<div class="container mx-auto">
|
|
<div class="flex flex-wrap justify-between items-center ">
|
|
<div class="w-full lg:w-6/12 px-4">
|
|
<div class=" flex justify-center ">
|
|
<div class="w-full xl:w-1/2 px-3 sm:px-4">
|
|
<div class="py-3 sm:py-4">
|
|
<img
|
|
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-1.jpg"
|
|
alt=""
|
|
class="rounded-2xl w-full"
|
|
/>
|
|
</div>
|
|
<div class="py-3 sm:py-4">
|
|
<img
|
|
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-2.jpg"
|
|
alt=""
|
|
class="rounded-2xl w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="w-full xl:w-1/2 px-3 sm:px-4">
|
|
<div class="my-4 relative z-10">
|
|
<img
|
|
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-3.jpg"
|
|
alt=""
|
|
class="rounded-2xl w-full"
|
|
/>
|
|
<span class="absolute -right-7 -bottom-7 z-[-1]">
|
|
<svg
|
|
width="134"
|
|
height="106"
|
|
viewBox="0 0 134 106"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
cx="1.66667"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 1.66667 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="16.3333"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 16.3333 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="31"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 31 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="45.6667"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 45.6667 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="60.3334"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 60.3334 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="88.6667"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 88.6667 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="117.667"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 117.667 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="74.6667"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 74.6667 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="103"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 103 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="132"
|
|
cy="104"
|
|
r="1.66667"
|
|
transform="rotate(-90 132 104)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="1.66667"
|
|
cy="89.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 1.66667 89.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="16.3333"
|
|
cy="89.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 16.3333 89.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="31"
|
|
cy="89.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 31 89.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="45.6667"
|
|
cy="89.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 45.6667 89.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="60.3333"
|
|
cy="89.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 60.3333 89.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="88.6667"
|
|
cy="89.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 88.6667 89.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="117.667"
|
|
cy="89.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 117.667 89.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="74.6667"
|
|
cy="89.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 74.6667 89.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="103"
|
|
cy="89.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 103 89.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="132"
|
|
cy="89.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 132 89.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="1.66667"
|
|
cy="74.6673"
|
|
r="1.66667"
|
|
transform="rotate(-90 1.66667 74.6673)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="1.66667"
|
|
cy="31.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 1.66667 31.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="16.3333"
|
|
cy="74.6668"
|
|
r="1.66667"
|
|
transform="rotate(-90 16.3333 74.6668)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="16.3333"
|
|
cy="31.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 16.3333 31.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="31"
|
|
cy="74.6668"
|
|
r="1.66667"
|
|
transform="rotate(-90 31 74.6668)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="31"
|
|
cy="31.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 31 31.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="45.6667"
|
|
cy="74.6668"
|
|
r="1.66667"
|
|
transform="rotate(-90 45.6667 74.6668)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="45.6667"
|
|
cy="31.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 45.6667 31.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="60.3333"
|
|
cy="74.6668"
|
|
r="1.66667"
|
|
transform="rotate(-90 60.3333 74.6668)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="60.3333"
|
|
cy="30.9998"
|
|
r="1.66667"
|
|
transform="rotate(-90 60.3333 30.9998)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="88.6667"
|
|
cy="74.6668"
|
|
r="1.66667"
|
|
transform="rotate(-90 88.6667 74.6668)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="88.6667"
|
|
cy="30.9998"
|
|
r="1.66667"
|
|
transform="rotate(-90 88.6667 30.9998)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="117.667"
|
|
cy="74.6668"
|
|
r="1.66667"
|
|
transform="rotate(-90 117.667 74.6668)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="117.667"
|
|
cy="30.9998"
|
|
r="1.66667"
|
|
transform="rotate(-90 117.667 30.9998)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="74.6667"
|
|
cy="74.6668"
|
|
r="1.66667"
|
|
transform="rotate(-90 74.6667 74.6668)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="74.6667"
|
|
cy="30.9998"
|
|
r="1.66667"
|
|
transform="rotate(-90 74.6667 30.9998)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="103"
|
|
cy="74.6668"
|
|
r="1.66667"
|
|
transform="rotate(-90 103 74.6668)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="103"
|
|
cy="30.9998"
|
|
r="1.66667"
|
|
transform="rotate(-90 103 30.9998)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="132"
|
|
cy="74.6668"
|
|
r="1.66667"
|
|
transform="rotate(-90 132 74.6668)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="132"
|
|
cy="30.9998"
|
|
r="1.66667"
|
|
transform="rotate(-90 132 30.9998)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="1.66667"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 1.66667 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="1.66667"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 1.66667 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="16.3333"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 16.3333 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="16.3333"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 16.3333 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="31"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 31 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="31"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 31 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="45.6667"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 45.6667 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="45.6667"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 45.6667 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="60.3333"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 60.3333 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="60.3333"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 60.3333 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="88.6667"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 88.6667 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="88.6667"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 88.6667 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="117.667"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 117.667 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="117.667"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 117.667 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="74.6667"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 74.6667 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="74.6667"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 74.6667 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="103"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 103 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="103"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 103 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="132"
|
|
cy="60.0003"
|
|
r="1.66667"
|
|
transform="rotate(-90 132 60.0003)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="132"
|
|
cy="16.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 132 16.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="1.66667"
|
|
cy="45.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 1.66667 45.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="1.66667"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 1.66667 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="16.3333"
|
|
cy="45.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 16.3333 45.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="16.3333"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 16.3333 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="31"
|
|
cy="45.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 31 45.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="31"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 31 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="45.6667"
|
|
cy="45.3333"
|
|
r="1.66667"
|
|
transform="rotate(-90 45.6667 45.3333)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="45.6667"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 45.6667 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="60.3333"
|
|
cy="45.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 60.3333 45.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="60.3333"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 60.3333 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="88.6667"
|
|
cy="45.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 88.6667 45.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="88.6667"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 88.6667 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="117.667"
|
|
cy="45.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 117.667 45.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="117.667"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 117.667 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="74.6667"
|
|
cy="45.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 74.6667 45.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="74.6667"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 74.6667 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="103"
|
|
cy="45.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 103 45.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="103"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 103 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="132"
|
|
cy="45.3338"
|
|
r="1.66667"
|
|
transform="rotate(-90 132 45.3338)"
|
|
fill="#3056D3"
|
|
/>
|
|
<circle
|
|
cx="132"
|
|
cy="1.66683"
|
|
r="1.66667"
|
|
transform="rotate(-90 132 1.66683)"
|
|
fill="#3056D3"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-1/2 xl:w-5/12 px-4">
|
|
<div class="mt-10 lg:mt-0">
|
|
<span class="font-semibold text-lg text-primary mb-2 block dark:text-gray-100">
|
|
Why Choose Us
|
|
</span>
|
|
<h2 class="font-bold text-3xl sm:text-4xl text-dark mb-8 dark:text-cyan-200">
|
|
Make your customers happy by giving services.
|
|
</h2>
|
|
<p class="text-base text-body-color mb-8 dark:text-emerald-100">
|
|
It is a long established fact that a reader will be distracted
|
|
by the readable content of a page when looking at its layout.
|
|
The point of using Lorem Ipsum is that it has a more-or-less.
|
|
</p>
|
|
<p class="text-base text-body-color mb-12 dark:text-emerald-100">
|
|
A domain name is one of the first steps to establishing your
|
|
brand. Secure a consistent brand image with a domain name that
|
|
matches your business.
|
|
</p>
|
|
<a
|
|
href="javascript:void(0)"
|
|
class="
|
|
py-4
|
|
px-10
|
|
lg:px-8
|
|
xl:px-10
|
|
inline-flex
|
|
items-center
|
|
justify-center
|
|
text-center text-white text-base
|
|
bg-black
|
|
hover:bg-opacity-90
|
|
font-normal
|
|
rounded-lg
|
|
"
|
|
>
|
|
Get Started
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- section 5 end -->
|
|
|
|
|
|
|
|
<!-- testimonial 11 start -->
|
|
|
|
<section class="bg-white dark:bg-gray-900 dark:text-emerald-300 overflow-hidden py-24">
|
|
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
|
|
<h2 class="text-4xl font-bold tracking-tight text-center sm:text-5xl">
|
|
Read trusted reviews from our customers
|
|
</h2>
|
|
|
|
<div class="mt-12 slider-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide " >
|
|
<blockquote class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800 dark:border-2 dark:border-emerald-500 ">
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
|
alt=""
|
|
class="object-cover w-16 h-16 rounded-full"
|
|
/>
|
|
|
|
<div class="ml-4">
|
|
<div class="flex space-x-0.5 justify-center text-green-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4 text-emerald-500 "
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="mt-1 text-lg font-medium text-gray-700 dark:text-emerald-500">Katie</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-4 text-gray-500">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
|
|
voluptatem alias ut provident sapiente repellendus.
|
|
</p>
|
|
</blockquote>
|
|
</div>
|
|
|
|
<div class="swiper-slide">
|
|
<blockquote class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800 dark:border-2 dark:border-emerald-500">
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
|
alt=""
|
|
class="object-cover w-16 h-16 rounded-full"
|
|
/>
|
|
|
|
<div class="ml-4">
|
|
<div class="flex space-x-0.5 justify-center text-green-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="mt-1 text-lg font-medium text-gray-700 dark:text-emerald-500">Katie</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-4 text-gray-500">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
|
|
voluptatem alias ut provident sapiente repellendus.
|
|
</p>
|
|
</blockquote>
|
|
</div>
|
|
|
|
<div class="swiper-slide">
|
|
<blockquote class="p-8 bg-gray-100 rounded-lg dark:bg-gray-800 dark:border-2 dark:border-emerald-500">
|
|
<div class="flex items-center">
|
|
<img
|
|
src="https://www.hyperui.dev/photos/man-4.jpeg"
|
|
alt=""
|
|
class="object-cover w-16 h-16 rounded-full"
|
|
/>
|
|
|
|
<div class="ml-4">
|
|
<div class="flex space-x-0.5 justify-center text-green-500">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-4 h-4"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<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"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="mt-1 text-lg font-medium text-gray-700 dark:text-emerald-500">Katie</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-4 text-gray-500">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt
|
|
voluptatem alias ut provident sapiente repellendus.
|
|
</p>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
const swiper = new Swiper('.slider-container', {
|
|
loop: true,
|
|
slidesPerView: 1,
|
|
spaceBetween: 32,
|
|
centeredSlides: true,
|
|
autoplay: {
|
|
delay: 8000,
|
|
},
|
|
breakpoints: {
|
|
640: {
|
|
slidesPerView: 1.5,
|
|
},
|
|
1024: {
|
|
slidesPerView: 3,
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
<!-- testimonial 11 end -->
|
|
|
|
|
|
|
|
<!-- blog 2 start -->
|
|
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
|
<div class="container max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12">
|
|
<a rel="noopener noreferrer" href="#" class="block max-w-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 dark:bg-gray-900">
|
|
<img src="https://source.unsplash.com/random/480x360" alt="" class="object-cover w-full h-64 rounded sm:h-96 lg:col-span-7 dark:bg-gray-500">
|
|
<div class="p-6 space-y-2 lg:col-span-5">
|
|
<h3 class="text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline">Noster tincidunt reprimique ad pro</h3>
|
|
<span class="text-xs dark:text-gray-400">February 19, 2021</span>
|
|
<p>Ei delenit sensibus liberavisse pri. Quod suscipit no nam. Est in graece fuisset, eos affert putent doctus id.</p>
|
|
</div>
|
|
</a>
|
|
<div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
|
|
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?1">
|
|
<div class="p-6 space-y-2">
|
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
|
<span class="text-xs dark:text-gray-400">January 21, 2021</span>
|
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
|
</div>
|
|
</a>
|
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
|
|
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?2">
|
|
<div class="p-6 space-y-2">
|
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
|
<span class="text-xs dark:text-gray-400">January 22, 2021</span>
|
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
|
</div>
|
|
</a>
|
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
|
|
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?3">
|
|
<div class="p-6 space-y-2">
|
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
|
<span class="text-xs dark:text-gray-400">January 23, 2021</span>
|
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
|
</div>
|
|
</a>
|
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
|
|
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?4">
|
|
<div class="p-6 space-y-2">
|
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
|
<span class="text-xs dark:text-gray-400">January 24, 2021</span>
|
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
|
</div>
|
|
</a>
|
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
|
|
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?5">
|
|
<div class="p-6 space-y-2">
|
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
|
<span class="text-xs dark:text-gray-400">January 25, 2021</span>
|
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
|
</div>
|
|
</a>
|
|
<a rel="noopener noreferrer" href="#" class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 hidden sm:block">
|
|
<img role="presentation" class="object-cover w-full rounded h-44 dark:bg-gray-500" src="https://source.unsplash.com/random/480x360?6">
|
|
<div class="p-6 space-y-2">
|
|
<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">In usu laoreet repudiare legendos</h3>
|
|
<span class="text-xs dark:text-gray-400">January 26, 2021</span>
|
|
<p>Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus consulatu patrioque mea, ei vocent delicata indoctum pri.</p>
|
|
</div>
|
|
</a><!---->
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<button type="button" class="px-6 py-3 text-sm rounded-md hover:underline dark:bg-gray-900 dark:text-gray-400">Load more posts...</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- blog 2 end -->
|
|
|
|
<!-- pricing 14 start -->
|
|
|
|
<div class="bg-white dark:bg-gray-900 ">
|
|
<div class="container px-6 py-24 mx-auto">
|
|
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Simple pricing plan</h1>
|
|
|
|
<p class="max-w-2xl mx-auto mt-4 text-center text-gray-500 xl:mt-6 dark:text-gray-300">
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias quas magni libero consequuntur voluptatum velit amet id repudiandae ea, deleniti laborum in neque eveniet.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 gap-8 mt-6 lg:grid-cols-3 xl:mt-12">
|
|
<div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
|
|
<div class="flex flex-col items-center space-y-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<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" />
|
|
</svg>
|
|
|
|
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Basic</h2>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">Free</h2>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between px-8 py-4 border border-blue-500 cursor-pointer rounded-xl">
|
|
<div class="flex flex-col items-center space-y-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 dark:text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<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" />
|
|
</svg>
|
|
|
|
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Standard</h2>
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-col items-center space-y-1">
|
|
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
|
Save 30%
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-semibold text-blue-600 dark:text-blue-500 sm:text-3xl">$99 <span class="text-base font-medium">/Yearly</span></h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
|
|
<div class="flex flex-col items-center space-y-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<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" />
|
|
</svg>
|
|
|
|
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Pro</h2>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center space-y-1">
|
|
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
|
Save 20%
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-8 mt-8 space-y-8 bg-gray-100 dark:bg-gray-800 rounded-xl">
|
|
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
|
<p class="textlg sm:text-xl">Unlimited Links</p>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<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" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
|
<p class="textlg sm:text-xl">Own analytics platfrom</p>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<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" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
|
<p class="textlg sm:text-xl">Full Support with discussion</p>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<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" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
|
<p class="textlg sm:text-xl">Optimize hashtags</p>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
|
<p class="textlg sm:text-xl">Mobile app</p>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<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" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
|
|
<p class="textlg sm:text-xl">Unlimited users</p>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center mt-8">
|
|
<button class="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
|
|
Choose Plan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- pricing 14 end -->
|
|
|
|
|
|
|
|
<!-- team 2 start -->
|
|
<section class="bg-white dark:bg-gray-800 ">
|
|
<div class="container px-6 py-24 mx-auto">
|
|
<!-- <h2 class="text-5xl text-black dark:text-white font-bold text-center "> Team</h2> -->
|
|
<div class="xl:flex xl:items-center xL:-mx-4">
|
|
<div class="xl:w-1/2 xl:mx-4">
|
|
<h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">Our Team</h1>
|
|
|
|
<p class="max-w-2xl mt-4 text-gray-500 dark:text-gray-300">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo incidunt ex placeat modi magni quia error alias, adipisci rem similique, at omnis eligendi optio eos harum.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-0 xl:mx-4 xl:w-1/2 md:grid-cols-2">
|
|
<div>
|
|
<img class="object-cover rounded-xl aspect-square" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
|
|
|
|
<h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white">John Doe</h1>
|
|
|
|
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300">Full stack developer</p>
|
|
</div>
|
|
|
|
<div>
|
|
<img class="object-cover rounded-xl aspect-square" src="https://images.unsplash.com/photo-1499470932971-a90681ce8530?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
|
|
|
|
<h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white">Mia</h1>
|
|
|
|
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300">Graphic Designer</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- team 2 end -->
|
|
|
|
|
|
<!-- contact 5 start -->
|
|
<section class="text-gray-600 body-font relative dark:bg-gray-900">
|
|
<h2 class="text-5xl font-bold dark:text-white text-center py-8">Contact Us</h2>
|
|
<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
|
|
<div class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
|
|
<iframe class="absolute inset-0" style="filter: grayscale(1) contrast(1.2) opacity(0.4);" title="map" marginheight="0" marginwidth="0" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101408.032631041!2d-122.15130744474018!3d37.41345079210977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb7495bec0189%3A0x7c17d44a466baf9b!2z4Kau4Ka-4KaJ4Kao4KeN4Kaf4KeH4KaH4KaoIOCmreCmv-CmiSwg4KaV4KeN4Kav4Ka-4Kay4Ka_4Kar4KeL4Kaw4KeN4Kao4Ka_4Kav4Ka84Ka-LCDgpq7gpr7gprDgp43gppXgpr_gpqgg4Kav4KeB4KaV4KeN4Kak4Kaw4Ka-4Ka34KeN4Kaf4KeN4Kaw!5e0!3m2!1sbn!2sbd!4v1646216286435!5m2!1sbn!2sbd" width="100%" height="100%" frameborder="0"></iframe>
|
|
<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
|
|
<div class="lg:w-1/2 px-6">
|
|
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2>
|
|
<p class="mt-1">Photo booth tattooed prism, portland taiyaki hoodie neutra typewriter</p>
|
|
</div>
|
|
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
|
|
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
|
|
<a class="text-indigo-500 leading-relaxed">example@email.com</a>
|
|
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
|
|
<p class="leading-relaxed">123-456-7890</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
|
|
<div class=" bg-white dark:bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
|
|
<h2 class="text-gray-900 dark:text-emerald-300 text-lg mb-1 font-medium title-font">Feedback</h2>
|
|
<p class="leading-relaxed mb-5 text-gray-600 dark:text-cyan-100">Post-ironic portland shabby chic echo park, banjo fashion axe</p>
|
|
<div class="relative mb-4">
|
|
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Email</label>
|
|
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
|
</div>
|
|
<div class="relative mb-4">
|
|
<label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Message</label>
|
|
<textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
|
|
</div>
|
|
<button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 dark:bg-cyan-100 dark:hover:bg-emerald-100 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
|
|
<p class="text-xs text-gray-500 dark:text-cyan-100 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral artisan.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- contact 5 end -->
|
|
|
|
|
|
<!-- footer 26 start -->
|
|
<footer class="bg-white dark:bg-gray-800">
|
|
<div class="container px-6 py-24 mx-auto">
|
|
<div class="text-center">
|
|
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
|
|
|
|
<p class="max-w-md mx-auto mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
|
|
|
<div class="flex flex-col mt-4 sm:flex-row sm:items-center sm:justify-center">
|
|
<button class="flex items-center justify-center order-1 w-full px-2 py-2 mt-3 text-sm tracking-wide text-gray-600 capitalize transition-colors duration-200 transform border rounded-md sm:mx-2 dark:border-gray-400 dark:text-gray-300 sm:mt-0 sm:w-auto hover:bg-gray-50 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-40">
|
|
<svg class="w-5 h-5 mx-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM4 12.172C4.04732 16.5732 7.64111 20.1095 12.0425 20.086C16.444 20.0622 19.9995 16.4875 19.9995 12.086C19.9995 7.68451 16.444 4.10977 12.0425 4.086C7.64111 4.06246 4.04732 7.59876 4 12V12.172ZM10 16.5V7.5L16 12L10 16.5Z" fill="currentColor"></path>
|
|
</svg>
|
|
|
|
<span class="mx-1">View Demo</span>
|
|
</button>
|
|
|
|
<button class="w-full px-5 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md sm:mx-2 sm:order-2 sm:w-auto hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80">Get started</button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-10 border-gray-200 dark:border-gray-700" />
|
|
|
|
<div class="flex flex-col items-center sm:flex-row sm:justify-between">
|
|
<p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>
|
|
|
|
<div class="flex mt-3 -mx-2 sm:mt-0">
|
|
<a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Teams </a>
|
|
|
|
<a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Privacy </a>
|
|
|
|
<a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Cookies </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- footer 26 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> |