mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-17 15:07:02 +00:00
431 lines
28 KiB
HTML
431 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./../../../dist/tailshape.css">
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
|
<title>Template 23</title>
|
|
</head>
|
|
<body>
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
|
|
|
|
<!-- header 23 start -->
|
|
|
|
<header class="dark:bg-gray-800">
|
|
|
|
|
|
<nav class="border-gray-200 px-2 dark:bg-gray-800 py-3">
|
|
<div class="container mx-auto flex flex-wrap items-center justify-between">
|
|
<a href="#" class="flex">
|
|
<svg class="h-10 mr-3" 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 whitespace-nowrap dark:text-gray-300">FlowBite</span>
|
|
</a>
|
|
<div class="flex md:order-2">
|
|
<div class="relative mr-3 md:mr-0 hidden md:block">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
|
|
</div>
|
|
<input type="text" id="email-adress-icon" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2" placeholder="Search...">
|
|
</div>
|
|
<button data-collapse-toggle="mobile-menu-3" type="button" class="md:hidden text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-lg inline-flex items-center justify-center" aria-controls="mobile-menu-3" 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>
|
|
<div class="hidden md:flex justify-between items-center w-full md:w-auto md:order-1" id="mobile-menu-3">
|
|
<ul class="flex-col md:flex-row flex md:space-x-8 mt-4 md:mt-0 md:text-sm md:font-medium">
|
|
<li>
|
|
<a href="#" class="bg-blue-700 md:bg-transparent block pl-3 pr-4 py-2 text-gray-300 active:text-gray-300 md:text-blue-700 md:p-0 rounded" aria-current="page">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="text-gray-500 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0 ">About</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="text-gray-500 hover:bg-gray-50 border-b border-gray-100 md:hover:bg-transparent md:border-0 block pl-3 pr-4 py-2 md:hover:text-blue-700 md:p-0">Services</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<script type="text/javascript" class="toggle_script">
|
|
const toggleCollapse = (elementId, show = true) => {
|
|
const collapseEl = document.getElementById(elementId);
|
|
|
|
if (show) {
|
|
collapseEl.classList.remove('hidden');
|
|
} else {
|
|
collapseEl.classList.add('hidden');
|
|
}
|
|
}; // Toggle target elements using [data-collapse-toggle]
|
|
|
|
|
|
document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
|
|
var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
|
|
collapseToggleEl.addEventListener('click', function () {
|
|
toggleCollapse(collapseId, document.getElementById(collapseId).classList.contains('hidden'));
|
|
});
|
|
});
|
|
window.toggleCollapse = toggleCollapse;
|
|
</script>
|
|
|
|
<!-- header 23 end -->
|
|
|
|
<!-- section 3 start -->
|
|
<section class="bg-gray-100 dark:bg-gray-900 lg:py-24 lg:flex lg:justify-center">
|
|
<div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
|
|
<div class="lg:w-1/2">
|
|
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
|
|
</div>
|
|
|
|
<div class="max-w-xl px-6 py-12 lg:max-w-5xl lg:w-1/2">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-blue-600 dark:text-blue-400">Idea</span></h2>
|
|
<p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
|
|
|
|
<div class="mt-8">
|
|
<a href="#" class="px-5 py-2 font-semibold text-gray-100 transition-colors duration-200 transform bg-gray-900 rounded-md hover:bg-gray-700">Start Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- section 3 end -->
|
|
|
|
|
|
<!-- feature 2 start -->
|
|
<section class="bg-white dark:bg-gray-800">
|
|
<div class="container px-6 py-24 mx-auto">
|
|
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">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 -->
|
|
|
|
|
|
|
|
<!-- team 2 start -->
|
|
|
|
<section class="bg-white dark:bg-gray-900">
|
|
<div class="container px-24 py-24 mx-auto">
|
|
<div class="xl:flex xl:items-center xL:-mx-4">
|
|
<div class="xl:w-1/2 xl:mx-4">
|
|
<h1 class="text-3xl font-semibold text-gray-800 capitalize lg:text-4xl dark:text-white">Our Team</h1>
|
|
|
|
<p class="max-w-2xl mt-4 text-gray-500 dark:text-gray-300">
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo incidunt ex placeat modi magni quia error alias, adipisci rem similique, at omnis eligendi optio eos harum.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-0 xl:mx-4 xl:w-1/2 md:grid-cols-2">
|
|
<div>
|
|
<img class="object-cover rounded-xl aspect-square" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
|
|
|
|
<h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white">John Doe</h1>
|
|
|
|
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300">Full stack developer</p>
|
|
</div>
|
|
|
|
<div>
|
|
<img class="object-cover rounded-xl aspect-square" src="https://images.unsplash.com/photo-1499470932971-a90681ce8530?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
|
|
|
|
<h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white">Mia</h1>
|
|
|
|
<p class="mt-2 text-gray-500 capitalize dark:text-gray-300">Graphic Designer</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- team 2 end -->
|
|
|
|
|
|
<!-- faq 3 start -->
|
|
|
|
<div class="dark:bg-gray-800">
|
|
<div class="mx-auto max-w-6xl py-24">
|
|
<div class="p-2 rounded">
|
|
<div class="flex flex-col md:flex-row">
|
|
<div class="md:w-1/3 p-4 text-sm">
|
|
|
|
<div class="sticky inset-x-0 top-0 left-0 py-12 ">
|
|
|
|
<div class="text-3xl text-green-400 mb-8">Frequently asked questions.</div>
|
|
<div class="mb-2 text-lg dark:text-gray-300">Lorem Ipsum ?</div>
|
|
<div class="text-s text-gray-600">See our FAQ for more details</div>
|
|
|
|
<div class="relative text-gray-600 mt-8 lg:mr-16">
|
|
<input
|
|
x-ref="searchField"
|
|
x-model="search"
|
|
x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
|
|
type="search" name="serch" placeholder="Search" class="bg-white w-full h-10 px-5 rounded-full text-sm focus:outline-none">
|
|
<button type="submit" class="focus:outline-none absolute right-0 top-0 mt-3 mr-4">
|
|
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
|
|
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="md:w-2/3 py-12 ">
|
|
<div class="p-4">
|
|
|
|
<div class="item px-6 py-6 my-2 rounded-lg bg-gray-900 border-2 border-emerald-300" x-data="{isOpen : false}">
|
|
<a href="#" class="flex items-center justify-between" @click.prevent="isOpen = true">
|
|
<h4 :class= "isOpen ? 'text-green-400 font-medium' : 'text-gray-300 font-medium' " >Lorem Ipsum ?</h4>
|
|
<svg
|
|
:class="{'transform rotate-180' : isOpen == true}"
|
|
class="w-5 h-5 text-gray-500"
|
|
fill="none" stroke-linecap="round"
|
|
stroke-linejoin="round" stroke-width="2"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</a>
|
|
<div x-show="isOpen" @click.away="isOpen = false" class="mt-3" :class="{'text-gray-600' : isOpen == true}">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item px-6 py-6 my-2 rounded-lg bg-gray-900 border-2 border-emerald-300" x-data="{isOpen : false}">
|
|
<a href="#" class="flex items-center justify-between" @click.prevent="isOpen = true">
|
|
<h4 :class= "isOpen ? 'text-green-400 font-medium' : 'text-gray-300 font-medium' " >Lorem Ipsum ?</h4>
|
|
<svg
|
|
:class="{'transform rotate-180' : isOpen == true}"
|
|
class="w-5 h-5 text-gray-500"
|
|
fill="none" stroke-linecap="round"
|
|
stroke-linejoin="round" stroke-width="2"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</a>
|
|
<div x-show="isOpen" @click.away="isOpen = false" class="mt-3" :class="{'text-gray-600' : isOpen == true}">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item px-6 py-6 my-2 rounded-lg bg-gray-900 border-2 border-emerald-300" x-data="{isOpen : false}">
|
|
<a href="#" class="flex items-center justify-between" @click.prevent="isOpen = true">
|
|
<h4 :class= "isOpen ? 'text-green-400 font-medium' : 'text-gray-300 font-medium' " >Lorem Ipsum ?</h4>
|
|
<svg
|
|
:class="{'transform rotate-180' : isOpen == true}"
|
|
class="w-5 h-5 text-gray-500"
|
|
fill="none" stroke-linecap="round"
|
|
stroke-linejoin="round" stroke-width="2"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</a>
|
|
<div x-show="isOpen" @click.away="isOpen = false" class="mt-3" :class="{'text-gray-600' : isOpen == true}">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- faq 3 end -->
|
|
|
|
|
|
<!-- footer 13 start -->
|
|
|
|
<section class="dark:bg-gray-900">
|
|
<footer class="px-4 pt-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 ">
|
|
<div class="grid gap-10 row-gap-6 mb-8 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div class="sm:col-span-2">
|
|
<a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
|
|
<svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
|
|
<rect x="3" y="1" width="7" height="12"></rect>
|
|
<rect x="3" y="17" width="7" height="6"></rect>
|
|
<rect x="14" y="1" width="7" height="6"></rect>
|
|
<rect x="14" y="11" width="7" height="12"></rect>
|
|
</svg>
|
|
<span class="ml-2 text-xl font-bold tracking-wide text-gray-800 dark:text-gray-300 uppercase">Company</span>
|
|
</a>
|
|
<div class="mt-6 lg:max-w-sm">
|
|
<p class="text-sm text-gray-500 ">
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
|
|
</p>
|
|
<p class="mt-4 text-sm text-gray-500 ">
|
|
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2 text-sm">
|
|
<p class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Contacts</p>
|
|
<div class="flex">
|
|
<p class="mr-1 text-gray-800 dark:text-gray-400">Phone:</p>
|
|
<a href="tel:850-123-5021" aria-label="Our phone" title="Our phone" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">850-123-5021</a>
|
|
</div>
|
|
<div class="flex">
|
|
<p class="mr-1 text-gray-800 dark:text-gray-400">Email:</p>
|
|
<a href="mailto:info@lorem.mail" aria-label="Our email" title="Our email" class="transition-colors duration-300 text-gray-300 hover:text-purple-400">info@lorem.mail</a>
|
|
</div>
|
|
<div class="flex">
|
|
<p class="mr-1 text-gray-800 dark:text-gray-400">Address:</p>
|
|
<a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer" aria-label="Our address" title="Our address" class="transition-colors duration-400 text-gray-300 hover:text-purple-300">
|
|
312 Lovely Street, NY
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="text-base font-bold tracking-wide text-gray-900 dark:text-purple-400">Social</span>
|
|
<div class="flex items-center mt-1 space-x-3">
|
|
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
|
|
<path
|
|
d="M24,4.6c-0.9,0.4-1.8,0.7-2.8,0.8c1-0.6,1.8-1.6,2.2-2.7c-1,0.6-2,1-3.1,1.2c-0.9-1-2.2-1.6-3.6-1.6 c-2.7,0-4.9,2.2-4.9,4.9c0,0.4,0,0.8,0.1,1.1C7.7,8.1,4.1,6.1,1.7,3.1C1.2,3.9,1,4.7,1,5.6c0,1.7,0.9,3.2,2.2,4.1 C2.4,9.7,1.6,9.5,1,9.1c0,0,0,0,0,0.1c0,2.4,1.7,4.4,3.9,4.8c-0.4,0.1-0.8,0.2-1.3,0.2c-0.3,0-0.6,0-0.9-0.1c0.6,2,2.4,3.4,4.6,3.4 c-1.7,1.3-3.8,2.1-6.1,2.1c-0.4,0-0.8,0-1.2-0.1c2.2,1.4,4.8,2.2,7.5,2.2c9.1,0,14-7.5,14-14c0-0.2,0-0.4,0-0.6 C22.5,6.4,23.3,5.5,24,4.6z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
|
<svg viewBox="0 0 30 30" fill="currentColor" class="h-6">
|
|
<circle cx="15" cy="15" r="4"></circle>
|
|
<path
|
|
d="M19.999,3h-10C6.14,3,3,6.141,3,10.001v10C3,23.86,6.141,27,10.001,27h10C23.86,27,27,23.859,27,19.999v-10 C27,6.14,23.859,3,19.999,3z M15,21c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S18.309,21,15,21z M22,9c-0.552,0-1-0.448-1-1 c0-0.552,0.448-1,1-1s1,0.448,1,1C23,8.552,22.552,9,22,9z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
<a href="/" class="text-gray-500 transition-colors duration-300 hover:text-purple-400">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" class="h-5">
|
|
<path
|
|
d="M22,0H2C0.895,0,0,0.895,0,2v20c0,1.105,0.895,2,2,2h11v-9h-3v-4h3V8.413c0-3.1,1.893-4.788,4.659-4.788 c1.325,0,2.463,0.099,2.795,0.143v3.24l-1.918,0.001c-1.504,0-1.795,0.715-1.795,1.763V11h4.44l-1,4h-3.44v9H22c1.105,0,2-0.895,2-2 V2C24,0.895,23.105,0,22,0z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<p class="mt-4 text-sm text-gray-500">
|
|
Bacon ipsum dolor amet short ribs pig sausage prosciutto chicken spare ribs salami.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col-reverse justify-between pt-5 pb-10 border-t lg:flex-row">
|
|
<p class="text-sm text-gray-600">
|
|
© Copyright 2020 Lorem Inc. All rights reserved.
|
|
</p>
|
|
<ul class="flex flex-col mb-3 space-y-2 lg:mb-0 sm:space-y-0 sm:space-x-5 sm:flex-row">
|
|
<li>
|
|
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">F.A.Q</a>
|
|
</li>
|
|
<li>
|
|
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Privacy Policy</a>
|
|
</li>
|
|
<li>
|
|
<a href="/" class="text-sm text-gray-600 transition-colors duration-300 hover:text-purple-400">Terms & Conditions</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
<!-- footer 13 end -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 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> |