-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtry.html
144 lines (140 loc) · 6.98 KB
/
try.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<Style>
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
font-family: 'Raleway', sans-serif;
}
</Style>
</head>
<body class="antialiased bg-gradient-to-br from-green-100 to-white">
<header>
<nav class="fixed w-full relative">
<div class="container m-auto px-6 md:px-12 lg:px-6">
<div class="flex flex-wrap items-center justify-between py-6 gap-6 md:py-4 md:gap-0">
<div class="w-full flex justify-between lg:w-auto"><a href="index.html" aria-label="logo"><img src="logo.png" class="w-24" alt="mixeo logo" width="144" height="48"></a>
<button aria-label="hamburger" id="hamburger" class="w-10 h-10 mr-2 block md:hidden">
<div aria-hidden="true" id="line" class="inset-0 w-6 h-0.5 mt-2 m-auto rounded bg-gray-500 transtion duration-300"></div>
<div aria-hidden="true" id="line2" class="inset-0 w-6 h-0.5 mt-2 m-auto rounded bg-gray-500 transtion duration-300"></div>
</button></div>
<div id="menu" class="w-full md:flex md:items-center md:w-auto md:space-y-0 md:p-0 md:flex-nowrap hidden">
<div class="block w-full lg:items-center lg:flex ">
<ul class="space-y-6 pb-6 tracking-wide font-medium text-gray-600 lg:pb-0 lg:pr-6 lg:items-center lg:flex lg:space-y-0">
<li><a href="index.html" class="block md:px-3"><span>Home</span></a></li>
<li><a href="about.html" class="block md:px-3" id="link"><span>About Us</span></a></li>
<li><a href="how.html" class="block md:px-3"><span>How it works</span></a></li>
</ul>
<ul class="border-t space-y-2 pt-2 lg:space-y-0 lg:space-x-2 lg:pt-0 lg:pl-2 lg:border-t-0 lg:border-l lg:items-center lg:flex">
<li><a href="sign.html"><button type="button" title="Start buying" class="w-full py-3 px-6 rounded-full text-center transition focus:bg-sky-100 sm:w-max"><span class="block text-cyan-600 font-semibold"> Sign in </span></button></a></li>
<li><a href="DASHBOARD.html"><button type="button" title="Start buying" class="w-full py-3 px-6 rounded-full text-center transition bg-cyan-500 hover:bg-cyan-600 hover:border-cyan-900 hover:border-10 focus:bg-sky-600 sm:w-max"><span class="block text-white font-semibold"> Try it Now </span></button></a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header><br><br><br><br>
<div class="container px-6 mx-auto">
<div
class="flex flex-col text-center md:text-left md:flex-row h-screen justify-evenly md:items-center"
>
<div class="flex flex-col w-full">
<div>
<svg
class="w-20 h-20 mx-auto md:float-left fill-stroke text-gray-800"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<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"
></path>
</svg>
</div>
<h1 class="text-5xl text-gray-800 font-bold">Sign in to get started</h1>
<p class="w-5/12 mx-auto md:mx-0 text-gray-500">
Login to start the generator ⚙️.
</p>
</div>
<div class="w-full md:w-full lg:w-9/12 mx-auto md:mx-0">
<div class="bg-white p-10 flex flex-col w-full shadow-xl rounded-xl">
<h2 class="text-2xl font-bold text-gray-800 text-left mb-5">
SIGN IN
</h2>
<form action="" class="w-full">
<div id="input" class="flex flex-col w-full my-5">
<label for="username" class="text-gray-500 mb-2"
>Email address</label
>
<input
type="email"
id="username"
placeholder="Please enter your email"
class="appearance-none border-2 border-gray-100 rounded-lg px-4 py-3 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:shadow-lg"
/>
</div>
<div id="input" class="flex flex-col w-full my-5">
<label for="password" class="text-gray-500 mb-2"
>Password</label
>
<input
type="password"
id="password"
placeholder="Please insert your password"
class="appearance-none border-2 border-gray-100 rounded-lg px-4 py-3 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-600 focus:shadow-lg"
/>
</div>
<div id="button" class="flex flex-col w-full my-5">
<a href="DASHBOARD.html"><button
type="button"
class="w-full py-4 bg-green-600 rounded-lg text-green-100"
>
<div class="flex flex-row items-center justify-center">
<div class="mr-2">
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
></path>
</svg>
</div>
<div class="font-bold">Sign in</div>
</div>
</button></a>
<div class="flex justify-evenly mt-5">
<a
href="#"
class="w-full text-center font-medium text-gray-500"
>Forgot Your Password ?</a
>
<a
href="#"
class="w-full text-center font-medium text-gray-500"
>New User ? Sign up </a
>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>