-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (137 loc) · 14.7 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script2.js"></script>
<title>HTML FORM </title>
</head>
<body>
<div class="form-sign-up">
<h1 class="header">VALIDATION FORM</h1>
<form action="" class="app-form">
<!-- name, email, phone number and gender the i agree checkbox -->
<div class=" form-mem main-form">
<div class="label-icon input-1 fade-obj">
<svg version="1.1" class="gf" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" wwwwwwwwwxml:space="preserve">
<g> <path d="M256,0c-74.439,0-135,60.561-135,135s60.561,135,135,135s135-60.561,135-135S330.439,0,256,0z"/> </g>
<g>
<path d="M423.966,358.195C387.006,320.667,338.009,300,286,300h-60c-52.008,0-101.006,20.667-137.966,58.195 C51.255,395.539,31,444.833,31,497c0,8.284,6.716,15,15,15h420c8.284,0,15-6.716,15-15
C481,444.833,460.745,395.539,423.966,358.195z"/>
</g>
</svg>
</div>
<input type="text" name="name" id="fn" placeholder="FullName" autocomplete="off">
<div class="toolip">Name must include Surname and FirstName</div>
</div>
<!-- email -->
<div class="form-mem main-form">
<div class="label-icon fade-obj">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<polygon points="339.392,258.624 512,367.744 512,144.896 "/>
<polygon points="0,144.896 0,367.744 172.608,258.624 "/>
<path d="M480,80H32C16.032,80,3.36,91.904,0.96,107.232L256,275.264l255.04-168.032C508.64,91.904,495.968,80,480,80z"/>
<path d="M310.08,277.952l-45.28,29.824c-2.688,1.76-5.728,2.624-8.8,2.624c-3.072,0-6.112-0.864-8.8-2.624l-45.28-29.856
L1.024,404.992C3.488,420.192,16.096,432,32,432h448c15.904,0,28.512-11.808,30.976-27.008L310.08,277.952z"/>
</svg>
</div>
<input type="email" name="email" id="" placeholder="Email" autocomplete="off">
<div class="toolip">Must be a valid email address</div>
</div>
<!-- password -->
<div class="form-mem main-form wrap-pass">
<div class="label-icon fade-obj">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M201.5,472h-105c-22.056,0-40-17.944-40-40V268c0-22.056,17.944-40,40-40h288c22.056,0,40,17.944,40,40v21
c0,11.046,8.954,20,20,20c11.046,0,20-8.954,20-20v-21c0-44.112-35.888-80-80-80h-24.037v-70.534
C360.463,52.695,306.631,0,240.463,0s-120,52.695-120,117.466V188H96.5c-44.112,0-80,35.888-80,80v164c0,44.112,35.888,80,80,80
h105c11.046,0,20-8.954,20-20C221.5,480.954,212.546,472,201.5,472z M160.463,117.466c0-42.715,35.888-77.466,80-77.466
s80,34.751,80,77.466V188h-160V117.466z"/>
<circle cx="203.5" cy="346" r="20"/>
<path d="M491.864,403.503c-0.703-1.001-3.115-4.415-4.614-6.3c-6.696-8.422-22.376-28.146-44.193-45.558
C415.085,329.319,386.299,318,357.5,318s-57.585,11.319-85.556,33.643c-21.82,17.414-37.499,37.137-44.187,45.551
c-1.503,1.889-3.917,5.305-4.621,6.307c-4.847,6.898-4.848,16.096-0.002,22.994c0.705,1.003,3.119,4.421,4.617,6.302
c6.694,8.422,22.373,28.145,44.192,45.559C299.915,500.681,328.701,512,357.5,512s57.584-11.319,85.557-33.643
c21.817-17.413,37.498-37.136,44.196-45.562c1.498-1.885,3.908-5.296,4.611-6.297
C496.712,419.599,496.712,410.401,491.864,403.503z M357.5,472c-29.705,0-60.841-19.164-92.642-57
c31.799-37.835,62.935-57,92.642-57c29.703,0,60.843,19.169,92.643,57.001C418.342,452.835,387.206,472,357.5,472z"/>
<circle cx="128.5" cy="346" r="20"/>
<circle cx="358.5" cy="415" r="38"/>
</svg>
</div>
<input type="password" name="name" id="password" class="password" placeholder="Password" autocomplete="off" required>
<svg xmlns="http://www.w3.org/2000/svg" class="eye-icon eye-show" xml:space="preserve" width="3.10263in" height="1.94092in" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd"
clip-rule="evenodd" viewBox="0 0 1160 725" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<g id="_2391597885600">
<path fill="#b41f0b" d="M511 5c-223,29 -389,153 -501,329 -22,35 -3,54 15,81 288,436 872,399 1125,-22 21,-35 3,-54 -15,-81 -102,-152 -326,-345 -624,-307z"/>
<path fill="#FEFEFE" d="M80 363c30,64 137,160 197,199 188,122 421,124 606,1 60,-40 168,-135 197,-200 -31,-63 -137,-159 -197,-198 -82,-53 -183,-92 -303,-92 -121,0 -222,40 -303,91 -61,40 -165,135 -197,199z"/>
<path fill="#b41f0b" d="M545 149c-293,56 -206,478 74,429 104,-19 200,-122 175,-253 -19,-104 -120,-200 -249,-176z"/>
<path fill="#F6F7F8" d="M551 222c-191,43 -126,325 62,283 67,-15 128,-86 109,-174 -15,-67 -86,-128 -171,-109z"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="eye-icon eye-hide" xml:space="preserve" width="3.20981in" height="1.98172in" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd"
clip-rule="evenodd" viewBox="0 0 1912 1181" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<g id="_2391685350448">
<g>
<path fill="#b41f0b" d="M837 32c-355,46 -621,245 -798,524 -36,57 -5,87 23,130 459,694 1390,635 1793,-35 35,-56 6,-86 -23,-130 -162,-242 -521,-550 -995,-489z"/>
<path fill="#FEFEFE" d="M150 604c49,101 218,254 315,316 299,194 670,197 965,1 96,-64 268,-215 315,-317 -50,-102 -219,-255 -316,-317 -130,-84 -291,-147 -482,-147 -192,0 -354,64 -483,146 -98,63 -264,215 -314,318z"/>
<path fill="#b41f0b" d="M891 262c-467,89 -328,762 117,683 167,-29 320,-194 281,-403 -32,-166 -191,-319 -398,-280z"/>
<path fill="#F6F7F8" d="M900 379c-303,68 -201,516 99,450 108,-23 204,-137 174,-278 -24,-106 -137,-203 -273,-172z"/>
</g>
<rect fill="#b41f0b" stroke="#b41f0b" stroke-width="4.13776" transform="matrix(0.981208 1.85077 -1.37659 0.729815 1811.92 2.79589)" width="99.5597" height="1314.21"/>
</g>
</g>
</svg>
<div class="toolip">Password must be atleast 8 Cap & Low Letter, symbol & number</div>
</div>
<!-- --------------------------- -->
<!-- -->
<div class="form-mem main-form">
<div class="label-icon fade-obj">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
<path d="M353.188,252.052c-23.51,0-46.594-3.677-68.469-10.906c-10.719-3.656-23.896-0.302-30.438,6.417l-43.177,32.594 c-50.073-26.729-80.917-57.563-107.281-107.26l31.635-42.052c8.219-8.208,11.167-20.198,7.635-31.448 c-7.26-21.99-10.948-45.063-10.948-68.583C132.146,13.823,118.323,0,101.333,0H30.813C13.823,0,0,13.823,0,30.813 C0,225.563,158.438,384,353.188,384c16.99,0,30.813-13.823,30.813-30.813v-70.323C384,265.875,370.177,252.052,353.188,252.052z"/>
</svg>
</div>
<input type="tel" name="name" id="" placeholder="Phone Number" autocomplete="off">
<div class="toolip">Enter Valid phone phone number with country code</div>
</div>
<div id="gender-sect" class="form-mem">
<label class="gender-main" for="">Male
<svg xmlns="http://www.w3.org/2000/svg" class="gender gen-1" xml:space="preserve" width="2.89378in" height="8.57213in" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 1170 3466"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<path d="M1 1426l150 3 -150 354c0,68 0,138 0,206 0,70 -11,129 37,172 38,37 118,34 154,-3 40,-38 32,-114 34,-180 0,-75 -7,-786 1,-834l31 0 1 565c13,13 137,306 142,336l-104 -1c-12,-28 -19,-69 -39,-86 9,249 0,520 0,773 0,129 0,258 0,387 0,126 -26,274 65,326 78,45 235,26 243,-108 7,-119 0,-263 0,-385 0,-261 2,-522 0,-783l37 0c-5,324 0,654 0,979 0,52 -6,189 10,232 23,62 81,89 163,84 179,-8 136,-207 136,-361 0,-326 0,-651 0,-977 0,-163 5,-328 -2,-489l3 -492 31 0 1 554c-1,42 -5,382 5,416 35,109 216,109 218,-51 2,-94 0,-187 0,-280 0,-91 8,-769 -8,-828 -17,-69 -72,-129 -130,-151 -85,-31 -430,-16 -545,-16 -200,0 -366,-35 -452,110 -43,73 -32,160 -32,249 0,93 -1,188 0,279zm527 -1421c-180,28 -334,200 -299,413 30,177 200,333 414,298 178,-30 329,-197 297,-412 -27,-180 -197,-333 -412,-299zm-527 1778l150 -354 -150 -3 0 357zm257 175c20,17 27,58 39,86l104 1c-5,-30 -129,-323 -142,-336l-1 249z"/>
</g>
</svg>
<input type="radio" name="gender" class="male" ></label>
<label class="gender-main" for="">Female
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" class="gender gen-2" xml:space="preserve" width="4.06717in" height="8.56763in" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 21112 44474"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<g id="_2677500742608">
<path d="M2924 29921l3719 20 0 12119c0,1042 143,2391 1696,2411 675,0 1104,-347 1369,-674 430,-511 368,-961 368,-1656 0,-3985 102,-8317 0,-12200l940 -20c-81,3883 0,8174 0,12139 0,694 -81,1185 327,1696 716,919 1962,981 2759,41 347,-429 347,-1043 347,-1656 0,-3903 -81,-8419 0,-12200 511,0 3699,143 3904,-143 204,-327 -1472,-5231 -1656,-5906l-2186 -7315c-286,-920 347,-1002 592,-593l2596 6928c306,756 531,2125 1267,2554 899,531 2084,-41 2145,-1144 21,-511 -286,-1104 -449,-1513 -327,-817 -674,-1921 -981,-2820l-2003 -5640c-306,-879 -654,-2064 -1103,-2718 -1410,-1982 -3822,-1512 -6131,-1512 -2697,0 -4659,-327 -5987,1594 -409,613 -818,1962 -1084,2738 -327,940 -674,1880 -1001,2820 -347,940 -674,1880 -1001,2820l-1002 2821c-265,694 -858,2043 430,2615 531,246 1124,102 1512,-163 286,-225 511,-777 674,-1267 225,-593 2902,-8134 3127,-8277 265,-163 511,-20 552,225 40,225 -532,1962 -614,2248 -592,1962 -1144,3924 -1777,5865l-1308 4373c-164,532 -470,1083 -41,1390z"/>
<path d="M9790 65c-2329,388 -4312,2595 -3780,5415 408,2248 2574,4169 5354,3699 2248,-388 4169,-2575 3739,-5313 -367,-2289 -2574,-4251 -5313,-3801z"/>
</g>
</g>
</svg>
<input type="radio" name="gender" class="female" ></label>
</div>
<input type="submit" class="submit" value="SIGN UP" id="submit-btn">
</form>
</div>
<div class="success">
<svg class="success-icon" fill="green" enable-background="new 0 0 512.007 512.007" viewBox="0 0 512.007 512.007" xmlns="http://www.w3.org/2000/svg"><g><path id="s-i" fill="red" d="m236.609 269.191c-5.625 5.625-15.586 5.625-21.211 0l-23.042-23.042-21.211 21.211 54.858 54.858 114.859-114.858-21.226-21.211z"/><path id="success-i" d="m487.991 153.219c-.776-.732-17.183-16.011-37.661-27.056-2.373-23.159-10.21-44.165-10.591-45.161-1.523-4.028-4.702-7.207-8.73-8.73-.996-.381-22.002-8.218-45.161-10.591-11.045-20.493-26.338-36.899-27.056-37.676-2.959-3.149-7.119-5.376-11.426-4.717-1.055.029-23.467.82-45.776 7.5-18.047-14.706-38.438-25.008-39.405-25.448-3.926-1.787-8.438-1.787-12.363 0-.967.439-21.357 10.741-39.404 25.448-22.31-6.68-44.722-7.471-45.776-7.5-4.512-.63-8.467 1.567-11.426 4.717-.718.776-16.011 17.183-27.056 37.676-23.159 2.373-44.165 10.21-45.161 10.591-4.028 1.523-7.207 4.702-8.73 8.73-.381.996-8.218 22.002-10.591 45.161-20.493 11.045-36.899 26.338-37.676 27.056-3.135 2.959-4.863 7.119-4.717 11.426.029 1.055.82 23.467 7.5 45.776-14.707 18.047-25.009 38.438-25.448 39.404-1.772 3.926-1.772 8.438 0 12.363.439.967 10.741 21.357 25.448 39.404-6.68 22.31-7.471 44.722-7.5 45.776-.146 4.307 1.582 8.467 4.717 11.426.776.718 17.183 16.011 37.676 27.056 2.373 23.159 10.21 44.165 10.591 45.161 1.523 4.028 4.702 7.207 8.745 8.73.996.381 21.987 8.218 45.146 10.591 11.045 20.479 26.323 36.885 27.056 37.661 2.944 3.149 7.178 5.127 11.426 4.731 1.055-.029 23.467-.82 45.762-7.5 18.062 14.692 38.452 25.009 39.419 25.448 1.963.894 4.072 1.333 6.182 1.333s4.219-.439 6.182-1.333c.967-.439 21.357-10.756 39.404-25.448 22.31 6.68 44.722 7.471 45.776 7.5 4.453.366 8.467-1.582 11.426-4.731.732-.776 16.011-17.183 27.056-37.661 23.159-2.373 44.15-10.21 45.146-10.591 4.043-1.523 7.222-4.702 8.745-8.73.381-.996 8.218-22.002 10.591-45.161 20.479-11.045 36.885-26.323 37.661-27.056 3.149-2.944 4.878-7.104 4.731-11.426-.029-1.055-.82-23.467-7.5-45.776 14.707-18.047 25.009-38.438 25.448-39.404 1.772-3.926 1.772-8.438 0-12.363-.439-.967-10.741-21.357-25.448-39.404 6.68-22.31 7.471-44.722 7.5-45.776.146-4.321-1.583-8.481-4.732-11.426zm-115.313 64.746-136.069 136.07c-2.93 2.93-6.768 4.395-10.605 4.395s-7.676-1.465-10.605-4.395l-76.069-76.069c-5.859-5.859-5.859-15.352 0-21.211l42.422-42.422c5.859-5.859 15.352-5.859 21.211 0l23.042 23.042 83.027-83.042c5.859-5.859 15.352-5.859 21.211 0l42.437 42.422c5.858 5.859 5.854 15.355-.002 21.21z"/></g></svg>
<!-- icon -->
<h1 class="success-alert"> </h1>
<input type="submit" class="submit2" value="REGISTER ANOTHER" id="submit-btn">
</div>
</body>
<script src="script.js"></script>
</html>