-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (137 loc) · 6.49 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TOP Signup Form</title>
<link rel="stylesheet" href="style.css" />
<script src="scripts.js" defer></script>
</head>
<body>
<div class="container">
<div class="hero">
<div class="logo-container">
<div class="logo">
<img
src="images/odin-lined.png"
alt="The Odin Project Logo"
/>
</div>
<div class="logo-text">ODIN</div>
</div>
</div>
<div class="form-container">
<form action="#" class="form">
<div class="form-heading">
This is not a real online service! You know you need
something like this in your life to help you realize
your deepest dreams.<br />Sign up
<span class="italics">now</span> to get started.
<br /><br />You <span class="italics">know</span> you
want to.
</div>
<div class="form-inputs">
<div class="form-inputs-left">
<div class="form-inputs-heading">
Let's do this!
</div>
<div class="row">
<div class="row-left">
<label for="fname">FIRST NAME</label
><input
type="text"
id="fname"
name="fname"
title="Only alphabets allowed"
pattern="[A-Za-z]+"
required
/>
</div>
<div class="row-right">
<label for="lname">LAST NAME</label>
<input
type="text"
id="lname"
name="lname"
title="Only alphabets allowed"
pattern="[A-Za-z]+"
/>
</div>
</div>
<div class="row">
<div class="row-left">
<label for="email">EMAIL</label
><input
type="email"
id="email"
name="email"
required
/>
</div>
<div class="row-right">
<label for="phone">PHONE NUMBER</label>
<input
type="text"
id="phone"
name="phone"
title="should be 10 digits for eg: 9876543210"
pattern="\d{10}"
/>
</div>
</div>
<div class="row">
<div class="row-left">
<label for="password">PASSWORD</label
><input
type="password"
id="password"
name="password"
maxlength="64"
required
/>
</div>
<div class="row-right">
<label for="passwordConf"
>CONFIRM PASSWORD</label
><input
type="password"
id="passwordConf"
name="passwordConf"
maxlength="64"
required
/>
</div>
</div>
</div>
<div class="form-requirements hidden">
<div class="form-requirements-inner">
Password requirements:
<div class="row req-fail" id="reqLen">
Minimum 8 characters long
</div>
<div class="row req-fail" id="reqLetter">
Contains at least one character
</div>
<div class="row req-fail" id="reqNum">
Contains at least one number
</div>
<div class="row req-fail" id="reqSym">
Contains at least one symbol<br />
(!@#$%^&*()\-_+.)
</div>
<div class="row req-fail" id="reqMatch">
Both passwords should match
</div>
</div>
</div>
</div>
<div class="form-submit">
<input type="submit" value="Create Account" />
Already have an account?
<a href="#"><span class="login">Log in</span></a>
</div>
</form>
</div>
</div>
</body>
</html>