1539 lines
80 KiB
HTML
1539 lines
80 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">
|
|
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
|
|
<title>Contact </title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
<!-- contact 1 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 1 </div>
|
|
</section>
|
|
<section class="py-6 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 -->
|
|
|
|
<!-- contact 2 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 2</div>
|
|
</section>
|
|
<div class="grid max-w-screen-xl grid-cols-1 gap-8 px-8 py-16 mx-auto rounded-lg md:grid-cols-2 md:px-12 lg:px-16 xl:px-32 dark:bg-gray-800 dark:text-gray-100">
|
|
<div class="flex flex-col justify-between">
|
|
<div class="space-y-2">
|
|
<h2 class="text-4xl font-bold leading-tight lg:text-5xl">Let's talk!</h2>
|
|
<div class="dark:text-gray-400">Vivamus in nisl metus? Phasellus.</div>
|
|
</div>
|
|
<img src="assets/svg/doodle.svg" alt="" class="p-6 h-52 md:h-64">
|
|
</div>
|
|
<form novalidate="" class="space-y-6 ng-untouched ng-pristine ng-valid">
|
|
<div>
|
|
<label for="name" class="text-sm">Full name</label>
|
|
<input id="name" type="text" placeholder="" class="w-full p-3 rounded dark:bg-gray-800">
|
|
</div>
|
|
<div>
|
|
<label for="email" class="text-sm">Email</label>
|
|
<input id="email" type="email" class="w-full p-3 rounded dark:bg-gray-800">
|
|
</div>
|
|
<div>
|
|
<label for="message" class="text-sm">Message</label>
|
|
<textarea id="message" rows="3" class="w-full p-3 rounded dark:bg-gray-800"></textarea>
|
|
</div>
|
|
<button type="submit" class="w-full p-3 text-sm font-bold tracking-wide uppercase rounded dark:bg-green-400 dark:text-gray-900">Send Message</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- contact 2 end -->
|
|
|
|
<!-- contact 3 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 3</div>
|
|
</section>
|
|
<section class="p-6 dark:text-gray-100">
|
|
<form novalidate="" class="container w-full max-w-xl p-8 mx-auto space-y-6 rounded-md shadow dark:bg-gray-900 ng-untouched ng-pristine ng-valid">
|
|
<h2 class="w-full text-3xl font-bold leading-tight">Contact us</h2>
|
|
<div>
|
|
<label for="name" class="block mb-1 ml-1">Name</label>
|
|
<input id="name" type="text" placeholder="Your name" required="" class="block w-full p-2 rounded focus:outline-none focus:ring focus:ring-opacity-25 focus:ring-green-400 dark:bg-gray-800">
|
|
</div>
|
|
<div>
|
|
<label for="email" class="block mb-1 ml-1">Email</label>
|
|
<input id="email" type="email" placeholder="Your email" required="" class="block w-full p-2 rounded focus:outline-none focus:ring focus:ring-opacity-25 focus:ring-green-400 dark:bg-gray-800">
|
|
</div>
|
|
<div>
|
|
<label for="message" class="block mb-1 ml-1">Message</label>
|
|
<textarea id="message" type="text" placeholder="Message..." class="block w-full p-2 rounded autoexpand focus:outline-none focus:ring focus:ring-opacity-25 focus:ring-green-400 dark:bg-gray-800"></textarea>
|
|
</div>
|
|
<div>
|
|
<button type="submit" class="w-full px-4 py-2 font-bold rounded shadow focus:outline-none focus:ring hover:ring focus:ring-opacity-50 dark:bg-green-400 focus:ring-green-400 hover:ring-green-400 dark:text-gray-900">Send</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- contact 3 end -->
|
|
|
|
<!-- conatct 4 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 4</div>
|
|
</section>
|
|
<section class="text-gray-600 body-font relative ">
|
|
<div class="absolute inset-0 bg-gray-300">
|
|
<iframe style="filter: grayscale(1) contrast(1.2) opacity(0.4);" marginheight="0" marginwidth="0" title="map" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101408.032631041!2d-122.15130744474018!3d37.41345079210977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb7495bec0189%3A0x7c17d44a466baf9b!2z4Kau4Ka-4KaJ4Kao4KeN4Kaf4KeH4KaH4KaoIOCmreCmv-CmiSwg4KaV4KeN4Kav4Ka-4Kay4Ka_4Kar4KeL4Kaw4KeN4Kao4Ka_4Kav4Ka84Ka-LCDgpq7gpr7gprDgp43gppXgpr_gpqgg4Kav4KeB4KaV4KeN4Kak4Kaw4Ka-4Ka34KeN4Kaf4KeN4Kaw!5e0!3m2!1sbn!2sbd!4v1646216286435!5m2!1sbn!2sbd" width="100%" height="100%" frameborder="0"></iframe>
|
|
</div>
|
|
<div class="container px-5 py-24 mx-auto flex ">
|
|
<div class="lg:w-1/3 md:w-1/2 bg-white dark:bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
|
|
<h2 class="text-gray-900 dark:text-emerald-300 text-lg mb-1 font-medium title-font">Feedback</h2>
|
|
<p class="leading-relaxed mb-5 text-gray-600 dark:text-cyan-100">Post-ironic portland shabby chic echo park, banjo fashion axe</p>
|
|
<div class="relative mb-4">
|
|
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Email</label>
|
|
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
|
</div>
|
|
<div class="relative mb-4">
|
|
<label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Message</label>
|
|
<textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
|
|
</div>
|
|
<button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 dark:bg-cyan-100 dark:hover:bg-emerald-100 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
|
|
<p class="text-xs text-gray-500 dark:text-cyan-100 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral artisan.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- conatct 4 end -->
|
|
|
|
<!-- contact 5 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 5</div>
|
|
</section>
|
|
<section class="text-gray-600 body-font relative">
|
|
<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
|
|
<div class="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
|
|
<iframe class="absolute inset-0" style="filter: grayscale(1) contrast(1.2) opacity(0.4);" title="map" marginheight="0" marginwidth="0" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d101408.032631041!2d-122.15130744474018!3d37.41345079210977!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb7495bec0189%3A0x7c17d44a466baf9b!2z4Kau4Ka-4KaJ4Kao4KeN4Kaf4KeH4KaH4KaoIOCmreCmv-CmiSwg4KaV4KeN4Kav4Ka-4Kay4Ka_4Kar4KeL4Kaw4KeN4Kao4Ka_4Kav4Ka84Ka-LCDgpq7gpr7gprDgp43gppXgpr_gpqgg4Kav4KeB4KaV4KeN4Kak4Kaw4Ka-4Ka34KeN4Kaf4KeN4Kaw!5e0!3m2!1sbn!2sbd!4v1646216286435!5m2!1sbn!2sbd" width="100%" height="100%" frameborder="0"></iframe>
|
|
<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
|
|
<div class="lg:w-1/2 px-6">
|
|
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">ADDRESS</h2>
|
|
<p class="mt-1">Photo booth tattooed prism, portland taiyaki hoodie neutra typewriter</p>
|
|
</div>
|
|
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
|
|
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">EMAIL</h2>
|
|
<a class="text-indigo-500 leading-relaxed">example@email.com</a>
|
|
<h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">PHONE</h2>
|
|
<p class="leading-relaxed">123-456-7890</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
|
|
<div class=" bg-white dark:bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10 shadow-md">
|
|
<h2 class="text-gray-900 dark:text-emerald-300 text-lg mb-1 font-medium title-font">Feedback</h2>
|
|
<p class="leading-relaxed mb-5 text-gray-600 dark:text-cyan-100">Post-ironic portland shabby chic echo park, banjo fashion axe</p>
|
|
<div class="relative mb-4">
|
|
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Email</label>
|
|
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
|
</div>
|
|
<div class="relative mb-4">
|
|
<label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300 font-bold">Message</label>
|
|
<textarea id="message" name="message" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
|
|
</div>
|
|
<button class="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 dark:bg-cyan-100 dark:hover:bg-emerald-100 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
|
|
<p class="text-xs text-gray-500 dark:text-cyan-100 mt-3">Chicharrones blog helvetica normcore iceland tousled brook viral artisan.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- contact 5 end -->
|
|
|
|
<!-- contact 6 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 6</div>
|
|
</section>
|
|
<section class="text-gray-600 body-font relative dark:bg-gray-800">
|
|
<div class="container px-5 py-24 mx-auto">
|
|
<div class="flex flex-col text-center w-full mb-12">
|
|
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900 dark:text-emerald-300">Contact Us</h1>
|
|
<p class="lg:w-2/3 mx-auto leading-relaxed text-base dark:text-emerald-100">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify.</p>
|
|
</div>
|
|
<div class="lg:w-1/2 md:w-2/3 mx-auto">
|
|
<div class="flex flex-wrap -m-2">
|
|
<div class="p-2 w-1/2">
|
|
<div class="relative">
|
|
<label for="name" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Name</label>
|
|
<input type="text" id="name" name="name" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
|
</div>
|
|
</div>
|
|
<div class="p-2 w-1/2">
|
|
<div class="relative">
|
|
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Email</label>
|
|
<input type="email" id="email" name="email" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
|
|
</div>
|
|
</div>
|
|
<div class="p-2 w-full">
|
|
<div class="relative">
|
|
<label for="message" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Message</label>
|
|
<textarea id="message" name="message" class="w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="p-2 w-full">
|
|
<button class="flex mx-auto text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 dark:bg-emerald-400 dark:text-gray-800 dark:font-bold rounded text-lg">Button</button>
|
|
</div>
|
|
<div class="p-2 w-full pt-8 mt-8 border-t border-gray-200 dark:border-cyan-100 text-center">
|
|
<a class="text-indigo-500 dark:text-emerald-300">example@email.com</a>
|
|
<p class="leading-normal my-5 dark:text-cyan-100">49 Smith St.
|
|
<br>Saint Cloud, MN 56301
|
|
</p>
|
|
<span class="inline-flex">
|
|
<a class="text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
|
<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-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
|
<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-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
|
<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-4 text-gray-500 dark:hover:text-cyan-300 hover:cursor-pointer">
|
|
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
|
|
<path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- contact 6 end -->
|
|
|
|
<!-- contact 7 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 7</div>
|
|
</section>
|
|
<!-- component -->
|
|
<section class="w-full text-gray-900 py-36 bg-center bg-cover bg-no-repeat bg-[url('https://images.unsplash.com/photo-1623479322729-28b25c16b011?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=1280')]" >
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-4 flex items-center justify-center">
|
|
<div class="lg:w-3/6 lg:pr-0 pr-0">
|
|
<h1 class="font-medium text-5xl text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
|
|
<p class="leading-relaxed mt-4 text-white">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
<div class="lg:w-3/6 xl:w-2/5 md:w-full bg-gray-50 dark:bg-gray-800 p-8 flex flex-col lg:ml-auto w-full mt-10 lg:mt-0 rounded-md">
|
|
<div class="relative mb-4">
|
|
<label for="full-name" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Name</label>
|
|
<input type="text" id="name" name="name" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
|
|
</div>
|
|
<div class="relative mb-4">
|
|
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Email</label>
|
|
<input type="email" id="email" name="email" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
|
|
</div>
|
|
<div class="relative mb-4">
|
|
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Phone</label>
|
|
<input type="email" id="phone" name="phone" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out">
|
|
</div>
|
|
<div class="relative mb-4">
|
|
<label for="email" class="leading-7 text-sm text-gray-600 dark:text-emerald-300">Message</label>
|
|
<textarea id="message" name="message" rows="4" class="w-full bg-white rounded-md border border-gray-300 focus:border-indigo-600 focus:ring-2 focus:ring-indigo-200 text-sm outline-none text-gray-900 py-1 px-3 leading-8 transition-colors duration-150 ease-in-out"> </textarea>
|
|
</div>
|
|
<button class="text-white bg-indigo-500 rounded-md border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 dark:bg-emerald-300 dark:text-gray-800 dark:font-bold text-lg">Submit</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- contact 7 end -->
|
|
|
|
<!-- contact 8 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 8</div>
|
|
</section>
|
|
|
|
<section class="bg-white dark:bg-gray-800 pl-20 lg:py-[120px] overflow-hidden relative z-10 ">
|
|
<div class="container">
|
|
<div class="flex flex-wrap lg:justify-between -mx-4">
|
|
<div class="w-full lg:w-1/2 xl:w-6/12 px-4">
|
|
<div class="max-w-[570px] mb-12 lg:mb-0">
|
|
<span class="block mb-4 text-base dark:text-cyan-300 font-semibold">
|
|
Contact Us
|
|
</span>
|
|
<h2
|
|
class="
|
|
dark:text-cyan-300
|
|
mb-6
|
|
uppercase
|
|
font-bold
|
|
text-[32px]
|
|
sm:text-[40px]
|
|
lg:text-[36px]
|
|
xl:text-[40px]
|
|
"
|
|
>
|
|
GET IN TOUCH WITH US
|
|
</h2>
|
|
<p class="text-base dark:text-cyan-100 leading-relaxed mb-9">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eius tempor incididunt ut labore et dolore magna aliqua. Ut enim
|
|
adiqua minim veniam quis nostrud exercitation ullamco
|
|
</p>
|
|
<div class="flex mb-8 max-w-[370px] w-full">
|
|
<div
|
|
class="
|
|
max-w-[60px]
|
|
sm:max-w-[70px]
|
|
w-full
|
|
h-[60px]
|
|
sm:h-[70px]
|
|
flex
|
|
items-center
|
|
justify-center
|
|
mr-6
|
|
overflow-hidden
|
|
dark:text-cyan-300 bg-opacity-5
|
|
text-primary
|
|
rounded
|
|
"
|
|
>
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
class="fill-current"
|
|
>
|
|
<path
|
|
d="M21.8182 24H16.5584C15.3896 24 14.4156 23.0256 14.4156 21.8563V17.5688C14.4156 17.1401 14.0649 16.7893 13.6364 16.7893H10.4026C9.97403 16.7893 9.62338 17.1401 9.62338 17.5688V21.8173C9.62338 22.9866 8.64935 23.961 7.48052 23.961H2.14286C0.974026 23.961 0 22.9866 0 21.8173V8.21437C0 7.62972 0.311688 7.08404 0.818182 6.77223L11.1039 0.263094C11.6494 -0.0876979 12.3896 -0.0876979 12.9351 0.263094L23.2208 6.77223C23.7273 7.08404 24 7.62972 24 8.21437V21.7783C24 23.0256 23.026 24 21.8182 24ZM10.3636 15.4251H13.5974C14.7662 15.4251 15.7403 16.3995 15.7403 17.5688V21.8173C15.7403 22.246 16.0909 22.5968 16.5195 22.5968H21.8182C22.2468 22.5968 22.5974 22.246 22.5974 21.8173V8.25335C22.5974 8.13642 22.5195 8.01949 22.4416 7.94153L12.1948 1.4324C12.0779 1.35445 11.9221 1.35445 11.8442 1.4324L1.55844 7.94153C1.44156 8.01949 1.4026 8.13642 1.4026 8.25335V21.8563C1.4026 22.285 1.75325 22.6358 2.18182 22.6358H7.48052C7.90909 22.6358 8.25974 22.285 8.25974 21.8563V17.5688C8.22078 16.3995 9.19481 15.4251 10.3636 15.4251Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="w-full">
|
|
<h4 class="font-bold dark:text-cyan-300 text-xl mb-1">Our Location</h4>
|
|
<p class="text-base dark:text-cyan-100">
|
|
99 S.t Jomblo Park Pekanbaru 28292. Indonesia
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex mb-8 max-w-[370px] w-full">
|
|
<div
|
|
class="
|
|
max-w-[60px]
|
|
sm:max-w-[70px]
|
|
w-full
|
|
h-[60px]
|
|
sm:h-[70px]
|
|
flex
|
|
items-center
|
|
justify-center
|
|
mr-6
|
|
overflow-hidden
|
|
bg-primary bg-opacity-5
|
|
dark:text-cyan-300
|
|
rounded
|
|
"
|
|
>
|
|
<svg
|
|
width="24"
|
|
height="26"
|
|
viewBox="0 0 24 26"
|
|
class="fill-current "
|
|
>
|
|
<path
|
|
d="M22.6149 15.1386C22.5307 14.1704 21.7308 13.4968 20.7626 13.4968H2.82869C1.86042 13.4968 1.10265 14.2125 0.97636 15.1386L0.092295 23.9793C0.0501967 24.4845 0.21859 25.0317 0.555377 25.4106C0.892163 25.7895 1.39734 26 1.94462 26H21.6887C22.1939 26 22.6991 25.7895 23.078 25.4106C23.4148 25.0317 23.5832 24.5266 23.5411 23.9793L22.6149 15.1386ZM21.9413 24.4424C21.8992 24.4845 21.815 24.5687 21.6466 24.5687H1.94462C1.81833 24.5687 1.69203 24.4845 1.64993 24.4424C1.60783 24.4003 1.52364 24.3161 1.56574 24.1477L2.4498 15.2649C2.4498 15.0544 2.61819 14.9281 2.82869 14.9281H20.8047C21.0152 14.9281 21.1415 15.0544 21.1835 15.2649L22.0676 24.1477C22.0255 24.274 21.9834 24.4003 21.9413 24.4424Z"
|
|
/>
|
|
<path
|
|
d="M11.7965 16.7805C10.1547 16.7805 8.84961 18.0855 8.84961 19.7273C8.84961 21.3692 10.1547 22.6742 11.7965 22.6742C13.4383 22.6742 14.7434 21.3692 14.7434 19.7273C14.7434 18.0855 13.4383 16.7805 11.7965 16.7805ZM11.7965 21.2008C10.9966 21.2008 10.3231 20.5272 10.3231 19.7273C10.3231 18.9275 10.9966 18.2539 11.7965 18.2539C12.5964 18.2539 13.2699 18.9275 13.2699 19.7273C13.2699 20.5272 12.5964 21.2008 11.7965 21.2008Z"
|
|
/>
|
|
<path
|
|
d="M1.10265 7.85562C1.18684 9.70794 2.82868 10.4657 3.67064 10.4657H6.61752C6.65962 10.4657 6.65962 10.4657 6.65962 10.4657C7.92257 10.3815 9.18552 9.53955 9.18552 7.85562V6.84526C10.5748 6.84526 13.7742 6.84526 15.1635 6.84526V7.85562C15.1635 9.53955 16.4264 10.3815 17.6894 10.4657H17.7315H20.6363C21.4782 10.4657 23.1201 9.70794 23.2043 7.85562C23.2043 7.72932 23.2043 7.26624 23.2043 6.84526C23.2043 6.50847 23.2043 6.21378 23.2043 6.17169C23.2043 6.12959 23.2043 6.08749 23.2043 6.08749C23.078 4.90874 22.657 3.94047 21.9413 3.18271L21.8992 3.14061C20.8468 2.17235 19.5838 1.62507 18.6155 1.28828C15.795 0.193726 12.2587 0.193726 12.0903 0.193726C9.6065 0.235824 8.00677 0.446315 5.60716 1.28828C4.681 1.58297 3.41805 2.13025 2.36559 3.09851L2.3235 3.14061C1.60782 3.89838 1.18684 4.86664 1.06055 6.04539C1.06055 6.08749 1.06055 6.12959 1.06055 6.12959C1.06055 6.21378 1.06055 6.46637 1.06055 6.80316C1.10265 7.18204 1.10265 7.68722 1.10265 7.85562ZM3.37595 4.15097C4.21792 3.3932 5.27038 2.93012 6.15444 2.59333C8.34355 1.79346 9.7749 1.62507 12.1745 1.58297C12.3429 1.58297 15.6266 1.62507 18.1525 2.59333C19.0365 2.93012 20.089 3.3511 20.931 4.15097C21.394 4.65615 21.6887 5.32972 21.7729 6.12959C21.7729 6.25588 21.7729 6.46637 21.7729 6.80316C21.7729 7.22414 21.7729 7.68722 21.7729 7.81352C21.7308 8.78178 20.8047 8.99227 20.6784 8.99227H17.7736C17.3526 8.95017 16.679 8.78178 16.679 7.85562V6.12959C16.679 5.7928 16.4685 5.54021 16.1738 5.41392C15.9213 5.32972 8.55405 5.32972 8.30146 5.41392C8.00677 5.49811 7.79628 5.7928 7.79628 6.12959V7.85562C7.79628 8.78178 7.1227 8.95017 6.70172 8.99227H3.79694C3.67064 8.99227 2.74448 8.78178 2.70238 7.81352C2.70238 7.68722 2.70238 7.22414 2.70238 6.80316C2.70238 6.46637 2.70238 6.29798 2.70238 6.17169C2.61818 5.32972 2.91287 4.65615 3.37595 4.15097Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="w-full">
|
|
<h4 class="font-bold dark:text-cyan-300 text-xl mb-1">Phone Number</h4>
|
|
<p class="text-base dark:text-cyan-100">(+62)81 414 257 9980</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex mb-8 max-w-[370px] w-full">
|
|
<div
|
|
class="
|
|
max-w-[60px]
|
|
sm:max-w-[70px]
|
|
w-full
|
|
h-[60px]
|
|
sm:h-[70px]
|
|
flex
|
|
items-center
|
|
justify-center
|
|
mr-6
|
|
overflow-hidden
|
|
dark:text-cyan-300 bg-opacity-5
|
|
text-primary
|
|
rounded
|
|
"
|
|
>
|
|
<svg
|
|
width="28"
|
|
height="19"
|
|
viewBox="0 0 28 19"
|
|
class="fill-current"
|
|
>
|
|
<path
|
|
d="M25.3636 0H2.63636C1.18182 0 0 1.16785 0 2.6052V16.3948C0 17.8322 1.18182 19 2.63636 19H25.3636C26.8182 19 28 17.8322 28 16.3948V2.6052C28 1.16785 26.8182 0 25.3636 0ZM25.3636 1.5721C25.5909 1.5721 25.7727 1.61702 25.9545 1.75177L14.6364 8.53428C14.2273 8.75886 13.7727 8.75886 13.3636 8.53428L2.04545 1.75177C2.22727 1.66194 2.40909 1.5721 2.63636 1.5721H25.3636ZM25.3636 17.383H2.63636C2.09091 17.383 1.59091 16.9338 1.59091 16.3499V3.32388L12.5 9.8818C12.9545 10.1513 13.4545 10.2861 13.9545 10.2861C14.4545 10.2861 14.9545 10.1513 15.4091 9.8818L26.3182 3.32388V16.3499C26.4091 16.9338 25.9091 17.383 25.3636 17.383Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="w-full">
|
|
<h4 class="font-bold dark:text-cyan-300 text-xl mb-1">
|
|
Email Address
|
|
</h4>
|
|
<p class="text-base dark:text-cyan-100">info@yourdomain.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-1/2 xl:w-5/12 px-4">
|
|
<div class="bg-white dark:bg-gray-800 dark:border-2 dark:border-cyan-300 relative rounded-lg p-8 sm:p-12 shadow-lg">
|
|
<form>
|
|
<div class="mb-6">
|
|
<input
|
|
type="text"
|
|
placeholder="Your Name"
|
|
class="
|
|
w-full
|
|
rounded
|
|
py-3
|
|
px-[14px]
|
|
text-body-color text-base
|
|
border border-[f0f0f0]
|
|
outline-none
|
|
focus-visible:shadow-none
|
|
focus:border-primary
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="mb-6">
|
|
<input
|
|
type="email"
|
|
placeholder="Your Email"
|
|
class="
|
|
w-full
|
|
rounded
|
|
py-3
|
|
px-[14px]
|
|
text-body-color text-base
|
|
border border-[f0f0f0]
|
|
outline-none
|
|
focus-visible:shadow-none
|
|
focus:border-primary
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="mb-6">
|
|
<input
|
|
type="text"
|
|
placeholder="Your Phone"
|
|
class="
|
|
w-full
|
|
rounded
|
|
py-3
|
|
px-[14px]
|
|
text-body-color text-base
|
|
border border-[f0f0f0]
|
|
outline-none
|
|
focus-visible:shadow-none
|
|
focus:border-primary
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="mb-6">
|
|
<textarea
|
|
rows="6"
|
|
placeholder="Your Message"
|
|
class="
|
|
w-full
|
|
rounded
|
|
py-3
|
|
px-[14px]
|
|
text-body-color text-base
|
|
border border-[f0f0f0]
|
|
resize-none
|
|
outline-none
|
|
focus-visible:shadow-none
|
|
focus:border-primary
|
|
"
|
|
></textarea>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
class="
|
|
w-full
|
|
text-white
|
|
bg-primary
|
|
rounded
|
|
border border-primary
|
|
p-3
|
|
transition
|
|
hover:bg-opacity-90
|
|
"
|
|
>
|
|
Send Message
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div>
|
|
<span class="absolute -top-10 -right-9 z-[-1]">
|
|
<svg
|
|
width="100"
|
|
height="100"
|
|
viewBox="0 0 100 100"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M0 100C0 44.7715 0 0 0 0C55.2285 0 100 44.7715 100 100C100 100 100 100 0 100Z"
|
|
fill="#3056D3"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="absolute -right-10 top-[90px] z-[-1]">
|
|
<svg
|
|
width="34"
|
|
height="134"
|
|
viewBox="0 0 34 134"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="absolute -left-7 -bottom-7 z-[-1]">
|
|
<svg
|
|
width="107"
|
|
height="134"
|
|
viewBox="0 0 107 134"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
cx="104.999"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="104.999"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="104.999"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="104.999"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="104.999"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="104.999"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="104.999"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="104.999"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="104.999"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="104.999"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 104.999 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="90.3333"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 90.3333 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="75.6654"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 75.6654 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="31.9993"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 31.9993 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="60.9993"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 60.9993 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="17.3333"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 17.3333 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="132"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 132)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="117.333"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 117.333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="102.667"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 102.667)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="88"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 88)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="73.3333"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 73.3333)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="45"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 45)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="16"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 16)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="59"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 59)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="30.6666"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 30.6666)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="46.3333"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 46.3333 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
<circle
|
|
cx="2.66536"
|
|
cy="1.66665"
|
|
r="1.66667"
|
|
transform="rotate(180 2.66536 1.66665)"
|
|
fill="#13C296"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- contact 8 end -->
|
|
|
|
|
|
<!-- contact 9 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 9</div>
|
|
</section>
|
|
<div class="relative px-4 w-full bg-gray-50 dark:bg-gray-800">
|
|
<div class="mx-auto max-w-5xl py-10">
|
|
|
|
<div>
|
|
<span class="absolute top-0 left-0 hidden md:block opacity-10">
|
|
<svg width="250" height="600" fill="none" viewBox="0 0 250 600" aria-hidden="true">
|
|
<pattern id="pattern-rectangles" width="40" height="40" patternUnits="userSpaceOnUse">
|
|
<rect x="0" y="0" width="10" height="10" class="text-green-500" fill="currentColor" />
|
|
</pattern>
|
|
<rect width="250" height="600" fill="url(#pattern-rectangles)" />
|
|
</svg>
|
|
</span>
|
|
<span class="absolute bottom-0 right-0 opacity-20">
|
|
<svg width="300" height="300" fill="none" viewBox="0 0 300 300" aria-hidden="true">
|
|
<pattern id="pattern-circles" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
|
|
<circle id="pattern-circle" cx="10" cy="10" r="5" class="fill-current text-green-500" />
|
|
</pattern>
|
|
<rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="relative space-y-5">
|
|
|
|
<h2 class="text-center text-5xl text-green-500 font-light">Contact Us</h2>
|
|
|
|
<p class="mx-auto py-5 max-w-3xl text-center text-base text-gray-600 dark:text-gray-300">Atque sint nemo vero sequi veniam, numquam fugiat aperiam doloremque, itaque officia exercitationem! Excepturi deleniti accusantium minus quibusdam dolores doloremque natus fugit!</p>
|
|
|
|
<div class="flex flex-wrap justify-between items-center text-base">
|
|
<div class="m-2.5 inline-flex items-center">
|
|
<span class="text-gray-600 dark:text-emerald-400 font-semibold">18 avenue des Champs-Élysées, 75008 Paris</span>
|
|
</div>
|
|
<div class="m-2.5 inline-flex items-center">
|
|
<span class="text-gray-600 dark:text-emerald-400 font-semibold">357-233-9644</span>
|
|
</div>
|
|
<div class="m-2.5 inline-flex items-center">
|
|
<span class="text-gray-600 dark:text-emerald-400 font-semibold">my-email@fancymail.com</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="relative mt-16 rounded border-2 border-gray-200">
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d8827.330741966553!2d2.308756110118289!3d48.87000842543867!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fc4f8f3049b%3A0xcbb47407434935db!2s18%20Av.%20des%20Champs-%C3%89lys%C3%A9es%2C%2075008%20Paris!5e0!3m2!1sfr!2sfr!4v1635492407441!5m2!1sfr!2sfr"
|
|
title="map" scrolling="no" frameborder="0"
|
|
width="100%" height="450"
|
|
class=""
|
|
loading="lazy">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- contact 9 end -->
|
|
|
|
|
|
<!-- contact 10 start -->
|
|
<section class="section_divider">
|
|
<div>Contact 10</div>
|
|
</section>
|
|
<div class="px-4 py-6 sm:grid grid-cols-2 gap-x-6 max-w-4xl mx-auto">
|
|
<div class="mb-8">
|
|
<h2 class="text-center text-2xl font-bold text-blue-800">Add Contact</h2>
|
|
<div class="mt-6">
|
|
<div class="flex-col space-y-4">
|
|
<input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
|
|
<input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
|
|
<input type="text" placeholder="Name" class="border-2 w-full px-4 py-2 rounded-md text-md text-gray-700 outline-none" />
|
|
</div>
|
|
<div class="mt-4">
|
|
<p class="mb-1 text-gray-700 font-semibold text-sm">Contact Type</p>
|
|
<div class="flex space-x-4 my-2 items-center">
|
|
<div class="flex items-center space-x-1">
|
|
<input type="radio" id="personal" class="cursor-pointer">
|
|
<label for="personal" class="cursor-pointer">Personal</span>
|
|
</div>
|
|
<div class="flex items-center space-x-1">
|
|
<input type="radio" id="professional" class="cursor-pointer">
|
|
<label for="professional" class="cursor-pointer">Professional</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="w-full mt-4 bg-gradient-to-tr from-indigo-600 to-purple-600 text-white py-2 rounded-md text-lg font-semibold">Add Contact</button>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class=" p-6 rounded-md bg-indigo-50">
|
|
<div class="flex justify-between mb-2 items-center">
|
|
<p class="text-lg font-semibold items-center">Jill Johson</p>
|
|
<p class="bg-indigo-500 text-indigo-50 px-3 py-1 rounded-md text-sm">Personal</p>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center space-x-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
|
|
</svg>
|
|
<p class="text-md font-semibold">jill@gmail.com</p>
|
|
</div>
|
|
<div class="flex mt-3 text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
|
|
</svg>
|
|
<p class="text-md mb-6">111-111-111</p>
|
|
</div>
|
|
<div class="space-x-1">
|
|
<span class="text-md px-6 py-2 rounded-md bg-green-500 text-indigo-50 font-semibold cursor-pointer" text-indigo-50 font-semibold cursor-pointer>Edit</span>
|
|
<span class="text-md px-6 py-2 rounded-md bg-red-500 text-indigo-50 font-semibold cursor-pointer">Delete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class=" p-4 rounded-md bg-indigo-50">
|
|
<div class="flex justify-between mb-2 items-center">
|
|
<p class="text-lg font-semibold items-center">Jill Johson</p>
|
|
<p class="bg-indigo-500 text-indigo-50 px-3 py-1 rounded-md text-sm">Personal</p>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center space-x-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
|
|
</svg>
|
|
<p class="text-md font-semibold">jill@gmail.com</p>
|
|
</div>
|
|
<div class="flex mt-3 text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M16 8l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M5 3a2 2 0 00-2 2v1c0 8.284 6.716 15 15 15h1a2 2 0 002-2v-3.28a1 1 0 00-.684-.948l-4.493-1.498a1 1 0 00-1.21.502l-1.13 2.257a11.042 11.042 0 01-5.516-5.517l2.257-1.128a1 1 0 00.502-1.21L9.228 3.683A1 1 0 008.279 3H5z" />
|
|
</svg>
|
|
<p class="text-md mb-6">111-111-111</p>
|
|
</div>
|
|
<div class="space-x-1">
|
|
<span class="text-md px-6 py-2 rounded-md bg-green-500 text-indigo-50 font-semibold cursor-pointer" >Edit</span>
|
|
<span class="text-md px-6 py-2 rounded-md bg-red-500 text-indigo-50 font-semibold cursor-pointer">Delete</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- contact 10 end -->
|
|
|
|
<!-- start of script section -->
|
|
<script type="text/javascript">
|
|
let toogler = document.getElementById("dark_mood_toogler");
|
|
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.class =='' ? 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.class =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
|
|
console.log(doc_html_el.class);
|
|
})
|
|
</script>
|
|
<!-- end of script section -->
|
|
|
|
</body>
|
|
</html> |