added other tempalte parts
This commit is contained in:
merajjahir
@@ -142,6 +142,8 @@
|
||||
|
||||
<!-- accordion 4 end -->
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
|
||||
@@ -21,31 +21,34 @@
|
||||
<section class="section_divider">
|
||||
<div>Contact 2</div>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<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 -->
|
||||
|
||||
|
||||
|
||||
@@ -1418,6 +1418,97 @@
|
||||
<!-- 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 -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
|
||||
@@ -413,6 +413,40 @@
|
||||
<!-- 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 -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
|
||||
@@ -18,44 +18,44 @@
|
||||
</button>
|
||||
|
||||
|
||||
<!-- faq 2 start -->
|
||||
<section class="section_divider" id="faq_2">
|
||||
<div>FAQ 2</div>
|
||||
</section>
|
||||
<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">Help Center</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 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">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 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">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 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">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 start -->
|
||||
<section class="section_divider" id="faq_2">
|
||||
<div>FAQ 2</div>
|
||||
</section>
|
||||
<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">Help Center</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 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">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 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">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 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">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 -->
|
||||
<!-- faq 2 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
|
||||
@@ -1004,6 +1004,340 @@
|
||||
</section>
|
||||
<!-- 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 -->
|
||||
<script type="text/javascript">
|
||||
|
||||
@@ -4549,7 +4549,170 @@
|
||||
</section>
|
||||
<!-- 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 -->
|
||||
<script type="text/javascript">
|
||||
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>
|
||||
<html lang="en">
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
@@ -20,45 +20,45 @@
|
||||
|
||||
<!-- header 19 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 19</div>
|
||||
</section>
|
||||
<nav class="flex 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>
|
||||
<div class="flex items-center">
|
||||
<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>Header 19</div>
|
||||
</section>
|
||||
<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>
|
||||
<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>
|
||||
<ul class="flex 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 -->
|
||||
</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 -->
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -23,7 +23,8 @@
|
||||
<section class="section_divider">
|
||||
<div>Header 21</div>
|
||||
</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">
|
||||
<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">
|
||||
@@ -31,30 +32,35 @@
|
||||
</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>
|
||||
<ul class="md:space-x-8 space-x-6 text-gray-900 dark:text-cyan-300 font-semibold hidden md:flex">
|
||||
<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">
|
||||
<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 -->
|
||||
|
||||
|
||||
@@ -1257,13 +1257,14 @@
|
||||
|
||||
<!-- header 18 end -->
|
||||
|
||||
|
||||
<!-- header 19 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 19</div>
|
||||
</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>
|
||||
<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 ">
|
||||
<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">
|
||||
@@ -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..." />
|
||||
</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">Articles</li>
|
||||
<li>
|
||||
@@ -1299,6 +1300,8 @@
|
||||
|
||||
<!-- header 19 end -->
|
||||
|
||||
|
||||
|
||||
<!-- header 20 start -->
|
||||
<section class="section_divider">
|
||||
<div>Header 20 </div>
|
||||
@@ -1489,6 +1492,123 @@
|
||||
|
||||
<!-- 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 -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
|
||||
@@ -2095,6 +2095,466 @@
|
||||
<!-- 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 -->
|
||||
<script type="text/javascript">
|
||||
|
||||
@@ -17,6 +17,29 @@
|
||||
</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 -->
|
||||
<script type="text/javascript">
|
||||
|
||||
@@ -194,24 +194,23 @@
|
||||
<section class="section_divider">
|
||||
<div>Section 4 (about me template)</div>
|
||||
</section>
|
||||
<!-- about -->
|
||||
<!-- component -->
|
||||
<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 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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- about -->
|
||||
<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 -->
|
||||
|
||||
|
||||
|
||||
@@ -15,8 +15,35 @@
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</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 -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
|
||||
@@ -515,172 +515,172 @@
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
|
||||
|
||||
<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="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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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>
|
||||
<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="-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>
|
||||
<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>
|
||||
<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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -1143,9 +1143,7 @@
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<!-- testimonial 11 end -->
|
||||
|
||||
</script>
|
||||
<!-- testimonial 11 end -->
|
||||
|
||||
|
||||
@@ -1925,6 +1923,132 @@
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
Reference in New Issue
Block a user