mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-28 05:07:02 +00:00
688 lines
42 KiB
HTML
688 lines
42 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="">
|
|
<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>Service page 1</title>
|
|
</head>
|
|
<body>
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
|
|
|
|
<!-- header 24 start -->
|
|
|
|
<style>
|
|
@media(max-width:1520px) {
|
|
.left-svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* small css for the mobile nav close */
|
|
#nav-mobile-btn.close span:first-child {
|
|
transform: rotate(45deg);
|
|
top: 4px;
|
|
position: relative;
|
|
background: #a0aec0;
|
|
}
|
|
|
|
#nav-mobile-btn.close span:nth-child(2) {
|
|
transform: rotate(-45deg);
|
|
margin-top: 0px;
|
|
background: #a0aec0;
|
|
}
|
|
</style>
|
|
|
|
<header class="relative z-50 w-full h-24 overflow-hidden dark:bg-gray-900 ">
|
|
<div
|
|
class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
|
|
|
|
<a href="/" class="relative flex flex-row items-center h-full font-black leading-none">
|
|
<svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g fill-rule="evenodd">
|
|
<path
|
|
d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z" />
|
|
<path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z" />
|
|
</g>
|
|
</svg>
|
|
<span class="ml-3 text-xl text-gray-800 dark:text-red-300">Brand Logo<span class="text-pink-500">.</span></span>
|
|
</a>
|
|
|
|
<nav id="nav"
|
|
class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
|
|
<a href="#"
|
|
class="ml-0 mr-0 font-bold duration-100 md:ml-12 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600 ">Home</a>
|
|
<a href="#features"
|
|
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Features</a>
|
|
<a href="#pricing"
|
|
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color dark:text-pink-500 dark:hover:text-indigo-600 hover:text-indigo-600">Pricing</a>
|
|
<a href="#testimonials"
|
|
class="font-bold duration-100 transition-color hover:text-indigo-600 dark:text-pink-500 dark:hover:text-indigo-600">Testimonials</a>
|
|
<div class="flex flex-col w-full font-medium border-t border-gray-200 md:hidden">
|
|
<a href="#_" class="w-full py-2 font-bold text-center text-pink-500 ">Login</a>
|
|
<a href="#_"
|
|
class="relative inline-block w-full px-5 py-3 text-sm leading-none text-center text-white bg-indigo-700 fold-bold">Get
|
|
Started</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div
|
|
class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
|
|
<a href="#_"
|
|
class="relative z-40 px-3 py-2 mr-0 text-sm font-bold text-pink-500 md:px-5 lg:text-white sm:mr-3 md:mt-0">Login</a>
|
|
<a href="#_"
|
|
class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-indigo-700 rounded shadow-md fold-bold lg:bg-white lg:text-indigo-700 sm:w-full lg:shadow-none hover:shadow-xl">Get
|
|
Started</a>
|
|
<svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
|
|
viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c">
|
|
<stop stop-color="#E614F2" offset="0%" />
|
|
<stop stop-color="#FC3832" offset="100%" />
|
|
</linearGradient>
|
|
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f">
|
|
<stop stop-color="#657DE9" offset="0%" />
|
|
<stop stop-color="#1C0FD7" offset="100%" />
|
|
</linearGradient>
|
|
<filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
|
|
id="a">
|
|
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
|
|
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" />
|
|
</filter>
|
|
<filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
|
|
id="d">
|
|
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
|
|
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" />
|
|
</filter>
|
|
<path
|
|
d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z"
|
|
id="b" />
|
|
<path
|
|
d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z"
|
|
id="e" />
|
|
</defs>
|
|
<g fill="none" fill-rule="evenodd" opacity=".9">
|
|
<g transform="rotate(65 416.452 409.167)">
|
|
<use fill="#000" filter="url(#a)" xlink:href="#b" />
|
|
<use fill="url(#c)" xlink:href="#b" />
|
|
</g>
|
|
<g transform="rotate(29 421.929 414.496)">
|
|
<use fill="#000" filter="url(#d)" xlink:href="#e" />
|
|
<use fill="url(#f)" xlink:href="#e" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="nav-mobile-btn"
|
|
class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
|
|
<span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
|
|
<span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
if (document.getElementById('nav-mobile-btn')) {
|
|
document.getElementById('nav-mobile-btn').addEventListener('click', function () {
|
|
if (this.classList.contains('close')) {
|
|
document.getElementById('nav').classList.add('hidden');
|
|
this.classList.remove('close');
|
|
} else {
|
|
document.getElementById('nav').classList.remove('hidden');
|
|
this.classList.add('close');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<!-- header 24 end -->
|
|
|
|
|
|
|
|
|
|
<!-- article 4 start -->
|
|
|
|
<div class="p-5 mx-auto sm:p-10 md:p-16 dark:bg-gray-800 dark:text-gray-100">
|
|
<div class="flex flex-col max-w-3xl mx-auto overflow-hidden rounded">
|
|
<img src="https://source.unsplash.com/random/480x360/?work" alt="" class="w-auto h-auto sm:h-96 dark:bg-gray-500">
|
|
<div class="p-6 pb-12 m-4 mx-auto -mt-16 space-y-6 lg:max-w-2xl sm:px-10 sm:mx-12 lg:rounded-md bg-gray-300 dark:bg-gray-900">
|
|
<div class="space-y-2">
|
|
<a rel="noopener noreferrer" href="#" class="inline-block text-2xl font-semibold sm:text-3xl">The Best Activewear from the Nordstrom Anniversary Sale</a>
|
|
<p class="text-xs dark:text-gray-400">By
|
|
<a rel="noopener noreferrer" href="#" class="text-xs hover:underline">Leroy Jenkins</a>
|
|
</p>
|
|
</div>
|
|
<div class="dark:text-gray-100">
|
|
<p>Insert the actual text content here...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- article 4 end -->
|
|
|
|
|
|
|
|
|
|
<!-- section 1 start -->
|
|
|
|
<style>
|
|
.accordion-content {
|
|
transition: max-height 0.3s ease-out, padding 0.3s ease;
|
|
|
|
}
|
|
</style>
|
|
|
|
<section class="bg-white dark:bg-gray-800 ">
|
|
<div class="container px-6 py-8 mx-auto">
|
|
<div class="items-center md:flex">
|
|
|
|
<div class=" grid place-items-center md:place-items-start drop-shadow-lg dark:drop-shadow-[0_10px_8px_rgba(209,213,219,0.1)] ">
|
|
<div class="w-12/12 md:w-6/12 rounded-lg ">
|
|
<div class="bg-white dark:bg-gray-800 p-10 shadow-sm">
|
|
<h3 class="text-lg font-medium dark:text-indigo-600 text-gray-800">What We Do? </h3>
|
|
<p class="text-sm font-light dark:text-gray-100 text-gray-600 my-3">
|
|
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis cumque laboriosam at dolor ullam aliquam,
|
|
</p>
|
|
|
|
<div class="h-1 w-full mx-auto border-b my-5"></div>
|
|
|
|
<!-- What is term -->
|
|
<div class="transition hover:bg-indigo-50 rounded-lg ">
|
|
<!-- header -->
|
|
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
|
<i class="fas fa-plus"></i>
|
|
<h3>What is term?</h3>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
|
<p class="leading-6 font-light pl-9 text-justify">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat dignissimos veritatis beatae qui soluta fugiat dolorem, cumque voluptas at? Debitis error facere nobis distinctio quas provident perferendis pers
|
|
</p>
|
|
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Accordion Wrapper -->
|
|
<div class="transition hover:bg-indigo-50 rounded-lg">
|
|
<!-- header -->
|
|
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
|
<i class="fas fa-plus"></i>
|
|
<h3>How can it be defined?</h3>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
|
<p class="leading-6 font-light pl-9 text-justify">
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis dolorem quisquam aperiam facilis, sapiente quasi alias? At laudantium explicabo corrupti odio ullam sint exercitationem quisquam incidunt odit delectus? Architecto, ratione!
|
|
</p>
|
|
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accordion Wrapper -->
|
|
<div class="transition hover:bg-indigo-50 rounded-lg">
|
|
<!-- header -->
|
|
<div class="accordion-header cursor-pointer transition flex space-x-5 px-5 items-center h-16">
|
|
<i class="fas fa-plus"></i>
|
|
<h3>Chamber reached do he nothing be?</h3>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="accordion-content px-5 pt-0 overflow-hidden max-h-0">
|
|
<p class="leading-6 font-light pl-9 text-justify">
|
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo saepe quae quisquam explicabo voluptas eum sapiente maiores, libero fuga ipsam commodi asperiores consectetur aliquam, quia, laborum vero pariatur quasi! Harum?
|
|
</p>
|
|
<button class="rounded-full bg-indigo-600 text-white font-medium font-lg px-6 py-2 my-5 ml-9">Learn more</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mt-8 lg:mt-0 ">
|
|
<div class="flex items-center justify-center lg:justify-end">
|
|
<div class="">
|
|
<!-- https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80 -->
|
|
<img class="object-cover object-center h-full rounded-md shadow" src="https://source.unsplash.com/random/?tree" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
const accordionHeader = document.querySelectorAll(".accordion-header");
|
|
accordionHeader.forEach((header) => {
|
|
header.addEventListener("click", () => {
|
|
const accordionContent = header.parentElement.querySelector(".accordion-content");
|
|
let accordionMaxHeight = accordionContent.style.maxHeight;
|
|
|
|
// Condition handling
|
|
if (accordionMaxHeight == "0px" || accordionMaxHeight.length == 0) {
|
|
accordionContent.style.maxHeight = `${accordionContent.scrollHeight + 32}px`;
|
|
header.querySelector(".fas").classList.remove("fa-plus");
|
|
header.querySelector(".fas").classList.add("fa-minus");
|
|
header.parentElement.classList.add("bg-indigo-50");
|
|
} else {
|
|
accordionContent.style.maxHeight = `0px`;
|
|
header.querySelector(".fas").classList.add("fa-plus");
|
|
header.querySelector(".fas").classList.remove("fa-minus");
|
|
header.parentElement.classList.remove("bg-indigo-50");
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<!-- section 1 end -->
|
|
|
|
|
|
|
|
<!-- timeline 5 start -->
|
|
<section class="dark:bg-gray-800">
|
|
|
|
<div class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative py-20">
|
|
<h1 class="text-3xl text-center font-bold text-indigo-500">Steps We Take </h1>
|
|
<div class="border-l-2 mt-10">
|
|
<!-- Card 1 -->
|
|
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-indigo-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
|
<!-- Dot Follwing the Left Vertical Line -->
|
|
<div class="w-5 h-5 bg-indigo-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
|
|
|
<!-- Line that connecting the box with the vertical line -->
|
|
<div class="w-10 h-1 bg-blue-300 absolute -left-10 z-0"></div>
|
|
|
|
<!-- Content that showing in the box -->
|
|
<div class="flex-auto">
|
|
<h1 class="text-lg">Concept</h1>
|
|
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
|
<h3>Classroom</h3>
|
|
</div>
|
|
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
|
</div>
|
|
|
|
<!-- Card 2 -->
|
|
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-indigo-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
|
<!-- Dot Follwing the Left Vertical Line -->
|
|
<div class="w-5 h-5 bg-indigo-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
|
|
|
<!-- Line that connecting the box with the vertical line -->
|
|
<div class="w-10 h-1 bg-indigo-300 absolute -left-10 z-0"></div>
|
|
|
|
<!-- Content that showing in the box -->
|
|
<div class="flex-auto">
|
|
<h1 class="text-lg">Prepare</h1>
|
|
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
|
<h3>Classroom</h3>
|
|
</div>
|
|
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
|
</div>
|
|
|
|
<!-- Card 3 -->
|
|
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-indigo-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
|
|
<!-- Dot Follwing the Left Vertical Line -->
|
|
<div class="w-5 h-5 bg-indigo-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
|
|
|
|
<!-- Line that connecting the box with the vertical line -->
|
|
<div class="w-10 h-1 bg-indigo-300 absolute -left-10 z-0"></div>
|
|
|
|
<!-- Content that showing in the box -->
|
|
<div class="flex-auto">
|
|
<h1 class="text-lg">Retouch</h1>
|
|
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
|
|
<h3>Classroom</h3>
|
|
</div>
|
|
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
<!-- timeline 5 end -->
|
|
|
|
|
|
|
|
<!-- pricing 18 start -->
|
|
|
|
<div class="relative px-8 py-10 bg-white dark:bg-gray-800 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
|
|
|
<div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
|
|
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
|
|
<h3
|
|
class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center dark:text-indigo-600 text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
|
|
Simple, Transparent Pricing for Everyone</h3>
|
|
|
|
<div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
|
|
<!-- Basic Pricing -->
|
|
<div class="relative flex flex-col items-center block sm:flex-row">
|
|
<div
|
|
class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
|
|
<div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
|
|
<div
|
|
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
|
<h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
|
|
class="ml-2 font-light">Plan</span></h3>
|
|
<h4
|
|
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
|
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
|
|
<p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
|
|
features below.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap px-6 mt-8">
|
|
<ul>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">One More Feature</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex items-center block p-8 uppercase">
|
|
<a href="#_"
|
|
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
|
This Plan</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Pro Pricing -->
|
|
<div
|
|
class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
|
|
<div
|
|
class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
|
|
Most Popular</div>
|
|
<div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
|
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
|
|
class="ml-2 font-light">Plan</span></h3>
|
|
<h4
|
|
class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
|
|
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
|
|
<p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
|
|
access to the
|
|
following:</p>
|
|
</div>
|
|
<div class="flex justify-start pl-12 mt-8 sm:justify-start">
|
|
<ul>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">And One More</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex items-center block p-8 uppercase">
|
|
<a href="#_"
|
|
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
|
|
This Plan</a>
|
|
</div>
|
|
</div>
|
|
<!-- Premium Pricing -->
|
|
<div
|
|
class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
|
|
<div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
|
|
<div
|
|
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
|
|
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
|
|
class="ml-2 font-light">Plan</span></h3>
|
|
<h4
|
|
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
|
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
|
|
<p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
|
|
all the following
|
|
features:</p>
|
|
</div>
|
|
<div class="flex flex-wrap px-8 mt-8">
|
|
<ul>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">And One More</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex items-center block p-8 uppercase">
|
|
<a href="#_"
|
|
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
|
This Plan</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- pricing 18 end -->
|
|
|
|
|
|
|
|
|
|
<!-- footer 47 start -->
|
|
|
|
<footer class="px-4 pt-12 pb-8 text-white bg-white dark:bg-gray-800 border-t border-gray-200">
|
|
<div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
|
|
<div class="w-full pl-12 mr-4 text-left lg:w-1/4 sm:text-center sm:pl-0 lg:text-left">
|
|
<a href="/"
|
|
class="flex justify-start text-left sm:text-center lg:text-left sm:justify-center lg:justify-start">
|
|
<span class="flex items-start sm:items-center">
|
|
<svg class="w-auto h-6 text-gray-900 dark:text-cyan-300 fill-current" viewBox="0 0 194 116"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g fill-rule="evenodd">
|
|
<path
|
|
d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z">
|
|
</path>
|
|
<path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z"></path>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
<p class="mt-6 mr-4 text-base text-gray-500 dark:text-gray-300">Crafting the next-level of user experience and engagement.
|
|
</p>
|
|
</div>
|
|
<div class="block w-full pl-10 mt-6 text-sm lg:w-3/4 sm:flex lg:mt-0">
|
|
<ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
|
|
<li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
|
|
Product</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Features</a>
|
|
</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Integrations</a>
|
|
</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Pricing</a>
|
|
</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">FAQ</a></li>
|
|
</ul>
|
|
<ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
|
|
<li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
|
|
Company</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300 ">Privacy</a>
|
|
</li>
|
|
<li><a href="#_" class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Terms
|
|
of
|
|
Service</a></li>
|
|
</ul>
|
|
<ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
|
|
<li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
|
|
TailwindCSS
|
|
</li>
|
|
<li><a href="https://devdojo.com/tailwindcss/components"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
|
|
Components</a></li>
|
|
<li><a href="https://devdojo.com/tailwindcss/templates"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tailwind
|
|
Templates</a></li>
|
|
<li><a href="https://devdojo.com/tails"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300">Tails</a></li>
|
|
</ul>
|
|
<div class="flex flex-col w-full text-gray-700">
|
|
<div class="inline-block px-3 py-2 mt-5 font-bold text-gray-800 uppercase md:mt-0">Follow Us</div>
|
|
<div class="flex justify-start pl-4 mt-2">
|
|
<a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
|
|
target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
|
|
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" />
|
|
</svg>
|
|
</a>
|
|
<a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
|
|
target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
|
|
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />
|
|
</svg>
|
|
</a>
|
|
<a class="flex items-center block text-gray-400 no-underline hover:text-gray-600 dark:text-gray-300 dark:hover:text-cyan-300"
|
|
target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
|
|
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" pt-6 mt-10 text-center text-gray-400 dark:text-cyan-300 border-t border-gray-100">© 2020 Landmark. All rights
|
|
reserved.</div>
|
|
</footer>
|
|
|
|
|
|
<!-- footer 47 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> |