-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
199 lines (196 loc) · 16.6 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form with SVG Animation</title>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="form">
<svg
id="svg-img"
width="300"
height="500"
viewBox="0 0 1078 726"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="undraw_messaging_fun_86y2 1" clip-path="url(#clip0)">
<g id="head">
<path
id="hair"
d="M457.177 45.8564C449.712 46.7278 441.948 48.8453 437.127 53.9081C434.343 56.8359 432.796 60.4871 430.451 63.6938C421.968 75.3094 405.091 79.1871 391.089 85.5221C369.812 95.1596 352.866 113.163 349.692 133.91C346.748 153.133 355.401 172.199 356.678 191.561C358.355 216.283 348.085 240.255 339.383 263.826C336.957 270.396 334.622 277.175 335.051 284.077C335.351 288.8 336.938 293.374 338.634 297.871C346.618 318.993 357.456 339.584 373.564 356.82C389.672 374.056 411.488 387.824 436.239 392.922C447.536 395.249 459.193 395.754 470.8 396.129C488.564 396.71 506.332 397 524.103 397C533.864 397 543.684 396.904 553.265 395.257C573.594 391.824 591.529 381.768 608.894 371.921C628.904 360.593 650.81 346.651 653.864 326.017C656.04 311.116 647.497 296.503 647.507 281.48C647.507 266.03 656.489 251.853 661.688 237.039C669.85 213.558 668.575 188.347 658.076 165.585C652.477 153.569 644.303 142.284 641.569 129.527C639.433 119.541 640.76 109.198 638.834 99.1767C633.934 73.6886 607.896 54.0911 579.353 47.3291C557.287 42.1008 534.852 43.7564 512.676 47.3291C493.644 50.4748 476.239 43.678 457.177 45.8564Z"
fill="#AE5400"
/>
<path
id="face"
d="M503.01 288.93C557.493 288.93 601.66 244.763 601.66 190.28C601.66 135.797 557.493 91.63 503.01 91.63C448.527 91.63 404.36 135.797 404.36 190.28C404.36 244.763 448.527 288.93 503.01 288.93Z"
fill="#FFAD4E"
/>
<path
id="bang"
d="M506.93 149.68C559.005 149.68 601.22 133.262 601.22 113.01C601.22 92.7577 559.005 76.34 506.93 76.34C454.855 76.34 412.64 92.7577 412.64 113.01C412.64 133.262 454.855 149.68 506.93 149.68Z"
fill="#AE5400"
/>
<g id="eyes">
<ellipse
id="Ellipse 2"
cx="559"
cy="181.5"
rx="13"
ry="13.5"
fill="#6B3D06"
/>
<ellipse
id="Ellipse 1"
cx="456"
cy="186.5"
rx="13"
ry="13.5"
fill="#6B3D06"
/>
<ellipse
id="Ellipse 3"
cx="453.5"
cy="185.5"
rx="2.5"
ry="4.5"
fill="#C4C4C4"
/>
<ellipse
id="Ellipse 4"
cx="556.5"
cy="181.5"
rx="2.5"
ry="4.5"
fill="#C4C4C4"
/>
</g>
<g id="glasses">
<path
id="Vector"
d="M448.819 163.255C448.819 163.255 414.476 156.255 418.297 186.717C419.324 193.242 422.019 199.391 426.121 204.569C430.222 209.746 435.591 213.777 441.708 216.27C444.453 217.423 447.402 218.015 450.379 218.01V218.01C454.498 218.007 458.538 216.876 462.06 214.74C471.39 209.089 486.801 195.898 478.571 173.426C478.571 173.426 470.18 154.654 448.819 163.255Z"
fill="#733A06"
/>
<path
id="Vector_2"
d="M445.947 158.71C472.236 148.38 482.565 170.91 482.565 170.91C492.685 197.91 473.726 213.73 462.246 220.51C457.889 223.078 452.924 224.432 447.867 224.43C444.206 224.43 440.58 223.71 437.198 222.31C410.849 211.46 408.359 186.88 408.359 186.88C403.699 150.31 445.947 158.71 445.947 158.71ZM418.548 187.43C419.576 193.955 422.27 200.103 426.371 205.28C430.473 210.457 435.841 214.487 441.957 216.98C444.702 218.133 447.65 218.725 450.627 218.72C454.745 218.717 458.785 217.586 462.306 215.45C471.636 209.8 487.045 196.61 478.815 174.14C478.815 174.14 470.426 155.37 449.067 163.97C449.067 163.97 414.729 156.93 418.548 187.43Z"
fill="#FF4747"
/>
<path
id="Vector_3"
d="M570.28 154.02C543.99 143.69 533.66 166.22 533.66 166.22C523.54 193.22 542.5 209.04 553.98 215.82C558.337 218.388 563.303 219.742 568.36 219.74C572.021 219.74 575.647 219.02 579.03 217.62C605.38 206.77 607.87 182.19 607.87 182.19C612.53 145.62 570.28 154.02 570.28 154.02ZM597.68 182.74C596.653 189.264 593.958 195.413 589.857 200.59C585.755 205.767 580.386 209.797 574.27 212.29C571.525 213.443 568.577 214.035 565.6 214.03C561.481 214.027 557.442 212.896 553.92 210.76C544.59 205.11 529.18 191.92 537.41 169.45C537.41 169.45 545.8 150.68 567.16 159.28C567.16 159.28 601.5 152.24 597.68 182.74Z"
fill="#FF4747"
/>
<path
id="Vector_4"
d="M567.089 158.255C567.089 158.255 601.429 151.255 597.609 181.715C596.582 188.239 593.887 194.388 589.786 199.565C585.684 204.742 580.315 208.772 574.199 211.265C571.454 212.418 568.506 213.01 565.529 213.005V213.005C561.41 213.002 557.371 211.871 553.849 209.735C544.519 204.085 529.109 190.895 537.339 168.425C537.339 168.425 545.729 149.655 567.089 158.255Z"
fill="#733A06"
/>
<rect
id="Rectangle 1"
x="484"
y="176"
width="51"
height="9"
fill="#FF4747"
/>
</g>
</g>
<g id="body">
<path
id="Vector_5"
d="M632.762 550.333C625.131 582.792 620.346 616.361 623.57 649.606C625.708 671.615 633.15 695.578 633.537 718H402.258C402.201 705.891 402.154 693.349 402.097 680.817C402.097 678.519 402.097 676.221 402.097 673.942C402.097 670.996 402.097 667.981 402.097 665.005C402.05 655.93 402.012 646.954 401.974 638.242C401.908 622.529 401.833 606.815 400.376 591.101C397.795 563.268 390.92 536.024 381.89 509.654C381.237 507.69 380.566 505.804 379.885 503.879L379.658 503.251C378.977 501.287 378.268 499.322 377.559 497.358C366.306 466.304 353.445 434.061 359.592 401.769C361.883 390.18 366.541 379.237 373.252 369.678C379.963 360.119 388.571 352.167 398.495 346.358C404.622 342.823 411.374 340.122 418.353 340.004C430.39 339.807 441.189 347.144 451.213 354.078C455.941 357.377 460.811 360.668 465.719 363.81C477.444 371.343 489.633 378.051 502.787 382.205C521.434 388.098 542.503 388.334 559.599 378.542C562.941 376.593 566.106 374.335 569.056 371.795C574.818 366.707 580.048 361.002 584.658 354.775C589.178 363.928 599.032 367.788 607.192 373.612C618.663 381.812 626.691 394.442 631.778 407.927C636.866 421.411 639.135 435.809 641.074 450.158C642.965 464.32 644.582 478.639 643.797 492.89C642.7 512.434 637.225 531.349 632.762 550.333Z"
fill="#8379F0"
/>
<path
id="Vector_6"
d="M465.529 293.841C469.937 311.673 467.017 331.182 455.612 346.429C449.96 354.003 442.39 360.348 434.335 365.976C421.826 374.878 439.887 379.246 424.649 383.799C434.15 390.386 412.891 397.613 424.649 400.121C433.641 402.058 442.919 402.61 452.196 403.027C498.657 405.204 545.246 403.726 591.408 398.61C606.834 396.895 622.921 394.532 635.405 386.356C636.516 385.759 637.378 384.862 637.863 383.799C638.755 381.116 635.119 379.082 632.111 378.181C617.225 373.706 601.192 371.129 588.322 363.186C568.599 351.03 560.379 328.702 558.627 307.586C556.875 286.469 560.313 265.178 557.966 244.11C526.143 243.684 494.336 244.494 462.543 246.541C459.006 246.774 442.974 245.999 441.078 248.692C438.941 251.743 447.833 259.144 450.037 262.079C457.403 271.727 462.657 282.498 465.529 293.841Z"
fill="#FFAD4E"
/>
<path
id="Vector_7"
d="M742.481 717.555H678.641C677.881 713.225 678.371 708.335 675.531 705.015C675.137 708.392 675.215 711.808 675.761 715.165C675.931 715.965 676.151 716.765 676.351 717.555H595.151C594.601 707.315 596.151 697.425 598.061 687.125C600.712 672.495 602.21 657.679 602.541 642.815C602.951 624.455 601.591 606.105 601.541 587.745C601.462 569.556 602.631 551.383 605.041 533.355C607.241 516.775 610.511 499.975 607.791 483.465C604.791 465.035 602.171 446.345 599.851 427.805C599.472 423.694 598.685 419.63 597.501 415.675C596.477 412.909 595.302 410.202 593.981 407.565C587.903 394.16 584.247 379.785 583.181 365.105C582.721 359.575 574.881 354.565 575.001 348.975C585.681 346.815 604.701 344.135 614.951 347.845C625.201 351.555 632.861 360.645 643.151 364.045C653.151 367.395 664.451 364.985 674.481 368.335C676.541 369.025 678.671 370.085 679.631 372.025C681.151 375.105 678.871 378.965 675.751 380.395C672.631 381.825 669.021 381.495 665.621 381.145C676.761 389.258 687.551 397.821 697.991 406.835C701.501 409.835 705.051 413.055 707.081 417.225C709.381 421.945 709.471 427.405 709.521 432.645L709.701 451.045C709.811 462.855 715.651 473.705 717.701 485.345C720.291 500.005 721.601 514.865 722.811 529.705C723.511 538.345 724.181 546.995 724.531 555.655C725.191 572.295 728.111 588.865 728.361 605.525C728.441 610.665 728.361 615.815 728.821 620.925C729.281 626.035 730.151 630.925 731.041 635.825L736.861 668.045C737.478 670.841 737.813 673.692 737.861 676.555C737.791 680.695 736.551 684.885 737.551 688.885C738.094 690.598 738.763 692.27 739.551 693.885C742.591 701.305 742.751 709.495 742.481 717.555Z"
fill="#DDFF7C"
/>
<path
id="Vector_8"
d="M301.467 725.703L370.752 722.638C371.374 718.025 370.614 712.881 373.541 709.236C374.127 712.787 374.202 716.401 373.766 719.974C373.619 720.827 373.417 721.683 373.237 722.528L461.363 718.63C461.481 707.782 459.337 697.404 456.782 686.611C453.221 671.277 450.903 655.692 449.849 639.999C448.546 620.615 449.164 601.158 448.36 581.752C447.596 562.526 445.477 543.377 442.019 524.44C438.856 507.024 434.522 489.427 436.702 471.848C439.096 452.227 441.066 432.35 442.717 412.645C442.937 408.282 443.601 403.95 444.701 399.713C445.683 396.741 446.832 393.824 448.142 390.973C454.112 376.515 457.408 361.148 457.878 345.583C458.119 339.717 466.393 334.046 466.002 328.144C454.31 326.374 433.542 324.455 422.592 328.867C411.641 333.28 403.753 343.254 392.744 347.342C382.048 351.362 369.671 349.357 358.942 353.379C356.739 354.207 354.477 355.43 353.525 357.526C352.02 360.854 354.675 364.824 358.128 366.185C361.581 367.547 365.483 367.025 369.157 366.492C357.446 375.601 346.136 385.168 335.227 395.195C331.558 398.534 327.855 402.107 325.847 406.612C323.572 411.71 323.729 417.485 323.92 423.025L324.585 442.479C325.017 454.965 319.186 466.712 317.506 479.111C315.38 494.728 314.653 510.495 314.034 526.237C313.678 535.401 313.355 544.575 313.38 553.743C313.442 571.36 311.047 589.012 311.555 606.63C311.708 612.066 312.036 617.505 311.775 622.927C311.515 628.35 310.799 633.559 310.062 638.78L305.252 673.11C304.714 676.095 304.484 679.124 304.565 682.152C304.834 686.523 306.376 690.892 305.477 695.167C304.968 697.004 304.321 698.802 303.541 700.547C300.588 708.535 300.797 717.198 301.467 725.703Z"
fill="#DDFF7C"
/>
</g>
<g id="hand-hold">
<path
id="Vector_9"
d="M444.87 257.81H427.87V447.26H444.87V257.81Z"
fill="#4EFF7F"
/>
<path
id="Vector_10"
d="M432.733 490.065C435.601 474.749 439.534 459.653 444.503 444.885C446.933 437.685 449.613 430.485 450.413 422.885C451.033 416.995 450.483 411.025 451.013 405.125C451.473 400.025 452.733 395.035 453.473 389.975C454.978 379.691 454.359 369.209 451.653 359.175C449.503 351.175 451.563 341.505 446.443 335.025C444.363 332.395 441.593 330.395 439.443 327.825C437.293 325.255 435.743 321.755 436.803 318.575C444.081 320.239 451.613 320.48 458.983 319.285C461.176 319.047 463.286 318.311 465.153 317.135C466.076 316.534 466.813 315.686 467.278 314.687C467.743 313.688 467.918 312.578 467.783 311.485C467.353 309.315 465.413 307.805 463.543 306.635C457.007 302.601 449.658 300.067 442.025 299.217C434.393 298.366 426.666 299.219 419.403 301.715C419.184 301.146 419.175 300.518 419.376 299.943C419.578 299.367 419.977 298.883 420.503 298.575C421.573 297.991 422.743 297.615 423.953 297.465C427.656 296.634 431.096 294.897 433.964 292.41C436.831 289.923 439.037 286.764 440.383 283.215C440.843 282.235 440.956 281.127 440.703 280.075C439.863 277.625 436.383 277.765 433.863 278.385L420.283 281.725C417.646 282.256 415.089 283.123 412.673 284.305C409.673 285.945 407.223 288.535 404.873 291.075C397.753 298.785 390.473 306.725 386.553 316.455C384.783 320.865 383.743 325.535 381.893 329.905C380.043 334.275 377.203 338.475 372.963 340.595C368.503 342.815 366.413 347.955 367.143 352.875C367.873 357.795 370.593 362.175 373.343 366.325C378.402 374.213 384.119 381.659 390.433 388.585C394.683 393.085 399.433 397.345 402.133 402.905C404.063 406.835 404.883 411.215 406.583 415.245C407.542 417.099 408.27 419.063 408.753 421.095C408.931 422.564 408.904 424.052 408.673 425.515C405.823 447.685 389.383 465.755 383.233 487.255C382.878 488.261 382.732 489.33 382.803 490.395C383.073 492.395 384.803 493.935 386.403 495.165C398.353 504.165 412.953 508.855 427.243 513.355C429.873 506.095 431.313 497.685 432.733 490.065Z"
fill="#FFAD4E"
/>
<path
id="Vector_11"
d="M376.63 498.51C373.16 503.19 369.11 507.41 365.63 512.1C359.44 520.51 355.32 530.23 350.45 539.47C344.052 551.656 336.329 563.099 327.42 573.59C318.42 584.14 307.71 594.92 306.71 608.75C306.57 610.75 306.6 612.82 305.48 614.43C304.36 616.04 302.71 616.65 301.39 617.86C300.07 619.07 299.31 621.34 300.62 622.54C295.49 623.09 293.36 629.27 292.37 634.34L290.1 646.02C289.396 649.064 289.027 652.176 289 655.3C289.12 659.54 290.52 663.63 292 667.6C297.439 681.926 304.512 695.576 313.08 708.28C317.19 714.36 321.94 720.46 328.67 723.37C334.84 726.04 341.84 725.66 348.55 725.24C358.05 724.64 369.1 723.12 373.82 714.86C376.82 709.61 376.36 702.86 379.63 697.76C381.31 695.15 383.85 693.21 385.9 690.87C389.68 686.58 391.73 681.07 393.62 675.67C402.296 650.881 409.243 625.52 414.41 599.77C416.15 591.13 417.71 582.37 421.26 574.3C424.54 566.84 429.42 560.21 433.92 553.41C442.387 540.622 449.591 527.042 455.43 512.86C442.57 509.86 430.66 503.86 419.69 496.62C409.34 489.79 394.05 475.24 383.13 470C379.53 478.94 382.56 490.59 376.63 498.51Z"
fill="#DDFF7C"
/>
<path
id="Vector_12"
d="M433.5 258C486.243 258 529 217.258 529 167C529 116.742 486.243 76 433.5 76C380.757 76 338 116.742 338 167C338 217.258 380.757 258 433.5 258Z"
fill="#4EFF7F"
/>
<path
id="Vector_13"
d="M470.072 117.264L373.072 169.774C372.737 169.949 372.459 170.216 372.269 170.543C372.08 170.871 371.987 171.245 372.002 171.623C372.016 172.001 372.138 172.367 372.352 172.678C372.566 172.99 372.865 173.235 373.212 173.384L389.772 179.624C390.733 179.978 391.516 180.696 391.952 181.624L404.782 208.134C405.022 209.304 407.182 209.614 407.212 208.424L405.212 186.534C405.328 184.912 405.946 183.367 406.982 182.114L457.292 132.824C457.434 132.685 457.608 132.585 457.798 132.53C457.988 132.476 458.189 132.471 458.382 132.514C458.573 132.556 458.749 132.647 458.895 132.777C459.04 132.907 459.15 133.072 459.213 133.257C459.276 133.442 459.291 133.639 459.256 133.831C459.22 134.023 459.137 134.203 459.012 134.354L415.642 187.414C414.726 188.709 414.142 190.21 413.942 191.784L411.342 210.694C411.562 212.344 412.852 212.974 413.892 211.494L423.232 200.494C423.54 200.074 424 199.791 424.514 199.705C425.027 199.619 425.554 199.737 425.982 200.034L450.062 217.584C450.326 217.779 450.634 217.904 450.959 217.948C451.284 217.991 451.615 217.952 451.921 217.833C452.226 217.714 452.497 217.52 452.707 217.268C452.917 217.016 453.06 216.716 453.122 216.394L472.872 119.394C472.946 119.028 472.915 118.649 472.784 118.299C472.654 117.95 472.428 117.644 472.133 117.416C471.837 117.188 471.484 117.048 471.113 117.01C470.742 116.973 470.367 117.04 470.032 117.204L470.072 117.264Z"
fill="white"
/>
<path
id="Vector_14"
d="M401.98 528.96C405.835 528.96 408.96 525.835 408.96 521.98C408.96 518.125 405.835 515 401.98 515C398.125 515 395 518.125 395 521.98C395 525.835 398.125 528.96 401.98 528.96Z"
fill="#3F3D56"
/>
<path
id="Vector_15"
d="M383.98 562.96C387.835 562.96 390.96 559.835 390.96 555.98C390.96 552.125 387.835 549 383.98 549C380.125 549 377 552.125 377 555.98C377 559.835 380.125 562.96 383.98 562.96Z"
fill="#3F3D56"
/>
</g>
</g>
<defs>
<clipPath id="clip0">
<rect width="1077.75" height="725.24" fill="white" />
</clipPath>
</defs>
</svg>
<div class="container">
<label for="email">E-mail:</label>
<input
type="email"
id="email"
name="email"
class="fillInBox"
required
/>
<label for="password">Password:</label>
<input
type="password"
id="password"
name="password"
class="fillInBox"
/>
<div class="show-password">
<label for="show">Show Password</label>
<input type="checkbox" name="show" id="show" />
</div>
<button type="submit" class="fillInBox" id="submit-btn">Submit</button>
</div>
</form>
<script src="app.js"></script>
</body>
</html>