449 lines
32 KiB
HTML
449 lines
32 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>Register </title>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
|
|
d
|
|
</button>
|
|
|
|
|
|
<!-- register 1 start -->
|
|
<section class="section_divider">
|
|
<div>Register 1 </div>
|
|
</section>
|
|
|
|
<div class="flex p-1 py-12 bg-white dark:bg-gray-800 justify-center place-content-center">
|
|
<div class="max-w-lg overflow-hidden border border-gray-200 rounded-lg">
|
|
<form class="w-full max-w-lg">
|
|
<div class="p-10 pb-6">
|
|
<div class="flex flex-wrap mb-6 -mx-3">
|
|
<div class="w-full px-3 mb-6 md:w-1/2 md:mb-0">
|
|
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
|
for="grid-first-name">
|
|
First Name
|
|
</label>
|
|
<input
|
|
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white"
|
|
id="grid-first-name" type="text" placeholder="Jane">
|
|
</div>
|
|
<div class="w-full px-3 md:w-1/2">
|
|
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
|
for="grid-last-name">
|
|
Last Name
|
|
</label>
|
|
<input
|
|
class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
|
id="grid-last-name" type="text" placeholder="Doe">
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="w-full px-3 mb-6">
|
|
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
|
for="grid-email">
|
|
Email
|
|
</label>
|
|
<input
|
|
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
|
id="grid-email" type="email" placeholder="janedoe@example.com">
|
|
</div>
|
|
<div class="w-full px-3 mb-6">
|
|
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
|
for="grid-password">
|
|
Password
|
|
</label>
|
|
<input
|
|
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
|
id="grid-password" type="password" placeholder="***********">
|
|
</div>
|
|
<div class="w-full px-3 mb-6">
|
|
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
|
for="grid-number">
|
|
Phone number
|
|
</label>
|
|
<input
|
|
class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
|
id="grid-email" type="text" placeholder="+91 XXX XXX XXXX">
|
|
</div>
|
|
</div>
|
|
|
|
<label>
|
|
<span class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase">Address</span>
|
|
<textarea
|
|
class="block w-full px-4 py-3 mt-1 mb-3 text-gray-700 bg-gray-200 border border-gray-200 rounded form-textarea focus:outline-none"
|
|
rows="4" placeholder=""></textarea>
|
|
</label>
|
|
|
|
<div class="flex flex-wrap m-6 mb-2 -mx-3">
|
|
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
|
|
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
|
for="grid-city">
|
|
City
|
|
</label>
|
|
<input
|
|
class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
|
id="grid-city" type="text" placeholder="Albuquerque">
|
|
</div>
|
|
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
|
|
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
|
for="grid-state">
|
|
State
|
|
</label>
|
|
<div class="relative">
|
|
<select
|
|
class="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
|
id="grid-state">
|
|
<option>New Mexico</option>
|
|
<option>Missouri</option>
|
|
<option>Texas</option>
|
|
</select>
|
|
<div
|
|
class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
|
|
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20">
|
|
<path
|
|
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full px-3 mb-6 md:w-1/3 md:mb-0">
|
|
<label class="block mb-2 text-xs font-bold tracking-wide dark:text-cyan-300 text-gray-700 uppercase"
|
|
for="grid-zip">
|
|
Zip
|
|
</label>
|
|
<input
|
|
class="block w-full px-4 py-3 leading-tight text-gray-700 bg-gray-200 border border-gray-200 rounded appearance-none focus:outline-none focus:bg-white focus:border-gray-500"
|
|
id="grid-zip" type="text" placeholder="90210">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between p-5 text-center bg-gray-900">
|
|
<div class="relative flex flex-col items-start mr-1 text-sm">
|
|
<span class="mr-1 text-gray-500 dark:text-cyan-300">Already have an account?</span>
|
|
<a href="#_" class="block font-medium text-indigo-600 underline">Login Here</a>
|
|
</div>
|
|
<button type="button"
|
|
class="inline-flex items-center px-6 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 dark:bg-black dark:text-cyan-300 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700">
|
|
Register Now
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- register 1 end -->
|
|
|
|
|
|
|
|
<!-- register 2 start -->
|
|
<section class="section_divider">
|
|
<div>Register 2</div>
|
|
</section>
|
|
<section class="h-screen font-sans bg-[url('https://source.unsplash.com/random/?trees')] grayscale bg-cover">
|
|
<div class="container mx-auto h-full flex flex-1 justify-center items-center">
|
|
<div class="w-full max-w-lg">
|
|
<div class="leading-loose">
|
|
<form class="max-w-xl m-4 p-10 bg-white rounded shadow-xl">
|
|
<p class="text-gray-800 font-medium">Register</p>
|
|
<div class="">
|
|
<label class="block text-sm text-gray-00" for="cus_name">Name</label>
|
|
<input class="w-full px-5 py-1 text-gray-700 bg-gray-200 rounded" id="cus_name" name="cus_name" type="text" required="" placeholder="Your Name" aria-label="Name">
|
|
</div>
|
|
<div class="mt-2">
|
|
<label class="block text-sm text-gray-600" for="cus_email">Email</label>
|
|
<input class="w-full px-5 py-4 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Your Email" aria-label="Email">
|
|
</div>
|
|
<div class="mt-2">
|
|
<label class=" block text-sm text-gray-600" for="cus_email">Address</label>
|
|
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Street" aria-label="Email">
|
|
</div>
|
|
<div class="mt-2">
|
|
<label class="hidden text-sm block text-gray-600" for="cus_email">City</label>
|
|
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="City" aria-label="Email">
|
|
</div>
|
|
<div class="inline-block mt-2 w-1/2 pr-1">
|
|
<label class="hidden block text-sm text-gray-600" for="cus_email">Country</label>
|
|
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Country" aria-label="Email">
|
|
</div>
|
|
<div class="inline-block mt-2 -mx-1 pl-1 w-1/2">
|
|
<label class="hidden block text-sm text-gray-600" for="cus_email">Zip</label>
|
|
<input class="w-full px-2 py-2 text-gray-700 bg-gray-200 rounded" id="cus_email" name="cus_email" type="text" required="" placeholder="Zip" aria-label="Email">
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button class="px-4 py-1 text-white font-light tracking-wider bg-gray-900 rounded" type="submit">Register</button>
|
|
</div>
|
|
<a class="inline-block right-0 align-baseline font-bold text-sm text-500 hover:text-blue-800" href="login.html">
|
|
Already have an account ?
|
|
</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
<!-- register 2 end -->
|
|
|
|
<!-- register 3 start -->
|
|
<section class="section_divider">
|
|
<div>Register 3</div>
|
|
</section>
|
|
|
|
<section class="grid grid-cols-1 lg:grid-cols-2 bg-white dark:bg-gray-800">
|
|
<div class="w-full px-4 py-20 mx-auto xl:py-32 md:w-3/5 lg:w-4/5 xl:w-3/5">
|
|
<h1 class="mb-4 -mt-3 text-2xl font-extrabold leading-snug tracking-tight text-left dark:text-emerald-300 text-gray-900 md:text-4xl">Sign up to our product today for free</h1>
|
|
<div class="mt-8 space-y-10">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<a href="#" class="my-3 flex bg-blue-500 text-white justify-center items-center rounded py-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-1">
|
|
<path
|
|
d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28 c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233 c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934 C20.485,11.453,20.404,10.884,20.283,10.356z"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Continue with</span> Google
|
|
</a>
|
|
<a href="#" class="my-3 flex bg-black text-white justify-center items-center rounded py-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-2">
|
|
<path
|
|
d="M19.665,16.811c-0.287,0.664-0.627,1.275-1.021,1.837c-0.537,0.767-0.978,1.297-1.316,1.592 c-0.525,0.482-1.089,0.73-1.692,0.744c-0.432,0-0.954-0.123-1.562-0.373c-0.61-0.249-1.17-0.371-1.683-0.371 c-0.537,0-1.113,0.122-1.73,0.371c-0.616,0.25-1.114,0.381-1.495,0.393c-0.577,0.025-1.154-0.229-1.729-0.764 c-0.367-0.32-0.826-0.87-1.377-1.648c-0.59-0.829-1.075-1.794-1.455-2.891c-0.407-1.187-0.611-2.335-0.611-3.447 c0-1.273,0.275-2.372,0.826-3.292c0.434-0.74,1.01-1.323,1.73-1.751C7.271,6.782,8.051,6.563,8.89,6.549 c0.46,0,1.063,0.142,1.81,0.422s1.227,0.422,1.436,0.422c0.158,0,0.689-0.167,1.593-0.498c0.853-0.307,1.573-0.434,2.163-0.384 c1.6,0.129,2.801,0.759,3.6,1.895c-1.43,0.867-2.137,2.08-2.123,3.637c0.012,1.213,0.453,2.222,1.317,3.023 c0.392,0.372,0.829,0.659,1.315,0.863C19.895,16.236,19.783,16.529,19.665,16.811L19.665,16.811z M15.998,2.38 c0,0.95-0.348,1.838-1.039,2.659c-0.836,0.976-1.846,1.541-2.941,1.452c-0.014-0.114-0.021-0.234-0.021-0.36 c0-0.913,0.396-1.889,1.103-2.688c0.352-0.404,0.8-0.741,1.343-1.009c0.542-0.264,1.054-0.41,1.536-0.435 C15.992,2.127,15.998,2.254,15.998,2.38L15.998,2.38z"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only ">Continue with</span> Apple
|
|
</a>
|
|
</div>
|
|
<div class="text-center border-b border-gray-200" style="line-height: 0px">
|
|
<span class="p-2 text-xs font-semibold tracking-wide text-gray-600 uppercase bg-white" style="line-height: 0px">Or</span>
|
|
</div>
|
|
</div>
|
|
<form class="mt-8 space-y-4">
|
|
<label class="block">
|
|
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-emerald-300">Your Email</span>
|
|
<input class="w-full border rounded p-1 placeholder:text-sm " type="email" placeholder="Ex. james@bond.com" inputmode="email" required />
|
|
</label>
|
|
<label class="block">
|
|
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-emerald-300">Your Password</span>
|
|
<input class="w-full border rounded p-1 placeholder:text-sm " type="password" placeholder="••••••••" required />
|
|
</label>
|
|
<input type="submit" class="w-full bg-black text-white rounded py-2 " value="Register" />
|
|
</form>
|
|
<div class="pt-6 mt-6 text-sm font-medium text-gray-700 border-t border-gray-200 dark:text-emerald-300">
|
|
Already have an account?
|
|
<a href="#" class="text-emerald-700 hover:text-emerald-900">Sign Up</a>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-20 space-y-10 bg-gray-100 xl:py-32 md:px-40 lg:px-20 xl:px-40">
|
|
<a href="/" title="Go to Kutty Home Page">
|
|
<svg class="w-auto h-6 " width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
|
|
<path
|
|
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
|
|
fill="#1A202C"
|
|
/>
|
|
<path
|
|
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
|
|
fill="#9E58E9"
|
|
/>
|
|
<path
|
|
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
|
|
fill="#7629C8"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only"> Home Page</span>
|
|
</a>
|
|
<div class="flex space-x-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
<div>
|
|
<h2 class="text-xl font-medium text-purple-700">Free account</h2>
|
|
<p class="mt-1 text-gray-700">Create apps, connect databases and add-on services, and collaborate on your apps, for free.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
<div>
|
|
<h2 class="text-xl font-medium text-purple-700">Your app platform</h2>
|
|
<p class="mt-1 text-gray-700">A platform for apps, with app management & instant scaling, for development and production.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
<div>
|
|
<h2 class="text-xl font-medium text-purple-700">Deploy now</h2>
|
|
<p class="mt-1 text-gray-700">Go from code to running app in minutes. Deploy, scale, and deliver your app to the world.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-none w-6 h-6 mt-1 text-purple-700">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
<div>
|
|
<h2 class="text-xl font-medium text-purple-700">Free account</h2>
|
|
<p class="mt-1 text-gray-700">Create apps, connect databases and add-on services, and collaborate on your apps, for free.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- register 3 end -->
|
|
|
|
|
|
<!-- register 4 start -->
|
|
<section class="section_divider">
|
|
<div>Register 4</div>
|
|
</section>
|
|
|
|
<section class="px-4 py-24 dark:bg-gray-800">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="w-full mx-auto space-y-5 sm:w-8/12 md:w-6/12 lg:w-4/12 xl:w-3/12">
|
|
<h1 class="text-4xl font-semibold text-center text-gray-900 dark:text-cyan-300">Sign up</h1>
|
|
<div class="pb-6 space-y-2 border-b border-gray-200">
|
|
<a href="#" class="my-3 flex bg-blue-500 text-white justify-center items-center rounded py-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-1">
|
|
<path
|
|
d="M20.283,10.356h-8.327v3.451h4.792c-0.446,2.193-2.313,3.453-4.792,3.453c-2.923,0-5.279-2.356-5.279-5.28 c0-2.923,2.356-5.279,5.279-5.279c1.259,0,2.397,0.447,3.29,1.178l2.6-2.599c-1.584-1.381-3.615-2.233-5.89-2.233 c-4.954,0-8.934,3.979-8.934,8.934c0,4.955,3.979,8.934,8.934,8.934c4.467,0,8.529-3.249,8.529-8.934 C20.485,11.453,20.404,10.884,20.283,10.356z"
|
|
/>
|
|
</svg>
|
|
Continue with Google
|
|
</a>
|
|
<a href="#" class="my-3 flex bg-black text-white justify-center items-center rounded py-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="mr-1">
|
|
<path
|
|
d="M19.665,16.811c-0.287,0.664-0.627,1.275-1.021,1.837c-0.537,0.767-0.978,1.297-1.316,1.592 c-0.525,0.482-1.089,0.73-1.692,0.744c-0.432,0-0.954-0.123-1.562-0.373c-0.61-0.249-1.17-0.371-1.683-0.371 c-0.537,0-1.113,0.122-1.73,0.371c-0.616,0.25-1.114,0.381-1.495,0.393c-0.577,0.025-1.154-0.229-1.729-0.764 c-0.367-0.32-0.826-0.87-1.377-1.648c-0.59-0.829-1.075-1.794-1.455-2.891c-0.407-1.187-0.611-2.335-0.611-3.447 c0-1.273,0.275-2.372,0.826-3.292c0.434-0.74,1.01-1.323,1.73-1.751C7.271,6.782,8.051,6.563,8.89,6.549 c0.46,0,1.063,0.142,1.81,0.422s1.227,0.422,1.436,0.422c0.158,0,0.689-0.167,1.593-0.498c0.853-0.307,1.573-0.434,2.163-0.384 c1.6,0.129,2.801,0.759,3.6,1.895c-1.43,0.867-2.137,2.08-2.123,3.637c0.012,1.213,0.453,2.222,1.317,3.023 c0.392,0.372,0.829,0.659,1.315,0.863C19.895,16.236,19.783,16.529,19.665,16.811L19.665,16.811z M15.998,2.38 c0,0.95-0.348,1.838-1.039,2.659c-0.836,0.976-1.846,1.541-2.941,1.452c-0.014-0.114-0.021-0.234-0.021-0.36 c0-0.913,0.396-1.889,1.103-2.688c0.352-0.404,0.8-0.741,1.343-1.009c0.542-0.264,1.054-0.41,1.536-0.435 C15.992,2.127,15.998,2.254,15.998,2.38L15.998,2.38z"
|
|
/>
|
|
</svg>
|
|
Continue with Apple
|
|
</a>
|
|
</div>
|
|
<form class="space-y-4">
|
|
<label class="block">
|
|
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Name</span>
|
|
<input class="w-full border rounded p-1 placeholder:text-sm" type="text" placeholder="Your full name" required />
|
|
</label>
|
|
<label class="block">
|
|
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Your Email</span>
|
|
<input class="w-full border rounded p-1 placeholder:text-sm" type="email" placeholder="Ex. james@bond.com" inputmode="email" required />
|
|
</label>
|
|
<label class="block">
|
|
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Create a password</span>
|
|
<input class="w-full border rounded p-1 placeholder:text-sm" type="password" placeholder="••••••••" required />
|
|
</label>
|
|
<input type="submit" class=" w-full bg-black text-white rounded py-2" value="Sign Up" />
|
|
</form>
|
|
<p class="my-8 text-xs font-medium text-center text-gray-700">
|
|
By clicking "Sign Up" you agree to our
|
|
<a href="#" class="text-cyan-700 hover:text-cyan-900">Terms of Service</a>
|
|
and
|
|
<a href="#" class="text-cyan-700 hover:text-cyan-900">Privacy Policy</a>.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- register 4 end -->
|
|
|
|
<!-- register 5 start -->
|
|
<section class="section_divider">
|
|
<div>Register 5</div>
|
|
</section>
|
|
<section class="bg-gray-50 dark:bg-gray-800">
|
|
<div class="px-4 py-20 mx-auto max-w-7xl">
|
|
<a href="/" title="Kutty Home Page" class="flex items-center justify-start sm:justify-center">
|
|
<svg class="w-auto h-6" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
|
|
<path
|
|
d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
|
|
fill="#1A202C"
|
|
/>
|
|
<path
|
|
d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
|
|
fill="#9E58E9"
|
|
/>
|
|
<path
|
|
d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
|
|
fill="#7629C8"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">some Text</span>
|
|
</a>
|
|
<div
|
|
class="w-full px-0 pt-5 pb-6 mx-auto mt-4 mb-0 space-y-4 bg-transparent border-0 border-gray-200 rounded-lg md:bg-white dark:md:bg-gray-800 md:border sm:w-10/12 md:w-8/12 lg:w-6/12 xl:w-4/12 md:px-6 sm:mt-8 sm:mb-5"
|
|
>
|
|
<h1 class="mb-5 text-xl font-light text-left text-gray-800 dark:text-cyan-300 dark:text-sm dark:border-b dark:border-cyan-100 dark:pb-2 sm:text-center">Sign up to our product today for free</h1>
|
|
<form class="pb-1 space-y-4">
|
|
<label class="block">
|
|
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300">Name</span>
|
|
<input class="w-full border rounded p-1 placeholder:text-sm" type="text" placeholder="Your full name" required />
|
|
</label>
|
|
<label class="block">
|
|
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300 ">Your Email</span>
|
|
<input class="w-full border rounded p-1 placeholder:text-sm" type="email" placeholder="Ex. james@bond.com" inputmode="email" required />
|
|
</label>
|
|
<label class="block">
|
|
<span class="block mb-1 text-xs font-medium text-gray-700 dark:text-cyan-300 ">Create a password</span>
|
|
<input class="w-full border rounded p-1 placeholder:text-sm" type="password" placeholder="••••••••" required />
|
|
</label>
|
|
<div class="flex flex-col items-start justify-between sm:items-center sm:flex-row">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" class="form-checkbox" />
|
|
<span class="block ml-2 text-xs font-medium text-gray-700 cursor-pointer">Agree to Privacy Policy</span>
|
|
</label>
|
|
<input type="submit" class="w-full mt-5 bg-black rounded text-white px-2 py-1 hover:border hover:border-black hover:bg-white hover:text-black cursor-pointer sm:w-auto sm:mt-0" value="Sign up" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<p class="my-0 text-xs font-medium text-center text-gray-700 dark:text-cyan-300 sm:my-5">
|
|
Already have an account?
|
|
<a href="#" class="text-cyan-700 hover:text-cyan-900">Sign in</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- register 5 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> |