-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsign-up.html
207 lines (201 loc) · 10.1 KB
/
sign-up.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="./src/styles/style.css" />
<title>Startup - Sign In Page</title>
</head>
<body>
<!-- Header -->
<header class="header">
<div class="header-wrapper">
<div class="logo">
<a href="index.html"
><img src="public/assets/logo.svg" alt="startup"
/></a>
</div>
<nav class="navigation" id="navigation" aria-expanded="false">
<ul class="nav-list">
<li class="nav-item">
<a href="index.html#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="index.html#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="index.html#pricing" class="nav-link">Pricing</a>
</li>
<li class="nav-item">
<a href="index.html#support" class="nav-link">Support</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Pages</a>
</li>
</ul>
</nav>
<div class="sign-container">
<a class="btn" href="sign-in.html">Sign In</a>
<a class="primary-btn btn" href="sign-up.html">Sign Up</a>
</div>
<button type="button" class="menu-toggler" aria-controls="#navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</div>
</header>
<!-- Form -->
<section class="sign-up sign">
<div class="sign-card">
<h3>Create your account</h3>
<p>It's totally free and super easy</p>
<a href="#" class="flex-group">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_95:967)">
<path
d="M20.0001 10.2216C20.0122 9.53416 19.9397 8.84776 19.7844 8.17725H10.2042V11.8883H15.8277C15.7211 12.539 15.4814 13.1618 15.1229 13.7194C14.7644 14.2769 14.2946 14.7577 13.7416 15.1327L13.722 15.257L16.7512 17.5567L16.961 17.5772C18.8883 15.8328 19.9997 13.266 19.9997 10.2216"
fill="#4285F4"></path>
<path
d="M10.2042 20.0001C12.9592 20.0001 15.2721 19.1111 16.9616 17.5778L13.7416 15.1332C12.88 15.7223 11.7235 16.1334 10.2042 16.1334C8.91385 16.126 7.65863 15.7206 6.61663 14.9747C5.57464 14.2287 4.79879 13.1802 4.39915 11.9778L4.27957 11.9878L1.12973 14.3766L1.08856 14.4888C1.93689 16.1457 3.23879 17.5387 4.84869 18.512C6.45859 19.4852 8.31301 20.0005 10.2046 20.0001"
fill="#34A853"></path>
<path
d="M4.39911 11.9777C4.17592 11.3411 4.06075 10.673 4.05819 9.99996C4.0623 9.32799 4.17322 8.66075 4.38696 8.02225L4.38127 7.88968L1.19282 5.4624L1.08852 5.51101C0.372885 6.90343 0.00012207 8.4408 0.00012207 9.99987C0.00012207 11.5589 0.372885 13.0963 1.08852 14.4887L4.39911 11.9777Z"
fill="#FBBC05"></path>
<path
d="M10.2042 3.86663C11.6663 3.84438 13.0804 4.37803 14.1498 5.35558L17.0296 2.59996C15.1826 0.901848 12.7366 -0.0298855 10.2042 -3.6784e-05C8.3126 -0.000477834 6.45819 0.514732 4.8483 1.48798C3.2384 2.46124 1.93649 3.85416 1.08813 5.51101L4.38775 8.02225C4.79132 6.82005 5.56974 5.77231 6.61327 5.02675C7.6568 4.28118 8.91279 3.87541 10.2042 3.86663Z"
fill="#EB4335"></path>
</g>
<defs>
<clipPath id="clip0_95:967">
<rect width="20" height="20" fill="white"></rect>
</clipPath>
</defs>
</svg>
<p>Sign up with Google</p>
</a>
<p><span></span>Or, register your email<span></span></p>
<form class="sign-form">
<label for="fullname">Full Name</label>
<input
type="text"
placeholder="Enter your full name"
name="fullname"
id="fullname" />
<label for="email">Work Email</label>
<input
type="text"
placeholder="Enter your Email"
name="email"
id="email" />
<label for="password">Your Password</label>
<input
type="password"
name="password"
id="password"
placeholder="Enter your Password" />
<div class="flex-group">
<label class="checkbox">
<input type="checkbox" />
<span class="checkmark">
<svg
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
fill="#3056D3"
stroke="#3056D3"
stroke-width="0.4"></path>
</svg>
</span>
By creating account means you agree to the
<a href="#">Terms and Conditions</a>, and or
<a href="#">Privacy Policy</a>
</label>
</div>
<button type="submit" class="btn primary-btn">Sign up</button>
</form>
<p>Already using Startup? <a href="sign-in.html">Sign in</a></p>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-wrapper">
<div class="social-links">
<img src="public/assets/logo.svg" alt="startup logo" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus,
dicta?
</p>
<div class="flex-group">
<a href="#">
<svg width="9" height="18" viewBox="0 0 9 18" class="a26">
<path
d="M8.13643 7H6.78036H6.29605V6.43548V4.68548V4.12097H6.78036H7.79741C8.06378 4.12097 8.28172 3.89516 8.28172 3.55645V0.564516C8.28172 0.254032 8.088 0 7.79741 0H6.02968C4.11665 0 2.78479 1.58064 2.78479 3.92339V6.37903V6.94355H2.30048H0.65382C0.314802 6.94355 0 7.25403 0 7.70564V9.7379C0 10.1331 0.266371 10.5 0.65382 10.5H2.25205H2.73636V11.0645V16.7379C2.73636 17.1331 3.00273 17.5 3.39018 17.5H5.66644C5.81174 17.5 5.93281 17.4153 6.02968 17.3024C6.12654 17.1895 6.19919 16.9919 6.19919 16.8226V11.0927V10.5282H6.70771H7.79741C8.11222 10.5282 8.35437 10.3024 8.4028 9.96371V9.93548V9.90726L8.74182 7.95968C8.76604 7.7621 8.74182 7.53629 8.59653 7.31048C8.54809 7.16935 8.33016 7.02823 8.13643 7Z"></path>
</svg>
</a>
<a href="#">
<svg width="19" height="14" viewBox="0 0 19 14" class="a26">
<path
d="M16.3024 2.26027L17.375 1.0274C17.6855 0.693493 17.7702 0.436644 17.7984 0.308219C16.9516 0.770548 16.1613 0.924658 15.6532 0.924658H15.4556L15.3427 0.821918C14.6653 0.282534 13.8185 0 12.9153 0C10.9395 0 9.3871 1.48973 9.3871 3.21062C9.3871 3.31336 9.3871 3.46747 9.41532 3.57021L9.5 4.0839L8.90726 4.05822C5.29435 3.95548 2.33065 1.13014 1.85081 0.642123C1.06048 1.92637 1.5121 3.15925 1.99194 3.92979L2.95161 5.36815L1.42742 4.5976C1.45565 5.67637 1.90726 6.52397 2.78226 7.14041L3.54435 7.65411L2.78226 7.93665C3.2621 9.24658 4.33468 9.78596 5.125 9.99144L6.16935 10.2483L5.18145 10.8647C3.60081 11.8921 1.625 11.8151 0.75 11.738C2.52823 12.8682 4.64516 13.125 6.1129 13.125C7.21371 13.125 8.03226 13.0223 8.22984 12.9452C16.1331 11.25 16.5 4.82877 16.5 3.54452V3.36473L16.6694 3.26199C17.629 2.44007 18.0242 2.00342 18.25 1.74658C18.1653 1.77226 18.0524 1.82363 17.9395 1.84932L16.3024 2.26027Z"></path>
</svg>
</a>
<a href="#">
<svg width="18" height="14" viewBox="0 0 18 14" class="a26">
<path
d="M17.5058 2.07119C17.3068 1.2488 16.7099 0.609173 15.9423 0.395963C14.5778 7.26191e-08 9.0627 0 9.0627 0C9.0627 0 3.54766 7.26191e-08 2.18311 0.395963C1.41555 0.609173 0.818561 1.2488 0.619565 2.07119C0.25 3.56366 0.25 6.60953 0.25 6.60953C0.25 6.60953 0.25 9.68585 0.619565 11.1479C0.818561 11.9703 1.41555 12.6099 2.18311 12.8231C3.54766 13.2191 9.0627 13.2191 9.0627 13.2191C9.0627 13.2191 14.5778 13.2191 15.9423 12.8231C16.7099 12.6099 17.3068 11.9703 17.5058 11.1479C17.8754 9.68585 17.8754 6.60953 17.8754 6.60953C17.8754 6.60953 17.8754 3.56366 17.5058 2.07119ZM7.30016 9.44218V3.77687L11.8771 6.60953L7.30016 9.44218Z"></path>
</svg>
</a>
<a href="#">
<svg width="17" height="16" viewBox="0 0 17 16" class="a26">
<path
d="M15.2196 0H1.99991C1.37516 0 0.875366 0.497491 0.875366 1.11936V14.3029C0.875366 14.8999 1.37516 15.4222 1.99991 15.4222H15.1696C15.7943 15.4222 16.2941 14.9247 16.2941 14.3029V1.09448C16.3441 0.497491 15.8443 0 15.2196 0ZM5.44852 13.1089H3.17444V5.7709H5.44852V13.1089ZM4.29899 4.75104C3.54929 4.75104 2.97452 4.15405 2.97452 3.43269C2.97452 2.71133 3.57428 2.11434 4.29899 2.11434C5.02369 2.11434 5.62345 2.71133 5.62345 3.43269C5.62345 4.15405 5.07367 4.75104 4.29899 4.75104ZM14.07 13.1089H11.796V9.55183C11.796 8.7061 11.771 7.58674 10.5964 7.58674C9.39693 7.58674 9.222 8.53198 9.222 9.47721V13.1089H6.94792V5.7709H9.17202V6.79076H9.19701C9.52188 6.19377 10.2466 5.59678 11.3711 5.59678C13.6952 5.59678 14.12 7.08925 14.12 9.12897V13.1089H14.07Z"></path>
</svg>
</a>
</div>
</div>
<div class="useful-links">
<h4>Useful Links</h4>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="index.html#pricing">Pricing</a></li>
<li><a href="index.html#about">About</a></li>
</ul>
</div>
<div class="terms">
<h4>Terms</h4>
<ul>
<li><a href="#">TOS</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Refund Policy</a></li>
</ul>
</div>
<div class="support-help">
<h4>Support & Help</h4>
<ul>
<li><a href="#">Open</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</footer>
<a href="#" class="scroll-btn">
<span class="arrow-up"></span>
</a>
<script type="module" src="/src/main.ts"></script>
</body>
</html>