-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (91 loc) · 16.3 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
<!DOCTYPE html>
<html lang="en">
<head> <link rel="stylesheet" href="style.css"/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<section id="canvas-container">
<div id="canvas-instructions">
<img
src="https://s3.ap-south-1.amazonaws.com/kalvi-education.github.io/front-end-web-development/canvas.svg"
alt="logo"
/>
<p>Complete this art using the color palette</p>
</div>
<div id="canvas">
<!--Iteration 1 - include your favorite image -->
<!--Paste the SVG here -->
</div>
</section>
<svg viewBox="0 0 738 462" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="738" height="462" fill="white" id="background" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M457.934 211.5C459.634 218.4 461.634 227.4 463.534 237.6C464.034 240.1 463.834 242.7 463.034 245.2C459.934 254.9 456.334 260.6 456.334 260.6C455.374 267.446 448.97 277.28 442.36 287.431C438.638 293.146 434.851 298.961 431.934 304.4C425.434 316.7 424.934 327.1 425.034 330.6V331.3L415.834 342.5C414.434 344.3 411.734 344.3 410.234 342.6L406.334 338.1C405.134 336.7 403.334 335.9 401.534 335.9H336.134C334.334 335.9 332.534 336.7 331.334 338.1L327.434 342.6C325.934 344.3 323.234 344.3 321.834 342.5L312.634 331.3V330.6C312.734 327.1 312.334 316.7 305.734 304.4C302.816 298.961 299.029 293.146 295.307 287.431C288.697 277.28 282.293 267.446 281.334 260.6C281.334 260.6 277.734 254.9 274.534 245.2C273.734 242.7 273.534 240.1 274.034 237.6C275.934 227.4 277.934 218.3 279.634 211.5C280.834 206.8 281.134 201.9 280.834 197.1C279.734 181.9 277.434 147.1 278.034 123.5C278.334 110.8 285.634 99.3001 297.034 93.6001C309.334 87.4001 322.834 84.2001 328.634 83.0001C330.234 82.7001 331.734 83.7001 332.034 85.3001L342.234 140C343.734 148.1 350.734 153.9 358.934 153.9H378.634C386.834 153.9 393.834 148 395.334 140L405.534 85.3001C405.834 83.7001 407.334 82.7001 408.934 83.0001C414.734 84.2001 428.234 87.4001 440.534 93.6001C451.934 99.3001 459.234 110.8 459.534 123.5C460.134 147.1 457.834 182 456.734 197.1C456.334 202 456.734 206.8 457.934 211.5ZM401.134 250.4C428.434 252.1 442.134 244.9 448.834 238.8C452.734 235.3 453.934 229.6 451.334 224.6L450.434 222.5C449.334 223 448.334 223.5 447.335 224L447.334 224V223.9C447.334 223.9 441.334 226.9 431.634 230.3C430.334 230.7 428.934 231.2 427.534 231.7L427.534 231.7C426.834 232 426.234 232.2 425.534 232.4C424.234 232.9 422.934 233.3 421.534 233.7C421.284 233.8 421.009 233.875 420.734 233.95C420.459 234.025 420.184 234.1 419.934 234.2C419.434 234.35 418.934 234.475 418.434 234.6C417.934 234.725 417.434 234.85 416.934 235C409.534 237 402.534 238.4 396.434 239.3C396.034 239.4 395.634 239.5 395.234 239.5C395.084 239.5 394.934 239.525 394.784 239.55C394.634 239.575 394.484 239.6 394.334 239.6C379.734 241.6 370.234 241.2 370.234 241.2C370.234 241.2 360.734 241.6 346.134 239.6C345.984 239.6 345.834 239.575 345.684 239.55C345.534 239.525 345.384 239.5 345.234 239.5C345.034 239.45 344.834 239.425 344.634 239.4C344.434 239.375 344.234 239.35 344.034 239.3C337.934 238.3 331.034 237 323.534 235C322.534 234.8 321.534 234.5 320.534 234.2C320.284 234.1 320.009 234.025 319.734 233.95C319.459 233.875 319.184 233.8 318.934 233.7C315.234 232.6 311.834 231.5 308.734 230.4C299.134 227 293.034 224 293.034 224V224.1C291.934 223.6 290.934 223.1 289.934 222.6L289.034 224.7C286.934 229.5 288.134 235.2 292.034 238.8C298.734 244.9 312.534 252.1 339.734 250.4C342.034 250.2 344.034 248.9 345.134 246.9L346.234 244.9C347.034 243.5 348.234 242.9 349.434 243C352.634 243.3 359.934 243.9 370.434 243.9C380.934 243.9 388.234 243.3 391.434 243C392.634 242.8 393.834 243.5 394.634 244.9L395.734 246.9C396.834 248.9 398.834 250.3 401.134 250.4ZM416.934 371.7L430.734 355.7C431.534 354.7 431.834 353.3 431.434 352.1L426.134 335L414.434 349.7C413.034 351.4 410.534 351.6 408.934 350.1L404.334 345.8C402.434 344.1 400.034 343.1 397.434 343.1H340.134C337.634 343.1 335.234 344 333.334 345.8L328.734 350.1C327.134 351.6 324.634 351.4 323.234 349.7L311.534 335L306.234 352.1C305.834 353.4 306.134 354.7 306.934 355.7L320.734 371.7C321.834 373 323.734 373.3 325.234 372.6L337.834 366.5C339.834 365.5 341.934 365 344.134 365H393.534C395.734 365 397.834 365.5 399.834 366.5L412.434 372.6C414.034 373.4 415.834 373 416.934 371.7Z"
fill="white"
id="face-plate"
/>
<path
d="M473.634 179.6C473.634 177.7 473.134 175.9 472.234 174.2C472.234 174.2 472.234 174.2 472.234 174.1C471.334 172.4 470.834 170.5 470.734 168.6C470.334 158.4 468.634 124.3 462.334 103.1C460.534 97 456.634 91.8 451.234 88.4C439.534 80.9 413.734 69 368.834 69C323.934 69 298.133 80.9 286.433 88.4C281.033 91.8 277.134 97 275.334 103.1C268.934 124.4 267.333 158.4 266.933 168.6C266.833 170.5 266.333 172.4 265.433 174.1V174.2C264.533 175.9 264.034 177.7 264.034 179.6C263.734 205.9 265.534 235.1 266.034 243.2C266.134 244.7 266.633 246.1 267.433 247.3C267.833 247.9 268.434 248.8 269.234 250C270.434 251.8 271.234 253.9 271.534 256C275.734 284.3 281.534 309.9 281.534 309.9L297.433 351.6C297.833 352.8 298.434 353.9 299.234 355C308.034 367.7 318.734 380.1 325.334 387.1C328.334 390.2 332.233 392.1 336.433 392.7C345.733 393.9 359.234 393.9 359.234 393.9H378.634C378.634 393.9 392.034 393.9 401.434 392.7C405.634 392.2 409.534 390.2 412.534 387.1C419.134 380.1 429.834 367.7 438.634 355C439.334 354 439.934 352.8 440.434 351.6L456.334 309.9C456.334 309.9 462.134 284.3 466.334 256C466.634 253.9 467.434 251.8 468.634 250C469.434 248.8 469.934 248 470.434 247.3C471.234 246.1 471.734 244.7 471.834 243.2C472.234 235 473.934 205.9 473.634 179.6ZM463.134 245.2C460.034 254.9 456.434 260.6 456.434 260.6C454.934 271.3 440.134 289.3 432.034 304.4C425.434 316.7 425.034 327.1 425.134 330.6C425.134 330.8 425.134 331.1 425.134 331.3C425.234 331.8 425.334 332.3 425.434 332.8L426.134 335L431.434 352.1C431.834 353.3 431.534 354.7 430.734 355.7L416.934 371.7C415.834 373 414.034 373.4 412.434 372.6L399.834 366.5C397.834 365.5 395.734 365 393.534 365H344.134C341.934 365 339.834 365.5 337.834 366.5L325.234 372.6C323.734 373.3 321.834 373 320.734 371.7L306.933 355.7C306.133 354.7 305.834 353.4 306.234 352.1L311.534 335L312.234 332.8C312.334 332.3 312.534 331.8 312.534 331.3C312.534 331.1 312.534 330.8 312.534 330.6C312.634 327.1 312.134 316.7 305.634 304.4C297.534 289.3 282.734 271.3 281.234 260.6C281.234 260.6 277.633 254.9 274.433 245.2C273.633 242.7 273.533 240.1 273.933 237.6C275.833 227.4 277.834 218.4 279.534 211.5C280.734 206.8 281.134 202 280.734 197.1C279.634 182 277.333 147.1 277.933 123.5C278.233 110.8 285.633 99.3 296.933 93.6C309.233 87.4 322.734 84.2 328.534 83C330.134 82.7 331.633 83.7 331.933 85.3L342.134 140C343.634 148 350.634 153.9 358.834 153.9H378.534C386.734 153.9 393.734 148.1 395.234 140L405.434 85.3C405.734 83.7 407.234 82.7 408.834 83C414.634 84.2 428.134 87.4 440.434 93.6C451.834 99.3 459.134 110.8 459.434 123.5C460.034 147.1 457.734 181.9 456.634 197.1C456.234 201.9 456.634 206.8 457.834 211.5C459.534 218.3 461.534 227.4 463.434 237.6C464.134 240.1 463.934 242.7 463.134 245.2Z"
fill="white"
id="helmet"
stroke="black"
stroke-width="2"
stroke-miterlimit="10"
/>
<path
d="M426.134 335L414.434 349.7C413.034 351.4 410.534 351.6 408.934 350.1L404.334 345.8C402.434 344 400.034 343.1 397.434 343.1H340.134C337.534 343.1 335.134 344.1 333.334 345.8L328.734 350.1C327.134 351.6 324.534 351.4 323.234 349.7L311.534 335L312.234 332.8C312.334 332.3 312.534 331.8 312.534 331.3L321.734 342.5C323.134 344.3 325.834 344.3 327.334 342.6L331.234 338.1C332.434 336.7 334.234 335.9 336.034 335.9H401.434C403.234 335.9 405.034 336.7 406.234 338.1L410.134 342.6C411.634 344.3 414.334 344.3 415.734 342.5L424.934 331.3C425.034 331.8 425.134 332.3 425.234 332.8L426.134 335Z"
fill="black"
/>
<path
d="M448.734 238.5C442.034 244.6 428.334 251.8 401.034 250.1C398.734 250 396.734 248.6 395.634 246.6L394.534 244.6C393.734 243.2 392.534 242.5 391.334 242.7C388.134 243 380.834 243.6 370.334 243.6C359.734 243.6 352.534 243 349.334 242.7C348.134 242.6 346.934 243.2 346.134 244.6L345.034 246.6C343.934 248.6 341.934 249.9 339.634 250.1C312.434 251.8 298.634 244.6 291.934 238.5C288.034 234.9 286.834 229.2 288.934 224.4L289.834 222.3C290.834 222.8 291.834 223.3 292.934 223.8C301.934 227.9 310.634 231.1 318.934 233.5C319.434 233.7 320.034 233.8 320.534 234C321.534 234.3 322.534 234.6 323.534 234.8C329.834 236.5 336.734 238 344.034 239.1C344.434 239.2 344.834 239.2 345.234 239.3C345.534 239.3 345.834 239.4 346.134 239.4C360.734 241.4 370.234 241 370.234 241C370.234 241 379.734 241.4 394.334 239.4C394.634 239.4 394.934 239.3 395.234 239.3C395.634 239.3 396.034 239.2 396.434 239.1C403.734 238.1 410.634 236.6 416.934 234.8C417.934 234.5 418.934 234.3 419.934 234C420.434 233.8 421.034 233.7 421.534 233.5C429.734 231.1 438.534 228 447.534 223.8C448.534 223.3 449.534 222.8 450.634 222.3L451.534 224.4C453.834 229.3 452.634 235 448.734 238.5Z"
fill="black"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M323.933 236C330.233 237.8 337.133 239.3 344.433 240.3C344.833 240.4 345.233 240.5 345.633 240.4C345.783 240.4 345.933 240.425 346.083 240.45C346.233 240.475 346.383 240.5 346.533 240.5L344.733 244C343.433 246.5 340.933 248 338.133 248.1C329.333 248.3 309.433 247.6 296.733 238.5C292.433 235.5 291.033 229.7 293.333 225C302.333 229.2 311.133 232.3 319.333 234.7C319.583 234.8 319.858 234.875 320.133 234.95C320.408 235.025 320.683 235.1 320.933 235.2C321.433 235.35 321.933 235.475 322.433 235.6C322.933 235.725 323.433 235.85 323.933 236ZM422.033 234.8C430.333 232.4 439.033 229.2 448.033 225.1C450.333 229.8 448.933 235.6 444.733 238.7C431.933 247.8 412.133 248.5 403.233 248.3C400.433 248.3 397.933 246.7 396.633 244.2L394.833 240.7C394.983 240.7 395.133 240.675 395.283 240.65C395.433 240.625 395.583 240.6 395.733 240.6C395.933 240.55 396.133 240.525 396.333 240.5C396.533 240.475 396.733 240.45 396.933 240.4C404.233 239.3 411.133 237.8 417.433 236.1C418.433 235.9 419.433 235.6 420.433 235.3C420.683 235.2 420.958 235.125 421.233 235.05C421.508 234.975 421.783 234.9 422.033 234.8Z"
fill="white"
id="eyes"
/>
<path
d="M344.433 240.3L344.676 239.33L344.623 239.317L344.569 239.309L344.433 240.3ZM323.933 236L323.646 236.958L323.659 236.962L323.933 236ZM345.633 240.4V239.4H345.51L345.391 239.43L345.633 240.4ZM346.533 240.5L347.423 240.957L348.172 239.5H346.533V240.5ZM344.733 244L345.621 244.461L345.623 244.457L344.733 244ZM338.133 248.1L338.156 249.1L338.169 249.099L338.133 248.1ZM296.733 238.5L297.316 237.687L297.306 237.68L296.733 238.5ZM293.333 225L293.756 224.094L292.867 223.679L292.435 224.56L293.333 225ZM319.333 234.7L319.705 233.772L319.66 233.754L319.614 233.74L319.333 234.7ZM320.933 235.2L320.562 236.128L320.603 236.145L320.646 236.158L320.933 235.2ZM448.033 225.1L448.932 224.661L448.504 223.787L447.619 224.19L448.033 225.1ZM422.033 234.8L421.756 233.839L421.708 233.853L421.662 233.872L422.033 234.8ZM444.733 238.7L445.313 239.515L445.32 239.51L445.327 239.505L444.733 238.7ZM403.233 248.3L403.256 247.3L403.245 247.3H403.233V248.3ZM396.633 244.2L395.744 244.657L395.746 244.661L396.633 244.2ZM394.833 240.7V239.7H393.195L393.944 241.157L394.833 240.7ZM395.733 240.6V241.6H395.856L395.976 241.57L395.733 240.6ZM396.933 240.4L396.784 239.411L396.737 239.418L396.691 239.43L396.933 240.4ZM417.433 236.1L417.237 235.12L417.205 235.126L417.173 235.135L417.433 236.1ZM420.433 235.3L420.721 236.258L420.763 236.245L420.805 236.229L420.433 235.3ZM344.569 239.309C337.318 238.316 330.464 236.826 324.208 235.038L323.659 236.962C330.003 238.774 336.949 240.284 344.298 241.291L344.569 239.309ZM345.391 239.43C345.274 239.459 345.123 239.442 344.676 239.33L344.191 241.27C344.544 241.358 345.193 241.541 345.876 241.37L345.391 239.43ZM346.248 239.464C346.113 239.441 345.88 239.4 345.633 239.4V241.4C345.687 241.4 345.754 241.409 345.919 241.436L346.248 239.464ZM346.533 239.5C346.48 239.5 346.413 239.491 346.248 239.464L345.919 241.436C346.054 241.459 346.287 241.5 346.533 241.5V239.5ZM345.623 244.457L347.423 240.957L345.644 240.043L343.844 243.543L345.623 244.457ZM338.169 249.099C341.311 248.987 344.146 247.297 345.621 244.461L343.846 243.539C342.721 245.703 340.556 247.013 338.098 247.101L338.169 249.099ZM296.151 239.313C302.678 243.989 310.998 246.474 318.73 247.774C326.476 249.075 333.719 249.201 338.156 249.1L338.111 247.1C333.748 247.199 326.641 247.075 319.062 245.801C311.469 244.526 303.489 242.111 297.316 237.687L296.151 239.313ZM292.435 224.56C289.926 229.688 291.443 236.029 296.161 239.32L297.306 237.68C293.424 234.971 292.141 229.712 294.232 225.44L292.435 224.56ZM319.614 233.74C311.452 231.351 302.701 228.268 293.756 224.094L292.911 225.906C301.966 230.132 310.815 233.249 319.053 235.66L319.614 233.74ZM320.397 233.985C320.11 233.907 319.892 233.846 319.705 233.772L318.962 235.628C319.275 235.754 319.607 235.843 319.87 235.915L320.397 233.985ZM321.305 234.272C320.992 234.146 320.66 234.057 320.397 233.985L319.87 235.915C320.157 235.993 320.375 236.054 320.562 236.128L321.305 234.272ZM322.676 234.63C322.172 234.504 321.695 234.384 321.221 234.242L320.646 236.158C321.172 236.316 321.694 236.446 322.191 236.57L322.676 234.63ZM324.221 235.042C323.695 234.884 323.172 234.754 322.676 234.63L322.191 236.57C322.694 236.696 323.172 236.816 323.646 236.958L324.221 235.042ZM447.619 224.19C438.661 228.271 430.007 231.454 421.756 233.839L422.311 235.761C430.66 233.347 439.405 230.129 448.448 226.01L447.619 224.19ZM445.327 239.505C449.919 236.116 451.442 229.791 448.932 224.661L447.135 225.54C449.225 229.809 447.948 235.085 444.14 237.896L445.327 239.505ZM403.211 249.3C407.698 249.401 414.941 249.275 422.687 247.974C430.42 246.674 438.738 244.189 445.313 239.515L444.154 237.885C437.929 242.311 429.947 244.726 422.355 246.001C414.776 247.275 407.669 247.4 403.256 247.3L403.211 249.3ZM395.746 244.661C397.208 247.473 400.039 249.3 403.233 249.3V247.3C400.828 247.3 398.659 245.927 397.521 243.739L395.746 244.661ZM393.944 241.157L395.744 244.657L397.523 243.743L395.723 240.243L393.944 241.157ZM395.119 239.664C394.954 239.691 394.887 239.7 394.833 239.7V241.7C395.08 241.7 395.312 241.659 395.448 241.636L395.119 239.664ZM395.733 239.6C395.487 239.6 395.254 239.641 395.119 239.664L395.448 241.636C395.612 241.609 395.68 241.6 395.733 241.6V239.6ZM396.209 239.508C396.018 239.532 395.759 239.563 395.491 239.63L395.976 241.57C396.108 241.537 396.248 241.519 396.457 241.492L396.209 239.508ZM396.691 239.43C396.559 239.463 396.418 239.482 396.209 239.508L396.457 241.492C396.648 241.469 396.908 241.437 397.176 241.37L396.691 239.43ZM417.173 235.135C410.907 236.825 404.044 238.317 396.784 239.411L397.082 241.389C404.423 240.283 411.36 238.775 417.694 237.066L417.173 235.135ZM420.146 234.342C419.138 234.645 418.183 234.93 417.237 235.12L417.629 237.081C418.684 236.87 419.729 236.555 420.721 236.258L420.146 234.342ZM420.97 234.085C420.707 234.157 420.375 234.247 420.062 234.372L420.805 236.229C420.992 236.154 421.21 236.093 421.496 236.015L420.97 234.085ZM421.662 233.872C421.475 233.947 421.257 234.007 420.97 234.085L421.496 236.015C421.76 235.943 422.092 235.854 422.405 235.729L421.662 233.872Z"
fill="black"
/>
</svg>
<section id="colors">
<div id="heading">
<h2>Colour Palette</h2>
</div>
<div id="color-container">
<!--Iteration 2: Build the coloring buttons -->
<div>
<input type="color" id="buttonfaceplate" value="#ffffff">
<p>Faceplate </p>
</div>
<div>
<input type="color" id="buttonhelmet" value="#ffffff">
<p>Helmet </p>
</div>
<div>
<input type="color" id="buttoneyes" value="#ffffff">
<p>Eyes </p>
</div>
<div>
<input type="color" id="buttonbackground" value="#ffffff">
<p>Background </p>
</div>
</div>
<div class="line"></div>
<p id="made-with-love">
Made with ❤️ by Kalvium. Share it with your friends
</p>
</section>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>