added 8 template's
This commit is contained in:
merajjahir
49
public/template/10_template.html
Normal file
49
public/template/10_template.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 10</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
public/template/11_template.html
Normal file
49
public/template/11_template.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 11</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
public/template/12_template.html
Normal file
49
public/template/12_template.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 12</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Landmark</title>
|
||||
<title>Landmark (template 1) </title>
|
||||
<!--
|
||||
For more customization options, we would advise
|
||||
you to build your TailwindCSS from the source.
|
||||
@@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Flare - Landing Page</title>
|
||||
<title>Flare - Landing Page (template 2)</title>
|
||||
<!--
|
||||
For more customization options, we would advise
|
||||
you to build your TailwindCSS from the source.
|
||||
151
public/template/3_template.html
Normal file
151
public/template/3_template.html
Normal file
@@ -0,0 +1,151 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Landmark (template 3)</title>
|
||||
<!--
|
||||
For more customization options, we would advise
|
||||
you to build your TailwindCSS from the source.
|
||||
https://tailwindcss.com/docs/installation
|
||||
-->
|
||||
<link rel="stylesheet" href="./../../dist/tailshape.css">
|
||||
<!-- Small CSS to Hide elements at 1520px size -->
|
||||
<style>
|
||||
@media(max-width:1520px) {
|
||||
.left-svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* small css for the mobile nav close */
|
||||
#nav-mobile-btn.close span:first-child {
|
||||
transform: rotate(45deg);
|
||||
top: 4px;
|
||||
position: relative;
|
||||
background: #a0aec0;
|
||||
}
|
||||
|
||||
#nav-mobile-btn.close span:nth-child(2) {
|
||||
transform: rotate(-45deg);
|
||||
margin-top: 0px;
|
||||
background: #a0aec0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- component -->
|
||||
<!-- Creaet Blog Portfolio By Joker Banny -->
|
||||
<header class="max-h-full bg-white p-6 grid">
|
||||
<!-- Navbar Menu -->
|
||||
<nav class="w-full grid justify-end">
|
||||
<ul class="hidden md:flex space-x-8 font-bold text-gray-700">
|
||||
<li><a href="#">Works</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<div class="md:hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-700 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Section Hero -->
|
||||
<div class="container mx-auto mt-8 md:mt-0 md:space-x-10 md:grid grid-cols-3 justify-center md:py-40">
|
||||
<div class="grid justify-center items-center order-1 col-span-1">
|
||||
<img class="lg:h-80 md:h-64 h-40 rounded-full" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde" alt="" />
|
||||
</div>
|
||||
<div class="mt-8 md:mt-0 lg:justify-end col-span-2">
|
||||
<h1 class="text-4xl text-gray-800 text-center md:text-left font-bold mb-6">Hi, I am John, Creative Technologist</h1>
|
||||
<p class="text-xl text-gray-800 text-center md:text-left">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
|
||||
<button class="block mt-8 mx-auto md:mx-0 text-2xl py-3 px-6 text-red-50 font-semibold rounded bg-red-400">Download Resume</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="md:gap-4 p-6 bg-blue-50 md:grid">
|
||||
<div class="grid grid-cols-2 justify-between lg:px-40 md:mb-4">
|
||||
<h1 class="justify-start md:text-left text-2xl">Recent posts</h1>
|
||||
<p class="hidden md:block text-right text-2xl">View all</p>
|
||||
</div>
|
||||
<div class="md:grid grid-cols-2 gap-6 lg:px-40">
|
||||
<div>
|
||||
<div class="bg-white p-4">
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<h1 class="text-2xl font-bold text-gray-700">Making a design system from scratch</h1>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<span class="block mb-4 text-xl">12 Feb 20 20 | Design, Pattern</span>
|
||||
<p class="text-lg text-gray-700">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-4 md:mt-0 mt-6">
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<h1 class="text-2xl font-bold text-gray-700">Creating pixel perfect icons in Figma</h1>
|
||||
<p class="hidden">View all</p>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<span class="block mb-4 text-xl">12 Feb 20 20 | Design, Pattern</span>
|
||||
<p class="text-lg text-gray-700">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 p-4 bg-white px-6">
|
||||
<div class="border-b pb-6">
|
||||
<h1 class="mt-2 mb-6 text-center text-xl">Featured works</h1>
|
||||
<div class="md:grid grid-cols-2 gap-6">
|
||||
<div>
|
||||
<img class="md:h-full object-cover" src="https://images.unsplash.com/photo-1602992708529-c9fdb12905c9" alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="my-6 text-2xl font-bold text-gray-700">Designing Dashboards</h1>
|
||||
<span class="text-lg mr-4 py-1 px-4 rounded-full bg-gray-800 text-white">2020</span>
|
||||
<spnan class="text-lg">Dashboard</spnan>
|
||||
<p class="mt-6 text-lg text-gray-700">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="bg-white">
|
||||
<div class="flex mt-20 px-10 items-center justify-around max-md">
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 text-gray-800 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 textgray-800e w-10" 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>
|
||||
</span>
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 text-gray-800 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 text-gray-800 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-center my-10 text-lg">Copyright ©2020 All rights reserved</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1527
public/template/4_template.html
Normal file
1527
public/template/4_template.html
Normal file
File diff suppressed because it is too large
Load Diff
514
public/template/5_template.html
Normal file
514
public/template/5_template.html
Normal file
@@ -0,0 +1,514 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<title>Template 5</title>
|
||||
</head>
|
||||
<body >
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- header 1 start -->
|
||||
|
||||
<nav class="px-2 py-3 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
|
||||
<div x-data="{ open: false , mobile_Open :false }" class="container flex flex-wrap justify-between items-center mx-auto">
|
||||
<a href="#" class="flex">
|
||||
<svg class="mr-3 h-10" width="51" height="70" viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M1 53H27.9022C40.6587 53 51 42.7025 51 30H24.0978C11.3412 30 1 40.2975 1 53Z" fill="#76A9FA"></path><path d="M-0.876544 32.1644L-0.876544 66.411C11.9849 66.411 22.4111 55.9847 22.4111 43.1233L22.4111 8.87674C10.1196 8.98051 0.518714 19.5571 -0.876544 32.1644Z" fill="#A4CAFE"></path><path d="M50 5H23.0978C10.3413 5 0 15.2975 0 28H26.9022C39.6588 28 50 17.7025 50 5Z" fill="#1C64F2"></path></g><defs><clipPath id="clip0"><rect width="51" height="70" fill="white"></rect></clipPath></defs></svg>
|
||||
<span class="self-center text-lg font-semibold text-gray-900 whitespace-nowrap dark:text-white">FlowBite</span>
|
||||
</a>
|
||||
<button data-collapse-toggle="mobile-menu" @click="mobile_Open = ! mobile_Open" type="button" class="inline-flex justify-center items-center ml-3 text-gray-400 rounded-lg md:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-500" aria-controls="mobile-menu-2" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
|
||||
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</button>
|
||||
<div :class="mobile_Open ? 'block w-full md:block md:w-auto' : 'hidden w-full md:block md:w-auto'" id="mobile-menu">
|
||||
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-white dark:bg-blue-600 md:dark:bg-transparent" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<!-- this is the dropdown button -->
|
||||
<button id="dropdownNavbarLink" @click="open = ! open" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full font-medium text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-gray-400 dark:hover:text-white dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>
|
||||
|
||||
<div id="dropdownNavbar" x-show="open" class=" absolute z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
|
||||
<ul class="py-1" aria-labelledby="dropdownLargeButton">
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Settings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Earnings</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="py-1">
|
||||
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Services</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- header 1 end -->
|
||||
|
||||
<!-- hero 1 start -->
|
||||
<section class="text-gray-600 dark:bg-gray-800 body-font">
|
||||
<div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
|
||||
<img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600">
|
||||
<div class="text-center lg:w-2/3 w-full">
|
||||
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-cyan-300">Microdosing synth tattooed vexillologist</h1>
|
||||
<p class="mb-8 leading-relaxed">
|
||||
Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps hexagon mustache umami snackwave tilde chillwave
|
||||
ugh. Pour-over meditation PBR&B pickled ennui celiac mlkshk freegan photo booth af fingerstache pitchfork.
|
||||
</p>
|
||||
<div class="flex justify-center">
|
||||
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none dark:hover:bg-cyan-400 dark:hover:text-gray-800 hover:bg-indigo-600 rounded text-lg">Button</button>
|
||||
<button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 dark:bg-cyan-400 rounded dark:hover:bg-indigo-600 dark:hover:text-gray-200 text-lg">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- hero 1 end -->
|
||||
|
||||
|
||||
|
||||
<!-- feature 1 start -->
|
||||
|
||||
<section class="p-24 bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-10 mx-auto">
|
||||
<h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="underline decoration-blue-500">Components</span></h1>
|
||||
|
||||
<p class="mt-4 text-gray-500 xl:mt-6 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum quam voluptatibus
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3">
|
||||
<div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
|
||||
<span class="inline-block text-blue-500 dark:text-blue-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">elegant Dark Mode</h1>
|
||||
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
||||
</p>
|
||||
|
||||
<a href="#" class="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
|
||||
<span class="inline-block text-blue-500 dark:text-blue-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Easy to customiztions</h1>
|
||||
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
||||
</p>
|
||||
|
||||
<a href="#" class="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="p-8 space-y-3 border-2 border-blue-400 dark:border-blue-300 rounded-xl">
|
||||
<span class="inline-block text-blue-500 dark:text-blue-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
|
||||
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
||||
</p>
|
||||
|
||||
<a href="#" class="inline-flex p-2 text-blue-500 capitalize transition-colors duration-200 transform bg-blue-100 rounded-full dark:bg-blue-500 dark:text-white hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- feature 1 end -->
|
||||
|
||||
|
||||
<!-- pricing 1 start -->
|
||||
<section class="p-24 dark:bg-gray-800">
|
||||
|
||||
<div class="text-center transform scale-75 " >
|
||||
<div class="xl:p-18 xl:m-auto ">
|
||||
<div class="grid xl:grid-cols-3">
|
||||
<div class="z-10 pb-20 mt-20 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
|
||||
<div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
|
||||
style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
|
||||
<path
|
||||
d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
|
||||
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
|
||||
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
|
||||
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
|
||||
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
|
||||
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
|
||||
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-8 text-4xl font-bold">Free</h3>
|
||||
<h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400">$0 / Month</h3>
|
||||
<ul class="space-y-6 text-xl">
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">30-Day Trial</li>
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">500GB Bandwidth</li>
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">200H DiskSpaces™</li>
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">5 Course Submissions</li>
|
||||
</ul>
|
||||
<button
|
||||
class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order</button>
|
||||
</div>
|
||||
<div
|
||||
class="z-10 pb-20 mt-20 transform scale-110 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
|
||||
<div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
|
||||
style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
|
||||
<path
|
||||
d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
|
||||
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
|
||||
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
|
||||
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
|
||||
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
|
||||
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
|
||||
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-8 text-3xl font-bold">Medium</h3>
|
||||
<h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400">$25 / Month</h3>
|
||||
<ul class="space-y-6 text-xl">
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">Incl. Free package</li>
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">1TB Bandwidth</li>
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">1TB DiskSpaces™</li>
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">15 Course Submissions</li>
|
||||
</ul>
|
||||
<button class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order
|
||||
Now</button>
|
||||
</div>
|
||||
<div class="pb-20 mt-20 bg-white dark:bg-gray-800 border-2 rounded-lg shadow-xl xl:p-20 xl:ml-1 hover:shadow-2xl">
|
||||
<div class="w-2/6 p-4 m-auto mt-12 border-4 border-purple-400 rounded-full xl:mt-0">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 213.485 213.485"
|
||||
style="enable-background:new 0 0 213.485 213.485;" xml:space="preserve">
|
||||
<path
|
||||
d="M213.476,86.779c-0.005,0.081-0.056,0.819-0.231,1.995c-2.921,21.747-13.64,44.973-34.97,44.973
|
||||
c-25.05,0-62.748-17.839-71.532-22.171c-8.784,4.332-46.482,22.171-71.532,22.171c-21.33,0-32.049-23.226-34.97-44.972
|
||||
c-0.176-1.177-0.227-1.915-0.232-1.996c-0.142-2.184,1.498-4.077,3.68-4.248c2.165-0.169,4.096,1.444,4.295,3.624
|
||||
c0.004,0.04,0.055,0.577,0.178,1.494c0.934,6.179,4.835,20.462,20.875,20.462c10.768,0,18.494-6.938,26.674-14.285
|
||||
c7.712-6.927,15.687-14.089,26.179-14.089c13.162,0,20.803,9.241,24.854,16.792c4.051-7.551,11.692-16.792,24.853-16.792
|
||||
c10.491,0,18.467,7.162,26.179,14.089c8.181,7.347,15.907,14.285,26.675,14.285c16.04,0,19.94-14.284,20.874-20.463
|
||||
c0.123-0.917,0.174-1.453,0.178-1.496c0.202-2.179,2.119-3.782,4.298-3.619C211.981,82.706,213.618,84.597,213.476,86.779z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-8 text-3xl font-bold">Large</h3>
|
||||
<h3 class="mt-6 mb-6 text-4xl font-semibold text-purple-400 ">$50 / Month</h3>
|
||||
<ul class="space-y-6 text-xl ">
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">Incl. Medium package</li>
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">Unlimited Bandwidth</li>
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">2.4TB DiskSpaces™</li>
|
||||
<li class="dark:hover:text-purple-400 transition-color duration-300">Unlimited Submissions</li>
|
||||
</ul>
|
||||
<button
|
||||
class="w-5/6 h-16 mt-12 text-xl font-semibold text-white bg-purple-400 rounded xl:mb-6">Order</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- pricing 1 end -->
|
||||
|
||||
<!-- testimonial 1 start -->
|
||||
|
||||
<section class="text-gray-600 dark:bg-gray-800 ">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<h1 class="text-3xl font-medium title-font text-gray-900 dark:text-white mb-12 text-center">Testimonials</h1>
|
||||
<div class="flex flex-wrap -m-4">
|
||||
<div class="p-4 md:w-1/2 w-full">
|
||||
<div class="h-full bg-gray-100 dark:bg-gray-600 p-8 rounded">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="block w-5 h-5 dark:text-white text-gray-400 mb-4" viewBox="0 0 975.036 975.036">
|
||||
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
|
||||
</svg>
|
||||
<p class="leading-relaxed mb-6 dark:text-white text-gray-600">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
|
||||
<a class="inline-flex items-center">
|
||||
<img alt="testimonial" src="https://dummyimage.com/106x106" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
|
||||
<span class="flex-grow flex flex-col pl-4">
|
||||
<span class="title-font font-medium text-gray-900">Holden Caulfield</span>
|
||||
<span class="text-gray-500 dark:text-white text-sm">UI DEVELOPER</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 md:w-1/2 w-full">
|
||||
|
||||
<div class="h-full dark:bg-gray-600 bg-gray-100 p-8 rounded">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="block w-5 h-5 text-gray-400 mb-4" viewBox="0 0 975.036 975.036">
|
||||
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>
|
||||
</svg>
|
||||
<p class="leading-relaxed mb-6 dark:text-white text-gray-600">Synth chartreuse iPhone lomo cray raw denim brunch everyday carry neutra before they sold out fixie 90's microdosing. Tacos pinterest fanny pack venmo, post-ironic heirloom try-hard pabst authentic iceland.</p>
|
||||
<a class="inline-flex items-center">
|
||||
<img alt="testimonial" src="https://dummyimage.com/107x107" class="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center">
|
||||
<span class="flex-grow flex flex-col pl-4">
|
||||
<span class="title-font font-medium text-gray-900">Alper Kamu</span>
|
||||
<span class="text-gray-500 dark:text-white text-sm">DESIGNER</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- testimonial 1 end -->
|
||||
|
||||
|
||||
<!-- contact 1 start -->
|
||||
|
||||
<section class="py-24 dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="grid max-w-6xl grid-cols-1 px-6 mx-auto lg:px-8 md:grid-cols-2 md:divide-x">
|
||||
<div class="py-6 md:py-0 md:px-6">
|
||||
<h1 class="text-4xl font-bold">Get in touch</h1>
|
||||
<p class="pt-2 pb-4">Fill in the form to start a conversation</p>
|
||||
<div class="space-y-4">
|
||||
<p class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
|
||||
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Fake address, 9999 City</span>
|
||||
</p>
|
||||
<p class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
|
||||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
|
||||
</svg>
|
||||
<span>123456789</span>
|
||||
</p>
|
||||
<p class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||
</svg>
|
||||
<span>contact@business.com</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form novalidate="" class="flex flex-col py-6 space-y-6 md:py-0 md:px-6 ng-untouched ng-pristine ng-valid">
|
||||
<label class="block">
|
||||
<span class="mb-1">Full name</span>
|
||||
<input type="text" placeholder="Leroy Jenkins" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="mb-1">Email address</span>
|
||||
<input type="email" placeholder="leroy@jenkins.com" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="mb-1">Message</span>
|
||||
<textarea rows="3" class="block w-full rounded-md focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800"></textarea>
|
||||
</label>
|
||||
<button type="button" class="self-center px-8 py-3 text-lg rounded focus:ring hover:ring focus:ring-opacity-75 dark:bg-green-400 dark:text-gray-900 focus:ring-green-400 hover:ring-green-400">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- contact 1 end -->
|
||||
|
||||
|
||||
|
||||
<!--footer 2 start-->
|
||||
|
||||
<section class="flex items-end w-full bg-white dark:bg-gray-800">
|
||||
|
||||
<footer class="w-full text-gray-700 bg-gray-100 dark:bg-gray-800 body-font">
|
||||
<div
|
||||
class="container flex flex-col flex-wrap px-5 py-24 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap">
|
||||
<div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
|
||||
<a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-sky-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Design, Code and Ship!</p>
|
||||
<div class="mt-4">
|
||||
<span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
||||
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z">
|
||||
</path>
|
||||
<circle cx="4" cy="4" r="2" stroke="none"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left">
|
||||
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
||||
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">About</h2>
|
||||
<nav class="mb-10 list-none">
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Company</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Careers</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Blog</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
||||
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 dark:text-sky-300 uppercase title-font">Support</h2>
|
||||
<nav class="mb-10 list-none">
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Contact Support</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Help Resources</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Release Updates</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
||||
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Platform
|
||||
</h2>
|
||||
<nav class="mb-10 list-none">
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Terms & Privacy</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Pricing</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">FAQ</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
||||
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Contact</h2>
|
||||
<nav class="mb-10 list-none">
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Send a Message</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Request a Quote</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">+123-456-7890</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</section>
|
||||
<!--footer 2 end-->
|
||||
<!--footer 1 start-->
|
||||
|
||||
|
||||
<footer class="p-4 dark:bg-gray-800 ">
|
||||
<div class=" mx-5 flex flex-col lg:flex-row items-center ">
|
||||
<div class="w-full dark:text-gray-300 lg:w-auto lg:mr-auto text-center lg:text-left">© 2019 Dunder Mifflin</div>
|
||||
<div class="flex justify-center items-center mt-4 lg:mt-0"><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/message.svg" alt=""><img class="w-6 h-6 mx-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/share.svg" alt=""><img class="w-6 h-6" src="https://tailwind-css-components.appseed.us/placeholders/icons/star.svg" alt=""></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!--footer 1 end-->
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
637
public/template/6_template.html
Normal file
637
public/template/6_template.html
Normal file
@@ -0,0 +1,637 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 6</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
<!-- header 2 start -->
|
||||
|
||||
<section class="relative w-full px-8 text-gray-700 bg-white dark:bg-gray-800 body-font">
|
||||
<div class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
|
||||
<a href="#_" class="relative z-10 flex items-center w-auto text-2xl font-extrabold leading-none dark:text-gray-400 text-black select-none">WEBSITE.</a>
|
||||
|
||||
<nav class="top-0 left-0 z-0 flex items-center justify-center w-full h-full py-5 -ml-0 space-x-5 text-base md:-ml-5 md:py-0 md:absolute">
|
||||
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Home</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform dark:bg-gray-400 bg-gray-900" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#_" class="relative font-medium leading-6 dark:text-gray-400 dark:hover:text-gray-200 text-gray-600 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Features</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#_" class="relative font-medium leading-6 text-gray-600 dark:text-gray-400 dark:hover:text-gray-200 transition duration-150 ease-out hover:text-gray-900" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Pricing</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="#_" class="relative font-medium leading-6 text-gray-600 transition duration-150 ease-out hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false">
|
||||
<span class="block">Blog</span>
|
||||
<span class="absolute bottom-0 left-0 inline-block w-full h-0.5 -mb-1 overflow-hidden">
|
||||
<span x-show="hover" class="absolute inset-0 inline-block w-full h-full transform bg-gray-900 dark:bg-gray-400" x-transition:enter="transition ease duration-200" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" x-transition:leave="transition ease-out duration-300" x-transition:leave-start="scale-100" x-transition:leave-end="scale-0"></span>
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="relative z-10 inline-flex items-center space-x-3 md:ml-5 lg:justify-end">
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-gray-600 whitespace-no-wrap bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:shadow-none">
|
||||
Sign in
|
||||
</a>
|
||||
<span class="inline-flex rounded-md shadow-sm">
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-blue-600 border border-blue-700 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- header 2 end -->
|
||||
|
||||
|
||||
<!-- hero 2 start -->
|
||||
<div class="relative flex flex-col items-center justify-center min-h-screen dark:bg-gray-800 bg-white bg-cover min-w-screen">
|
||||
<div class="flex flex-col items-center justify-center p-10 mx-auto lg:flex-row lg:max-w-6xl lg:p-0">
|
||||
<div
|
||||
class="container relative z-20 flex flex-col w-full px-5 pb-1 pr-12 mb-16 text-2xl text-gray-700 lg:w-1/2 sm:px-0 md:px-10 sm:items-center lg:items-start lg:mb-0">
|
||||
<h1
|
||||
class="relative z-20 text-5xl font-extrabold leading-none text-purple-500 xl:text-6xl sm:text-center lg:text-left">
|
||||
Designed with<br class="md:hidden lg:block"> <span class="text-gray-800">you in mind</span></h1>
|
||||
<p class="relative z-20 block mt-6 text-base text-gray-500 xl:text-xl sm:text-center lg:text-left">We've
|
||||
crafted
|
||||
the ultimate design tool that will help you build the design of your dreams. Built with configuration in
|
||||
mind,
|
||||
you can fully customize every aspect.</p>
|
||||
<div class="relative flex mt-4">
|
||||
<a href="#_"
|
||||
class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-purple-500 border border-transparent rounded-full shadow hover:bg-purple-600 focus:outline-none focus:border-purple-600 focus:shadow-outline-purple md:py-4 md:text-lg xl:text-xl md:px-10">Get
|
||||
Started</a>
|
||||
<a href="#_"
|
||||
class="relative flex items-center self-start justify-center py-3 pl-10 pr-5 mt-5 ml-5 text-base font-medium leading-tight text-gray-400 transition duration-150 ease-in-out bg-gray-100 border-transparent rounded-full shadow-sm md:pl-16 md:pr-10 hover:text-purple-500 focus:outline-none md:py-4 md:text-lg xl:text-xl">
|
||||
<svg class="absolute left-0 w-6 h-6 ml-3 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="text-purple-500">How It Works</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-full px-5 rounded-lg cursor-pointer md:w-2/3 lg:w-1/2 group xl:px-0">
|
||||
<div class="absolute top-0 left-0 w-11/12 -mt-20 opacity-50">
|
||||
<svg class="w-full h-full ml-4 text-purple-100 dark:text-gray-700" viewBox="0 0 200 200"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor"
|
||||
d="M45,-78C58.3,-70.3,69,-58.2,75.2,-44.4C81.3,-30.7,82.9,-15.3,83.5,0.4C84.2,16,83.8,32.1,76.5,43.9C69.2,55.7,55.1,63.3,41.2,69.4C27.3,75.4,13.6,80,-0.7,81.2C-15.1,82.5,-30.1,80.3,-41.2,72.6C-52.2,64.9,-59.2,51.6,-67.1,38.5C-75.1,25.5,-83.9,12.8,-83.8,0C-83.8,-12.7,-74.9,-25.4,-65.8,-36.4C-56.7,-47.4,-47.4,-56.7,-36.4,-65.7C-25.4,-74.7,-12.7,-83.5,1.6,-86.2C15.9,-89,31.8,-85.7,45,-78Z"
|
||||
transform="translate(100 100)" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="relative overflow-hidden rounded-md shadow-2xl cursor-pointer group">
|
||||
<div class="absolute flex items-center justify-center w-full h-full">
|
||||
<span class="flex items-center justify-center w-20 h-20 bg-purple-500 rounded-full shadow-2xl">
|
||||
<svg class="w-auto h-8 ml-1 text-white fill-current" viewBox="0 0 52 66"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
<img src="https://images.unsplash.com/photo-1493857671505-72967e2e2760?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&h=1603&q=80"
|
||||
class="z-10 object-cover w-full h-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- hero 2 end -->
|
||||
|
||||
<!-- start cta 2 -->
|
||||
<section class="flex justify-around pb-24 dark:bg-gray-800">
|
||||
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||||
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Read more
|
||||
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||||
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Read more
|
||||
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||
<a href="#">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
|
||||
</a>
|
||||
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
|
||||
<a href="#" class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
Read more
|
||||
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- end cta 2 -->
|
||||
|
||||
|
||||
<!-- feature 2 start -->
|
||||
|
||||
<section class="bg-white dark:bg-gray-900 p-24">
|
||||
<div class="container py-10 mx-auto">
|
||||
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-16 md:grid-cols-2 xl:grid-cols-3">
|
||||
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
|
||||
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Copy & paste components</h1>
|
||||
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
||||
</p>
|
||||
|
||||
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
||||
<span class="mx-1">read more</span>
|
||||
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
|
||||
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Zero Configrations</h1>
|
||||
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
||||
</p>
|
||||
|
||||
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
||||
<span class="mx-1">read more</span>
|
||||
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
|
||||
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
|
||||
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
||||
</p>
|
||||
|
||||
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
||||
<span class="mx-1">read more</span>
|
||||
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- feature 2 end -->
|
||||
|
||||
|
||||
|
||||
<!-- pricing 2 start -->
|
||||
|
||||
<section x-data="{ toggle: 'basic' }"
|
||||
class="relative py-24 bg-gray-200 dark:bg-gray-800 min-w-screen animation-fade animation-delay">
|
||||
<div class="container w-full px-10 mx-auto sm:px-5 ">
|
||||
<div class="sm:flex ">
|
||||
<aside class="w-full sm:flex-initial">
|
||||
<div @click="toggle = 'basic'"
|
||||
:class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'basic' }"
|
||||
class="flex mt-1 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
|
||||
<div class="self-center flex-shrink p-5">
|
||||
<svg x-show="toggle === 'basic'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
|
||||
<polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
<svg x-show="toggle != 'basic'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
|
||||
xml:space="preserve">
|
||||
<ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-grow px-0 py-5 md:px-5">
|
||||
<div class="text-2xl">Basic</div>
|
||||
<div class="pt-1 text-sm">Start pack + 3 submissions</div>
|
||||
</div>
|
||||
<div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 5</div>
|
||||
</div>
|
||||
<div @click="toggle = 'silver'"
|
||||
:class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'silver' }"
|
||||
class="flex mt-3 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
|
||||
<div class="self-center flex-shrink p-5">
|
||||
<svg x-show="toggle === 'silver'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
|
||||
<polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
<svg x-show="toggle != 'silver'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
|
||||
xml:space="preserve">
|
||||
<ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-grow px-0 py-5 md:px-5">
|
||||
<div class="text-2xl">Silver</div>
|
||||
<div class="pt-1 text-sm text-gray-500">Start pack + 10 submissions</div>
|
||||
</div>
|
||||
<div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 10</div>
|
||||
</div>
|
||||
<div @click="toggle = 'gold'" :class="{ 'bg-blue-500 text-white hover:bg-blue-700': toggle === 'gold' }"
|
||||
class="flex mt-3 text-black bg-white rounded-md hover:text-white hover:bg-gray-700">
|
||||
<div class="self-center flex-shrink p-5">
|
||||
<svg x-show="toggle === 'gold'" class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<ellipse style="fill:#32BEA6;" cx="256" cy="256" rx="256" ry="255.832" />
|
||||
<polygon style="fill:#FFFFFF;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
<svg x-show="toggle != 'gold'" class="w-8 text-gray-700 stroke-current stroke-2" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;"
|
||||
xml:space="preserve">
|
||||
<ellipse style="fill:#FFFFFF;" cx="256" cy="256" rx="256" ry="255.832" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-grow px-0 py-5 md:px-5">
|
||||
<div class="text-2xl">Gold</div>
|
||||
<div class="pt-1 text-sm text-gray-500">Start pack + 20 submissions</div>
|
||||
</div>
|
||||
<div class="self-center flex-shrink w-32 px-5 py-5 text-2xl text-center md:px-5">$ 15</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div x-show="toggle === 'basic'"
|
||||
class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
|
||||
<div class="flex-grow px-8 py-5 dark:text-white dark:border-2 dark:rounded-l-md dark:border-emerald-300">
|
||||
<div class="text-4xl">
|
||||
Basic Package
|
||||
</div>
|
||||
<div class="mt-0 text-lg text-gray-500">3 Submissions</div>
|
||||
|
||||
<div class="flex mt-5 ">
|
||||
<div class="self-center flex-shrink">
|
||||
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="self-center flex-grow ml-3">Starter pack</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="self-center flex-shrink">
|
||||
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="self-center flex-grow ml-3">3 Submissions</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="self-center flex-shrink">
|
||||
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="self-center flex-grow ml-3">FREE Ebook</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="mt-8">
|
||||
<a href="#">
|
||||
<div
|
||||
class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
|
||||
Choose Package
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-64 h-full bg-blue-500 dark:border-l-2 bg-opacity-25 rounded-r md:flex-shrink bg-[url(https://picsum.photos/400/400?grayscale)]"
|
||||
></div>
|
||||
</div>
|
||||
<div x-show="toggle === 'silver'"
|
||||
class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
|
||||
<div class="flex-grow px-8 py-5 dark:text-white">
|
||||
<div class="text-4xl ">
|
||||
Silver Package
|
||||
</div>
|
||||
<div class="mt-0 text-lg text-gray-500">10 Submissions</div>
|
||||
|
||||
<div class="flex mt-5">
|
||||
<div class="self-center flex-shrink">
|
||||
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="self-center flex-grow ml-3">Starter pack</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="self-center flex-shrink">
|
||||
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="self-center flex-grow ml-3">10 Submissions</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="self-center flex-shrink">
|
||||
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="self-center flex-grow ml-3">FREE Ebook</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="mt-8">
|
||||
<a href="#">
|
||||
<div
|
||||
class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
|
||||
Choose Package
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-64 h-full bg-blue-500 dark:border-l-2 dark:border-emerald-300 bg-opacity-25 rounded-r md:flex-shrink"
|
||||
style="background: url('https://picsum.photos/400/400?grayscale');"></div>
|
||||
</div>
|
||||
<div x-show="toggle === 'gold'"
|
||||
class="flex w-full mt-10 bg-white dark:bg-gray-800 rounded-md sm:mt-1 sm:ml-5 sm:flex-initial">
|
||||
<div class="flex-grow px-8 py-5 dark:text-white">
|
||||
<div class="text-4xl">
|
||||
Gold Package
|
||||
</div>
|
||||
<div class="mt-0 text-lg text-gray-500">20 Submissions</div>
|
||||
|
||||
<div class="flex mt-5">
|
||||
<div class="self-center flex-shrink">
|
||||
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="self-center flex-grow ml-3">Starter pack</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="self-center flex-shrink">
|
||||
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="self-center flex-grow ml-3">20 Submissions</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="self-center flex-shrink">
|
||||
<svg class="w-8" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
|
||||
style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<polygon style="fill:#32BEA6;" points="235.472,392.08 114.432,297.784 148.848,253.616 223.176,311.52 345.848,134.504
|
||||
391.88,166.392 " />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="self-center flex-grow ml-3">FREE Ebook</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="mt-8">
|
||||
<a href="#">
|
||||
<div
|
||||
class="w-full px-8 py-4 text-center text-white bg-green-500 rounded-md hover:bg-green-800 pointer-cursor">
|
||||
Choose Package
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-64 h-full bg-blue-500 bg-opacity-25 dark:border-l-2 dark:border-emerald-300 rounded-r md:flex-shrink"
|
||||
style="background: url('https://picsum.photos/400/400?grayscale');"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- pricing 2 end -->
|
||||
|
||||
|
||||
<!--footer 2 start-->
|
||||
|
||||
<section class="pt-24 flex items-end w-full bg-white dark:bg-gray-800">
|
||||
|
||||
<footer class="w-full text-gray-700 bg-gray-100 dark:bg-gray-800 body-font">
|
||||
<div
|
||||
class="container flex flex-col flex-wrap px-5 py-24 mx-auto md:items-center lg:items-start md:flex-row md:flex-no-wrap">
|
||||
<div class="flex-shrink-0 w-64 mx-auto text-center md:mx-0 md:text-left">
|
||||
<a class="flex items-center justify-center font-medium text-gray-900 title-font md:justify-start">
|
||||
<svg class="w-auto h-5 text-gray-900 dark:text-sky-300 fill-current" viewBox="0 0 202 69"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</a>
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Design, Code and Ship!</p>
|
||||
<div class="mt-4">
|
||||
<span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-start">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
||||
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
|
||||
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="ml-3 text-gray-500 cursor-pointer hover:text-gray-700 dark:text-gray-300 dark:hover:text-sky-300">
|
||||
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path stroke="none"
|
||||
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z">
|
||||
</path>
|
||||
<circle cx="4" cy="4" r="2" stroke="none"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap flex-grow mt-10 -mb-10 text-center md:pl-20 md:mt-0 md:text-left">
|
||||
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
||||
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">About</h2>
|
||||
<nav class="mb-10 list-none">
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Company</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Careers</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Blog</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
||||
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 dark:text-sky-300 uppercase title-font">Support</h2>
|
||||
<nav class="mb-10 list-none">
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Contact Support</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Help Resources</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Release Updates</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
||||
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Platform
|
||||
</h2>
|
||||
<nav class="mb-10 list-none">
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Terms & Privacy</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Pricing</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">FAQ</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="w-full px-4 lg:w-1/4 md:w-1/2">
|
||||
<h2 class="mb-3 text-sm font-medium tracking-widest text-gray-900 uppercase title-font dark:text-sky-300">Contact</h2>
|
||||
<nav class="mb-10 list-none">
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Send a Message</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">Request a Quote</a>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<a class="text-gray-500 cursor-pointer hover:text-gray-900 dark:text-gray-300 dark:hover:text-sky-300">+123-456-7890</a>
|
||||
</li>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-300 dark:bg-gray-700">
|
||||
<div class="container px-5 py-4 mx-auto">
|
||||
<p class="text-sm text-gray-700 dark:text-white capitalize xl:text-center">© 2020 All rights reserved </p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</section>
|
||||
<!--footer 2 end-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
554
public/template/7_template.html
Normal file
554
public/template/7_template.html
Normal file
@@ -0,0 +1,554 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 7</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
<!-- header 3 start -->
|
||||
|
||||
<header class="text-gray-600 dark:bg-gray-800 body-font">
|
||||
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
|
||||
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
|
||||
</svg>
|
||||
<span class="ml-3 text-xl dark:text-gray-400">Tailblocks</span>
|
||||
</a>
|
||||
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">First Link</a>
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Second Link</a>
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Third Link</a>
|
||||
<a class="mr-5 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Fourth Link</a>
|
||||
</nav>
|
||||
<button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
|
||||
Button
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- header 3 end -->
|
||||
|
||||
|
||||
<!-- hero 3 start -->
|
||||
|
||||
<div class="relative flex flex-col items-center justify-center min-h-screen bg-cover "
|
||||
style="background-image:url('https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80')">
|
||||
<div class="absolute inset-0 w-full h-full bg-black bg-opacity-75"></div>
|
||||
|
||||
<div class="flex flex-col max-w-6xl md:flex-row mx-auto">
|
||||
<div class="container relative flex flex-col md:w-1/2 px-10 pb-5 pr-12 text-2xl font-hairline text-white">
|
||||
<h2 class="relative z-20 text-5xl font-extrabold leading-tight text-white">Build a culture<br> that excels
|
||||
</h2>
|
||||
<p class="relative z-20 block mt-4 text-xl">We've created the ultimate resource for turning your culture
|
||||
into a
|
||||
super-powered productivity machine by encouraging collaboration growth, and incentives!</p>
|
||||
<div class="flex mt-4">
|
||||
<a href="#_"
|
||||
class="flex items-center self-start justify-center px-5 py-3 mt-5 text-base font-medium leading-tight text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-lg shadow hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo md:py-4 md:text-lg md:px-8">Get
|
||||
Started</a>
|
||||
<a href="#_"
|
||||
class="flex items-center self-start justify-center px-5 py-3 mt-5 ml-5 text-base font-medium leading-tight text-indigo-500 transition duration-150 ease-in-out bg-gray-200 border-transparent rounded-lg shadow hover:bg-white focus:outline-none focus:border-gray-100 focus:shadow-outline-gray md:py-4 md:text-lg md:px-8">How
|
||||
It Works</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative md:w-1/2 overflow-hidden rounded-lg shadow-2xl cursor-pointer group">
|
||||
<div class="absolute flex items-center justify-center w-full h-full bg-black bg-opacity-25">
|
||||
<span class="flex items-center justify-center w-20 h-20 bg-white bg-opacity-75 rounded-full">
|
||||
<svg class="w-auto h-8 ml-1 text-indigo-600 fill-current" viewBox="0 0 52 66"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M50 30.7L4.1.6C2.6-.4.8.9.8 2.9v60.3c0 2 1.8 3.3 3.3 2.3L50 35.3c1.5-1 1.5-3.6 0-4.6z"
|
||||
fill-rule="nonzero" /></svg>
|
||||
</span>
|
||||
</div>
|
||||
<img src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3290&q=80"
|
||||
class="object-cover w-full h-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- hero 3 end -->
|
||||
|
||||
|
||||
<!-- accordion 2 start -->
|
||||
|
||||
|
||||
<div class="flex items-center justify-center py-20 transition-height duration-300 from-purple-100 via-red-300 to-indigo-500 bg-gradient-to-br">
|
||||
<div class='w-full max-w-lg px-10 py-8 mx-auto bg-white rounded-lg shadow-xl'>
|
||||
<h1 class="text-xl mb-10 text-center">TAILWINDCSS ACCORDION WITH <code><details> <summary></code> HTML Tag</h1>
|
||||
|
||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 after:content-['+'] ">Morbi at sagittis velit</summary>
|
||||
<p class="px-4 py-3">
|
||||
Nunc posuere dapibus urna quis cursus. Mauris malesuada tincidunt diam vel placerat mi tincidunt ac. Nullam augue urna, venenatis ut blandit eget, auctor vel eros. In ut dolor ante
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">Etiam ut lacus in enim sagittis posuere at a elit</summary>
|
||||
<p class="px-4 py-3 transition-all duration-700">
|
||||
Fusce sed laoreet ex. Aenean justo nisl, eleifend eget eleifend sit amet, imperdiet id libero. Suspendisse et tempus leo, et lacinia arcu. Etiam at ante in est efficitur fringilla eleifend nec tellus. Integer sed auctor lectus, nec ullamcorper arcu. Nullam nec eros elit. Nulla tempor massa ut quam elementum dignissim. Sed eu pulvinar est, vel vehicula dolor. Pellentesque in ante vel elit facilisis consectetur eu id felis
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details class="w-full bg-white border border-blue-500 cursor-pointer mb-3 transition-all duration-700 ">
|
||||
<summary class="w-full bg-white text-dark flex justify-between px-4 py-3 transition-all duration-700 after:content-['+']">
|
||||
Nam auctor fringilla magna id porta
|
||||
</summary>
|
||||
<p class="px-4 py-3 transition-all duration-700">
|
||||
Etiam maximus vitae eros eu vestibulum. Donec posuere, magna non tincidunt dignissim, magna tortor mollis augue, at maximus ante lacus vel tellus. Vestibulum vestibulum consectetur tortor id sagittis. Suspendisse nisi ipsum, pretium a lorem at, laoreet condimentum arcu
|
||||
</p>
|
||||
</details>
|
||||
|
||||
|
||||
<!-- THE CSS -->
|
||||
<style>
|
||||
|
||||
details[open] summary::after {
|
||||
content: "-";
|
||||
transition: all;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- accordion 2 end -->
|
||||
|
||||
|
||||
<!-- team 1 start -->
|
||||
<section class="dark:bg-gray-800 bg-white py-24">
|
||||
<section class="container p-6 mx-auto ">
|
||||
<h2 class="text-xl font-medium text-gray-800 capitalize dark:text-white md:text-2xl">Our Team</h2>
|
||||
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="grid gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
<div class="w-full max-w-xs text-center">
|
||||
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Ahmed Omer</h3>
|
||||
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">CEO</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-xs text-center">
|
||||
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Jane Doe</h3>
|
||||
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Co-founder</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-xs text-center">
|
||||
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Steve Ben</h3>
|
||||
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">UI/UX</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-xs text-center">
|
||||
<img class="object-cover object-center w-full h-48 mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Patterson Johnson</h3>
|
||||
<span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Software Engineer</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
<!-- team 1 end -->
|
||||
|
||||
|
||||
<!-- feature 2 start -->
|
||||
|
||||
<section class="bg-white dark:bg-gray-900 py-24">
|
||||
<div class="container px-6 py-10 mx-auto">
|
||||
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">explore our <br> awesome <span class="text-blue-500">Components</span></h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-16 md:grid-cols-2 xl:grid-cols-3">
|
||||
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
|
||||
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Copy & paste components</h1>
|
||||
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
||||
</p>
|
||||
|
||||
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
||||
<span class="mx-1">read more</span>
|
||||
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
|
||||
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Zero Configrations</h1>
|
||||
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
||||
</p>
|
||||
|
||||
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
||||
<span class="mx-1">read more</span>
|
||||
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center p-6 space-y-3 text-center bg-gray-100 rounded-xl dark:bg-gray-800">
|
||||
<span class="inline-block p-3 text-blue-500 bg-blue-100 rounded-full dark:text-white dark:bg-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<h1 class="text-2xl font-semibold text-gray-700 capitalize dark:text-white">Simple & clean designs</h1>
|
||||
|
||||
<p class="text-gray-500 dark:text-gray-300">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ab nulla quod dignissimos vel non corrupti doloribus voluptatum eveniet
|
||||
</p>
|
||||
|
||||
<a href="#" class="flex items-center -mx-1 text-sm text-blue-500 capitalize transition-colors duration-200 transform dark:text-blue-400 hover:underline hover:text-blue-600 dark:hover:text-blue-500">
|
||||
<span class="mx-1">read more</span>
|
||||
<svg class="w-4 h-4 mx-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- feature 2 end -->
|
||||
|
||||
<!-- testimonial 3 start -->
|
||||
|
||||
<section class="text-gray-600 dark:bg-gray-800 body-font ">
|
||||
<div class="container px-5 py-24 mx-auto">
|
||||
<div class="flex flex-wrap -m-4">
|
||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 dark:border-2 dark:border-indigo-500 bg-gray-100" src="https://dummyimage.com/302x302">
|
||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
|
||||
<p class="text-gray-500 dark:text-indigo-500">Senior Product Designer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500" src="https://dummyimage.com/300x300">
|
||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
|
||||
<p class="text-gray-500 dark:text-indigo-500">UI Develeoper</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-1/3 lg:mb-0 p-4">
|
||||
<div class="h-full text-center">
|
||||
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100 dark:border-2 dark:border-indigo-500 " src="https://dummyimage.com/305x305">
|
||||
<p class="leading-relaxed dark:text-white">Edison bulb retro cloud bread echo park, helvetica stumptown taiyaki taxidermy 90's cronut +1 kinfolk. Single-origin coffee ennui shaman taiyaki vape DIY tote bag drinking vinegar cronut adaptogen squid fanny pack vaporware.</p>
|
||||
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
|
||||
<h2 class="text-gray-900 dark:text-white font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
|
||||
<p class="text-gray-500 dark:text-indigo-500">CTO</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- testimonial 3 end -->
|
||||
|
||||
|
||||
|
||||
<!-- card 2 start -->
|
||||
<section class="flex flex-col md:flex-row justify-between dark:bg-gray-800 dark:text-gray-50 py-24">
|
||||
<div class=" my-10 mx-auto max-w-xs p-6 rounded-md shadow-md dark:bg-gray-900 dark:text-gray-50">
|
||||
<img src="https://source.unsplash.com/random/300x300/?1" alt="" class="object-cover object-center w-full rounded-md h-72 dark:bg-gray-500">
|
||||
<div class="mt-6 mb-2">
|
||||
<span class="block text-xs font-medium tracking-widest uppercase dark:text-green-400">Quisque</span>
|
||||
<h2 class="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
|
||||
</div>
|
||||
<p class="dark:text-gray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
|
||||
</div>
|
||||
<div class=" my-10 mx-auto max-w-xs p-6 rounded-md shadow-md dark:bg-gray-900 dark:text-gray-50">
|
||||
<img src="https://source.unsplash.com/random/300x300/?1" alt="" class="object-cover object-center w-full rounded-md h-72 dark:bg-gray-500">
|
||||
<div class="mt-6 mb-2">
|
||||
<span class="block text-xs font-medium tracking-widest uppercase dark:text-green-400">Quisque</span>
|
||||
<h2 class="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
|
||||
</div>
|
||||
<p class="dark:text-gray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
|
||||
</div>
|
||||
<div class=" my-10 mx-auto max-w-xs p-6 rounded-md shadow-md dark:bg-gray-900 dark:text-gray-50">
|
||||
<img src="https://source.unsplash.com/random/300x300/?1" alt="" class="object-cover object-center w-full rounded-md h-72 dark:bg-gray-500">
|
||||
<div class="mt-6 mb-2">
|
||||
<span class="block text-xs font-medium tracking-widest uppercase dark:text-green-400">Quisque</span>
|
||||
<h2 class="text-xl font-semibold tracking-wide">Nam maximus purus</h2>
|
||||
</div>
|
||||
<p class="dark:text-gray-100">Mauris et lorem at elit tristique dignissim et ullamcorper elit. In sed feugiat mi. Etiam ut lacinia dui.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- card 2 end -->
|
||||
|
||||
|
||||
<!-- contact 1 start -->
|
||||
|
||||
<section class="py-24 dark:bg-gray-800 dark:text-gray-50">
|
||||
<div class="grid container grid-cols-1 px-6 mx-auto lg:px-8 md:grid-cols-2 md:divide-x">
|
||||
<div class="py-6 md:py-0 md:px-6">
|
||||
<h1 class="text-4xl font-bold">Get in touch</h1>
|
||||
<p class="pt-2 pb-4">Fill in the form to start a conversation</p>
|
||||
<div class="space-y-4">
|
||||
<p class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
|
||||
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span>Fake address, 9999 City</span>
|
||||
</p>
|
||||
<p class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
|
||||
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
|
||||
</svg>
|
||||
<span>123456789</span>
|
||||
</p>
|
||||
<p class="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mr-2 sm:mr-6">
|
||||
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
|
||||
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
|
||||
</svg>
|
||||
<span>contact@business.com</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form novalidate="" class="flex flex-col py-6 space-y-6 md:py-0 md:px-6 ng-untouched ng-pristine ng-valid">
|
||||
<label class="block">
|
||||
<span class="mb-1">Full name</span>
|
||||
<input type="text" placeholder="Leroy Jenkins" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="mb-1">Email address</span>
|
||||
<input type="email" placeholder="leroy@jenkins.com" class="block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="mb-1">Message</span>
|
||||
<textarea rows="3" class="block w-full rounded-md focus:ring focus:ring-opacity-75 focus:ring-green-400 dark:bg-gray-800"></textarea>
|
||||
</label>
|
||||
<button type="button" class="self-center px-8 py-3 text-lg rounded focus:ring hover:ring focus:ring-opacity-75 dark:bg-green-400 dark:text-gray-900 focus:ring-green-400 hover:ring-green-400">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- contact 1 end -->
|
||||
|
||||
|
||||
<!--footer 3 start -->
|
||||
|
||||
<footer class="bg-gray-900">
|
||||
<div class="container px-4 py-16 mx-auto sm:px-6 lg:px-8">
|
||||
<div class="lg:flex lg:gap-8">
|
||||
<div>
|
||||
<span class="block w-32 h-10 bg-gray-700 rounded-lg"></span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-8 mt-8 lg:mt-0 lg:grid-cols-5 lg:gap-y-16">
|
||||
<div class="col-span-2">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-white">
|
||||
Get the latest news!
|
||||
</h2>
|
||||
|
||||
<p class="mt-6 text-gray-400">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse non cupiditate quae nam molestias.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 lg:col-span-3 lg:flex lg:items-end">
|
||||
<form class="w-full text-white">
|
||||
<label for="email" class="sr-only"> Email </label>
|
||||
|
||||
<div class="p-2 border sm:flex sm:items-center border-white/10">
|
||||
<input class="w-full h-12 p-3 text-sm font-medium tracking-widest placeholder-gray-400 uppercase bg-transparent border-none" type="email" id="email" placeholder="Enter your email">
|
||||
|
||||
<button class="w-full h-12 px-6 py-3 mt-1 text-sm font-bold tracking-wide uppercase bg-red-700 sm:ml-4 sm:flex-shrink-0 sm:w-auto sm:mt-0" type="submit">
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
||||
<p class="font-bold text-white"> Services </p>
|
||||
|
||||
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
||||
<a class="inline-block" href=""> 1on1 Coaching </a>
|
||||
<a class="inline-block" href=""> Company Review </a>
|
||||
<a class="inline-block" href=""> Accounts Review </a>
|
||||
<a class="inline-block" href=""> HR Consulting </a>
|
||||
<a class="inline-block" href=""> SEO Optimisation </a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
||||
<p class="font-bold text-white"> Company </p>
|
||||
|
||||
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
||||
<a class="inline-block" href=""> About </a>
|
||||
<a class="inline-block" href=""> Meet the Team </a>
|
||||
<a class="inline-block" href=""> History </a>
|
||||
<a class="inline-block" href=""> Careers </a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
||||
<p class="font-bold text-white"> Helpful Links </p>
|
||||
|
||||
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
||||
<a class="inline-block" href=""> Contact </a>
|
||||
<a class="inline-block" href=""> FAQs </a>
|
||||
<a class="inline-block" href=""> Live Chat </a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
||||
<p class="font-bold text-white"> Legal </p>
|
||||
|
||||
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
||||
<a class="inline-block" href=""> Accessibility </a>
|
||||
<a class="inline-block" href=""> Returns Policy </a>
|
||||
<a class="inline-block" href=""> Refund Policy </a>
|
||||
<a class="inline-block" href=""> Hiring Statistics </a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 pt-6 border-t sm:col-span-1 border-white/10">
|
||||
<p class="font-bold text-white"> Downloads </p>
|
||||
|
||||
<nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
|
||||
<a class="inline-block" href=""> Marketing Calendar </a>
|
||||
<a class="inline-block" href=""> SEO Infographics </a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="flex col-span-2 space-x-4 text-gray-500 lg:col-span-5">
|
||||
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
||||
<span class="sr-only"> Facebook </span>
|
||||
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
||||
<span class="sr-only"> Instagram </span>
|
||||
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
||||
<span class="sr-only"> Twitter </span>
|
||||
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
||||
<span class="sr-only"> GitHub </span>
|
||||
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="hover:opacity-75" href="" target="_blank" rel="noreferrer">
|
||||
<span class="sr-only"> Dribbble </span>
|
||||
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 mt-12 border-t border-white/10">
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<p class="text-xs text-center text-gray-400 lg:text-left">
|
||||
Copyright © 2022. Company Name. All rights reserved.
|
||||
</p>
|
||||
|
||||
<nav class="flex justify-center space-x-4 text-xs text-gray-400 lg:justify-end">
|
||||
<a href=""> Terms & Conditions </a>
|
||||
<a href=""> Privacy Policy </a>
|
||||
<a href=""> Cookies </a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!--footer 3 end -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
public/template/8_template.html
Normal file
49
public/template/8_template.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 8</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
public/template/9_template.html
Normal file
49
public/template/9_template.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
||||
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||||
<title>Template 9</title>
|
||||
</head>
|
||||
<body>
|
||||
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
||||
d
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
let toogler = document.getElementById("dark_mood_toogler");
|
||||
let doc_html_el = document.getElementsByTagName('html')[0];
|
||||
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
|
||||
if(e.ctrlKey && e.keyCode =='220'){
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
|
||||
}
|
||||
})
|
||||
doc_html_el.addEventListener('keyup',(e)=>{
|
||||
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
|
||||
if(e.ctrlKey && e.keyCode =='191'){
|
||||
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
|
||||
|
||||
}
|
||||
})
|
||||
toogler.addEventListener('click',()=>{
|
||||
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
||||
console.log(doc_html_el.className);
|
||||
})
|
||||
</script>
|
||||
<!-- end of script section -->
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user