mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-25 08:07:02 +00:00
528 lines
40 KiB
HTML
528 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>
|
|
<!-- tailwind elements library cdn -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
|
|
<title>Template 17</title>
|
|
</head>
|
|
<body>
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
|
|
<!-- header 13 start -->
|
|
|
|
<nav x-data="{mobile_nav_status:false}" class="bg-white shadow dark:bg-gray-800">
|
|
<div class="container px-6 py-3 mx-auto md:flex">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<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 w-full md:flex md:items-center md:justify-between' : 'hidden w-full md:flex md:items-center md:justify-between '" >
|
|
<div class="flex flex-col px-2 py-3 -mx-4 md:flex-row md:mx-0 md:py-0">
|
|
<a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
|
|
<a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
|
|
<a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
|
|
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
</span>
|
|
|
|
<input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- header 13 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-5 absolute bg-white bg-center bg-cover bg-[url('https://source.unsplash.com/random/640x480')]"></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 -->
|
|
|
|
|
|
<!-- service 1 start -->
|
|
<div class=" bg-gray-200 dark:bg-gray-800 py-24">
|
|
<h3 class="text-5xl font-bold text-gray-300 text-center pb-5">Services</h3>
|
|
<div class="container mx-auto">
|
|
|
|
<div class=" flex flex-col md:flex-row p-8 w-full shadow-md overflow-hidden ">
|
|
|
|
<div class="mx-auto md:mx-5 mt-2">
|
|
<div class=" relative flex flex-col items-center justify-around p-4 mr-4 w-80 h-80 rounded-2xl " style="transform: translate(0px, 0px); opacity: 1;">
|
|
<div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-emerald-300 rounded-xl -rotate-2 " style="z-index: -1;"></div>
|
|
<div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-cyan-400 rounded-xl rotate-2 " style="z-index: -1;"></div>
|
|
|
|
<div class="absolute z-0 w-full h-full transform scale-x-105 scale-y-95 bg-white dark:bg-gray-800 rounded-xl " style="z-index: -1;"></div>
|
|
<h3 class="z-10 p-2 text-2xl font-semibold dark:text-cyan-900">SEO</h3>
|
|
<div class="z-10 p-2 dark:text-cyan-900">
|
|
<svg class="fill-current" height="96" viewBox="0 0 512 512" width="96">
|
|
<path d="m123.806 105h234.55c21.146 0 38.349 17.271 38.349 38.5v102.556c0 4.143 3.358 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-102.556c0-29.5-23.932-53.5-53.349-53.5h-234.55c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5z"></path>
|
|
<path d="m306.358 336.556h-141.431c-2.201 0-4.291.967-5.716 2.645l-42.497 50.021-42.496-50.022c-1.425-1.678-3.515-2.645-5.716-2.645h-15.153c-21.146 0-38.349-17.271-38.349-38.5v-154.555c0-21.229 17.203-38.5 38.349-38.5h35.679c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-35.679c-29.417 0-53.349 24-53.349 53.5v154.556c0 29.5 23.932 53.5 53.349 53.5h11.684l45.966 54.105c1.425 1.678 3.515 2.645 5.716 2.645s4.291-.967 5.716-2.645l45.966-54.105h137.961c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"></path>
|
|
<path d="m221.328 447.329h-68.184c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h68.184c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-189.048c-9.528 0-17.28-7.777-17.28-17.336s7.752-17.335 17.28-17.335h6.635c2.406 0 4.666-1.154 6.076-3.103l13.033-18.009 13.033 18.009c1.41 1.948 3.67 3.103 6.076 3.103h41.332c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-37.502l-16.863-23.302c-1.41-1.948-3.67-3.103-6.076-3.103s-4.666 1.154-6.076 3.103l-16.863 23.302h-2.805c-17.799 0-32.28 14.506-32.28 32.335 0 17.83 14.481 32.336 32.28 32.336h189.048c17.799 0 32.28-14.506 32.28-32.336 0-17.829-14.481-32.335-32.28-32.335z"></path>
|
|
<path d="m290.659 64.671h28.213c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-28.213c-9.528 0-17.28-7.776-17.28-17.335s7.752-17.336 17.28-17.336h189.048c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-6.635c-2.406 0-4.666 1.154-6.076 3.103l-13.033 18.009-13.033-18.01c-1.41-1.948-3.67-3.103-6.076-3.103h-81.302c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h77.472l16.863 23.302c1.41 1.948 3.67 3.103 6.076 3.103s4.666-1.154 6.076-3.103l16.863-23.302h2.805c17.799 0 32.28-14.506 32.28-32.336 0-17.828-14.481-32.334-32.28-32.334h-189.048c-17.799 0-32.28 14.506-32.28 32.336 0 17.829 14.481 32.335 32.28 32.335z"></path><path d="m109.855 253.936c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-40c0-4.143-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v40c0 4.143 3.358 7.5 7.5 7.5h32.499v25z"></path>
|
|
<path d="m224.852 188.936c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25z"></path><path d="m259.852 173.936c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-80c0-4.143-3.358-7.5-7.5-7.5zm32.499 80h-24.999v-65h24.999z"></path><path d="m511.987 345.242c-.001-3.688-2.683-6.827-6.325-7.404l-10.348-1.642-4.939-11.919 6.154-8.489c2.164-2.985 1.837-7.1-.77-9.706l-21.182-21.18c-2.61-2.609-6.729-2.934-9.713-.763l-8.471 6.158-11.914-4.934-1.647-10.352c-.579-3.642-3.72-6.321-7.407-6.321h-.003l-29.945.012c-3.688.001-6.829 2.685-7.405 6.328l-1.639 10.357-11.903 4.939-8.479-6.154c-2.987-2.168-7.106-1.842-9.712.77l-21.167 21.195c-2.605 2.608-2.928 6.724-.762 9.706l6.157 8.48-4.933 11.929-10.341 1.648c-3.642.58-6.321 3.722-6.32 7.409l.012 29.965c.001 3.688 2.684 6.827 6.326 7.404l10.347 1.641 4.939 11.919-6.154 8.489c-2.164 2.985-1.837 7.1.769 9.706l21.181 21.181c2.608 2.607 6.727 2.934 9.713.763l8.471-6.158 11.913 4.934 1.647 10.352c.58 3.642 3.72 6.321 7.407 6.321h.003l29.945-.013c3.688-.002 6.828-2.685 7.404-6.327l1.64-10.358 11.904-4.939 8.479 6.155c2.986 2.168 7.105 1.841 9.712-.77l21.167-21.195c2.605-2.608 2.928-6.723.763-9.706l-6.157-8.481 4.933-11.929 10.341-1.647c3.642-.58 6.322-3.722 6.32-7.409zm-23.154 24.869c-2.576.41-4.754 2.13-5.751 4.54l-8.141 19.686c-.996 2.409-.67 5.163.861 7.272l4.863 6.698-12.118 12.135-6.694-4.859c-2.113-1.533-4.87-1.858-7.28-.858l-19.661 8.158c-2.409 1-4.125 3.179-4.533 5.755l-1.295 8.18-17.138.007-1.301-8.173c-.41-2.575-2.128-4.753-4.538-5.751l-19.672-8.146c-.924-.383-1.898-.57-2.869-.57-1.561 0-3.108.487-4.411 1.434l-6.686 4.86-12.125-12.125 4.861-6.706c1.53-2.111 1.854-4.865.856-7.273l-8.151-19.675c-.999-2.41-3.178-4.128-5.754-4.536l-8.171-1.296-.007-17.16 8.165-1.302c2.576-.41 4.754-2.13 5.75-4.54l8.141-19.686c.997-2.409.67-5.163-.862-7.272l-4.863-6.698 12.118-12.134 6.694 4.858c2.113 1.535 4.871 1.858 7.28.858l19.661-8.158c2.409-1 4.125-3.18 4.533-5.756l1.294-8.179 17.138-.006 1.3 8.173c.41 2.575 2.128 4.753 4.538 5.751l19.673 8.146c2.412.998 5.168.671 7.279-.863l6.686-4.86 12.126 12.125-4.861 6.705c-1.53 2.111-1.854 4.865-.856 7.273l8.153 19.674c.999 2.41 3.178 4.128 5.754 4.536l8.172 1.296.007 17.161z"></path><path d="m452.329 352.759c-4.142 0-7.5 3.357-7.5 7.5 0 13.423-10.92 24.343-24.342 24.343s-24.342-10.92-24.342-24.343 10.92-24.343 24.342-24.343c3.515 0 6.904.731 10.071 2.173 3.771 1.718 8.218.051 9.934-3.719 1.716-3.771.051-8.218-3.719-9.934-5.132-2.336-10.611-3.521-16.286-3.521-21.693 0-39.342 17.649-39.342 39.343s17.649 39.343 39.342 39.343 39.342-17.649 39.342-39.343c0-4.142-3.358-7.499-7.5-7.499z"></path></svg>
|
|
</div>
|
|
<div class="z-10 p-2 text-sm text-center text-gray-500 ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit enim totam possimus rem. Totam, quis!</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto md:mx-5 mt-2">
|
|
<div class="relative flex flex-col items-center justify-around p-4 mr-4 w-80 h-80 rounded-2xl " style="transform: translate(0px, 0px); opacity: 1;">
|
|
<div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-emerald-300 rounded-xl -rotate-2 " style="z-index: -1;"></div>
|
|
<div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-cyan-400 rounded-xl rotate-2 " style="z-index: -1;"></div>
|
|
|
|
<div class="absolute z-0 w-full h-full transform scale-x-105 scale-y-95 bg-white dark:bg-gray-800 rounded-xl " style="z-index: -1;"></div>
|
|
<h3 class="z-10 p-2 text-2xl font-semibold text-cyan-900">SEO</h3>
|
|
<div class="z-10 p-2 text-cyan-900">
|
|
<svg class="fill-current" height="96" viewBox="0 0 512 512" width="96">
|
|
<path d="m123.806 105h234.55c21.146 0 38.349 17.271 38.349 38.5v102.556c0 4.143 3.358 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-102.556c0-29.5-23.932-53.5-53.349-53.5h-234.55c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5z"></path>
|
|
<path d="m306.358 336.556h-141.431c-2.201 0-4.291.967-5.716 2.645l-42.497 50.021-42.496-50.022c-1.425-1.678-3.515-2.645-5.716-2.645h-15.153c-21.146 0-38.349-17.271-38.349-38.5v-154.555c0-21.229 17.203-38.5 38.349-38.5h35.679c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-35.679c-29.417 0-53.349 24-53.349 53.5v154.556c0 29.5 23.932 53.5 53.349 53.5h11.684l45.966 54.105c1.425 1.678 3.515 2.645 5.716 2.645s4.291-.967 5.716-2.645l45.966-54.105h137.961c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"></path>
|
|
<path d="m221.328 447.329h-68.184c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h68.184c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-189.048c-9.528 0-17.28-7.777-17.28-17.336s7.752-17.335 17.28-17.335h6.635c2.406 0 4.666-1.154 6.076-3.103l13.033-18.009 13.033 18.009c1.41 1.948 3.67 3.103 6.076 3.103h41.332c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-37.502l-16.863-23.302c-1.41-1.948-3.67-3.103-6.076-3.103s-4.666 1.154-6.076 3.103l-16.863 23.302h-2.805c-17.799 0-32.28 14.506-32.28 32.335 0 17.83 14.481 32.336 32.28 32.336h189.048c17.799 0 32.28-14.506 32.28-32.336 0-17.829-14.481-32.335-32.28-32.335z"></path>
|
|
<path d="m290.659 64.671h28.213c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-28.213c-9.528 0-17.28-7.776-17.28-17.335s7.752-17.336 17.28-17.336h189.048c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-6.635c-2.406 0-4.666 1.154-6.076 3.103l-13.033 18.009-13.033-18.01c-1.41-1.948-3.67-3.103-6.076-3.103h-81.302c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h77.472l16.863 23.302c1.41 1.948 3.67 3.103 6.076 3.103s4.666-1.154 6.076-3.103l16.863-23.302h2.805c17.799 0 32.28-14.506 32.28-32.336 0-17.828-14.481-32.334-32.28-32.334h-189.048c-17.799 0-32.28 14.506-32.28 32.336 0 17.829 14.481 32.335 32.28 32.335z"></path><path d="m109.855 253.936c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-40c0-4.143-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v40c0 4.143 3.358 7.5 7.5 7.5h32.499v25z"></path>
|
|
<path d="m224.852 188.936c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25z"></path><path d="m259.852 173.936c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-80c0-4.143-3.358-7.5-7.5-7.5zm32.499 80h-24.999v-65h24.999z"></path><path d="m511.987 345.242c-.001-3.688-2.683-6.827-6.325-7.404l-10.348-1.642-4.939-11.919 6.154-8.489c2.164-2.985 1.837-7.1-.77-9.706l-21.182-21.18c-2.61-2.609-6.729-2.934-9.713-.763l-8.471 6.158-11.914-4.934-1.647-10.352c-.579-3.642-3.72-6.321-7.407-6.321h-.003l-29.945.012c-3.688.001-6.829 2.685-7.405 6.328l-1.639 10.357-11.903 4.939-8.479-6.154c-2.987-2.168-7.106-1.842-9.712.77l-21.167 21.195c-2.605 2.608-2.928 6.724-.762 9.706l6.157 8.48-4.933 11.929-10.341 1.648c-3.642.58-6.321 3.722-6.32 7.409l.012 29.965c.001 3.688 2.684 6.827 6.326 7.404l10.347 1.641 4.939 11.919-6.154 8.489c-2.164 2.985-1.837 7.1.769 9.706l21.181 21.181c2.608 2.607 6.727 2.934 9.713.763l8.471-6.158 11.913 4.934 1.647 10.352c.58 3.642 3.72 6.321 7.407 6.321h.003l29.945-.013c3.688-.002 6.828-2.685 7.404-6.327l1.64-10.358 11.904-4.939 8.479 6.155c2.986 2.168 7.105 1.841 9.712-.77l21.167-21.195c2.605-2.608 2.928-6.723.763-9.706l-6.157-8.481 4.933-11.929 10.341-1.647c3.642-.58 6.322-3.722 6.32-7.409zm-23.154 24.869c-2.576.41-4.754 2.13-5.751 4.54l-8.141 19.686c-.996 2.409-.67 5.163.861 7.272l4.863 6.698-12.118 12.135-6.694-4.859c-2.113-1.533-4.87-1.858-7.28-.858l-19.661 8.158c-2.409 1-4.125 3.179-4.533 5.755l-1.295 8.18-17.138.007-1.301-8.173c-.41-2.575-2.128-4.753-4.538-5.751l-19.672-8.146c-.924-.383-1.898-.57-2.869-.57-1.561 0-3.108.487-4.411 1.434l-6.686 4.86-12.125-12.125 4.861-6.706c1.53-2.111 1.854-4.865.856-7.273l-8.151-19.675c-.999-2.41-3.178-4.128-5.754-4.536l-8.171-1.296-.007-17.16 8.165-1.302c2.576-.41 4.754-2.13 5.75-4.54l8.141-19.686c.997-2.409.67-5.163-.862-7.272l-4.863-6.698 12.118-12.134 6.694 4.858c2.113 1.535 4.871 1.858 7.28.858l19.661-8.158c2.409-1 4.125-3.18 4.533-5.756l1.294-8.179 17.138-.006 1.3 8.173c.41 2.575 2.128 4.753 4.538 5.751l19.673 8.146c2.412.998 5.168.671 7.279-.863l6.686-4.86 12.126 12.125-4.861 6.705c-1.53 2.111-1.854 4.865-.856 7.273l8.153 19.674c.999 2.41 3.178 4.128 5.754 4.536l8.172 1.296.007 17.161z"></path><path d="m452.329 352.759c-4.142 0-7.5 3.357-7.5 7.5 0 13.423-10.92 24.343-24.342 24.343s-24.342-10.92-24.342-24.343 10.92-24.343 24.342-24.343c3.515 0 6.904.731 10.071 2.173 3.771 1.718 8.218.051 9.934-3.719 1.716-3.771.051-8.218-3.719-9.934-5.132-2.336-10.611-3.521-16.286-3.521-21.693 0-39.342 17.649-39.342 39.343s17.649 39.343 39.342 39.343 39.342-17.649 39.342-39.343c0-4.142-3.358-7.499-7.5-7.499z"></path></svg>
|
|
</div>
|
|
<div class="z-10 p-2 text-sm text-center text-gray-500 ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit enim totam possimus rem. Totam, quis!</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto md:mx-5 mt-2">
|
|
<div class="relative flex flex-col items-center justify-around p-4 mr-4 w-80 h-80 rounded-2xl " style="transform: translate(0px, 0px); opacity: 1;">
|
|
<div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-emerald-300 rounded-xl -rotate-2 " style="z-index: -1;"></div>
|
|
<div class="absolute z-0 w-full h-full text-white transform scale-x-105 scale-y-95 bg-cyan-400 rounded-xl rotate-2 " style="z-index: -1;"></div>
|
|
|
|
<div class="absolute z-0 w-full h-full transform scale-x-105 scale-y-95 bg-white dark:bg-gray-800 rounded-xl " style="z-index: -1;"></div>
|
|
<h3 class="z-10 p-2 text-2xl font-semibold text-cyan-900">SEO</h3>
|
|
<div class="z-10 p-2 text-cyan-900">
|
|
<svg class="fill-current" height="96" viewBox="0 0 512 512" width="96">
|
|
<path d="m123.806 105h234.55c21.146 0 38.349 17.271 38.349 38.5v102.556c0 4.143 3.358 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-102.556c0-29.5-23.932-53.5-53.349-53.5h-234.55c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5z"></path>
|
|
<path d="m306.358 336.556h-141.431c-2.201 0-4.291.967-5.716 2.645l-42.497 50.021-42.496-50.022c-1.425-1.678-3.515-2.645-5.716-2.645h-15.153c-21.146 0-38.349-17.271-38.349-38.5v-154.555c0-21.229 17.203-38.5 38.349-38.5h35.679c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-35.679c-29.417 0-53.349 24-53.349 53.5v154.556c0 29.5 23.932 53.5 53.349 53.5h11.684l45.966 54.105c1.425 1.678 3.515 2.645 5.716 2.645s4.291-.967 5.716-2.645l45.966-54.105h137.961c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"></path>
|
|
<path d="m221.328 447.329h-68.184c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h68.184c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-189.048c-9.528 0-17.28-7.777-17.28-17.336s7.752-17.335 17.28-17.335h6.635c2.406 0 4.666-1.154 6.076-3.103l13.033-18.009 13.033 18.009c1.41 1.948 3.67 3.103 6.076 3.103h41.332c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-37.502l-16.863-23.302c-1.41-1.948-3.67-3.103-6.076-3.103s-4.666 1.154-6.076 3.103l-16.863 23.302h-2.805c-17.799 0-32.28 14.506-32.28 32.335 0 17.83 14.481 32.336 32.28 32.336h189.048c17.799 0 32.28-14.506 32.28-32.336 0-17.829-14.481-32.335-32.28-32.335z"></path>
|
|
<path d="m290.659 64.671h28.213c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-28.213c-9.528 0-17.28-7.776-17.28-17.335s7.752-17.336 17.28-17.336h189.048c9.528 0 17.28 7.776 17.28 17.335s-7.752 17.336-17.28 17.336h-6.635c-2.406 0-4.666 1.154-6.076 3.103l-13.033 18.009-13.033-18.01c-1.41-1.948-3.67-3.103-6.076-3.103h-81.302c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h77.472l16.863 23.302c1.41 1.948 3.67 3.103 6.076 3.103s4.666-1.154 6.076-3.103l16.863-23.302h2.805c17.799 0 32.28-14.506 32.28-32.336 0-17.828-14.481-32.334-32.28-32.334h-189.048c-17.799 0-32.28 14.506-32.28 32.336 0 17.829 14.481 32.335 32.28 32.335z"></path><path d="m109.855 253.936c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-40c0-4.143-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v40c0 4.143 3.358 7.5 7.5 7.5h32.499v25z"></path>
|
|
<path d="m224.852 188.936c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-39.999c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25h32.499c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.499v-25z"></path><path d="m259.852 173.936c-4.142 0-7.5 3.357-7.5 7.5v80c0 4.143 3.358 7.5 7.5 7.5h39.999c4.142 0 7.5-3.357 7.5-7.5v-80c0-4.143-3.358-7.5-7.5-7.5zm32.499 80h-24.999v-65h24.999z"></path><path d="m511.987 345.242c-.001-3.688-2.683-6.827-6.325-7.404l-10.348-1.642-4.939-11.919 6.154-8.489c2.164-2.985 1.837-7.1-.77-9.706l-21.182-21.18c-2.61-2.609-6.729-2.934-9.713-.763l-8.471 6.158-11.914-4.934-1.647-10.352c-.579-3.642-3.72-6.321-7.407-6.321h-.003l-29.945.012c-3.688.001-6.829 2.685-7.405 6.328l-1.639 10.357-11.903 4.939-8.479-6.154c-2.987-2.168-7.106-1.842-9.712.77l-21.167 21.195c-2.605 2.608-2.928 6.724-.762 9.706l6.157 8.48-4.933 11.929-10.341 1.648c-3.642.58-6.321 3.722-6.32 7.409l.012 29.965c.001 3.688 2.684 6.827 6.326 7.404l10.347 1.641 4.939 11.919-6.154 8.489c-2.164 2.985-1.837 7.1.769 9.706l21.181 21.181c2.608 2.607 6.727 2.934 9.713.763l8.471-6.158 11.913 4.934 1.647 10.352c.58 3.642 3.72 6.321 7.407 6.321h.003l29.945-.013c3.688-.002 6.828-2.685 7.404-6.327l1.64-10.358 11.904-4.939 8.479 6.155c2.986 2.168 7.105 1.841 9.712-.77l21.167-21.195c2.605-2.608 2.928-6.723.763-9.706l-6.157-8.481 4.933-11.929 10.341-1.647c3.642-.58 6.322-3.722 6.32-7.409zm-23.154 24.869c-2.576.41-4.754 2.13-5.751 4.54l-8.141 19.686c-.996 2.409-.67 5.163.861 7.272l4.863 6.698-12.118 12.135-6.694-4.859c-2.113-1.533-4.87-1.858-7.28-.858l-19.661 8.158c-2.409 1-4.125 3.179-4.533 5.755l-1.295 8.18-17.138.007-1.301-8.173c-.41-2.575-2.128-4.753-4.538-5.751l-19.672-8.146c-.924-.383-1.898-.57-2.869-.57-1.561 0-3.108.487-4.411 1.434l-6.686 4.86-12.125-12.125 4.861-6.706c1.53-2.111 1.854-4.865.856-7.273l-8.151-19.675c-.999-2.41-3.178-4.128-5.754-4.536l-8.171-1.296-.007-17.16 8.165-1.302c2.576-.41 4.754-2.13 5.75-4.54l8.141-19.686c.997-2.409.67-5.163-.862-7.272l-4.863-6.698 12.118-12.134 6.694 4.858c2.113 1.535 4.871 1.858 7.28.858l19.661-8.158c2.409-1 4.125-3.18 4.533-5.756l1.294-8.179 17.138-.006 1.3 8.173c.41 2.575 2.128 4.753 4.538 5.751l19.673 8.146c2.412.998 5.168.671 7.279-.863l6.686-4.86 12.126 12.125-4.861 6.705c-1.53 2.111-1.854 4.865-.856 7.273l8.153 19.674c.999 2.41 3.178 4.128 5.754 4.536l8.172 1.296.007 17.161z"></path><path d="m452.329 352.759c-4.142 0-7.5 3.357-7.5 7.5 0 13.423-10.92 24.343-24.342 24.343s-24.342-10.92-24.342-24.343 10.92-24.343 24.342-24.343c3.515 0 6.904.731 10.071 2.173 3.771 1.718 8.218.051 9.934-3.719 1.716-3.771.051-8.218-3.719-9.934-5.132-2.336-10.611-3.521-16.286-3.521-21.693 0-39.342 17.649-39.342 39.343s17.649 39.343 39.342 39.343 39.342-17.649 39.342-39.343c0-4.142-3.358-7.499-7.5-7.499z"></path></svg>
|
|
</div>
|
|
<div class="z-10 p-2 text-sm text-center text-gray-500 ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit enim totam possimus rem. Totam, quis!</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- service 1 end -->
|
|
|
|
|
|
|
|
<!-- pricing 13 start -->
|
|
|
|
<div class="bg-white dark:bg-gray-900">
|
|
<div class="container px-6 py-24 mx-auto">
|
|
<p class="text-xl text-center text-gray-500 dark:text-gray-300">
|
|
Choose your plan
|
|
</p>
|
|
|
|
<h1 class="mt-4 text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Pricing Plan</h1>
|
|
|
|
|
|
<div class="mt-6 space-y-8 xl:mt-12">
|
|
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
|
|
<div class="flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" 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 class="flex flex-col items-center mx-5 space-y-1">
|
|
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Basic</h2>
|
|
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
|
Save 20%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$49 <span class="text-base font-medium">/Month</span></h2>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border hover:border-blue-500 cursor-pointer rounded-xl">
|
|
<div class="flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 sm:h-9 sm:w-9" 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 class="flex flex-col items-center mx-5 space-y-1">
|
|
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Popular</h2>
|
|
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
|
Save 20%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-semibold text-blue-600 sm:text-4xl">$99 <span class="text-base font-medium">/Month</span></h2>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
|
|
<div class="flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" 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 class="flex flex-col items-center mx-5 space-y-1">
|
|
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Enterprise</h2>
|
|
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
|
|
Save 20%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<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>
|
|
</div>
|
|
<!-- pricing 13 end -->
|
|
|
|
|
|
|
|
<!-- testimonial 10 start -->
|
|
|
|
<section class="bg-white dark:bg-gray-800">
|
|
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 sm:py-24">
|
|
<div class="max-w-xl mx-auto text-center">
|
|
<h2 class="text-4xl font-bold tracking-tight sm:text-5xl dark:text-emerald-400">
|
|
Read trusted reviews from our customers
|
|
</h2>
|
|
|
|
<p class="max-w-lg mx-auto mt-4 text-gray-500 dark:text-gray-300">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
|
|
praesentium natus sapiente commodi. Aliquid sunt tempore iste
|
|
repellendus explicabo dignissimos placeat, autem harum dolore
|
|
reprehenderit quis! Quo totam dignissimos earum.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="grid grid-cols-1 gap-8 pt-16 mt-16 border-t border-gray-100 sm:grid-cols-2 lg:grid-cols-3 sm:gap-16"
|
|
>
|
|
<blockquote
|
|
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
|
>
|
|
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
|
</h5>
|
|
|
|
<footer class="flex items-center mt-6 text-gray-500">
|
|
<img
|
|
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
|
alt=""
|
|
class="object-cover w-12 h-12 rounded-full"
|
|
/>
|
|
|
|
<div class="ml-3 text-left">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400 ">Barry Scott</p>
|
|
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
|
Digital Marketing at Studio
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</blockquote>
|
|
|
|
<blockquote
|
|
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
|
>
|
|
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
|
</h5>
|
|
|
|
<footer class="flex items-center mt-8 text-gray-500">
|
|
<img
|
|
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
|
alt=""
|
|
class="object-cover w-12 h-12 rounded-full"
|
|
/>
|
|
|
|
<div class="ml-3 text-left">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
|
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
|
Digital Marketing at Studio
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</blockquote>
|
|
|
|
<blockquote
|
|
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
|
>
|
|
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300 ">
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
|
</h5>
|
|
|
|
<footer class="flex items-center mt-8 text-gray-500">
|
|
<img
|
|
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
|
alt=""
|
|
class="object-cover w-12 h-12 rounded-full"
|
|
/>
|
|
|
|
<div class="ml-3 text-left">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
|
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300 ">
|
|
Digital Marketing at Studio
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</blockquote>
|
|
|
|
<blockquote
|
|
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
|
>
|
|
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
|
</h5>
|
|
|
|
<footer class="flex items-center mt-8 text-gray-500">
|
|
<img
|
|
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
|
alt=""
|
|
class="object-cover w-12 h-12 rounded-full"
|
|
/>
|
|
|
|
<div class="ml-3 text-left">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
|
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
|
Digital Marketing at Studio
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</blockquote>
|
|
|
|
<blockquote
|
|
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
|
>
|
|
|
|
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
|
</h5>
|
|
|
|
<footer class="flex items-center mt-8 text-gray-500 ">
|
|
<img
|
|
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
|
alt=""
|
|
class="object-cover w-12 h-12 rounded-full"
|
|
/>
|
|
|
|
<div class="ml-3 text-left">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
|
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
|
Digital Marketing at Studio
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</blockquote>
|
|
|
|
<blockquote
|
|
class="flex flex-col items-center justify-between text-center sm:items-start sm:text-left"
|
|
>
|
|
<h5 class="text-xl font-medium text-gray-700 dark:text-gray-300">
|
|
"Lorem ipsum dolor sit amet consectetur adipisicing elit"
|
|
</h5>
|
|
|
|
<footer class="flex items-center mt-8 text-gray-500">
|
|
<img
|
|
src="https://www.hyperui.dev/photos/man-5.jpeg"
|
|
alt=""
|
|
class="object-cover w-12 h-12 rounded-full"
|
|
/>
|
|
|
|
<div class="ml-3 text-left">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-emerald-400">Barry Scott</p>
|
|
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-300">
|
|
Digital Marketing at Studio
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- testimonial 10 end -->
|
|
|
|
|
|
<!-- footer 11 start -->
|
|
|
|
<footer class="bg-gray-900 pt-24">
|
|
<div class="grid max-w-screen-xl grid-cols-1 mx-auto lg:grid-cols-2">
|
|
<div class="px-4 py-16 border-b border-gray-800 md:border-b-0 md:border-l lg:pl-12 lg:order-last">
|
|
<div class="block lg:hidden">
|
|
<span class="inline-block w-32 h-10 bg-gray-700 rounded-lg"> </span>
|
|
|
|
</div>
|
|
|
|
<div class="mt-12 space-y-4 lg:mt-0">
|
|
<span class="block w-10 h-1 bg-indigo-500 rounded"></span>
|
|
|
|
<div>
|
|
<h5 class="text-2xl font-medium text-white">
|
|
Request a Demo
|
|
</h5>
|
|
|
|
<p class="max-w-xs mt-1 text-xs text-gray-500">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro voluptatum debitis quia pariatur iusto in nisi expedita placeat vero magni.
|
|
</p>
|
|
</div>
|
|
|
|
<form>
|
|
<div class="relative max-w-lg">
|
|
<label class="sr-only" for="email"> Email </label>
|
|
|
|
<input class="w-full py-4 pl-3 pr-16 text-sm bg-gray-800 border-none rounded-lg" id="email" type="email" placeholder="Enter your email">
|
|
|
|
<button class="absolute p-3 text-white -translate-y-1/2 bg-blue-600 rounded-md top-1/2 right-1.5" type="button">
|
|
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 py-16 lg:pr-12">
|
|
<div class="hidden lg:block">
|
|
<span class="inline-block w-32 p-4 bg-gray-700 rounded-lg text-center text-white"> Logo </span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-8 lg:mt-12">
|
|
<div>
|
|
<p class="font-bold text-white">
|
|
Helpful
|
|
</p>
|
|
|
|
<nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
|
|
<a class="hover:opacity-75" href=""> Contact </a>
|
|
<a class="hover:opacity-75" href=""> Live Chat </a>
|
|
<a class="hover:opacity-75" href=""> Resources </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="font-bold text-white">
|
|
Solutions
|
|
</p>
|
|
|
|
<nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
|
|
<a class="hover:opacity-75" href=""> Instant Checkout </a>
|
|
<a class="hover:opacity-75" href=""> Product Upsells </a>
|
|
<a class="hover:opacity-75" href=""> Slideout Cart </a>
|
|
<a class="hover:opacity-75" href=""> User Dashboards </a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="font-bold text-white">
|
|
About
|
|
</p>
|
|
|
|
<nav class="flex flex-col mt-2 space-y-1 text-xs text-gray-400">
|
|
<a class="hover:opacity-75" href=""> About Us </a>
|
|
<a class="hover:opacity-75" href=""> Meet the Team </a>
|
|
<a class="hover:opacity-75" href=""> History </a>
|
|
<a class="hover:opacity-75" href=""> Careers </a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex mt-12 space-x-6 text-xs text-white">
|
|
<p> © 2022 Company Name </p>
|
|
<a class="underline hover:opacity-75" href=""> Privacy Policy </a>
|
|
<a class="underline hover:opacity-75" href=""> Terms & Conditions </a>
|
|
<a class="underline hover:opacity-75" href=""> Cookies </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- footer 11 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> |