-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (62 loc) · 5.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/d82d384085.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="public/styles.css">
<title>Tidy Sign In Clone</title>
</head>
<body class="font-inter">
<section class="md:grid md:grid-cols-2 md:gap-6">
<div class="h-[100vh] flex justify-center flex-col px-8 md:px-16 lg:px-32 gap-4">
<svg class="block w-10 mb-6" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path class="fill-blue-600"
d="M15.25 4.116c.039.899-.51.468-.79.629-.894.524-1.491 2.04-2.612 2.125-.423.87-1.121.898-1.874 1.503-.327.256-.463.839-.756 1.097l-3.694 3.27a2.395 2.395 0 0 1-.44.314c-.378.219-.656.717-1.096.81-.475.106-1.601-.775-2.633-2.012-.825-1.587-.025-1.924.518-2.525.916-1.022 2.48-2.064 3.585-2.753.843-.537 1.677-1.13 2.59-1.482.935-.357 1.779-.842 2.738-1.041.7-.141 1.522.063 2.206 0a9.596 9.596 0 0 1 2.258.065M30.676 3.646c-.06 1.046-1.038.955-1.593 1.363C27.32 6.31 25.8 8.656 23.63 9.583c-1.07 1.412-2.411 1.952-4.056 3.254-.711.56-1.21 1.417-1.877 1.965-2.887 2.381-5.668 4.524-8.64 6.823-.303.236-.646.468-1.008.697-.834.528-1.675 1.394-2.543 1.77-.95.413-2.376-.279-3.375-1.544-.43-1.849 1.112-2.657 2.38-3.737 2.13-1.82 5.33-4.012 7.558-5.536 1.707-1.17 3.395-2.426 5.138-3.43 1.789-1.03 3.439-2.179 5.224-3.063 1.303-.643 2.758-.96 4.038-1.53a40.762 40.762 0 0 1 4.207-1.606M30.386 14.346c.229.918-.566.8-.896 1.136-1.048 1.058-1.721 3.056-3.254 3.7-.563 1.17-1.522 1.532-2.603 2.507-.464.426-.731 1.128-1.177 1.542-1.94 1.77-3.91 3.263-6.082 4.772a6.36 6.36 0 0 1-.748.43c-.618.313-1.24.914-1.901 1.065-.731.161-1.856-.807-2.662-2.199-.401-1.784.715-2.129 1.6-2.818 1.49-1.15 3.693-2.49 5.192-3.486 1.154-.755 2.247-1.633 3.417-2.292 1.2-.68 2.244-1.52 3.44-2.128.868-.448 1.927-.61 2.79-1.029.92-.447 1.873-.85 2.884-1.2">
</path>
</svg>
<h1 class="text-4xl font-bold">Sign In To Tidy</h1>
<div class="bg-red-400 text-center text-white py-3 relative cursor-pointer">
<div class="absolute left-0 bg-red-500 py-3 top-0 w-[45px] md:w-[50px] lg:w-[58px]"><i
class="fa fa-google" aria-hidden="true"></i></div>
Login With Google
</div>
<div class="bg-blue-400 text-center text-white py-3 relative cursor-pointer">
<div class="absolute left-0 bg-blue-500 py-3 top-0 w-[45px] md:w-[50px] lg:w-[58px]"><i
class="fa fa-facebook" aria-hidden="true"></i></div>
Login With Google
</div>
<div class="separator"> or </div>
<p>Email <span class="text-red-500">*</span></p>
<input type="text" class="border border-gray rounded py-2 px-2">
<p>Password <span class="text-red-500">*</span></p>
<input type="password" class="border border-gray rounded py-2 px-2">
<button class="py-3 bg-blue-600 text-white">Sign in <i class="fa fa-arrow-right text-sm text-gray-300"
aria-hidden="true"></i></button>
<a class="text-blue-500 hover:underline text-center" href="#">Forgot your password?</a>
</div>
<div class="h-[100vh] md:flex items-center justify-center relative hidden bg-overlay">
<img class="object-cover w-full h-full relative z-[-1]" src="img/sign-in-bg.jpg" alt="">
<div class="absolute left-6 transform translatey-[-50%]">
<h1 class="text-white text-5xl font-bold mb-4">The Wealth Inc.</h1>
<div class="my-4">
<svg class="fill-blue-600 mb-3" width="24" height="20" viewBox="0 0 20 16">
<path
d="M2.76 16c2.577 0 5.154-3.219 5.154-5.996 0-1.357-.613-2.272-1.748-2.272s-2.27.726-3.283 1.64C3.16 6.439 5.613 3.346 9.571.885L9.233 0C3.466 2.903 0 7.732 0 12.213 0 14.517.828 16 2.76 16Zm10.43 0c2.577 0 5.154-3.219 5.154-5.996 0-1.357-.614-2.272-1.749-2.272-1.135 0-2.27.726-3.282 1.64.276-2.934 2.73-6.027 6.687-8.488L19.663 0c-5.767 2.903-9.234 7.732-9.234 12.213 0 2.304.829 3.787 2.761 3.787Z">
</path>
</svg>
<blockquote class="text-gray-400 max-w-[80%]">Duis aute irure dolor in reprehenderit in voluptate
velit esse
cillum dolore eu fugiat
nulla pariatur e xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
</blockquote>
</div>
<img class="rounded-full w-10 inline" src="img/customer-avatar-05.jpg" alt="">
<h1 class="text-gray-300 font-medium inline ml-3">Michael Crob</h1>
<h1 class="inline text-[#64748B] font-medium"> · CEO, The Wealth Inc.</h1>
</div>
</div>
</section>
</body>
</html>