added other tempalte parts
This commit is contained in:
merajjahir
Vendored
+323
-237
File diff suppressed because it is too large
Load Diff
@@ -142,6 +142,8 @@
|
|||||||
|
|
||||||
<!-- accordion 4 end -->
|
<!-- accordion 4 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
let toogler = document.getElementById("dark_mood_toogler");
|
let toogler = document.getElementById("dark_mood_toogler");
|
||||||
|
|||||||
@@ -21,31 +21,34 @@
|
|||||||
<section class="section_divider">
|
<section class="section_divider">
|
||||||
<div>Contact 2</div>
|
<div>Contact 2</div>
|
||||||
</section>
|
</section>
|
||||||
<div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto rounded-lg md:grid-cols-2 md:px-12 lg:px-16 xl:px-32 dark:bg-gray-800 dark:text-gray-100">
|
<section class="dark:bg-gray-900 dark:text-gray-100">
|
||||||
<div class="flex flex-col justify-between">
|
|
||||||
<div class="space-y-2">
|
|
||||||
<h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
|
|
||||||
<div class="dark:text-gray-400">Vivamus in nisl metus? Phasellus.</div>
|
|
||||||
</div>
|
|
||||||
<img src="assets/svg/doodle.svg" alt="" class="p-6 h-52 md:h-64">
|
|
||||||
</div>
|
|
||||||
<form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
|
|
||||||
<div>
|
|
||||||
<label for="name" class="text-sm">Full name</label>
|
|
||||||
<input id="name" type="text" placeholder="" class="w-full p-3 rounded dark:bg-gray-800">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="email" class="text-sm">Email</label>
|
|
||||||
<input id="email" type="email" class="w-full p-3 rounded dark:bg-gray-800">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="message" class="text-sm">Message</label>
|
|
||||||
<textarea id="message" rows="3" class="w-full p-3 rounded dark:bg-gray-800"></textarea>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-green-400 dark:text-gray-900">Send Message</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-24 mx-auto rounded-lg md:grid-cols-2 md:px-12 xl:px-32 ">
|
||||||
|
<div class="flex flex-col justify-between">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
|
||||||
|
<div class="dark:text-gray-400">Vivamus in nisl metus? Phasellus.</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://www.mambaui.com/assets/svg/doodle.svg" alt="" class="p-6 h-52 md:h-64">
|
||||||
|
</div>
|
||||||
|
<form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="text-sm">Full name</label>
|
||||||
|
<input id="name" type="text" placeholder="" class="w-full p-3 rounded dark:bg-gray-800">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="email" class="text-sm">Email</label>
|
||||||
|
<input id="email" type="email" class="w-full p-3 rounded dark:bg-gray-800">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="message" class="text-sm">Message</label>
|
||||||
|
<textarea id="message" rows="3" class="w-full p-3 rounded dark:bg-gray-800"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-green-400 dark:text-gray-900">Send Message</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
<!-- contact 2 end -->
|
<!-- contact 2 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1418,6 +1418,97 @@
|
|||||||
<!-- contact 9 end -->
|
<!-- contact 9 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- contact 10 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Contact 10</div>
|
||||||
|
</section>
|
||||||
|
<div class="px-4 py-6 sm:grid grid-cols-2 gap-x-6 max-w-4xl mx-auto">
|
||||||
|
<div class="mb-8">
|
||||||
|
<h2 class="text-center text-2xl font-bold text-blue-800">Add Contact</h2>
|
||||||
|
<div class="mt-6">
|
||||||
|
<div class="flex-col space-y-4">
|
||||||
|
<input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
|
||||||
|
<input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
|
||||||
|
<input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<p class="mb-1 text-gray-700 font-semibold text-sm">Contact Type</p>
|
||||||
|
<div class="flex space-x-4 my-2 items-center">
|
||||||
|
<div class="flex items-center space-x-1">
|
||||||
|
<input type="radio" id="personal" class="cursor-pointer">
|
||||||
|
<label for="personal" class="cursor-pointer">Personal</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-1">
|
||||||
|
<input type="radio" id="professional" class="cursor-pointer">
|
||||||
|
<label for="professional" class="cursor-pointer">Professional</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full mt-4 bg-gradient-to-tr from-indigo-600 to-purple-600 text-white py-2 rounded-md text-lg font-semibold">Add Contact</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class=" p-6 rounded-md bg-indigo-50">
|
||||||
|
<div class="flex justify-between mb-2 items-center">
|
||||||
|
<p class="text-lg font-semibold items-center">Jill Johson</p>
|
||||||
|
<p class="bg-indigo-500 text-indigo-50 px-3 py-1 rounded-md text-sm">Personal</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-md font-semibold">jill@gmail.com</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-3 text-sm">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-md mb-6">111-111-111</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-x-1">
|
||||||
|
<span class="text-md px-6 py-2 rounded-md bg-green-500 text-indigo-50 font-semibold cursor-pointer" text-indigo-50 font-semibold cursor-pointer>Edit</span>
|
||||||
|
<span class="text-md px-6 py-2 rounded-md bg-red-500 text-indigo-50 font-semibold cursor-pointer">Delete</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class=" p-4 rounded-md bg-indigo-50">
|
||||||
|
<div class="flex justify-between mb-2 items-center">
|
||||||
|
<p class="text-lg font-semibold items-center">Jill Johson</p>
|
||||||
|
<p class="bg-indigo-500 text-indigo-50 px-3 py-1 rounded-md text-sm">Personal</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-md font-semibold">jill@gmail.com</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex mt-3 text-sm">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
|
d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-md mb-6">111-111-111</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-x-1">
|
||||||
|
<span class="text-md px-6 py-2 rounded-md bg-green-500 text-indigo-50 font-semibold cursor-pointer" >Edit</span>
|
||||||
|
<span class="text-md px-6 py-2 rounded-md bg-red-500 text-indigo-50 font-semibold cursor-pointer">Delete</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- contact 10 end -->
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
let toogler = document.getElementById("dark_mood_toogler");
|
let toogler = document.getElementById("dark_mood_toogler");
|
||||||
|
|||||||
@@ -413,6 +413,40 @@
|
|||||||
<!-- end cta 17 -->
|
<!-- end cta 17 -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- cta 18 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>CTA 18</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Second Section -->
|
||||||
|
<div class="relative w-full px-8 py-20 bg-yellow-400 sm:py-32 md:py-40">
|
||||||
|
<div class="container flex flex-col items-center justify-center h-full max-w-6xl mx-auto sm:flex-row sm:justify-between">
|
||||||
|
<div class="relative flex flex-col items-start justify-center w-full mb-10 sm:w-5/6 sm:w-1/3 sm:mb-0 sm:pr-10">
|
||||||
|
<h2 class="mb-5 text-2xl font-black leading-tight xl:text-4xl">Easily Add Your Own Screenshots</h2>
|
||||||
|
<p class="mb-8 text-base text-yellow-900 xl:text-xl md:max-w-lg">You can easily customize this design by replacing your image with the image on the right. Cool, right?</p>
|
||||||
|
<a href="#_" class="relative">
|
||||||
|
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-black rounded"></span>
|
||||||
|
<span class="relative inline-block w-full h-full px-5 py-3 text-lg font-bold transition duration-100 bg-white border-2 border-black rounded fold-bold hover:bg-yellow-500 hover:text-white">GET STARTED</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="relative flex flex-col items-center justify-center w-full -mr-0 sm:w-5/6 sm:w-2/3 sm:-mr-20">
|
||||||
|
<div class="overflow-hidden border-2 border-black rounded-lg">
|
||||||
|
<img src="https://cdn.devdojo.com/images/october2020/screenshot.png" alt="Screen shot of Flare" class="object-cover w-full h-full">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- cta 18 end -->
|
||||||
|
|
||||||
|
<!-- cta 19 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>CTA 19</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- cta 19 end -->
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
let toogler = document.getElementById("dark_mood_toogler");
|
let toogler = document.getElementById("dark_mood_toogler");
|
||||||
|
|||||||
@@ -18,44 +18,44 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
<!-- faq 2 start -->
|
<!-- faq 2 start -->
|
||||||
<section class="section_divider" id="faq_2">
|
<section class="section_divider" id="faq_2">
|
||||||
<div>FAQ 2</div>
|
<div>FAQ 2</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="dark:bg-gray-800 dark:text-gray-100">
|
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||||||
<div class="container flex flex-col items-center p-4 mx-auto md:p-8">
|
<div class="container flex flex-col items-center p-4 mx-auto md:p-8">
|
||||||
<h1 class="text-3xl font-bold leading-none text-center sm:text-4xl">Help Center</h1>
|
<h1 class="text-3xl font-bold leading-none text-center sm:text-4xl">Help Center</h1>
|
||||||
<div class="relative mt-6 mb-12">
|
<div class="relative mt-6 mb-12">
|
||||||
<span class="absolute inset-y-0 flex items-center pl-2 mx-auto">
|
<span class="absolute inset-y-0 flex items-center pl-2 mx-auto">
|
||||||
<button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
|
<button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
|
||||||
<svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-gray-100">
|
<svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-gray-100">
|
||||||
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
<input type="search" name="Search" placeholder="Search..." class="w-full py-3 pl-12 text-sm rounded-full border-2 sm:w-96 focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
|
<input type="search" name="Search" placeholder="Search..." class="w-full py-3 pl-12 text-sm rounded-full border-2 sm:w-96 focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col w-full divide-y sm:flex-row sm:divide-y-0 sm:divide-x sm:px-8 lg:px-12 xl:px-32 divide-gray-700">
|
<div class="flex flex-col w-full divide-y sm:flex-row sm:divide-y-0 sm:divide-x sm:px-8 lg:px-12 xl:px-32 divide-gray-700">
|
||||||
<div class="flex flex-col w-full divide-y divide-gray-700">
|
<div class="flex flex-col w-full divide-y divide-gray-700">
|
||||||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Billing</a>
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Billing</a>
|
||||||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Support</a>
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Support</a>
|
||||||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Account</a>
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Account</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col w-full divide-y divide-gray-700">
|
<div class="flex flex-col w-full divide-y divide-gray-700">
|
||||||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Features</a>
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Features</a>
|
||||||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Contact us</a>
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Contact us</a>
|
||||||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">My orders</a>
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">My orders</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden w-full divide-y sm:flex-col sm:flex divide-gray-700">
|
<div class="hidden w-full divide-y sm:flex-col sm:flex divide-gray-700">
|
||||||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Enterprise</a>
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Enterprise</a>
|
||||||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Privacy</a>
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Privacy</a>
|
||||||
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Developers</a>
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Developers</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- faq 2 end -->
|
<!-- faq 2 end -->
|
||||||
|
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
|
|||||||
@@ -1005,6 +1005,340 @@
|
|||||||
<!-- feature 14 end -->
|
<!-- feature 14 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- feature 15 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Feature 15</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div id="features" class="relative w-full px-8 py-10 border-t border-gray-200 dark:bg-gray-800 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
||||||
|
<div class="container flex flex-col items-center justify-between h-full max-w-6xl mx-auto">
|
||||||
|
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 dark:text-cyan-300 uppercase">Our Features</h2>
|
||||||
|
<h3
|
||||||
|
class="max-w-2xl px-5 mt-2 text-3xl font-black leading-tight text-center text-gray-900 dark:text-emerald-300 sm:mt-0 sm:px-0 sm:text-6xl">
|
||||||
|
Built and Designed with you in Mind</h3>
|
||||||
|
<div class="flex flex-col w-full mt-0 lg:flex-row sm:mt-10 lg:mt-20">
|
||||||
|
|
||||||
|
<div class="w-full max-w-md p-4 mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3">
|
||||||
|
<div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
|
||||||
|
<svg class="absolute w-full h-full text-gray-100 dark:text-emerald-300 fill-current" viewBox="0 0 377 340"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path
|
||||||
|
d="M342.8 3.7c24.7 14 18.1 75 22.1 124s18.6 85.8 8.7 114.2c-9.9 28.4-44.4 48.3-76.4 62.4-32 14.1-61.6 22.4-95.9 28.9-34.3 6.5-73.3 11.1-95.5-6.2-22.2-17.2-27.6-56.5-47.2-96C38.9 191.4 5 151.5.9 108.2-3.1 64.8 22.7 18 61.8 8.7c39.2-9.2 91.7 19 146 16.6 54.2-2.4 110.3-35.6 135-21.6z" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<!-- FEATURE Icon 1 -->
|
||||||
|
<svg class="relative w-20 h-20" viewBox="0 0 58 58" 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="linearGradient-1TriangleIcon1">
|
||||||
|
<stop stop-color="#9C09DB" offset="0%" />
|
||||||
|
<stop stop-color="#1C0FD7" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
|
||||||
|
id="filter-3TriangleIcon1">
|
||||||
|
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||||
|
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
|
||||||
|
result="shadowBlurOuter1" />
|
||||||
|
<feColorMatrix
|
||||||
|
values="0 0 0 0 0.141176471 0 0 0 0 0.031372549 0 0 0 0 0.501960784 0 0 0 0.15 0"
|
||||||
|
in="shadowBlurOuter1" />
|
||||||
|
</filter>
|
||||||
|
<path
|
||||||
|
d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
|
||||||
|
id="path-2TriangleIcon1" />
|
||||||
|
</defs>
|
||||||
|
<g id="Page-1TriangleIcon1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Desktop-HDTriangleIcon1" transform="translate(-291 -1278)">
|
||||||
|
<g id="FeaturesTriangleIcon1" transform="translate(170 915)">
|
||||||
|
<g id="Group-9TriangleIcon1" transform="translate(0 365)">
|
||||||
|
<g id="Group-8TriangleIcon1" transform="translate(125)">
|
||||||
|
<g id="Rectangle-9TriangleIcon1">
|
||||||
|
<use fill="#000" filter="url(#filter-3TriangleIcon1)"
|
||||||
|
xlink:href="#path-2TriangleIcon1" />
|
||||||
|
<use fill="url(#linearGradient-1TriangleIcon1)"
|
||||||
|
xlink:href="#path-2TriangleIcon1" />
|
||||||
|
</g>
|
||||||
|
<g id="playTriangleIcon1" transform="translate(18 15)" fill="#FFF"
|
||||||
|
fill-rule="nonzero">
|
||||||
|
<path
|
||||||
|
d="M9.432 2.023l8.919 14.879a1.05 1.05 0 01-.384 1.452 1.097 1.097 0 01-.548.146H-.42A1.07 1.07 0 01-1.5 17.44c0-.19.052-.375.15-.538L7.567 2.023a1.092 1.092 0 011.864 0z"
|
||||||
|
id="TriangleIcon1" transform="rotate(90 8.5 10)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h4 class="relative mt-6 text-lg font-bold">Automated Tools</h4>
|
||||||
|
<p class="relative mt-2 text-base text-center text-gray-600">Automate your workflow with these
|
||||||
|
top of the
|
||||||
|
line marketing tools.</p>
|
||||||
|
<a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
|
||||||
|
More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full max-w-md p-4 mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3">
|
||||||
|
<div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
|
||||||
|
<svg class="absolute w-full h-full text-gray-100 dark:text-emerald-200 fill-current" viewBox="0 0 358 372"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path
|
||||||
|
d="M315.7 6.5c30.2 15.1 42.6 61.8 41.5 102.5-1.1 40.6-15.7 75.2-24.3 114.8-8.7 39.7-11.3 84.3-34.3 107.2-23 22.9-66.3 23.9-114.5 30.7-48.2 6.7-101.3 19.1-123.2-4.1-21.8-23.2-12.5-82.1-21.6-130.2C30.2 179.3 2.6 141.9.7 102c-2-39.9 21.7-82.2 57.4-95.6 35.7-13.5 83.3 2.1 131.2 1.7 47.9-.4 96.1-16.8 126.4-1.6z" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<!-- FEATURE Icon 2 -->
|
||||||
|
<svg class="relative w-20 h-20" viewBox="0 0 58 58" 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="linearGradient-1Icon2">
|
||||||
|
<stop stop-color="#F2C314" offset="0%" />
|
||||||
|
<stop stop-color="#FC3832" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
|
||||||
|
id="filter-3Icon2">
|
||||||
|
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||||
|
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
|
||||||
|
result="shadowBlurOuter1" />
|
||||||
|
<feColorMatrix
|
||||||
|
values="0 0 0 0 0.501960784 0 0 0 0 0.125490196 0 0 0 0 0 0 0 0 0.15 0"
|
||||||
|
in="shadowBlurOuter1" />
|
||||||
|
</filter>
|
||||||
|
<path
|
||||||
|
d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
|
||||||
|
id="path-2Icon2" />
|
||||||
|
</defs>
|
||||||
|
<g id="Page-1Icon2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Desktop-HDIcon2" transform="translate(-691 -1278)">
|
||||||
|
<g id="FeaturesIcon2" transform="translate(170 915)">
|
||||||
|
<g id="Group-9-CopyIcon2" transform="translate(400 365)">
|
||||||
|
<g id="Group-8Icon2" transform="translate(125)">
|
||||||
|
<g id="Rectangle-9Icon2">
|
||||||
|
<use fill="#000" filter="url(#filter-3Icon2)"
|
||||||
|
xlink:href="#path-2Icon2" />
|
||||||
|
<use fill="url(#linearGradient-1Icon2)" xlink:href="#path-2Icon2" />
|
||||||
|
</g>
|
||||||
|
<g id="machine-learningIcon2" transform="translate(14 12)" fill="#FFF"
|
||||||
|
fill-rule="nonzero">
|
||||||
|
<path
|
||||||
|
d="M10.554 21.418v-2.68c-1.1-.204-1.932-1.143-1.932-2.271 0-.468.143-.903.388-1.267l-2.32-1.662L4.367 15.2a2.254 2.254 0 01-.005 2.541l5.28 4.05c.268-.182.577-.311.911-.373zm.892 0c.334.062.643.191.912.373l5.28-4.05a2.254 2.254 0 01-.006-2.54l-2.321-1.663L12.99 15.2c.245.364.388.8.388 1.267 0 1.128-.832 2.067-1.932 2.27v2.681zm1.538.997c.25.365.394.803.394 1.274C13.378 24.965 12.314 26 11 26s-2.378-1.035-2.378-2.311c0-.471.145-.91.394-1.274l-5.28-4.05c-.385.26-.853.413-1.358.413C1.065 18.778 0 17.743 0 16.467c0-1.129.832-2.068 1.932-2.27v-2.393C.832 11.6 0 10.662 0 9.534c0-1.277 1.065-2.312 2.378-2.312.505 0 .973.153 1.358.414l5.28-4.05a2.254 2.254 0 01-.394-1.275C8.622 1.035 9.686 0 11 0s2.378 1.035 2.378 2.311c0 .471-.145.91-.394 1.274l5.28 4.05c.385-.26.853-.413 1.358-.413C20.935 7.222 22 8.257 22 9.533c0 1.129-.832 2.068-1.932 2.27v2.393c1.1.203 1.932 1.142 1.932 2.27 0 1.277-1.065 2.312-2.378 2.312-.505 0-.973-.153-1.358-.414l-5.28 4.05zm-9.243-7.843L5.937 13l-2.196-1.572c-.27.183-.58.314-.917.376v2.392c.336.062.647.193.917.376zm.627-3.772l2.321 1.662L9.01 10.8a2.254 2.254 0 01-.388-1.267c0-1.128.832-2.067 1.932-2.27V4.582a2.403 2.403 0 01-.912-.373l-5.28 4.05a2.254 2.254 0 01.006 2.54zm13.89 3.772c.27-.183.582-.314.918-.376v-2.392a2.403 2.403 0 01-.917-.376L16.063 13l2.196 1.572zm-.62-6.313l-5.28-4.05a2.403 2.403 0 01-.912.373v2.68c1.1.204 1.932 1.143 1.932 2.271 0 .468-.143.903-.388 1.267l2.32 1.662 2.322-1.662a2.254 2.254 0 01.005-2.541zm-8 6.313A2.415 2.415 0 0111 14.156c.507 0 .977.154 1.363.416L14.559 13l-2.196-1.572a2.415 2.415 0 01-1.363.416c-.507 0-.977-.154-1.363-.416L7.441 13l2.196 1.572zM11 10.978c.821 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.486.647-1.486 1.444c0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445c0 .797.665 1.444 1.486 1.444zm8.622-6.933c.82 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.487.647-1.487 1.444c0 .798.666 1.445 1.487 1.445zm0 6.933c.82 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.487.647-1.487 1.445c0 .797.666 1.444 1.487 1.444zM2.378 10.978c.821 0 1.487-.647 1.487-1.445 0-.797-.666-1.444-1.487-1.444-.82 0-1.486.647-1.486 1.444 0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.487-.647 1.487-1.444 0-.798-.666-1.445-1.487-1.445-.82 0-1.486.647-1.486 1.445 0 .797.665 1.444 1.486 1.444zM11 25.133c.821 0 1.486-.646 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445.665 1.444 1.486 1.444zm0-21.377c.821 0 1.486-.647 1.486-1.445S11.821.867 11 .867s-1.486.646-1.486 1.444c0 .798.665 1.445 1.486 1.445z"
|
||||||
|
id="ShapeIcon2" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h4 class="relative mt-6 text-lg font-bold">Machine Learning</h4>
|
||||||
|
<p class="relative mt-2 text-base text-center text-gray-600">Your Marketing tools will learn how
|
||||||
|
to better
|
||||||
|
convert and sell.</p>
|
||||||
|
<a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
|
||||||
|
More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full max-w-md p-4 mx-auto mb-16 lg:mb-0 lg:w-1/3">
|
||||||
|
<div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
|
||||||
|
<svg class="absolute w-full h-full text-gray-100 dark:text-emerald-100 fill-current" viewBox="0 0 378 410"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path
|
||||||
|
d="M305.9 14.4c23.8 24.6 16.3 84.9 26.6 135.1 10.4 50.2 38.6 90.3 43.7 137.8 5.1 47.5-12.8 102.4-50.7 117.4-37.9 15.1-95.7-9.8-151.7-12.2-56.1-2.5-110.3 17.6-130-3.4-19.7-20.9-4.7-82.9-11.5-131.2C25.5 209.5-3 174.7 1.2 147c4.2-27.7 41-48.3 75-69.6C110.1 56.1 141 34.1 184 17.5c43.1-16.6 98.1-27.7 121.9-3.1z" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<!-- FEATURE Icon 3 -->
|
||||||
|
<svg class="relative w-20 h-20" viewBox="0 0 58 58" 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="linearGradient-1Icon3">
|
||||||
|
<stop stop-color="#32FBFC" offset="0%" />
|
||||||
|
<stop stop-color="#3214F2" offset="100%" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
|
||||||
|
id="filter-3Icon3">
|
||||||
|
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
|
||||||
|
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
|
||||||
|
result="shadowBlurOuter1" />
|
||||||
|
<feColorMatrix
|
||||||
|
values="0 0 0 0 0.031372549 0 0 0 0 0.149019608 0 0 0 0 0.658823529 0 0 0 0.15 0"
|
||||||
|
in="shadowBlurOuter1" />
|
||||||
|
</filter>
|
||||||
|
<path
|
||||||
|
d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
|
||||||
|
id="path-2Icon3" />
|
||||||
|
</defs>
|
||||||
|
<g id="Page-1Icon3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Desktop-HDIcon3" transform="translate(-1091 -1278)">
|
||||||
|
<g id="FeaturesIcon3" transform="translate(170 915)">
|
||||||
|
<g id="Group-9-Copy-2Icon3" transform="translate(800 365)">
|
||||||
|
<g id="Group-8Icon3" transform="translate(125)">
|
||||||
|
<g id="Rectangle-9Icon3">
|
||||||
|
<use fill="#000" filter="url(#filter-3Icon3)"
|
||||||
|
xlink:href="#path-2Icon3" />
|
||||||
|
<use fill="url(#linearGradient-1Icon3)" xlink:href="#path-2Icon3" />
|
||||||
|
</g>
|
||||||
|
<g id="smart-notificationsIcon3" transform="translate(15 11)"
|
||||||
|
fill="#FFF" fill-rule="nonzero">
|
||||||
|
<path
|
||||||
|
d="M12.519 3.243a6.808 6.808 0 00-.187 1.298h-8.44a2.595 2.595 0 00-2.595 2.594v12.973a2.595 2.595 0 002.595 2.595h12.973a2.595 2.595 0 002.594-2.595v-8.44c.445-.02.88-.084 1.298-.187v8.627A3.892 3.892 0 0116.865 24H3.892A3.892 3.892 0 010 20.108V7.135a3.892 3.892 0 013.892-3.892h8.627zm6.616 6.487a4.865 4.865 0 110-9.73 4.865 4.865 0 010 9.73z"
|
||||||
|
id="IconIcon3" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h4 class="relative mt-6 text-lg font-bold">Smart Notifications</h4>
|
||||||
|
<p class="relative mt-2 text-base text-center text-gray-600">Our smart notifications will notify
|
||||||
|
you when
|
||||||
|
users convert.</p>
|
||||||
|
<a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
|
||||||
|
More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- feature 15 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- feature 16 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Feature 16</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="relative w-full py-20 pb-20 overflow-hidden bg-white md:pt-40 md:pb-64">
|
||||||
|
<!-- CURVED SVG BORDER INVERT -->
|
||||||
|
<svg class="absolute top-0 w-full text-yellow-400 fill-current" viewBox="0 0 1400 50" xmlns="http://www.w3.org/2000/svg"><path d="M0 50C309.151 16.667 542.484 0 700 0c157.516 0 390.849 16.667 700 50V0H0v50z"/></svg>
|
||||||
|
<div class="container relative flex flex-col justify-between h-full max-w-6xl px-8 mx-auto xl:px-0">
|
||||||
|
<h2 class="relative flex items-center self-start inline-block w-auto mb-20 text-4xl font-black">
|
||||||
|
<span class="absolute inline-block w-full h-4 mt-3 -ml-2 bg-yellow-400"></span>
|
||||||
|
<span class="relative">Feature List</span>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="flex w-full h-full">
|
||||||
|
|
||||||
|
<div class="w-full lg:w-2/3">
|
||||||
|
|
||||||
|
<!-- Feature blocks first column -->
|
||||||
|
<div class="flex flex-col w-full mb-10 sm:flex-row">
|
||||||
|
<div class="w-full mb-10 sm:mb-0 sm:w-1/2">
|
||||||
|
<div class="relative ml-0 mr-0 sm:mr-10">
|
||||||
|
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-indigo-500 rounded-lg"></span>
|
||||||
|
<div class="relative p-5 bg-white border-2 border-indigo-500 rounded-lg">
|
||||||
|
<div class="flex items-center -mt-1">
|
||||||
|
<svg class="w-8 h-8 text-indigo-500 fill-current" viewBox="0 0 20 20">
|
||||||
|
<polygon points="18.198,7.95 3.168,7.95 3.168,8.634 9.317,9.727 9.317,19.564 12.05,19.564 12.05,9.727 18.198,8.634 "></polygon>
|
||||||
|
<path d="M2.485,10.057v-3.41H2.473l0.012-4.845h1.366c0.378,0,0.683-0.306,0.683-0.683c0-0.378-0.306-0.683-0.683-0.683H1.119c-0.378,0-0.683,0.306-0.683,0.683c0,0.378,0.306,0.683,0.683,0.683h0.683v4.845C1.406,6.788,1.119,7.163,1.119,7.609v2.733c0,0.566,0.459,1.025,1.025,1.025c0.053,0,0.105-0.008,0.157-0.016l-0.499,5.481l5.9,2.733h0.931C8.634,13.266,5.234,10.458,2.485,10.057z"></path>
|
||||||
|
<path d="M18.169,6.584c-0.303-3.896-3.202-6.149-7.486-6.149c-4.282,0-7.183,2.252-7.484,6.149H18.169z M15.463,3.187c0.024,0.351-0.103,0.709-0.394,0.977c-0.535,0.495-1.405,0.495-1.94,0c-0.29-0.268-0.418-0.626-0.394-0.977C13.513,3.827,14.683,3.827,15.463,3.187z"></path>
|
||||||
|
<path d="M18.887,10.056c-2.749,0.398-6.154,3.206-6.154,9.508h0.933l5.899-2.733L18.887,10.056z"></path>
|
||||||
|
</svg>
|
||||||
|
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Awesome Dashboard</h3>
|
||||||
|
</div>
|
||||||
|
<p class="mt-3 mb-1 text-xs font-medium text-indigo-500 uppercase">PREMIUM FEATURE</p>
|
||||||
|
<p class="mb-2 text-gray-600">You can get a quick snapshot of all your analytics on your beautiful dashboard.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full sm:w-1/2">
|
||||||
|
<div class="relative ml-0 md:mr-10">
|
||||||
|
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-purple-500 rounded-lg"></span>
|
||||||
|
<div class="relative p-5 bg-white border-2 border-purple-500 rounded-lg">
|
||||||
|
<div class="flex items-center -mt-1">
|
||||||
|
<svg class="w-8 h-8 text-purple-500 fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M19.629,9.655c-0.021-0.589-0.088-1.165-0.21-1.723h-3.907V7.244h1.378V6.555h-2.756V5.866h2.067V5.177h-0.689V4.488h-1.378V3.799h0.689V3.11h-1.378V2.421h0.689V1.731V1.294C12.88,0.697,11.482,0.353,10,0.353c-5.212,0-9.446,4.135-9.629,9.302H19.629z M6.555,2.421c1.522,0,2.756,1.234,2.756,2.756S8.077,7.933,6.555,7.933S3.799,6.699,3.799,5.177S5.033,2.421,6.555,2.421z"></path>
|
||||||
|
<path d="M12.067,18.958h-0.689v-0.689h2.067v-0.689h0.689V16.89h2.067v-0.689h0.689v-0.689h-1.378v-0.689h-2.067v-0.689h1.378v-0.689h2.756v-0.689h-1.378v-0.689h3.218c0.122-0.557,0.189-1.134,0.21-1.723H0.371c0.183,5.167,4.418,9.302,9.629,9.302c0.711,0,1.401-0.082,2.067-0.227V18.958z"></path>
|
||||||
|
</svg>
|
||||||
|
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Rad Tools</h3>
|
||||||
|
</div>
|
||||||
|
<p class="mt-3 mb-1 text-xs font-medium text-purple-500 uppercase">NEW FEATURE</p>
|
||||||
|
<p class="mb-2 text-gray-600">We've got some pretty rad tools to help you take on the world.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Feature blocks second column -->
|
||||||
|
<div class="flex flex-col w-full mb-5 sm:flex-row">
|
||||||
|
<div class="w-full mb-10 sm:mb-0 sm:w-1/2">
|
||||||
|
<div class="relative ml-0 mr-0 sm:mr-10">
|
||||||
|
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-blue-400 rounded-lg"></span>
|
||||||
|
<div class="relative p-5 bg-white border-2 border-blue-400 rounded-lg">
|
||||||
|
<div class="flex items-center -mt-1">
|
||||||
|
<svg class="w-8 h-8 text-blue-400 fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M18.21,16.157v-8.21c0-0.756-0.613-1.368-1.368-1.368h-1.368v1.368v1.368v6.841l-1.368,3.421h5.473L18.21,16.157z"></path>
|
||||||
|
<path d="M4.527,9.316V7.948V6.579H3.159c-0.756,0-1.368,0.613-1.368,1.368v8.21l-1.368,3.421h5.473l-1.368-3.421V9.316z"></path>
|
||||||
|
<path d="M14.766,5.895h0.023V5.21c0-2.644-2.145-4.788-4.789-4.788S5.211,2.566,5.211,5.21v0.685h0.023H14.766zM12.737,3.843c0.378,0,0.684,0.307,0.684,0.684s-0.306,0.684-0.684,0.684c-0.378,0-0.684-0.307-0.684-0.684S12.358,3.843,12.737,3.843z M10,1.448c0.755,0,1.368,0.613,1.368,1.368S10.755,4.185,10,4.185c-0.756,0-1.368-0.613-1.368-1.368S9.244,1.448,10,1.448z"></path>
|
||||||
|
<path d="M14.789,6.579H5.211v9.578l1.368,1.368h6.841l1.368-1.368V6.579z M12.052,12.052H7.948c-0.378,0-0.684-0.306-0.684-0.684c0-0.378,0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.306,0.684,0.684C12.737,11.746,12.431,12.052,12.052,12.052z M12.052,9.316H7.948c-0.378,0-0.684-0.307-0.684-0.684s0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.307,0.684,0.684S12.431,9.316,12.052,9.316z"></path>
|
||||||
|
</svg>
|
||||||
|
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Easy Collaboration</h3>
|
||||||
|
</div>
|
||||||
|
<p class="mt-3 mb-1 text-xs font-medium text-blue-400 uppercase">FREE FEATURE</p>
|
||||||
|
<p class="mb-2 text-gray-600">Collaborating with members of your team couldn't be easier.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full sm:w-1/2">
|
||||||
|
<div class="relative ml-0 md:mr-10">
|
||||||
|
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-teal-500 rounded-lg"></span>
|
||||||
|
<div class="relative p-5 bg-white border-2 border-teal-500 rounded-lg">
|
||||||
|
<div class="flex items-center -mt-1">
|
||||||
|
<svg class="w-8 h-8 text-teal-500 fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M16.853,8.355V5.888c0-3.015-2.467-5.482-5.482-5.482H8.629c-3.015,0-5.482,2.467-5.482,5.482v2.467l-2.741,7.127c0,1.371,4.295,4.112,9.594,4.112s9.594-2.741,9.594-4.112L16.853,8.355z M5.888,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C6.402,17.137,6.173,17.367,5.888,17.367z M5.203,10c0-0.377,0.19-0.928,0.423-1.225c0,0,0.651-0.831,1.976-0.831c0.672,0,1.141,0.309,1.141,0.309C9.057,8.46,9.315,8.938,9.315,9.315v1.028c0,0.188-0.308,0.343-0.685,0.343H5.888C5.511,10.685,5.203,10.377,5.203,10z M7.944,16.853H7.259v-1.371l0.685-0.685V16.853z M9.657,16.853H8.629v-2.741h1.028V16.853zM8.972,13.426v-1.028c0-0.568,0.46-1.028,1.028-1.028c0.568,0,1.028,0.46,1.028,1.028v1.028H8.972z M11.371,16.853h-1.028v-2.741h1.028V16.853z M12.741,16.853h-0.685v-2.056l0.685,0.685V16.853z M14.112,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C14.626,17.137,14.396,17.367,14.112,17.367z M14.112,10.685h-2.741c-0.377,0-0.685-0.154-0.685-0.343V9.315c0-0.377,0.258-0.855,0.572-1.062c0,0,0.469-0.309,1.141-0.309c1.325,0,1.976,0.831,1.976,0.831c0.232,0.297,0.423,0.848,0.423,1.225S14.489,10.685,14.112,10.685z M18.347,15.801c-0.041,0.016-0.083,0.023-0.124,0.023c-0.137,0-0.267-0.083-0.319-0.218l-2.492-6.401c-0.659-1.647-1.474-2.289-2.905-2.289c-0.95,0-1.746,0.589-1.754,0.595c-0.422,0.317-1.084,0.316-1.507,0C9.239,7.505,8.435,6.916,7.492,6.916c-1.431,0-2.246,0.642-2.906,2.292l-2.491,6.398c-0.069,0.176-0.268,0.264-0.443,0.195c-0.176-0.068-0.264-0.267-0.195-0.444l2.492-6.401c0.765-1.911,1.824-2.726,3.543-2.726c1.176,0,2.125,0.702,2.165,0.731c0.179,0.135,0.506,0.135,0.685,0c0.04-0.029,0.99-0.731,2.165-0.731c1.719,0,2.779,0.814,3.542,2.723l2.493,6.404C18.611,15.534,18.524,15.733,18.347,15.801z"></path>
|
||||||
|
</svg>
|
||||||
|
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Automated Workflow</h3>
|
||||||
|
</div>
|
||||||
|
<p class="mt-3 mb-1 text-xs font-medium text-teal-500 uppercase">PREMIUM FEATURE</p>
|
||||||
|
<p class="mb-2 text-gray-600">Our automation tools will help you build and grow your marketing empire.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden w-1/3 lg:block">
|
||||||
|
<div class="absolute w-full w-screen max-w-4xl pl-12 -mt-20">
|
||||||
|
<div class="absolute top-0 left-0 w-full h-full mt-2 ml-10 bg-gray-900 rounded-lg"></div>
|
||||||
|
<div class="relative overflow-hidden border-2 border-black rounded-lg">
|
||||||
|
<img src="https://cdn.devdojo.com/images/october2020/screenshot2.png" alt="Screen shot of Flare's hero component" class="object-cover w-full h-full">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Blob SVG Border -->
|
||||||
|
<svg class="absolute bottom-0 w-full text-gray-200 fill-current" viewBox="0 0 1400 74" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C87.243 11.422 173.12 5.133 257.633 5.133 468.305 5.133 578.027 74 700 74c136.015 0 290.882-96.208 481.234-68.867C1268.807 17.71 1341.73 24 1400 24v50H0V24z" /></svg>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- feature 16 end -->
|
||||||
|
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
let toogler = document.getElementById("dark_mood_toogler");
|
let toogler = document.getElementById("dark_mood_toogler");
|
||||||
|
|||||||
@@ -4550,6 +4550,169 @@
|
|||||||
<!-- footer 46 end -->
|
<!-- footer 46 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- footer 47 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Footer 47 (template 1) </div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<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 -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- footer 48 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
Footer 48
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="px-4 pt-12 pb-8 text-white bg-black">
|
||||||
|
<div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
|
||||||
|
|
||||||
|
<a href="#_" class="block w-1/3 mr-4">
|
||||||
|
<span class="flex items-center">
|
||||||
|
<svg class="w-auto h-8 mt-1 text-white fill-current" viewBox="0 0 215 151" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="56.965%" y1="53.262%" x2="7.891%" y2="29.24%" id="b"><stop stop-color="#FFCD26" offset="0%"/><stop stop-color="#FFDF95" offset="100%"/></linearGradient><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" id="a"/></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" fill="url(#b)" mask="url(#c)"/></g></svg>
|
||||||
|
<span class="ml-2 text-lg font-black">Flare</span>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div class="block w-2/3 mt-6 text-sm sm:flex lg:mt-0">
|
||||||
|
<ul class="flex flex-col w-full p-0 font-thin text-left text-gray-700 list-none">
|
||||||
|
<li class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">Product</li>
|
||||||
|
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Features</a></li>
|
||||||
|
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Integrations</a></li>
|
||||||
|
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Pricing</a></li>
|
||||||
|
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">FAQ</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="flex flex-col w-full p-0 font-thin text-left text-gray-700 list-none">
|
||||||
|
<li class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">Company</li>
|
||||||
|
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Privacy</a></li>
|
||||||
|
<li><a href="#_" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Terms of Service</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="flex flex-col w-full p-0 font-thin text-left text-gray-700 list-none">
|
||||||
|
<li class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">TailwindCSS</li>
|
||||||
|
<li><a href="https://devdojo.com/tailwindcss/templates" target="_blank" rel="noopener noreferrer" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Templates</a></li>
|
||||||
|
<li><a href="https://devdojo.com/tailwindcss/components" target="_blank" rel="noopener noreferrer" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Components</a></li>
|
||||||
|
<li><a href="https://devdojo.com/tails" target="_blank" rel="noopener noreferrer" class="inline-block px-3 py-2 text-gray-300 no-underline hover:text-white">Tails</a></li>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="flex flex-col w-full text-gray-700">
|
||||||
|
<div class="inline-block px-3 py-2 font-medium tracking-wide text-white uppercase">Follow Us</div>
|
||||||
|
<div class="flex justify-start pl-4 mt-2">
|
||||||
|
<a class="flex items-center block mr-6 text-gray-300 no-underline hover:text-white" 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-300 no-underline hover:text-white" 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-300 no-underline hover:text-white" 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-4 pt-6 mt-10 text-center text-gray-600 border-t border-gray-800"> ©2020 Flare. All rights reserved.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- footer 48 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
let toogler = document.getElementById("dark_mood_toogler");
|
let toogler = document.getElementById("dark_mood_toogler");
|
||||||
|
|||||||
+236
-40
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" class="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
@@ -20,45 +20,45 @@
|
|||||||
|
|
||||||
<!-- header 19 start -->
|
<!-- header 19 start -->
|
||||||
<section class="section_divider">
|
<section class="section_divider">
|
||||||
<div>Header 19</div>
|
<div>Header 19</div>
|
||||||
</section>
|
</section>
|
||||||
<nav class="flex justify-between px-20 py-10 items-center bg-white dark:bg-gray-800">
|
<nav class="flex flex-col md:flex-row md:justify-between px-20 py-10 items-center bg-white dark:bg-gray-800">
|
||||||
<h1 class="text-xl text-gray-800 dark:text-red-400 font-bold">HotCoffee</h1>
|
<h1 class="text-xl text-gray-800 dark:text-red-400 font-bold">HotCoffee</h1>
|
||||||
<div class="flex items-center">
|
<div class=" md:flex justify-center md:justify-end mt-4 md:mt-0 items-center w-full " >
|
||||||
<div class="flex items-center ">
|
<div class="flex items-center ">
|
||||||
<span class="absolute flex items-center ">
|
<span class="absolute flex items-center ">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pt-0.5 text-red-600 stroke-gray-500 dark:stroke-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pt-0.5 text-red-600 stroke-gray-500 dark:stroke-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<input class="pl-10 py-1 w-full pr-4 outline-none bg-transparent border-b-gray-500 focus:border-b-2 dark:focus:border-b-red-400 font-bold text-gray-500 dark:placeholder:text-red-400" type="text" name="search" id="search" placeholder="Search..." />
|
<input class="pl-10 py-1 w-full pr-4 outline-none bg-transparent border-b-gray-500 focus:border-b-2 dark:focus:border-b-red-400 font-bold text-gray-500 dark:placeholder:text-red-400" type="text" name="search" id="search" placeholder="Search..." />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<ul class="flex items-center space-x-6">
|
</div>
|
||||||
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Home</li>
|
<ul class="flex py-3 px-10 justify-center md:justify-end w-full mt-4 md:mt-0 items-center space-x-6">
|
||||||
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Articles</li>
|
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Home</li>
|
||||||
<li>
|
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Articles</li>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<li>
|
||||||
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
|
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
||||||
</svg>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
|
||||||
</li>
|
</svg>
|
||||||
<li>
|
</li>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<li>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
</svg>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||||
</li>
|
</svg>
|
||||||
<li>
|
</li>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<li>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
</svg>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||||
</li>
|
</svg>
|
||||||
</ul>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
</nav>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<!-- header 19 end -->
|
<!-- header 19 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -23,7 +23,8 @@
|
|||||||
<section class="section_divider">
|
<section class="section_divider">
|
||||||
<div>Header 21</div>
|
<div>Header 21</div>
|
||||||
</section>
|
</section>
|
||||||
<nav class="w-full py-6 bg-white dark:bg-gray-800 ">
|
|
||||||
|
<nav x-data="{mobile_nav_status:false}" class="w-full py-6 bg-white dark:bg-gray-800 ">
|
||||||
<div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
|
<div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
|
||||||
<section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
|
<section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||||
@@ -31,31 +32,36 @@
|
|||||||
</svg>
|
</svg>
|
||||||
<a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
|
<a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<ul class="md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold hidden md:flex">
|
<button @click="mobile_nav_status=!mobile_nav_status" class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
|
||||||
<li class="relative group">
|
|
||||||
<a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
|
|
||||||
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" ></div>
|
|
||||||
</li>
|
|
||||||
<li class="relative group">
|
|
||||||
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
|
|
||||||
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
|
||||||
</li>
|
|
||||||
<li class="relative group">
|
|
||||||
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
|
|
||||||
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
|
||||||
</li>
|
|
||||||
<li><a href="#" class="bg-purple-500 px-4 py-1 rounded-xl text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
<button class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
|
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
<!-- :class="mobile_nav_status ? 'block ' : 'hidden md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex' " -->
|
||||||
|
<ul :class="mobile_nav_status ? ' absolute w-full text-center flex flex-col bg-gray-800 -ml-60 rounded' : 'hidden md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex'">
|
||||||
|
<li class="relative group py-2">
|
||||||
|
<a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
|
||||||
|
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" ></div>
|
||||||
|
</li>
|
||||||
|
<li class="relative group py-2">
|
||||||
|
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
|
||||||
|
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
||||||
|
</li>
|
||||||
|
<li class="relative group py-2">
|
||||||
|
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
|
||||||
|
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
||||||
|
</li>
|
||||||
|
<li class="relative group py-2">
|
||||||
|
<a href="#" class="bg-purple-500 px-4 py-1 rounded-xl text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<!-- header 21 end -->
|
<!-- header 21 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1257,13 +1257,14 @@
|
|||||||
|
|
||||||
<!-- header 18 end -->
|
<!-- header 18 end -->
|
||||||
|
|
||||||
|
|
||||||
<!-- header 19 start -->
|
<!-- header 19 start -->
|
||||||
<section class="section_divider">
|
<section class="section_divider">
|
||||||
<div>Header 19</div>
|
<div>Header 19</div>
|
||||||
</section>
|
</section>
|
||||||
<nav class="flex justify-between px-20 py-10 items-center bg-white dark:bg-gray-800">
|
<nav class="flex flex-col md:flex-row md:justify-between px-20 py-10 items-center bg-white dark:bg-gray-800">
|
||||||
<h1 class="text-xl text-gray-800 dark:text-red-400 font-bold">HotCoffee</h1>
|
<h1 class="text-xl text-gray-800 dark:text-red-400 font-bold">HotCoffee</h1>
|
||||||
<div class="flex items-center">
|
<div class=" md:flex justify-center md:justify-end mt-4 md:mt-0 items-center w-full " >
|
||||||
<div class="flex items-center ">
|
<div class="flex items-center ">
|
||||||
<span class="absolute flex items-center ">
|
<span class="absolute flex items-center ">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pt-0.5 text-red-600 stroke-gray-500 dark:stroke-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pt-0.5 text-red-600 stroke-gray-500 dark:stroke-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
@@ -1273,7 +1274,7 @@
|
|||||||
<input class="pl-10 py-1 w-full pr-4 outline-none bg-transparent border-b-gray-500 focus:border-b-2 dark:focus:border-b-red-400 font-bold text-gray-500 dark:placeholder:text-red-400" type="text" name="search" id="search" placeholder="Search..." />
|
<input class="pl-10 py-1 w-full pr-4 outline-none bg-transparent border-b-gray-500 focus:border-b-2 dark:focus:border-b-red-400 font-bold text-gray-500 dark:placeholder:text-red-400" type="text" name="search" id="search" placeholder="Search..." />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="flex items-center space-x-6">
|
<ul class="flex py-3 px-10 justify-center md:justify-end w-full mt-4 md:mt-0 items-center space-x-6">
|
||||||
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Home</li>
|
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Home</li>
|
||||||
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Articles</li>
|
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Articles</li>
|
||||||
<li>
|
<li>
|
||||||
@@ -1299,6 +1300,8 @@
|
|||||||
|
|
||||||
<!-- header 19 end -->
|
<!-- header 19 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- header 20 start -->
|
<!-- header 20 start -->
|
||||||
<section class="section_divider">
|
<section class="section_divider">
|
||||||
<div>Header 20 </div>
|
<div>Header 20 </div>
|
||||||
@@ -1489,6 +1492,123 @@
|
|||||||
|
|
||||||
<!-- header 23 end -->
|
<!-- header 23 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- header 24 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Header 24</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<header class="relative z-50 w-full h-24 overflow-hidden">
|
||||||
|
<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 items-center inline-block h-5 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">Landmark<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 hover:text-indigo-600">Home</a>
|
||||||
|
<a href="#features"
|
||||||
|
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Features</a>
|
||||||
|
<a href="#pricing"
|
||||||
|
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Pricing</a>
|
||||||
|
<a href="#testimonials"
|
||||||
|
class="font-bold duration-100 transition-color 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 -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
let toogler = document.getElementById("dark_mood_toogler");
|
let toogler = document.getElementById("dark_mood_toogler");
|
||||||
|
|||||||
@@ -2095,6 +2095,466 @@
|
|||||||
<!-- pricing 16 end -->
|
<!-- pricing 16 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- pricing 17 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Pricing 17</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="relative w-full pt-24 pb-56 bg-gray-200">
|
||||||
|
|
||||||
|
<div class="container relative flex flex-col justify-between h-full max-w-6xl px-8 mx-auto">
|
||||||
|
<div class="flex flex-col justify-center w-full">
|
||||||
|
<h2 class="relative flex items-center self-center inline-block w-auto mb-5 text-4xl font-black">
|
||||||
|
<span class="absolute inline-block w-full h-4 mt-3 -ml-2 bg-yellow-400"></span>
|
||||||
|
<span class="relative">Pricing</span>
|
||||||
|
</h2>
|
||||||
|
<p class="self-center mb-12 font-medium text-gray-600">Simple, Transparent Pricing for Everyone</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="flex flex-col md:flex-row">
|
||||||
|
|
||||||
|
<!-- FEATURE 1 -->
|
||||||
|
<div class="w-full md:w-1/3">
|
||||||
|
<div class="flex flex-col items-center px-2 py-12 bg-white border-2 border-black rounded-lg lg:px-5 xl:px-12 md:rounded-r-none md:rounded-l-lg">
|
||||||
|
|
||||||
|
<div class="font-light"><span class="font-bold text-yellow-500">Basic</span> Plan</div>
|
||||||
|
<h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>48</h4>
|
||||||
|
<span class="w-1/2 h-1 bg-yellow-400"></span>
|
||||||
|
|
||||||
|
<div class="flex flex-col justify-start w-full px-6 py-10">
|
||||||
|
|
||||||
|
<div class="flex items-start w-full">
|
||||||
|
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2"><span class="font-bold">And</span> Another</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2">Another Feature Here</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2">And Another One</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-yellow-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2">And One More</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#_" class="relative w-full text-center">
|
||||||
|
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-yellow-500 rounded"></span>
|
||||||
|
<span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End FEATURE 1 -->
|
||||||
|
|
||||||
|
<!-- FEATURE 2-->
|
||||||
|
<div class="w-full md:w-1/3">
|
||||||
|
<div class="flex flex-col items-center px-2 py-12 my-8 bg-white border-2 border-black rounded-lg md:border-l-0 md:border-r-0 md:my-0 md:rounded-none lg:px-5 xl:px-12">
|
||||||
|
|
||||||
|
<div class="font-light"><span class="font-bold text-green-400">Pro</span> Plan</div>
|
||||||
|
<h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>98</h4>
|
||||||
|
<span class="w-1/2 h-1 bg-green-400"></span>
|
||||||
|
|
||||||
|
<div class="flex flex-col justify-start w-full px-6 py-10">
|
||||||
|
|
||||||
|
<div class="flex items-start w-full">
|
||||||
|
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2"><span class="font-bold">And</span> Another</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2">Another Feature Here</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2">And Another One</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-green-400 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2">And One More</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#_" class="relative w-full text-center">
|
||||||
|
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-green-400 rounded"></span>
|
||||||
|
<span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- END FEATURE 2 -->
|
||||||
|
|
||||||
|
<!-- FEATURE 3 -->
|
||||||
|
<div class="w-full md:w-1/3">
|
||||||
|
<div class="flex flex-col items-center px-2 py-12 ml-0 bg-white border-2 border-black rounded-lg lg:px-6 xl:px-12 md:rounded-l-none md:rounded-r-lg">
|
||||||
|
|
||||||
|
<div class="font-light"><span class="font-bold text-purple-500">Premium</span> Plan</div>
|
||||||
|
<h4 class="flex items-center my-2 text-5xl font-black"><span class="mr-1 text-2xl font-light text-gray-800">$</span>68</h4>
|
||||||
|
<span class="w-1/2 h-1 bg-purple-400"></span>
|
||||||
|
|
||||||
|
<div class="flex flex-col justify-start w-full px-6 py-10">
|
||||||
|
|
||||||
|
<div class="flex items-start w-full">
|
||||||
|
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2"><span class="font-bold">Awesome</span> Feature Here</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2"><span class="font-bold">Another</span> Cool Feature</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2"><span class="font-bold">And</span> Another</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2">Another Feature Here</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2">And Another One</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start w-full mt-3">
|
||||||
|
<div class="w-6 h-6 p-1 bg-purple-500 rounded-full">
|
||||||
|
<svg class="w-full h-full text-white fill-current" viewBox="0 0 20 20">
|
||||||
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<p class="ml-2">And One More</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#_" class="relative w-full text-center">
|
||||||
|
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-purple-500 rounded"></span>
|
||||||
|
<span class="relative inline-block w-full h-full px-5 py-3 text-base font-bold bg-white border-2 border-black rounded fold-bold">Select This One</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- END FEATURE 3 -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Blob SVG Border -->
|
||||||
|
<svg class="absolute bottom-0 w-full text-black fill-current" viewBox="0 0 1400 74" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C87.243 11.422 173.12 5.133 257.633 5.133 468.305 5.133 578.027 74 700 74c136.015 0 290.882-96.208 481.234-68.867C1268.807 17.71 1341.73 24 1400 24v50H0V24z" /></svg>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- pricing 17 end -->
|
||||||
|
|
||||||
|
<!-- pricing 18 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Pricing 18</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="relative px-8 py-10 bg-white 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 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 -->
|
||||||
|
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|||||||
@@ -17,6 +17,29 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- section 4 start -->
|
||||||
|
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Section 4 (about me template)</div>
|
||||||
|
</section>
|
||||||
|
<section class="bg-gray-100 dark:bg-gray-800">
|
||||||
|
<div class="container mx-auto ">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 h-screen">
|
||||||
|
<div class="max-h-96 md:h-screen">
|
||||||
|
<img class="w-screen h-screen object-cover object-top" src="https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="flex bg-gray-100 dark:bg-gray-800 p-10">
|
||||||
|
<div class="mb-auto mt-auto max-w-lg">
|
||||||
|
<h1 class="text-3xl uppercase dark:text-white dark:font-bold">Brand Name</h1>
|
||||||
|
<p class="font-semibold mb-5 dark:text-cyan-100">Company Type</p>
|
||||||
|
<p class="dark:text-cyan-300">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
||||||
|
<button class="bg-black rounded-md py-3 px-7 mt-6 text-white dark:hover:bg-emerald-300 dark:hover:text-gray-800 font-bold">Email Me</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- section 4 end -->
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|||||||
@@ -194,24 +194,23 @@
|
|||||||
<section class="section_divider">
|
<section class="section_divider">
|
||||||
<div>Section 4 (about me template)</div>
|
<div>Section 4 (about me template)</div>
|
||||||
</section>
|
</section>
|
||||||
<!-- about -->
|
<section class="bg-gray-100 dark:bg-gray-800">
|
||||||
<!-- component -->
|
<div class="container mx-auto ">
|
||||||
<div class="container mx-auto">
|
<div class="grid grid-cols-1 md:grid-cols-2 h-screen">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 h-screen">
|
<div class="max-h-96 md:h-screen">
|
||||||
<div class="max-h-96 md:h-screen">
|
<img class="w-screen h-screen object-cover object-top" src="https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
|
||||||
<img class="w-screen h-screen object-cover object-top" src="https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="flex bg-gray-100 p-10">
|
|
||||||
<div class="mb-auto mt-auto max-w-lg">
|
|
||||||
<h1 class="text-3xl uppercase">Jun Santilla</h1>
|
|
||||||
<p class="font-semibold mb-5">Web Developer</p>
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
|
||||||
<button class="bg-black rounded-md py-3 px-7 mt-6 text-white">Email Me</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="flex bg-gray-100 dark:bg-gray-800 p-10">
|
||||||
</div>
|
<div class="mb-auto mt-auto max-w-lg">
|
||||||
</div>
|
<h1 class="text-3xl uppercase dark:text-white dark:font-bold">Brand Name</h1>
|
||||||
<!-- about -->
|
<p class="font-semibold mb-5 dark:text-cyan-100">Company Type</p>
|
||||||
|
<p class="dark:text-cyan-300">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
||||||
|
<button class="bg-black rounded-md py-3 px-7 mt-6 text-white dark:hover:bg-emerald-300 dark:hover:text-gray-800 font-bold">Email Me</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<!-- section 4 end -->
|
<!-- section 4 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -17,6 +17,33 @@
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- testimonial 13 start -->
|
||||||
|
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Testimonial 13</div>
|
||||||
|
</section>
|
||||||
|
<section class="bg-gray-900">
|
||||||
|
<div class="w-full px-4 py-20 mx-auto text-center max-w-7xl md:w-4/5 lg:w-4/6">
|
||||||
|
<h1 class="mt-3 mb-10 text-xl font-extrabold text-white md:leading-snug md:text-3xl">
|
||||||
|
“Implementation is a breeze, particularly because the team at Hellonext is
|
||||||
|
<span class="text-white bg-transparent bg-clip-border xl:bg-clip-text xl:text-transparent xl:bg-gradient-to-r from-green-400 to-purple-500"> very fast to respond and help </span>
|
||||||
|
where needed, even if it means rolling out new features on their platform. We're super happy and are loving how Hellonext brings us closer to the members of our community“
|
||||||
|
</h1>
|
||||||
|
<div class="mx-auto mb-3 shadow-lg avatar w-1/5">
|
||||||
|
<img src="https://www.hyperui.dev/photos/man-4.jpeg" alt="man standing up a mounten" class=" object-cover rounded-full h-20 w-20 mx-auto " />
|
||||||
|
</div>
|
||||||
|
<p class="text-base font-medium text-gray-200">example example</p>
|
||||||
|
<p class="text-xs font-medium text-gray-400">CEO, example</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- testimonial 13 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
let toogler = document.getElementById("dark_mood_toogler");
|
let toogler = document.getElementById("dark_mood_toogler");
|
||||||
|
|||||||
@@ -515,172 +515,172 @@
|
|||||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
|
||||||
|
|
||||||
<section class="bg-gray-100 dark:bg-gray-800">
|
<section class="bg-gray-100 dark:bg-gray-800">
|
||||||
<div class="px-4 py-16 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 ">
|
<div class="px-4 py-16 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 ">
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
|
||||||
<div class="max-w-xl space-y-8">
|
<div class="max-w-xl space-y-8">
|
||||||
<h2 class="text-4xl dark:text-emerald-200 font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
|
<h2 class="text-4xl dark:text-emerald-200 font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
|
||||||
|
|
||||||
<p class="max-w-lg text-lg text-gray-500">
|
<p class="max-w-lg text-lg text-gray-500">
|
||||||
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
|
||||||
fugit a culpa sunt id!
|
fugit a culpa sunt id!
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="hidden lg:flex">
|
<div class="hidden lg:flex">
|
||||||
<button
|
<button
|
||||||
class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
||||||
aria-label="Previous slide"
|
aria-label="Previous slide"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="w-5 h-5 transform -rotate-180"
|
class="w-5 h-5 transform -rotate-180"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
>
|
>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
||||||
aria-label="Next slide"
|
aria-label="Next slide"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="w-5 h-5"
|
class="w-5 h-5"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
>
|
>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="-mx-6 lg:col-span-2 lg:mx-0 ">
|
<div class="-mx-6 lg:col-span-2 lg:mx-0 ">
|
||||||
<div class="swiper-container overflow-hidden">
|
<div class="swiper-container overflow-hidden">
|
||||||
<div class="swiper-wrapper ">
|
<div class="swiper-wrapper ">
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<blockquote class="flex flex-col justify-between h-full p-12 bg-white dark:bg-gray-300 rounded">
|
<blockquote class="flex flex-col justify-between h-full p-12 bg-white dark:bg-gray-300 rounded">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex space-x-0.5 text-green-500">
|
<div class="flex space-x-0.5 text-green-500">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
||||||
|
|
||||||
<p class="mt-4 text-lg text-gray-600">
|
<p class="mt-4 text-lg text-gray-600">
|
||||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.Number 1 Ipsam cumque recusandae dolorum porro,
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.Number 1 Ipsam cumque recusandae dolorum porro,
|
||||||
quasi sunt necessitatibus dolorem ab laudantium vel.
|
quasi sunt necessitatibus dolorem ab laudantium vel.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<blockquote class="flex flex-col justify-between h-full p-12 dark:bg-gray-300 bg-white">
|
<blockquote class="flex flex-col justify-between h-full p-12 dark:bg-gray-300 bg-white">
|
||||||
<div>
|
<div>
|
||||||
<div class="flex space-x-0.5 text-green-500">
|
<div class="flex space-x-0.5 text-green-500">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<path
|
<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"
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
||||||
|
|
||||||
<p class="mt-4 text-lg text-gray-600">
|
<p class="mt-4 text-lg text-gray-600">
|
||||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. number 2 Ipsam cumque recusandae dolorum porro,
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. number 2 Ipsam cumque recusandae dolorum porro,
|
||||||
quasi sunt necessitatibus dolorem ab laudantium vel.
|
quasi sunt necessitatibus dolorem ab laudantium vel.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-center mt-8 lg:hidden">
|
<div class="flex justify-center mt-8 lg:hidden">
|
||||||
<button
|
<button
|
||||||
class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
||||||
aria-label="Previous slide"
|
aria-label="Previous slide"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="w-5 h-5 transform -rotate-180"
|
class="w-5 h-5 transform -rotate-180"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
>
|
>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
||||||
aria-label="next-slide"
|
aria-label="next-slide"
|
||||||
>
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -1144,8 +1144,6 @@
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<!-- testimonial 11 end -->
|
|
||||||
|
|
||||||
<!-- testimonial 11 end -->
|
<!-- testimonial 11 end -->
|
||||||
|
|
||||||
|
|
||||||
@@ -1925,6 +1923,132 @@
|
|||||||
|
|
||||||
<!-- testimonial 23 end -->
|
<!-- testimonial 23 end -->
|
||||||
|
|
||||||
|
<!-- testimonial 24 start -->
|
||||||
|
<section class="section_divider">
|
||||||
|
<div>Testimonial 24 (template 1 ) </div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="testimonials"
|
||||||
|
class="flex items-center justify-center w-full px-8 py-10 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
||||||
|
<div class="max-w-6xl mx-auto">
|
||||||
|
<div class="flex-col items-center ">
|
||||||
|
<div class="flex flex-col items-center justify-center w-full h-full max-w-2xl pr-8 mx-auto text-center">
|
||||||
|
<p class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love
|
||||||
|
our product
|
||||||
|
</p>
|
||||||
|
<h2
|
||||||
|
class="text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">
|
||||||
|
Testimonials</h2>
|
||||||
|
<p class="my-6 text-xl font-medium text-gray-500">Don't just take our word for it, read from our
|
||||||
|
extensive
|
||||||
|
list of case studies and customer testimonials.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center justify-center max-w-2xl py-8 mx-auto xl:flex-row xl:max-w-full">
|
||||||
|
<div class="w-full xl:w-1/2 xl:pr-8">
|
||||||
|
<blockquote
|
||||||
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
|
||||||
|
<div class="flex flex-col pr-8">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path
|
||||||
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-base text-gray-600">I'm loving these templates! Very nice
|
||||||
|
features and layouts.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Sandra
|
||||||
|
Walton <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
|
||||||
|
SomeCompany</span></h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
||||||
|
src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2694&q=80"
|
||||||
|
alt="">
|
||||||
|
</blockquote>
|
||||||
|
<blockquote
|
||||||
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 mb-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease xl:mb-0">
|
||||||
|
<div class="flex flex-col pr-10">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path
|
||||||
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-base text-gray-600">Really digging this service. Now I can
|
||||||
|
quickly bootstrap any
|
||||||
|
project.</p>
|
||||||
|
</div>
|
||||||
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Kenny
|
||||||
|
Jones <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
|
||||||
|
SomeCompany</span></h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
||||||
|
src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80"
|
||||||
|
alt="">
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
<div class="w-full xl:w-1/2 xl:pl-8">
|
||||||
|
<blockquote
|
||||||
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
|
||||||
|
<div class="flex flex-col pr-10">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path
|
||||||
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-base text-gray-600">Extremely helpful in every single project we
|
||||||
|
have released.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Mike Smith
|
||||||
|
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
|
||||||
|
</h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
||||||
|
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
|
||||||
|
alt="">
|
||||||
|
</blockquote>
|
||||||
|
<blockquote
|
||||||
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
|
||||||
|
<div class="flex flex-col pr-10">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path
|
||||||
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-base text-gray-600">Finally a quick and easy system I can use
|
||||||
|
for any type of
|
||||||
|
project.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Molly
|
||||||
|
Sanchez <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
|
||||||
|
SomeCompany</span></h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
||||||
|
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80"
|
||||||
|
alt="">
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- testimonial 24 end -->
|
||||||
|
|
||||||
|
|
||||||
<!-- start of script section -->
|
<!-- start of script section -->
|
||||||
|
|||||||
@@ -98,7 +98,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- hero 6 start -->
|
<!-- hero 6 start -->
|
||||||
<div class="relative flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 bg-cover min-w-screen">
|
<div class="relative flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 bg-cover min-w-screen">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
|
class="flex flex-col items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
|
||||||
<div class="relative w-full pr-10 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group">
|
<div class="relative w-full pr-10 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group">
|
||||||
@@ -236,7 +236,7 @@
|
|||||||
|
|
||||||
<!-- testimonial 6 start -->
|
<!-- testimonial 6 start -->
|
||||||
|
|
||||||
<section class="py-24 dark:bg-gray-800 ">
|
<section class="py-24 dark:bg-gray-900 ">
|
||||||
<div class="container px-4 mx-auto">
|
<div class="container px-4 mx-auto">
|
||||||
<div class="max-w-lg mx-auto mb-12 text-center">
|
<div class="max-w-lg mx-auto mb-12 text-center">
|
||||||
<img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
|
<img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
|
||||||
|
|||||||
@@ -870,5 +870,7 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -6,6 +6,11 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
|
||||||
|
<!-- swiper cdn for slider -->
|
||||||
|
<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 28</title>
|
<title>Template 28</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -15,6 +20,563 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- header 21 start -->
|
||||||
|
|
||||||
|
<nav x-data="{mobile_nav_status:false}" class="w-full py-6 bg-white dark:bg-gray-800 ">
|
||||||
|
<div class="flex items-center justify-between mx-auto xl:max-w-7xl lg:max-w-5xl md:max-w-3xl md:px-2 px-4">
|
||||||
|
<section class="flex items-center text-gray-900 dark:text-cyan-300 space-x-2">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
<a href="#" class="font-bold text-xl focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">BRAND</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<button @click="mobile_nav_status=!mobile_nav_status" class="flex md:hidden hover:bg-gray-100 p-2 rounded-full transition-all focus:ring focus:ring-purple-500 focus:ring-opacity-25 active:bg-gray-200 outline-none">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||||
|
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- :class="mobile_nav_status ? 'block ' : 'hidden md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex' " -->
|
||||||
|
<ul :class="mobile_nav_status ? ' absolute w-full text-center flex flex-col bg-gray-800 -ml-60 rounded' : 'hidden md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold md:flex'">
|
||||||
|
<li class="relative group py-2">
|
||||||
|
<a href="#" class="group focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg"> Home </a>
|
||||||
|
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0" ></div>
|
||||||
|
</li>
|
||||||
|
<li class="relative group py-2">
|
||||||
|
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">Services</a>
|
||||||
|
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
||||||
|
</li>
|
||||||
|
<li class="relative group py-2">
|
||||||
|
<a href="#" class="focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none rounded-lg">About</a>
|
||||||
|
<div class="w-full h-0.5 bg-transparent group-hover:bg-purple-500 transition-al absolute bottom-0"></div>
|
||||||
|
</li>
|
||||||
|
<li class="relative group py-2">
|
||||||
|
<a href="#" class="bg-purple-500 px-4 py-1 rounded-xl text-white hover:bg-purple-400 active:bg-purple-600 focus:ring focus:ring-purple-500 focus:ring-opacity-25 outline-none">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- header 21 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- hero 15 start -->
|
||||||
|
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||||||
|
<div class="container mx-auto flex flex-col items-center px-4 py-16 text-center md:py-32 md:px-10 lg:px-32 xl:max-w-3xl">
|
||||||
|
<h1 class="text-4xl font-bold leading-none sm:text-5xl">Quisquam necessita vel
|
||||||
|
<span class="dark:text-violet-400 text-red-400">laborum doloribus</span>delectus
|
||||||
|
</h1>
|
||||||
|
<p class="px-8 mt-8 mb-12 text-lg">Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque explicabo!</p>
|
||||||
|
<div class="flex flex-wrap justify-center">
|
||||||
|
<button class="px-8 py-3 m-2 text-lg font-semibold rounded bg-red-400 dark:bg-violet-400 dark:text-gray-900">Get started</button>
|
||||||
|
<button class="px-8 py-3 m-2 text-lg border rounded bg-gray-400 dark:bg-gray-800 dark:text-gray-50 dark:border-gray-700">Learn more</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- hero 15 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- start cta 11 -->
|
||||||
|
<section class="py-24 dark:bg-gray-900 dark:text-gray-50">
|
||||||
|
<div class="container mx-auto flex flex-col justify-around p-4 text-center md:p-10 lg:flex-row">
|
||||||
|
<div class="flex flex-col justify-center lg:text-left">
|
||||||
|
<p class="mb-1 text-sm font-medium tracking-widest uppercase dark:text-violet-400">Hic eligendi necessitatibus quod quia</p>
|
||||||
|
<h1 class="py-2 text-3xl font-medium leading-tight title-font">Master Cleanse Reliac Heirloom</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center justify-center flex-shrink-0 mt-6 space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 lg:ml-4 lg:mt-0 lg:justify-end">
|
||||||
|
<button class="inline-flex items-center px-6 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current w-7 h-7 dark:text-coolGray-900">
|
||||||
|
<path d="M 5.4160156 2.328125 L 12.935547 10.158203 C 13.132547 10.363203 13.45925 10.363203 13.65625 10.158203 L 15.179688 8.5742188 C 15.405688 8.3392188 15.354312 7.956875 15.070312 7.796875 C 11.137313 5.571875 6.2620156 2.811125 5.4160156 2.328125 z M 3.140625 2.8476562 C 3.055625 3.0456562 3 3.2629063 3 3.5039062 L 3 20.591797 C 3 20.788797 3.044375 20.970625 3.109375 21.140625 L 11.576172 12.324219 C 11.762172 12.131219 11.762172 11.826813 11.576172 11.632812 L 3.140625 2.8476562 z M 17.443359 9.2578125 C 17.335484 9.2729375 17.233297 9.32375 17.154297 9.40625 L 15.015625 11.632812 C 14.829625 11.825812 14.829625 12.130219 15.015625 12.324219 L 17.134766 14.529297 C 17.292766 14.694297 17.546141 14.729188 17.744141 14.617188 C 19.227141 13.777188 20.226563 13.212891 20.226562 13.212891 C 20.725562 12.909891 21.007 12.443547 21 11.935547 C 20.992 11.439547 20.702609 10.981938 20.224609 10.710938 C 20.163609 10.676937 19.187672 10.124359 17.763672 9.3183594 C 17.664172 9.2623594 17.551234 9.2426875 17.443359 9.2578125 z M 13.296875 13.644531 C 13.165875 13.644531 13.034047 13.696328 12.935547 13.798828 L 5.4746094 21.566406 C 6.7566094 20.837406 11.328781 18.249578 15.050781 16.142578 C 15.334781 15.981578 15.386156 15.599281 15.160156 15.363281 L 13.65625 13.798828 C 13.55775 13.696328 13.427875 13.644531 13.296875 13.644531 z"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="flex flex-col items-start ml-4 leading-none">
|
||||||
|
<span class="mb-1 text-xs">GET IT ON</span>
|
||||||
|
<span class="font-semibold title-font">Google Play</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button class="inline-flex items-center px-5 py-3 rounded-lg dark:bg-violet-400 dark:text-coolGray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="fill-current w-7 h-7 dark:text-coolGray-900">
|
||||||
|
<path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="flex flex-col items-start ml-4 leading-none">
|
||||||
|
<span class="mb-1 text-xs">Download on the</span>
|
||||||
|
<span class="font-semibold title-font">App Store</span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- end cta 11 -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- feature 12 start -->
|
||||||
|
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
||||||
|
<div class="container px-4 mx-auto space-y-1 text-center">
|
||||||
|
<span class="text-sm py-2 font-semibold tracking-wider uppercase dark:text-green-400">shortcut to your dream ui</span>
|
||||||
|
<h2 class="pb-3 text-3xl font-bold md:text-4xl">Create a stylish website in minutes</h2>
|
||||||
|
<p>Get a jumpstart to creating your new webpage! With our fully responsive and carefully styled components you can get the structure of your website done with just a couple of clicks.</p>
|
||||||
|
</div>
|
||||||
|
<div class="container grid justify-center gap-4 mx-auto lg:grid-cols-2 xl:grid-cols-4">
|
||||||
|
<div class="flex flex-col px-8 py-6">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Components</h2>
|
||||||
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Individual components that can be re-used multiple times in your designs.</p>
|
||||||
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/components">
|
||||||
|
<span>Learn More</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col px-8 py-6 lg:border-none xl:border-solid">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Sections</h2>
|
||||||
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Pre-made building blocks that you can stack on top of each other like Legos to build a website of your own in minutes.</p>
|
||||||
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/sections">
|
||||||
|
<span>Learn More</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col px-8 py-6">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Templates</h2>
|
||||||
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Full pages that showcase pieces of what you can achieve with the building blocks that are in this UI kit.</p>
|
||||||
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/templates">
|
||||||
|
<span>Learn More</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col px-8 py-6">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Customization</h2>
|
||||||
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Choose your primary color from any of the Tailwind CSS 2.0 colors. You can also view all of the components in our light and dark themes.</p>
|
||||||
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400" href="/docs">
|
||||||
|
<span>Learn More</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- feature 12 end -->
|
||||||
|
|
||||||
|
<!-- pricing 4 start -->
|
||||||
|
<div class="px-4 py-24 mx-auto dark:bg-gray-900">
|
||||||
|
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12 ">
|
||||||
|
<div>
|
||||||
|
<p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-400">
|
||||||
|
Our Pricing
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<h2 class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 dark:text-gray-300 sm:text-4xl md:mx-auto">
|
||||||
|
<span class="relative inline-block dark:text-emerald-300 ">
|
||||||
|
<svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
|
||||||
|
<defs>
|
||||||
|
<pattern id="7e5e8ff8-1960-4094-a63a-2a0c0f922d69" x="0" y="0" width=".135" height=".30">
|
||||||
|
<circle cx="1" cy="1" r=".7"></circle>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect fill="url(#7e5e8ff8-1960-4094-a63a-2a0c0f922d69)" width="52" height="24"></rect>
|
||||||
|
</svg>
|
||||||
|
<span class="relative">Transparent</span>
|
||||||
|
</span>
|
||||||
|
pricing. Pay as you grow.
|
||||||
|
</h2>
|
||||||
|
<p class="text-base text-gray-700 dark:text-gray-300 md:text-lg">
|
||||||
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque ipsa quae.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid max-w-md gap-10 row-gap-5 lg:max-w-screen-lg sm:row-gap-10 lg:grid-cols-3 xl:max-w-screen-lg sm:mx-auto">
|
||||||
|
<div class="flex flex-col justify-between p-8 transition-shadow duration-300 bg-white dark:bg-gray-800 border-2 dark:border-emerald-200 rounded shadow-sm sm:items-center hover:shadow">
|
||||||
|
<div class="text-center dark:text-gray-300 ">
|
||||||
|
<div class="text-lg font-semibold">Start</div>
|
||||||
|
<div class="flex items-center justify-center mt-2">
|
||||||
|
<div class="mr-1 text-5xl font-bold">Free</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 space-y-3 ">
|
||||||
|
<div class="text-gray-700 dark:text-gray-400">10 deploys per day</div>
|
||||||
|
<div class="text-gray-700 dark:text-gray-400">10 GB of storage</div>
|
||||||
|
<div class="text-gray-700 dark:text-gray-400">20 domains</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 bg-gray-800 dark:bg-emerald-300 dark:hover:bg-emerald-500 dark:text-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">
|
||||||
|
Start for free
|
||||||
|
</a>
|
||||||
|
<p class="max-w-xs mt-6 text-xs text-gray-600 dark:text-gray-400 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
|
||||||
|
Sed ut unde omnis iste natus accusantium doloremque.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative flex flex-col justify-between p-8 transition-shadow duration-300 bg-white dark:bg-gray-800 border rounded shadow-sm sm:items-center hover:shadow border-purple-800">
|
||||||
|
<div class="absolute inset-x-0 top-0 flex justify-center -mt-3 ">
|
||||||
|
<div class="inline-block px-3 py-1 text-xs font-medium tracking-wider text-white uppercase rounded bg-purple-800">
|
||||||
|
Most Popular
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center dark:text-gray-300">
|
||||||
|
<div class="text-lg font-semibold">Pro</div>
|
||||||
|
<div class="flex items-center justify-center mt-2">
|
||||||
|
<div class="mr-1 text-5xl font-bold">$38</div>
|
||||||
|
<div class="text-gray-700">/ mo</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 space-y-3">
|
||||||
|
<div class="text-gray-700 dark:text-gray-400 ">200 deploys per day</div>
|
||||||
|
<div class="text-gray-700 dark:text-gray-400 ">80 GB of storage</div>
|
||||||
|
<div class="text-gray-700 dark:text-gray-400 ">Global CDN</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-800 hover:bg-deep-purple-accent-700 focus:shadow-outline focus:outline-none"
|
||||||
|
>
|
||||||
|
Buy Pro
|
||||||
|
</a>
|
||||||
|
<p class="max-w-xs mt-6 text-xs text-gray-600 dark:text-gray-400 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
|
||||||
|
Sed ut unde omnis iste natus accusantium doloremque.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-between p-8 transition-shadow duration-300 bg-white dark:bg-gray-800 border-2 dark:border-emerald-200 rounded shadow-sm sm:items-center hover:shadow">
|
||||||
|
<div class="text-center dark:text-gray-300">
|
||||||
|
<div class="text-lg font-semibold">Business</div>
|
||||||
|
<div class="flex items-center justify-center mt-2">
|
||||||
|
<div class="mr-1 text-5xl font-bold">$78</div>
|
||||||
|
<div class="text-gray-700">/ mo</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 space-y-3">
|
||||||
|
<div class="text-gray-700 dark:text-gray-400">500 GB of storage</div>
|
||||||
|
<div class="text-gray-700 dark:text-gray-400">Unlimited domains</div>
|
||||||
|
<div class="text-gray-700 dark:text-gray-400">24/7 Support</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="/" class="inline-flex items-center justify-center w-full h-12 px-6 mt-6 font-medium tracking-wide text-white transition duration-200 bg-gray-800 dark:bg-emerald-300 dark:hover:bg-emerald-500 dark:text-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">
|
||||||
|
Buy Business
|
||||||
|
</a>
|
||||||
|
<p class="max-w-xs mt-6 text-xs text-gray-600 dark:text-gray-400 sm:text-sm sm:text-center sm:max-w-sm sm:mx-auto">
|
||||||
|
Sed ut unde omnis iste natus accusantium doloremque.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- pricing 4 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- testimonial 9 start -->
|
||||||
|
|
||||||
|
<section class="bg-gray-100 dark:bg-gray-800">
|
||||||
|
<div class="px-4 py-24 mx-auto sm:px-6 lg:pl-8 lg:pr-0 lg:mr-0 sm:py-24 max-w-[1340px]">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-16 gap-y-8">
|
||||||
|
<div class="max-w-xl space-y-8">
|
||||||
|
<h2 class="text-4xl dark:text-emerald-200 font-bold tracking-tight sm:text-5xl">Read trusted reviews from our customers</h2>
|
||||||
|
|
||||||
|
<p class="max-w-lg text-lg text-gray-500">
|
||||||
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas veritatis illo placeat harum porro optio
|
||||||
|
fugit a culpa sunt id!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hidden lg:flex">
|
||||||
|
<button
|
||||||
|
class="p-3 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
||||||
|
aria-label="Previous slide"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="w-5 h-5 transform -rotate-180"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="p-3 ml-3 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
||||||
|
aria-label="Next slide"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="-mx-6 lg:col-span-2 lg:mx-0 ">
|
||||||
|
<div class="swiper-container overflow-hidden">
|
||||||
|
<div class="swiper-wrapper ">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<blockquote class="flex flex-col justify-between h-full p-12 bg-white dark:bg-gray-300 rounded">
|
||||||
|
<div>
|
||||||
|
<div class="flex space-x-0.5 text-green-500">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" 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-5 h-5" 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-5 h-5" 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-5 h-5" 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-5 h-5" 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>
|
||||||
|
|
||||||
|
<div class="mt-4">
|
||||||
|
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
||||||
|
|
||||||
|
<p class="mt-4 text-lg text-gray-600">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit.Number 1 Ipsam cumque recusandae dolorum porro,
|
||||||
|
quasi sunt necessitatibus dolorem ab laudantium vel.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<blockquote class="flex flex-col justify-between h-full p-12 dark:bg-gray-300 bg-white">
|
||||||
|
<div>
|
||||||
|
<div class="flex space-x-0.5 text-green-500">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" 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-5 h-5" 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-5 h-5" 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-5 h-5" 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-5 h-5" 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>
|
||||||
|
|
||||||
|
<div class="mt-4">
|
||||||
|
<p class="text-2xl font-bold text-pink-600 sm:text-3xl">Lorem ipsum dolor sit amet.</p>
|
||||||
|
|
||||||
|
<p class="mt-4 text-lg text-gray-600">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. number 2 Ipsam cumque recusandae dolorum porro,
|
||||||
|
quasi sunt necessitatibus dolorem ab laudantium vel.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="mt-8 text-gray-500">Eddie Murphy</footer>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-center mt-8 lg:hidden">
|
||||||
|
<button
|
||||||
|
class="p-4 text-pink-600 transition-colors border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white prev-button"
|
||||||
|
aria-label="Previous slide"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="w-5 h-5 transform -rotate-180"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="p-4 ml-4 text-pink-600 border border-pink-600 rounded-full hover:bg-pink-600 hover:text-white next-button"
|
||||||
|
aria-label="next-slide"
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const swiper = new Swiper('.swiper-container', {
|
||||||
|
loop: true,
|
||||||
|
slidesPerView: 1,
|
||||||
|
spaceBetween: 32,
|
||||||
|
autoplay: {
|
||||||
|
delay: 2000,
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.next-button',
|
||||||
|
prevEl: '.prev-button',
|
||||||
|
},
|
||||||
|
breakpoints: {
|
||||||
|
640: {
|
||||||
|
slidesPerView: 1.5,
|
||||||
|
centeredSlides: true,
|
||||||
|
},
|
||||||
|
1024: {
|
||||||
|
centeredSlides: false,
|
||||||
|
slidesPerView: 1.5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- testimonial 9 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- start cta 12 -->
|
||||||
|
<div class="w-full dark:bg-gray-500 bg-[url('https://source.unsplash.com/random/640x480/?grayscale')] bg-center bg-blend-multiply bg-cover">
|
||||||
|
<div class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:p-10">
|
||||||
|
<h1 class="text-5xl antialiased font-semibold leading-none text-center dark:text-gray-100">Get Our Updates</h1>
|
||||||
|
<p class="pt-2 pb-8 text-xl antialiased text-center dark:text-gray-100">Find out about events and other news</p>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<input type="text" placeholder="example@email.com" class="w-3/5 p-3 rounded-l-lg sm:w-2/3">
|
||||||
|
<button type="button" class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3 dark:bg-violet-400 dark:text-gray-900">Subscribe</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- end cta 12 -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- footer 13 start -->
|
||||||
|
|
||||||
|
<section class="dark:bg-gray-800">
|
||||||
|
<footer class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 ">
|
||||||
|
<div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<div class="sm:col-span-2">
|
||||||
|
<a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
|
||||||
|
<svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
|
||||||
|
<rect x="3" y="1" width="7" height="12"></rect>
|
||||||
|
<rect x="3" y="17" width="7" height="6"></rect>
|
||||||
|
<rect x="14" y="1" width="7" height="6"></rect>
|
||||||
|
<rect x="14" y="11" width="7" height="12"></rect>
|
||||||
|
</svg>
|
||||||
|
<span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-300 uppercase">Company</span>
|
||||||
|
</a>
|
||||||
|
<div class="mt-6 lg:max-w-sm">
|
||||||
|
<p class="text-sm text-gray-500 ">
|
||||||
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
|
||||||
|
</p>
|
||||||
|
<p class="mt-4 text-sm text-gray-500 ">
|
||||||
|
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2 text-sm">
|
||||||
|
<p class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Contacts</p>
|
||||||
|
<div class="flex">
|
||||||
|
<p class="mr-1 text-gray-800 dark:text-gray-400">Phone:</p>
|
||||||
|
<a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">850-123-5021</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<p class="mr-1 text-gray-800 dark:text-gray-400">Email:</p>
|
||||||
|
<a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">info@lorem.mail</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<p class="mr-1 text-gray-800 dark:text-gray-400">Address:</p>
|
||||||
|
<a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-400 text-gray-300 hover:text-purple-300">
|
||||||
|
312 Lovely Street, NY
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Social</span>
|
||||||
|
<div class="flex items-center mt-1 space-x-3">
|
||||||
|
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
|
||||||
|
<path
|
||||||
|
d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
||||||
|
<svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
|
||||||
|
<circle cx="15" cy="15" r="4"></circle>
|
||||||
|
<path
|
||||||
|
d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10 C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1 c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
|
||||||
|
<path
|
||||||
|
d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p class="mt-4 text-sm text-gray-500">
|
||||||
|
Bacon ipsum dolor amet short ribs pig sausage prosciutto chicken spare ribs salami.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
|
||||||
|
<p class="text-sm text-gray-600">
|
||||||
|
© Copyright 2020 Lorem Inc. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">F.A.Q</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Privacy Policy</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Terms & Conditions</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<!-- footer 13 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -15,6 +15,552 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- header 19 start -->
|
||||||
|
<nav class="flex flex-col md:flex-row md:justify-between px-20 py-6 items-center bg-white dark:bg-gray-800">
|
||||||
|
<h1 class="text-xl text-gray-800 dark:text-red-400 font-bold">Brand</h1>
|
||||||
|
<div class=" md:flex justify-center md:justify-end mt-4 md:mt-0 items-center w-full " >
|
||||||
|
<div class="flex items-center ">
|
||||||
|
<span class="absolute flex items-center ">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 pt-0.5 text-red-600 stroke-gray-500 dark:stroke-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<input class="pl-10 py-1 w-full pr-4 outline-none bg-transparent border-b-gray-500 focus:border-b-2 dark:focus:border-b-red-400 font-bold text-gray-500 dark:placeholder:text-red-400" type="text" name="search" id="search" placeholder="Search..." />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="flex py-3 px-10 justify-center md:justify-end w-full mt-4 md:mt-0 items-center space-x-6">
|
||||||
|
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Home</li>
|
||||||
|
<li class="font-semibold text-gray-500 dark:text-cyan-400 dark:hover:text-red-400">Articles</li>
|
||||||
|
<li>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path d="M12 14l9-5-9-5-9 5 9 5z" />
|
||||||
|
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 dark:stroke-red-400 dark:hover:stroke-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||||
|
</svg>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- header 19 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- hero 27 start -->
|
||||||
|
<section class="pt-24 bg-white dark:bg-gray-800">
|
||||||
|
<div class="px-12 mx-auto max-w-7xl">
|
||||||
|
<div class="w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
|
||||||
|
<h1 class="mb-8 text-4xl font-extrabold leading-none tracking-normal text-gray-900 md:text-6xl md:tracking-tight">
|
||||||
|
<span>Start</span> <span class="block w-full py-2 text-transparent bg-clip-text leading-12 bg-gradient-to-r from-green-400 to-purple-500 lg:inline">building a buzz</span> <span>around your product 🚀</span>
|
||||||
|
</h1>
|
||||||
|
<p class="px-0 mb-8 text-lg text-gray-600 md:text-xl lg:px-24">
|
||||||
|
Start gaining the traction you've always wanted with our next-level templates and designs. Crafted to help you tell your story.
|
||||||
|
</p>
|
||||||
|
<div class="mb-4 space-x-0 md:space-x-2 md:mb-8">
|
||||||
|
<a href="#_" class="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg text-white bg-green-400 hover:text-gray-800 rounded-2xl sm:w-auto sm:mb-0">
|
||||||
|
Get Started
|
||||||
|
<svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||||
|
</a>
|
||||||
|
<a href="#_" class="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg bg-gray-100 hover:text-gray-800 rounded-2xl sm:w-auto sm:mb-0">
|
||||||
|
Learn More
|
||||||
|
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full mx-auto mt-20 text-center md:w-10/12">
|
||||||
|
<div class="relative z-0 w-full mt-8">
|
||||||
|
<div class="relative overflow-hidden shadow-2xl">
|
||||||
|
<div class="flex items-center flex-none px-4 bg-green-400 rounded-b-none h-11 rounded-xl">
|
||||||
|
<div class="flex space-x-1.5">
|
||||||
|
<div class="w-3 h-3 border-2 border-white rounded-full"></div>
|
||||||
|
<div class="w-3 h-3 border-2 border-white rounded-full"></div>
|
||||||
|
<div class="w-3 h-3 border-2 border-white rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://cdn.devdojo.com/images/march2021/green-dashboard.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- hero 27 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- feature 10 start -->
|
||||||
|
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||||||
|
<div class="container max-w-xl p-6 py-24 mx-auto space-y-24 lg:px-8 lg:max-w-7xl">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold tracking-tight text-center sm:text-5xl dark:text-gray-50">Aliquip definiebas ad est</h2>
|
||||||
|
<p class="max-w-3xl mx-auto mt-4 text-xl text-center dark:text-gray-400">Quando cetero his ne, eum admodum sapientem ut.</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-2xl font-bold tracking-tight sm:text-3xl dark:text-gray-50">Ad vix debet docendi</h3>
|
||||||
|
<p class="mt-3 text-lg dark:text-gray-400">Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates.</p>
|
||||||
|
<div class="mt-12 space-y-12">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leading-6 dark:text-gray-50">Per ei quaeque sensibus</h4>
|
||||||
|
<p class="mt-2 dark:text-gray-400">Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leading-6 dark:text-gray-50">Cu imperdiet posidonium sed</h4>
|
||||||
|
<p class="mt-2 dark:text-gray-400">Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leading-6 dark:text-gray-50">Nulla omittam sadipscing mel ne</h4>
|
||||||
|
<p class="mt-2 dark:text-gray-400">At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div aria-hidden="true" class="mt-10 lg:mt-0">
|
||||||
|
<img src="https://source.unsplash.com/random/360x480/?tech" alt="" class="mx-auto rounded-lg shadow-lg dark:bg-gray-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
|
||||||
|
<div class="lg:col-start-2">
|
||||||
|
<h3 class="text-2xl font-bold tracking-tight sm:text-3xl dark:text-gray-50">Eam nibh gloriatur ex</h3>
|
||||||
|
<p class="mt-3 text-lg dark:text-gray-400">Per odio fabellas consulatu cu. Utroque detracto mel ea, quo te latine theophrastus. Ea his tale nibh dissentias, mei exerci tamquam euripidis cu.</p>
|
||||||
|
<div class="mt-12 space-y-12">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leading-6 dark:text-gray-50">Cibo augue offendit has ad</h4>
|
||||||
|
<p class="mt-2 dark:text-gray-400">An per velit appellantur, ut utinam minimum nominavi sit, odio nostro habemus ne nec. Ne sonet regione contentiones est.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leading-6 dark:text-gray-50">At eum ferri luptatum lobortis</h4>
|
||||||
|
<p class="mt-2 dark:text-gray-400">Te per quidam maiorum ocurreret, etiam delicatissimi usu ad. Ne has quod periculis. Te sit primis iisque efficiantur.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-md dark:bg-green-400 dark:text-gray-900">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-7 h-7">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium leading-6 dark:text-gray-50">Dicunt verterem evertitur eu sea</h4>
|
||||||
|
<p class="mt-2 dark:text-gray-400">Audire principes rationibus eam an, autem nominavi luptatum per te. Sumo fabulas vim eu, sonet saperet eleifend ut vix.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-10 lg:mt-0 lg:col-start-1 lg:row-start-1">
|
||||||
|
<img src="https://source.unsplash.com/random/361x481/?office" alt="" class="mx-auto rounded-lg shadow-lg dark:bg-gray-500">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- feature 10 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- start cta 9 -->
|
||||||
|
<section class="text-white bg-gray-900">
|
||||||
|
<div class="flex flex-col items-stretch justify-between px-4 py-20 mx-auto max-w-7xl lg:flex-row sm:items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-1 text-xl font-semibold text-left sm:text-2xl sm:text-center lg:text-left">Built for companies of all sizes</h2>
|
||||||
|
<p class="mb-6 text-lg font-normal text-left text-gray-200 sm:text-xl lg:mb-0 sm:text-center lg:text-left">Start your 14-day free trial or book a personal demo.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col mb-2 space-x-0 space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
|
||||||
|
<a href="#" class="w-full py-2 px-4 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded text-lg sm:w-auto">Start free trial</a>
|
||||||
|
<a href="#" class="w-full py-2 px-4 bg-gray-800 border-2 border-gray-300 text-gray-300 hover:border-gray-400 hover:bg-gray-400 hover:text-gray-800 rounded text-lg sm:w-auto">Book a demo</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- end cta 9 -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- team 4 start -->
|
||||||
|
<section class="bg-white dark:bg-gray-800">
|
||||||
|
<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">Our Executive Team</h1>
|
||||||
|
|
||||||
|
<p class="max-w-2xl mx-auto my-6 text-center 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 class="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
<div class="flex flex-col items-center p-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
|
||||||
|
<img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?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 group-hover:text-white">arthur melo</h1>
|
||||||
|
|
||||||
|
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">design director</p>
|
||||||
|
|
||||||
|
<div class="flex mt-3 -mx-2">
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
|
||||||
|
<svg class="w-6 h-6 fill-current" 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 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
|
||||||
|
aria-label="Facebook">
|
||||||
|
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
|
||||||
|
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center p-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
|
||||||
|
<img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1531590878845-12627191e687?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" alt="">
|
||||||
|
|
||||||
|
<h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">Amelia. Anderson</h1>
|
||||||
|
|
||||||
|
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lead Developer</p>
|
||||||
|
|
||||||
|
<div class="flex mt-3 -mx-2">
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
|
||||||
|
<svg class="w-6 h-6 fill-current" 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 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
|
||||||
|
aria-label="Facebook">
|
||||||
|
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
|
||||||
|
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center p-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
|
||||||
|
<img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" src="https://images.unsplash.com/photo-1488508872907-592763824245?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 group-hover:text-white">Olivia Wathan</h1>
|
||||||
|
|
||||||
|
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Lead designer</p>
|
||||||
|
|
||||||
|
<div class="flex mt-3 -mx-2">
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
|
||||||
|
<svg class="w-6 h-6 fill-current" 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 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
|
||||||
|
aria-label="Facebook">
|
||||||
|
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
|
||||||
|
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-center p-8 transition-colors duration-200 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
|
||||||
|
<img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" 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 group-hover:text-white">John Doe</h1>
|
||||||
|
|
||||||
|
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300 group-hover:text-gray-300">Full stack developer</p>
|
||||||
|
|
||||||
|
<div class="flex mt-3 -mx-2">
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Reddit">
|
||||||
|
<svg class="w-6 h-6 fill-current" 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 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white"
|
||||||
|
aria-label="Facebook">
|
||||||
|
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
|
||||||
|
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- team 4 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- contact 2 start -->
|
||||||
|
|
||||||
|
<section class="dark:bg-gray-900 dark:text-gray-100">
|
||||||
|
|
||||||
|
<div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-24 mx-auto rounded-lg md:grid-cols-2 md:px-12 xl:px-32 ">
|
||||||
|
<div class="flex flex-col justify-between">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
|
||||||
|
<div class="dark:text-gray-400">Vivamus in nisl metus? Phasellus.</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://www.mambaui.com/assets/svg/doodle.svg" alt="" class="p-6 h-52 md:h-64">
|
||||||
|
</div>
|
||||||
|
<form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="text-sm">Full name</label>
|
||||||
|
<input id="name" type="text" placeholder="" class="w-full p-3 rounded dark:bg-gray-800">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="email" class="text-sm">Email</label>
|
||||||
|
<input id="email" type="email" class="w-full p-3 rounded dark:bg-gray-800">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="message" class="text-sm">Message</label>
|
||||||
|
<textarea id="message" rows="3" class="w-full p-3 rounded dark:bg-gray-800"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-green-400 dark:text-gray-900">Send Message</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- contact 2 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!--footer 6 start-->
|
||||||
|
<footer class="bg-gray-50 dark:bg-gray-800">
|
||||||
|
<div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
|
||||||
|
<span class="inline-block w-32 p-4 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-3">
|
||||||
|
<div class="lg:order-last">
|
||||||
|
<p class="font-medium dark:text-gray-300 dark:hover:text-sky-300">
|
||||||
|
Newsletter
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form class="max-w-sm mt-4">
|
||||||
|
<div class="relative">
|
||||||
|
<label class="sr-only" for="email"> Email </label>
|
||||||
|
|
||||||
|
<input class="w-full py-4 pl-3 pr-16 text-sm border-2 border-gray-200 rounded-lg" id="email" type="email" placeholder="Enter your email address">
|
||||||
|
|
||||||
|
<button class="absolute p-2 text-white -translate-y-1/2 bg-blue-600 rounded-full hover:bg-blue-700 active:bg-blue-500 top-1/2 right-4" type="button">
|
||||||
|
<svg class="w-4 h-4 rotate-45 translate-x-[1px] -translate-y-[1px]" 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 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="flex mt-8 space-x-6 text-gray-500">
|
||||||
|
<a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
|
||||||
|
<span class="sr-only"> Facebook </span>
|
||||||
|
|
||||||
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
|
||||||
|
<span class="sr-only"> Instagram </span>
|
||||||
|
|
||||||
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
|
||||||
|
<span class="sr-only"> Twitter </span>
|
||||||
|
|
||||||
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
|
||||||
|
<span class="sr-only"> GitHub </span>
|
||||||
|
|
||||||
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="hover:opacity-75 dark:text-gray-300 dark:hover:text-sky-300" href="" target="_blank" rel="noreferrer">
|
||||||
|
<span class="sr-only"> Dribbble </span>
|
||||||
|
|
||||||
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-8 lg:col-span-2 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<div>
|
||||||
|
<p class="font-medium dark:text-gray-300 ">
|
||||||
|
Company
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> About </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Meet the Team </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> History </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Careers </a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="font-medium dark:text-gray-300">
|
||||||
|
Services
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> 1on1 Coaching </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Company Review </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accounts Review </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> HR Consulting </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> SEO Optimisation </a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="font-medium dark:text-gray-300">
|
||||||
|
Helpful Links
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Contact </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> FAQs </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Live Chat </a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p class="font-medium dark:text-gray-300">
|
||||||
|
Legal
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Privacy Policy </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Terms & Conditions </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Returns Policy </a>
|
||||||
|
<a class="hover:opacity-75 dark:hover:text-sky-300" href=""> Accessibility </a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mt-8 text-xs text-gray-500">
|
||||||
|
© 2022 Company Name
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!--footer 6 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -15,6 +15,278 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- header 20 start -->
|
||||||
|
<div class="bg-gray-100 dark:bg-gray-800 ">
|
||||||
|
<nav class="bg-white dark:bg-gray-800 px-6 relative shadow-md">
|
||||||
|
<div class="flex flex-row justify-between items-center py-2">
|
||||||
|
<h3 class="font-semibold text-3xl text-gray-500 dark:text-cyan-300 dark:focus:text-cyan-600">Webapp</h3>
|
||||||
|
<div class="group flex flex-col items-center">
|
||||||
|
<button class="p-2 rounded-lg md:hidden">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-10 fill-current" viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" /></svg>
|
||||||
|
</button>
|
||||||
|
<div class="hidden group-hover:block md:block absolute md:static bg-white dark:bg-gray-800 inset-x-0 top-16 py-3 shadow-md md:shadow-none text-gray-600">
|
||||||
|
<div class="flex flex-row justify-center items-center text-center font-semibold text-gray-500">
|
||||||
|
<a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/><path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/></svg>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/></svg>
|
||||||
|
Account
|
||||||
|
</a>
|
||||||
|
<a class="px-6 py-1 flex flex-col md:flex-row md:items-center dark:text-cyan-300 dark:hover:text-cyan-600" href="#">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="fill-current h-10 md:h-5 px-2" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/><path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/></svg>
|
||||||
|
Logout
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- header 20 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- hero 21 start -->
|
||||||
|
<section class="bg-white dark:bg-gray-900 py-24 ">
|
||||||
|
|
||||||
|
<div class="container flex flex-col px-6 mx-auto space-y-6 lg:h-[32rem] lg:py-16 lg:flex-row lg:items-center">
|
||||||
|
<div class="w-full lg:w-1/2">
|
||||||
|
<div class="lg:max-w-lg">
|
||||||
|
<h1 class="text-3xl text-left font-bold tracking-wide text-gray-800 dark:text-white lg:text-5xl">
|
||||||
|
Easiest way to create your website
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="mt-8 space-y-5 ">
|
||||||
|
<p class="flex items-center -mx-2 text-gray-700 dark:text-gray-200">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<span class="mx-2">Clean and Simple Layout</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="flex items-center -mx-2 text-gray-700 dark:text-gray-200">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<span class="mx-2">Just Copy Paste Codeing</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="flex items-center -mx-2 text-gray-700 dark:text-gray-200">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mx-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<span class="mx-2">Easy to Use</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full mt-8 bg-transparent border rounded-md lg:max-w-sm dark:border-gray-700 focus-within:border-blue-400 focus-within:ring focus-within:ring-blue-300 dark:focus-within:border-blue-400 focus-within:ring-opacity-40">
|
||||||
|
<form class="flex flex-col lg:flex-row">
|
||||||
|
<input type="email" placeholder="Enter your email address" class="flex-1 h-10 px-4 py-2 m-1 text-gray-700 placeholder-gray-400 bg-transparent border-none appearance-none dark:text-gray-200 focus:outline-none focus:placeholder-transparent focus:ring-0" />
|
||||||
|
|
||||||
|
<button type="button" class=" h-10 px-2 py-2 m-1 text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
|
||||||
|
Join Us
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-center w-full h-96 lg:w-1/2">
|
||||||
|
<img class="object-cover w-full h-full mx-auto rounded-md lg:max-w-2xl" src="https://images.unsplash.com/photo-1543269664-7eef42226a21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="glasses photo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- hero 21 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- feature 9 start -->
|
||||||
|
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
||||||
|
<div class=" container flex flex-col mx-auto lg:flex-row">
|
||||||
|
<div class="w-full lg:w-1/3" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-size: cover;"></div>
|
||||||
|
<div class="flex flex-col w-full p-6 lg:w-2/3 md:p-8 lg:p-12">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 mb-8 dark:text-green-400">
|
||||||
|
<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
<h2 class="text-3xl font-semibold leading-none">Modern solutions to all kinds of problems</h2>
|
||||||
|
<p class="mt-4 mb-8 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non voluptatum rem amet!</p>
|
||||||
|
<button class="self-start px-10 py-3 text-lg font-medium rounded-3xl dark:bg-green-400 dark:text-gray-900">Get started</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- feature 9 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- start cta 14 -->
|
||||||
|
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
||||||
|
|
||||||
|
<div class="container m-auto px-6 ">
|
||||||
|
<div class="flex flex-col md:flex-row items-center justify-between relative w-100 h-auto md:h-64 bg-100 shadow-2xl rounded-lg p-8 dark:bg-gray-900">
|
||||||
|
<div class="w-8/12 text-2xl">
|
||||||
|
<img alt="quote" class="float-left mr-1" src="https://assets-global.website-files.com/5b5a66e9f3166b36708705fa/5cf8fb1f994fb7168d0d66fb_quote-intro.svg">
|
||||||
|
<span class="flex dark:text-yellow-100">We are team of developers with houndreds hours spend on coding, we create professional apps, webs.</span>
|
||||||
|
</div>
|
||||||
|
<div class="relative shadow-md font-medium my-5 py-2 px-4 text-white dark:text-gray-800 cursor-pointer bg-yellow-600 hover:bg-yellow-500 rounded text-lg text-center w-48">
|
||||||
|
<span class="absolute h-3 right-0 top-0 animate-ping inline-flex rounded-full bg-yellow-600">
|
||||||
|
</span>
|
||||||
|
Call now
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- end cta 14 -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- pricing 9 start -->
|
||||||
|
<section class="bg-gray-100 dark:bg-gray-900">
|
||||||
|
<div class="max-w-7xl px-4 py-24 mx-auto text-left md:text-center ">
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 gap-24 md:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Developers</p>
|
||||||
|
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$9<span class="text-2xl font-medium text-gray-600 dark:text-gray-300"> per month</span></h1>
|
||||||
|
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400">
|
||||||
|
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
|
||||||
|
</p>
|
||||||
|
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
|
||||||
|
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
|
||||||
|
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Designers</p>
|
||||||
|
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$19<span class="text-2xl font-medium text-gray-600 dark:text-gray-300 "> per month</span></h1>
|
||||||
|
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400 ">
|
||||||
|
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
|
||||||
|
</p>
|
||||||
|
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
|
||||||
|
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
|
||||||
|
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- pricing 9 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- testimonial 13 start -->
|
||||||
|
|
||||||
|
<section class="bg-gray-800">
|
||||||
|
<div class="w-full px-4 py-20 mx-auto text-center max-w-7xl md:w-4/5 lg:w-4/6">
|
||||||
|
<h1 class="mt-3 mb-10 text-xl font-extrabold text-white md:leading-snug md:text-3xl">
|
||||||
|
“Implementation is a breeze, particularly because the team at Hellonext is
|
||||||
|
<span class="text-white bg-transparent bg-clip-border xl:bg-clip-text xl:text-transparent xl:bg-gradient-to-r from-green-400 to-purple-500"> very fast to respond and help </span>
|
||||||
|
where needed, even if it means rolling out new features on their platform. We're super happy and are loving how Hellonext brings us closer to the members of our community“
|
||||||
|
</h1>
|
||||||
|
<div class="mx-auto mb-3 shadow-lg avatar w-1/5">
|
||||||
|
<img src="https://www.hyperui.dev/photos/man-4.jpeg" alt="man standing up a mounten" class=" object-cover rounded-full h-20 w-20 mx-auto " />
|
||||||
|
</div>
|
||||||
|
<p class="text-base font-medium text-gray-200">example example</p>
|
||||||
|
<p class="text-xs font-medium text-gray-400">CEO, example</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- testimonial 13 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- footer 25 start -->
|
||||||
|
<footer class="px-4 pt-24 divide-y dark:bg-gray-900 dark:text-gray-100">
|
||||||
|
<div class="container flex flex-col justify-between py-10 mx-auto space-y-8 lg:flex-row lg:space-y-0">
|
||||||
|
<div class="lg:w-1/3">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex justify-center space-x-3 lg:justify-start">
|
||||||
|
<div class="flex items-center justify-center w-12 h-12 rounded-full dark:bg-indigo-400">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="flex-shrink-0 w-5 h-5 rounded-full dark:text-gray-900">
|
||||||
|
<path d="M18.266 26.068l7.839-7.854 4.469 4.479c1.859 1.859 1.859 4.875 0 6.734l-1.104 1.104c-1.859 1.865-4.875 1.865-6.734 0zM30.563 2.531l-1.109-1.104c-1.859-1.859-4.875-1.859-6.734 0l-6.719 6.734-6.734-6.734c-1.859-1.859-4.875-1.859-6.734 0l-1.104 1.104c-1.859 1.859-1.859 4.875 0 6.734l6.734 6.734-6.734 6.734c-1.859 1.859-1.859 4.875 0 6.734l1.104 1.104c1.859 1.859 4.875 1.859 6.734 0l21.307-21.307c1.859-1.859 1.859-4.875 0-6.734z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span class="self-center text-2xl font-semibold">Brand name</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-2 text-sm gap-x-3 gap-y-8 lg:w-2/3 sm:grid-cols-4">
|
||||||
|
<div class="space-y-3">
|
||||||
|
<h3 class="tracking-wide uppercase dark:text-gray-50">Product</h3>
|
||||||
|
<ul class="space-y-1">
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#">Features</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#">Integrations</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#">Pricing</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#">FAQ</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<h3 class="tracking-wide uppercase dark:text-gray-50">Company</h3>
|
||||||
|
<ul class="space-y-1">
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#">Privacy</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#">Terms of Service</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<h3 class="uppercase dark:text-gray-50">Developers</h3>
|
||||||
|
<ul class="space-y-1">
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#">Public API</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#">Documentation</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a rel="noopener noreferrer" href="#">Guides</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="uppercase dark:text-gray-50">Social media</div>
|
||||||
|
<div class="flex justify-start space-x-3">
|
||||||
|
<a rel="noopener noreferrer" href="#" title="Facebook" class="flex items-center p-1">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
|
||||||
|
<path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" title="Twitter" class="flex items-center p-1">
|
||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
|
||||||
|
<path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" title="Instagram" class="flex items-center p-1">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor" class="w-5 h-5 fill-current">
|
||||||
|
<path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="py-6 text-sm text-center dark:text-gray-400">© 1968 Company Co. All rights reserved.</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- footer 25 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>Template 30</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||||
|
d
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>Template 30</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||||
|
d
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
|
|
||||||
<!-- header 2 start -->
|
<!-- header 2 start -->
|
||||||
|
|
||||||
<section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-800 body-font">
|
<section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-900 body-font">
|
||||||
<div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
|
<div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
|
||||||
<a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
|
<a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
|
||||||
|
|
||||||
@@ -120,7 +120,7 @@
|
|||||||
<!-- hero 2 end -->
|
<!-- hero 2 end -->
|
||||||
|
|
||||||
<!-- start cta 2 -->
|
<!-- start cta 2 -->
|
||||||
<section class="flex justify-around pb-24 dark:bg-gray-800">
|
<section class="flex justify-around py-24 dark:bg-gray-900">
|
||||||
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||||||
@@ -159,7 +159,7 @@
|
|||||||
|
|
||||||
<!-- feature 2 start -->
|
<!-- feature 2 start -->
|
||||||
|
|
||||||
<section class="bg-white dark:bg-gray-900 p-24">
|
<section class="bg-white dark:bg-gray-800 p-24">
|
||||||
<div class="container py-10 mx-auto">
|
<div class="container py-10 mx-auto">
|
||||||
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
|
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
|
||||||
|
|
||||||
@@ -231,7 +231,7 @@
|
|||||||
<!-- pricing 2 start -->
|
<!-- pricing 2 start -->
|
||||||
|
|
||||||
<section x-data="{ toggle: 'basic' }"
|
<section x-data="{ toggle: 'basic' }"
|
||||||
class="relative py-24 bg-gray-200 dark:bg-gray-800 min-w-screen animation-fade animation-delay">
|
class="relative py-24 bg-gray-200 dark:bg-gray-900 min-w-screen animation-fade animation-delay">
|
||||||
<div class="container w-full px-10 mx-auto sm:px-5 ">
|
<div class="container w-full px-10 mx-auto sm:px-5 ">
|
||||||
<div class="sm:flex ">
|
<div class="sm:flex ">
|
||||||
<aside class="w-full sm:flex-initial">
|
<aside class="w-full sm:flex-initial">
|
||||||
|
|||||||
@@ -42,6 +42,7 @@
|
|||||||
<!-- header 3 end -->
|
<!-- header 3 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- hero 3 start -->
|
<!-- hero 3 start -->
|
||||||
|
|
||||||
<div class="relative flex flex-col items-center justify-center min-h-screen bg-cover "
|
<div class="relative flex flex-col items-center justify-center min-h-screen bg-cover "
|
||||||
@@ -82,56 +83,64 @@
|
|||||||
<!-- hero 3 end -->
|
<!-- hero 3 end -->
|
||||||
|
|
||||||
|
|
||||||
<!-- accordion 2 start -->
|
<!-- blog 7 start -->
|
||||||
|
<div class="dark:bg-gray-800 dark:text-gray-50">
|
||||||
|
<div class="container grid grid-cols-12 mx-auto">
|
||||||
<div class="flex items-center justify-center py-20 transition-height duration-300 from-purple-100 via-red-300 to-indigo-500 bg-gradient-to-br">
|
<div class="flex flex-col justify-center col-span-12 align-middle bg-no-repeat bg-cover dark:bg-gray-700 lg:col-span-6 lg:h-auto" style="background-image: url('https://source.unsplash.com/random/640x480'); background-position: center center; background-blend-mode: multiply; background-size: cover;">
|
||||||
<div class='w-full max-w-lg px-10 py-8 mx-auto bg-white rounded-lg shadow-xl'>
|
<div class="flex flex-col items-center p-8 py-12 text-center">
|
||||||
<h1 class="text-xl mb-10 text-center">TAILWINDCSS ACCORDION WITH <code><details> <summary></code> HTML Tag</h1>
|
<span>12 June</span>
|
||||||
|
<h1 class="py-4 text-5xl font-bold">Lorem, ipsum dolor sit amet consectetur adipisicing.</h1>
|
||||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
<p class="pb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 after:content-['+'] ">Morbi at sagittis velit</summary>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7 h-7">
|
||||||
<p class="px-4 py-3">
|
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
Nunc posuere dapibus urna quis cursus. Mauris malesuada tincidunt diam vel placerat mi tincidunt ac. Nullam augue urna, venenatis ut blandit eget, auctor vel eros. In ut dolor ante
|
</svg>
|
||||||
</p>
|
</div>
|
||||||
</details>
|
</div>
|
||||||
|
<div class="flex flex-col col-span-12 p-6 divide-y lg:col-span-6 lg:p-10 divide-gray-700">
|
||||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
<div class="pt-6 pb-4 space-y-2">
|
||||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">Etiam ut lacus in enim sagittis posuere at a elit</summary>
|
<span>12 June</span>
|
||||||
<p class="px-4 py-3 transition-all duration-700">
|
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||||
Fusce sed laoreet ex. Aenean justo nisl, eleifend eget eleifend sit amet, imperdiet id libero. Suspendisse et tempus leo, et lacinia arcu. Etiam at ante in est efficitur fringilla eleifend nec tellus. Integer sed auctor lectus, nec ullamcorper arcu. Nullam nec eros elit. Nulla tempor massa ut quam elementum dignissim. Sed eu pulvinar est, vel vehicula dolor. Pellentesque in ante vel elit facilisis consectetur eu id felis
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||||
</p>
|
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||||
</details>
|
<span>Read more</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">
|
</svg>
|
||||||
Nam auctor fringilla magna id porta
|
</a>
|
||||||
</summary>
|
</div>
|
||||||
<p class="px-4 py-3 transition-all duration-700">
|
<div class="pt-6 pb-4 space-y-2">
|
||||||
Etiam maximus vitae eros eu vestibulum. Donec posuere, magna non tincidunt dignissim, magna tortor mollis augue, at maximus ante lacus vel tellus. Vestibulum vestibulum consectetur tortor id sagittis. Suspendisse nisi ipsum, pretium a lorem at, laoreet condimentum arcu
|
<span>12 June</span>
|
||||||
</p>
|
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||||
</details>
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||||
|
<span>Read more</span>
|
||||||
<!-- THE CSS -->
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
<style>
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
details[open] summary::after {
|
</a>
|
||||||
content: "-";
|
</div>
|
||||||
transition: all;
|
<div class="pt-6 pb-4 space-y-2">
|
||||||
transition-duration: 1s;
|
<span>12 June</span>
|
||||||
}
|
<h1 class="text-3xl font-bold">Lorem ipsum dolor sit.</h1>
|
||||||
</style>
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, a!</p>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="inline-flex items-center py-2 space-x-2 text-sm dark:text-green-400">
|
||||||
|
<span>Read more</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- accordion 2 end -->
|
<!-- blog 7 end -->
|
||||||
|
|
||||||
|
|
||||||
<!-- team 1 start -->
|
<!-- team 1 start -->
|
||||||
<section class="dark:bg-gray-800 bg-white py-24">
|
<section class="dark:bg-gray-900 bg-white py-24">
|
||||||
<section class="container p-6 mx-auto ">
|
<section class="container p-6 mx-auto ">
|
||||||
<h2 class="text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
|
<h2 class="text-center text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
|
||||||
|
|
||||||
<div class="flex items-center justify-center">
|
<div class="flex items-center justify-center">
|
||||||
<div class="grid gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
<div class="grid gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||||
@@ -180,7 +189,7 @@
|
|||||||
|
|
||||||
<!-- feature 2 start -->
|
<!-- feature 2 start -->
|
||||||
|
|
||||||
<section class="bg-white dark:bg-gray-900 py-24">
|
<section class="bg-white dark:bg-gray-800 py-24">
|
||||||
<div class="container px-6 py-10 mx-auto">
|
<div class="container px-6 py-10 mx-auto">
|
||||||
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
|
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
|
||||||
|
|
||||||
@@ -243,47 +252,47 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- feature 2 end -->
|
<!-- feature 2 end -->
|
||||||
|
|
||||||
<!-- testimonial 3 start -->
|
<!-- testimonial 3 start -->
|
||||||
|
|
||||||
<section class="text-gray-600 dark:bg-gray-800 body-font ">
|
<section class="text-gray-600 dark:bg-gray-900 body-font ">
|
||||||
<div class="container px-5 py-24 mx-auto">
|
<div class="container px-5 py-24 mx-auto">
|
||||||
<div class="flex flex-wrap -m-4">
|
<div class="flex flex-wrap -m-4">
|
||||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||||
<div class="h-full text-center">
|
<div class="h-full text-center">
|
||||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 dark:border-2 dark:border-indigo-500 bg-gray-100" src="https://dummyimage.com/302x302">
|
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 dark:border-2 dark:border-indigo-500 bg-gray-100" src="https://dummyimage.com/302x302">
|
||||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
|
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
|
||||||
<p class="text-gray-500 dark:text-indigo-500">Senior Product Designer</p>
|
<p class="text-gray-500 dark:text-indigo-500">Senior Product Designer</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
<div class="h-full text-center">
|
||||||
<div class="h-full text-center">
|
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500" src="https://dummyimage.com/300x300">
|
||||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500" src="https://dummyimage.com/300x300">
|
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
|
||||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
|
<p class="text-gray-500 dark:text-indigo-500">UI Develeoper</p>
|
||||||
<p class="text-gray-500 dark:text-indigo-500">UI Develeoper</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="lg:w-1/3 lg:mb-0 p-4">
|
||||||
<div class="lg:w-1/3 lg:mb-0 p-4">
|
<div class="h-full text-center">
|
||||||
<div class="h-full text-center">
|
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500 " src="https://dummyimage.com/305x305">
|
||||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500 " src="https://dummyimage.com/305x305">
|
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
|
||||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
|
<p class="text-gray-500 dark:text-indigo-500">CTO</p>
|
||||||
<p class="text-gray-500 dark:text-indigo-500">CTO</p>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- testimonial 3 end -->
|
<!-- testimonial 3 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -272,7 +272,7 @@
|
|||||||
|
|
||||||
<!-- blog 1 start -->
|
<!-- blog 1 start -->
|
||||||
|
|
||||||
<section class="py-24 sm:py-12 dark:bg-gray-800 dark:text-gray-100">
|
<section class="py-24 sm:py-12 dark:bg-gray-900 dark:text-gray-100">
|
||||||
<div class="container p-6 mx-auto space-y-8">
|
<div class="container p-6 mx-auto space-y-8">
|
||||||
<div class="space-y-2 text-center">
|
<div class="space-y-2 text-center">
|
||||||
<h2 class="text-3xl font-bold">Partem reprimique an pro</h2>
|
<h2 class="text-3xl font-bold">Partem reprimique an pro</h2>
|
||||||
|
|||||||
@@ -72,7 +72,7 @@
|
|||||||
|
|
||||||
<!-- start cta 3 -->
|
<!-- start cta 3 -->
|
||||||
|
|
||||||
<section class="flex flex-col md:flex-row justify-around py-24 bg-white border-gray-200 dark:bg-gray-800 ">
|
<section class="flex flex-col md:flex-row justify-around py-24 bg-white border-gray-200 dark:bg-gray-900 ">
|
||||||
|
|
||||||
|
|
||||||
<div class="max-w-sm my-3 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
<div class="max-w-sm my-3 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
|
|
||||||
<!-- feature 6 start -->
|
<!-- feature 6 start -->
|
||||||
|
|
||||||
<section class="py-24 bg-white dark:bg-gray-900">
|
<section class="py-24 bg-white dark:bg-gray-800">
|
||||||
<div class="container px-6 py-10 mx-auto">
|
<div class="container px-6 py-10 mx-auto">
|
||||||
<h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome Components</h1>
|
<h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome Components</h1>
|
||||||
|
|
||||||
@@ -210,7 +210,7 @@
|
|||||||
|
|
||||||
<!-- pricing 5 start -->
|
<!-- pricing 5 start -->
|
||||||
|
|
||||||
<section class="py-24 dark:bg-gray-800">
|
<section class="py-24 dark:bg-gray-900">
|
||||||
<div class="px-4 py-16 mx-auto container md:px-24 lg:px-8 lg:py-20 ">
|
<div class="px-4 py-16 mx-auto container md:px-24 lg:px-8 lg:py-20 ">
|
||||||
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
|
||||||
<div>
|
<div>
|
||||||
@@ -394,9 +394,78 @@
|
|||||||
<!-- pricing 5 end -->
|
<!-- pricing 5 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- testimonial 5 start -->
|
||||||
|
<section class="flex items-center justify-center py-16 bg-gray-100 dark:bg-gray-800 min-w-screen">
|
||||||
|
<div class="max-w-6xl px-12 mx-auto dark:bg-gray-800 bg-gray-100 md:px-16 xl:px-10">
|
||||||
|
<div class="flex flex-col items-center lg:flex-row">
|
||||||
|
<div class="flex flex-col items-start justify-center w-full h-full pr-8 mb-10 lg:mb-0 lg:w-1/2">
|
||||||
|
<p class="mb-2 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love our product</p>
|
||||||
|
<h2 class="text-4xl font-extrabold leading-10 tracking-tight dark:text-white text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">Testimonials</h2>
|
||||||
|
<p class="my-6 text-lg text-gray-600 dark:text-gray-300">Don't just take our word for it, read from our extensive list of case studies and customer testimonials.</p>
|
||||||
|
<a href="#_" class="flex items-center justify-center px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10">View Case Studies</a>
|
||||||
|
</div>
|
||||||
|
<div class="w-full lg:w-1/2">
|
||||||
|
<blockquote class="sm:flex justify-center sm:justify-between w-full col-span-1 p-6 bg-white rounded-lg shadow">
|
||||||
|
<div class="flex flex-col pr-8">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">Awesome product! And the customer service is exceptionally well.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
|
||||||
|
Jane Cooper
|
||||||
|
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 mx-auto mt-5 w-24 h-24 bg-gray-300 rounded-full xl:w-24 xl:h-24" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||||
|
</blockquote>
|
||||||
|
<blockquote class="sm:flex justify-center sm:justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
|
||||||
|
<div class="flex flex-col pr-10 mx-auto">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">I can't express enough, how amazing this service has been for my company.</p>
|
||||||
|
</div>
|
||||||
|
<h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
|
||||||
|
John Doe
|
||||||
|
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
|
||||||
|
</h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 mx-auto mt-5 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&aauto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||||
|
</blockquote>
|
||||||
|
<blockquote class="sm:flex justify-center sm:justify-between w-full col-span-1 p-6 mt-4 bg-white rounded-lg shadow">
|
||||||
|
<div class="flex flex-col pr-10">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z"></path>
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 sm:text-base lg:text-sm xl:text-base">I can't express enough, how amazing this service has been for my company.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="pl-12 mt-3 text-sm font-medium leading-5 text-gray-800 truncate sm:text-base lg:text-sm lg:text-base">
|
||||||
|
John Smith
|
||||||
|
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
|
||||||
|
</h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 mx-auto mt-5 w-24 h-24 bg-gray-300 rounded-full" src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rrb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&aauto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- testimonial 5 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--footer 5 start-->
|
<!--footer 5 start-->
|
||||||
|
|
||||||
<footer class="bg-gray-50 dark:bg-gray-800">
|
<footer class="bg-gray-50 dark:bg-gray-900">
|
||||||
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
|
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
|
||||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -0,0 +1,516 @@
|
|||||||
|
<!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>About 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 -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- section 4 start -->
|
||||||
|
|
||||||
|
<section class="bg-gray-100 dark:bg-gray-800">
|
||||||
|
<div class="container mx-auto ">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 h-screen">
|
||||||
|
<div class="max-h-96 md:h-screen">
|
||||||
|
<!-- https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 -->
|
||||||
|
<img class="w-screen h-screen object-cover object-top" src="https://source.unsplash.com/random/400*600/?team" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="flex bg-gray-100 dark:bg-gray-800 p-10">
|
||||||
|
<div class="mb-auto mt-auto max-w-lg">
|
||||||
|
<h1 class="text-3xl uppercase dark:text-white font-bold text-indigo-600">Brand Name</h1>
|
||||||
|
<p class="font-semibold mb-5 dark:text-cyan-100">Company Type</p>
|
||||||
|
<p class="dark:text-cyan-300">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
|
||||||
|
<button class="bg-black rounded-md py-3 px-7 mt-6 text-white dark:hover:bg-emerald-300 dark:hover:text-gray-800 font-bold">Email Us</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- section 4 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- feature 12 start -->
|
||||||
|
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
||||||
|
<div class="container p-4 mx-auto space-y-1 text-center">
|
||||||
|
<span class="text-xs tracking-wider uppercase font-bold dark:text-green-400 text-indigo-600">shortcut to your dream ui</span>
|
||||||
|
<h2 class="pb-3 text-3xl font-bold md:text-4xl">Create a stylish website in minutes</h2>
|
||||||
|
<p>Get a jumpstart to creating your new webpage! With our fully responsive and carefully styled components you can get the structure of your website done with just a couple of clicks.</p>
|
||||||
|
</div>
|
||||||
|
<div class="container grid justify-center gap-4 mx-auto lg:grid-cols-2 xl:grid-cols-4">
|
||||||
|
<div class="flex flex-col px-8 py-6">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Components</h2>
|
||||||
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Individual components that can be re-used multiple times in your designs.</p>
|
||||||
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400 text-indigo-600" href="/components">
|
||||||
|
<span>Learn More</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col px-8 py-6 lg:border-none xl:border-solid">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Sections</h2>
|
||||||
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Pre-made building blocks that you can stack on top of each other like Legos to build a website of your own in minutes.</p>
|
||||||
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400 text-indigo-600" href="/sections">
|
||||||
|
<span>Learn More</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col px-8 py-6">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Templates</h2>
|
||||||
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Full pages that showcase pieces of what you can achieve with the building blocks that are in this UI kit.</p>
|
||||||
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400 text-indigo-600" href="/templates">
|
||||||
|
<span>Learn More</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col px-8 py-6">
|
||||||
|
<h2 class="mb-2 text-lg font-semibold sm:text-xl title-font dark:text-gray-100">Customization</h2>
|
||||||
|
<p class="flex-1 mb-4 text-base leading-relaxed dark:text-gray-400">Choose your primary color from any of the Tailwind CSS 2.0 colors. You can also view all of the components in our light and dark themes.</p>
|
||||||
|
<a class="inline-flex items-center space-x-2 text-sm dark:text-green-400 text-indigo-600" href="/docs">
|
||||||
|
<span>Learn More</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||||
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- feature 12 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- timeline 1 start -->
|
||||||
|
<section class="dark:bg-gray-800 dark:text-gray-100 py-24">
|
||||||
|
<div class="container max-w-5xl px-4 py-12 mx-auto">
|
||||||
|
<div class="grid gap-4 mx-4 sm:grid-cols-12">
|
||||||
|
<div class="col-span-12 sm:col-span-3">
|
||||||
|
<div class="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:dark:bg-green-400 before:bg-indigo-600">
|
||||||
|
<h3 class="text-3xl font-semibold">Morbi tempor</h3>
|
||||||
|
<span class="text-sm font-bold tracking-wider uppercase dark:text-gray-400">Vestibulum diam nunc</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
|
||||||
|
<div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-700">
|
||||||
|
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400 before:bg-indigo-600">
|
||||||
|
<h3 class="text-xl font-semibold tracking-wide text-indigo-600 ">Donec porta enim vel </h3>
|
||||||
|
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Dec 2020</time>
|
||||||
|
<p class="mt-3">Pellentesque feugiat ante at nisl efficitur, in mollis orci scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400 before:bg-indigo-600">
|
||||||
|
<h3 class="text-xl font-semibold tracking-wide text-indigo-600">Aliquam sit amet nunc ut</h3>
|
||||||
|
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Jul 2019</time>
|
||||||
|
<p class="mt-3">Morbi vulputate aliquam libero non dictum. Aliquam sit amet nunc ut diam aliquet tincidunt nec nec dui. Donec mollis turpis eget egestas sodales.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400 before:bg-indigo-600">
|
||||||
|
<h3 class="text-xl font-semibold tracking-wide text-indigo-600">Pellentesque habitant morbi</h3>
|
||||||
|
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Jan 2016</time>
|
||||||
|
<p class="mt-3">Suspendisse tincidunt, arcu nec faucibus efficitur, justo velit consectetur nisl, sit amet condimentum lacus orci nec purus. Mauris quis quam suscipit, vehicula felis id, vehicula enim.</p>
|
||||||
|
</div><!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- timeline 1 end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- testimonial 24 start -->
|
||||||
|
|
||||||
|
<div id="testimonials"
|
||||||
|
class="flex items-center justify-center w-full px-8 py-10 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
||||||
|
<div class="max-w-6xl mx-auto">
|
||||||
|
<div class="flex-col items-center ">
|
||||||
|
<div class="flex flex-col items-center justify-center w-full h-full max-w-2xl pr-8 mx-auto text-center">
|
||||||
|
<p class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love
|
||||||
|
our product
|
||||||
|
</p>
|
||||||
|
<h2
|
||||||
|
class="text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">
|
||||||
|
Testimonials</h2>
|
||||||
|
<p class="my-6 text-xl font-medium text-gray-500">Don't just take our word for it, read from our
|
||||||
|
extensive
|
||||||
|
list of case studies and customer testimonials.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center justify-center max-w-2xl py-8 mx-auto xl:flex-row xl:max-w-full">
|
||||||
|
<div class="w-full xl:w-1/2 xl:pr-8">
|
||||||
|
<blockquote
|
||||||
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
|
||||||
|
<div class="flex flex-col pr-8">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path
|
||||||
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-base text-gray-600">I'm loving these templates! Very nice
|
||||||
|
features and layouts.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Sandra
|
||||||
|
Walton <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
|
||||||
|
SomeCompany</span></h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
||||||
|
src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2694&q=80"
|
||||||
|
alt="">
|
||||||
|
</blockquote>
|
||||||
|
<blockquote
|
||||||
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 mb-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease xl:mb-0">
|
||||||
|
<div class="flex flex-col pr-10">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path
|
||||||
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-base text-gray-600">Really digging this service. Now I can
|
||||||
|
quickly bootstrap any
|
||||||
|
project.</p>
|
||||||
|
</div>
|
||||||
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Kenny
|
||||||
|
Jones <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
|
||||||
|
SomeCompany</span></h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
||||||
|
src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80"
|
||||||
|
alt="">
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
<div class="w-full xl:w-1/2 xl:pl-8">
|
||||||
|
<blockquote
|
||||||
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
|
||||||
|
<div class="flex flex-col pr-10">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path
|
||||||
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-base text-gray-600">Extremely helpful in every single project we
|
||||||
|
have released.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Mike Smith
|
||||||
|
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
|
||||||
|
</h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
||||||
|
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
|
||||||
|
alt="">
|
||||||
|
</blockquote>
|
||||||
|
<blockquote
|
||||||
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
|
||||||
|
<div class="flex flex-col pr-10">
|
||||||
|
<div class="relative pl-12">
|
||||||
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
||||||
|
<path
|
||||||
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
||||||
|
</svg>
|
||||||
|
<p class="mt-2 text-base text-gray-600">Finally a quick and easy system I can use
|
||||||
|
for any type of
|
||||||
|
project.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Molly
|
||||||
|
Sanchez <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
|
||||||
|
SomeCompany</span></h3>
|
||||||
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
||||||
|
</div>
|
||||||
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
||||||
|
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80"
|
||||||
|
alt="">
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- testimonial 24 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>
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>About page 2</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||||
|
d
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- header section start -->
|
||||||
|
<div class="relative z-20 w-full h-24 px-8 pt-2 bg-white dark:bg-gray-800">
|
||||||
|
|
||||||
|
<div class="container flex items-center justify-between h-full max-w-6xl mx-auto">
|
||||||
|
<a href="#_" class="relative flex items-center flex-row h-full font-black">
|
||||||
|
<svg class="w-auto h-8 mt-1" viewBox="0 0 215 151" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="56.965%" y1="53.262%" x2="7.891%" y2="29.24%" id="b"><stop stop-color="#FFCD26" offset="0%"/><stop stop-color="#FFDF95" offset="100%"/></linearGradient><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" id="a"/></defs><g fill="none" fill-rule="evenodd"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><path d="M95.655.001c-24.386 0-43.538 13.864-52.36 34.66-5.144 12.126-3.711 24.522.084 29.027 2.435-5.804 11.57-15.424 29.476-15.424h79.952c29.783 0 54.375-30.377 61.963-48.263H95.655zM67.693 65.916C23.419 65.916.085 105.344 0 137.666v.345c.011 4.322.439 8.517 1.291 12.466 2.433-5.804 19.956-36.297 47.062-36.297h23.225c29.783 0 54.375-30.378 61.963-48.264H67.693z" fill="url(#b)" mask="url(#c)"/></g></svg>
|
||||||
|
<span class="ml-3 text-2xl font-black">Flare</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div id="nav" class="absolute top-0 left-0 hidden block w-full mt-20 border-b border-gray-200 sm:border-none sm:px-5 sm:block sm:relative sm:mt-0 sm:px-0 sm:w-auto">
|
||||||
|
<nav class="flex flex-col items-center py-3 bg-white border border-gray-100 sm:flex-row sm:bg-transparent sm:border-none sm:py-0">
|
||||||
|
<a href="#_" class="relative px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">Home<span class="absolute bottom-0 left-0 w-full h-1 -mb-2 bg-yellow-300 rounded-full"></span></a>
|
||||||
|
<a href="#_" class="px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">Pages</a>
|
||||||
|
<a href="#_" class="px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">Contact</a>
|
||||||
|
<a href="#_" class="px-1 mb-1 mb-5 mr-0 text-base font-bold sm:mb-0 sm:mr-4 lg:mr-8">About</a>
|
||||||
|
<a href="#_" class="relative mb-5 sm:mb-0">
|
||||||
|
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-black rounded"></span>
|
||||||
|
<span class="relative inline-block w-full h-full px-3 py-1 text-base font-bold transition duration-100 bg-white border-2 border-black rounded fold-bold hover:bg-yellow-400 hover:text-gray-900">SIGNUP</span>
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</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 sm: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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- header section 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>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>About page 3</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||||
|
d
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
@@ -0,0 +1,360 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>Contact 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 -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- contact 5 start -->
|
||||||
|
<section class="text-gray-600 body-font relative dark:bg-gray-800">
|
||||||
|
<h2 class="text-3xl font-bold text-black dark:text-white pt-24 text-center">
|
||||||
|
Visit , Call or Email 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 bg-white dark:bg-gray-800 rounded-lg 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 border-2 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 -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- faq 2 start -->
|
||||||
|
<section class="dark:bg-gray-800 dark:text-gray-100">
|
||||||
|
<div class="container flex flex-col items-center p-4 mx-auto md:p-8">
|
||||||
|
<h1 class="text-3xl font-bold leading-none text-center sm:text-4xl uppercase pb-4" >frequently asked questions</h1>
|
||||||
|
<div class="relative mt-6 mb-12">
|
||||||
|
<span class="absolute inset-y-0 flex items-center pl-2 mx-auto">
|
||||||
|
<button type="submit" title="Search" class="p-1 focus:outline-none focus:ring">
|
||||||
|
<svg fill="currentColor" viewBox="0 0 512 512" class="w-4 h-4 dark:text-gray-100">
|
||||||
|
<path d="M479.6,399.716l-81.084-81.084-62.368-25.767A175.014,175.014,0,0,0,368,192c0-97.047-78.953-176-176-176S16,94.953,16,192,94.953,368,192,368a175.034,175.034,0,0,0,101.619-32.377l25.7,62.2L400.4,478.911a56,56,0,1,0,79.2-79.195ZM48,192c0-79.4,64.6-144,144-144s144,64.6,144,144S271.4,336,192,336,48,271.4,48,192ZM456.971,456.284a24.028,24.028,0,0,1-33.942,0l-76.572-76.572-23.894-57.835L380.4,345.771l76.573,76.572A24.028,24.028,0,0,1,456.971,456.284Z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
<input type="search" name="Search" placeholder="Search..." class="w-full py-3 pl-12 text-sm rounded-full border-2 sm:w-96 focus:outline-none dark:bg-gray-800 dark:text-gray-100 focus:dark:bg-gray-900">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col w-full divide-y sm:flex-row sm:divide-y-0 sm:divide-x sm:px-8 lg:px-12 xl:px-32 dark:divide-gray-700 divide-indigo-600">
|
||||||
|
<div class="flex flex-col w-full divide-y dark:divide-gray-700 divide-indigo-600 ">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Billing</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Support</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Account</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col w-full divide-y dark:divide-gray-700 divide-indigo-600">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Features</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Contact us</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">My orders</a>
|
||||||
|
</div>
|
||||||
|
<div class="hidden w-full divide-y sm:flex-col sm:flex dark:divide-gray-700 divide-indigo-600">
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Enterprise</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Privacy</a>
|
||||||
|
<a rel="noopener noreferrer" href="#" class="flex items-center justify-center p-4 sm:py-8 lg:py-12">Developers</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- faq 2 end -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- footer 47 start -->
|
||||||
|
|
||||||
|
<footer class="px-4 pt-24 pb-8 text-gray-400 bg-white dark:bg-gray-900 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>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>About page 2</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||||
|
d
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>About page 3</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||||
|
d
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
@@ -0,0 +1,690 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>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 ">
|
||||||
|
<div class="w-12/12 md:w-6/12 rounded border">
|
||||||
|
<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>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>Service page 2</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||||
|
d
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||||
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||||
|
<title>Service page 3</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||||
|
d
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
Reference in New Issue
Block a user