-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
215 lines (142 loc) · 15.4 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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Topic Google Doodle</title>
<!-- Favicons -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="favicons/favicon-16x16.png"
/>
<link rel="manifest" href="favicons/site.webmanifest" />
<link
rel="mask-icon"
href="favicons/safari-pinned-tab.svg"
color="#5bbad5"
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<!-- Normalize -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
<!-- Template Styling -->
<link rel="stylesheet" href="css/template.css" />
<!-- My Styles -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Container -->
<main>
<!-- Doodle Stage -->
<div id="stage">
<!-- Elements -->
<svg width="600" height="300" viewBox="0 0 600 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- big -->
<g id="big" class="trio" >
<path d="M148 125.478C148 155.858 123.38 180.478 93 180.478C62.62 180.478 38 155.858 38 125.478C38 110.928 43.65 89.8775 52.89 71.9075C57.11 63.7075 60.88 55.2975 64 46.6175C68.88 32.9975 75.35 18.2775 78.39 19.0275C80.69 19.5975 80.6 28.9075 79.54 39.6075C79.51 39.9075 79.83 40.1175 80.09 39.9675C84.23 37.7275 88.55 36.4675 93 36.4675C97.45 36.4675 101.78 37.7275 105.92 39.9675C106.19 40.1075 106.5 39.9075 106.47 39.6075C105.41 28.8975 105.31 19.5975 107.61 19.0275C110.65 18.2775 117.13 33.0175 122.01 46.6375C125.13 55.3175 128.9 63.7375 133.12 71.9375C142.35 89.8975 148 110.928 148 125.478V125.478Z" fill="#C6CCD2" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M93 180.478C119.234 180.478 140.5 159.211 140.5 132.978C140.5 106.744 119.234 85.4775 93 85.4775C66.7665 85.4775 45.5 106.744 45.5 132.978C45.5 159.211 66.7665 180.478 93 180.478Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M84.77 96.6175L89.87 93.3075C91.11 92.4975 92.72 92.5175 93.95 93.3475L98.77 96.6175" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M97.27 107.618L102.37 104.308C103.61 103.498 105.22 103.518 106.45 104.348L111.27 107.618" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M72.27 107.618L77.37 104.308C78.61 103.498 80.22 103.518 81.45 104.348L86.27 107.618" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M75 62.9775C78.3137 62.9775 81 60.2912 81 56.9775C81 53.6638 78.3137 50.9775 75 50.9775C71.6863 50.9775 69 53.6638 69 56.9775C69 60.2912 71.6863 62.9775 75 62.9775Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M75 59.9775C76.6569 59.9775 78 58.6344 78 56.9775C78 55.3207 76.6569 53.9775 75 53.9775C73.3431 53.9775 72 55.3207 72 56.9775C72 58.6344 73.3431 59.9775 75 59.9775Z" fill="black"/>
<path d="M81 56.9775H83" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M67 56.9775H69" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M111 62.9775C114.314 62.9775 117 60.2912 117 56.9775C117 53.6638 114.314 50.9775 111 50.9775C107.686 50.9775 105 53.6638 105 56.9775C105 60.2912 107.686 62.9775 111 62.9775Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M111 59.9775C112.657 59.9775 114 58.6344 114 56.9775C114 55.3207 112.657 53.9775 111 53.9775C109.343 53.9775 108 55.3207 108 56.9775C108 58.6344 109.343 59.9775 111 59.9775Z" fill="black"/>
<path d="M117 56.9775H119" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M103 56.9775H105" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M88.25 56.9775H96.75" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M92.75 57.9775V59.9775" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M122 65.9775H143" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M122 70.0775L142.66 73.8675" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M122 61.8675L142.66 58.0775" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M64 65.9775H43" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M64 70.0775L43.34 73.8675" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M64 61.8675L43.34 58.0775" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- med -->
<g id="med" class="trio">
<path d="M257.43 141.818C257.43 163.168 236.16 180.478 209.92 180.478C183.68 180.478 162.41 163.168 162.41 141.818C162.41 131.588 167.29 116.797 175.27 104.167C178.91 98.4075 182.17 92.4875 184.86 86.3875C189.08 76.8175 194.67 66.4675 197.3 66.9975C199.29 67.3975 199.21 73.9375 198.29 81.4675C198.26 81.6775 198.54 81.8275 198.77 81.7275C202.35 80.1575 206.08 79.2675 209.92 79.2675C213.76 79.2675 217.5 80.1575 221.08 81.7275C221.31 81.8275 221.58 81.6875 221.56 81.4675C220.64 73.9475 220.56 67.3975 222.55 66.9975C225.18 66.4775 230.77 76.8275 234.99 86.3975C237.68 92.4975 240.95 98.4175 244.59 104.188C252.56 116.808 257.44 131.598 257.44 141.818H257.43Z" fill="#96CFEE" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M209.92 180.478C229.526 180.478 245.42 164.584 245.42 144.978C245.42 125.371 229.526 109.478 209.92 109.478C190.314 109.478 174.42 125.371 174.42 144.978C174.42 164.584 190.314 180.478 209.92 180.478Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M202.92 120.617L208.02 117.307C209.26 116.497 210.87 116.517 212.1 117.347L216.92 120.617" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M191.92 102.978C195.234 102.978 197.92 100.291 197.92 96.9775C197.92 93.6638 195.234 90.9775 191.92 90.9775C188.606 90.9775 185.92 93.6638 185.92 96.9775C185.92 100.291 188.606 102.978 191.92 102.978Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M191.92 99.9775C193.577 99.9775 194.92 98.6344 194.92 96.9775C194.92 95.3207 193.577 93.9775 191.92 93.9775C190.263 93.9775 188.92 95.3207 188.92 96.9775C188.92 98.6344 190.263 99.9775 191.92 99.9775Z" fill="black"/>
<path d="M197.92 96.9775H199.92" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M183.92 96.9775H185.92" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M227.92 102.978C231.234 102.978 233.92 100.291 233.92 96.9775C233.92 93.6638 231.234 90.9775 227.92 90.9775C224.606 90.9775 221.92 93.6638 221.92 96.9775C221.92 100.291 224.606 102.978 227.92 102.978Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M227.92 99.9775C229.577 99.9775 230.92 98.6344 230.92 96.9775C230.92 95.3207 229.577 93.9775 227.92 93.9775C226.263 93.9775 224.92 95.3207 224.92 96.9775C224.92 98.6344 226.263 99.9775 227.92 99.9775Z" fill="black"/>
<path d="M233.92 96.9775H235.92" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M219.92 96.9775H221.92" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M205.17 96.9775H213.67" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M238.92 107.978H259.92" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M238.92 112.078L259.57 115.868" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M238.92 103.868L259.57 100.078" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M180.92 107.978H159.92" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M180.92 112.078L160.26 115.868" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M180.92 103.868L160.26 100.078" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<!-- small -->
<g id="small" class="trio">
<path d="M339.31 153.358C339.31 169.448 323.29 182.478 303.52 182.478C283.75 182.478 267.73 169.438 267.73 153.358C267.73 145.648 271.41 134.508 277.42 124.998C280.16 120.658 282.62 116.198 284.65 111.608C287.83 104.398 292.04 96.5975 294.02 96.9975C295.52 97.2975 295.46 102.228 294.77 107.898C294.75 108.058 294.96 108.168 295.13 108.088C297.82 106.908 300.64 106.238 303.53 106.238C306.42 106.238 309.24 106.908 311.94 108.088C312.11 108.168 312.32 108.058 312.3 107.898C311.61 102.228 311.55 97.2975 313.04 96.9975C315.02 96.5975 319.23 104.408 322.41 111.618C324.44 116.218 326.9 120.668 329.64 125.018C335.65 134.528 339.32 145.668 339.32 153.368L339.31 153.358Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M292.02 127.978C295.334 127.978 298.02 125.291 298.02 121.978C298.02 118.664 295.334 115.978 292.02 115.978C288.706 115.978 286.02 118.664 286.02 121.978C286.02 125.291 288.706 127.978 292.02 127.978Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M292.02 124.978C293.677 124.978 295.02 123.634 295.02 121.978C295.02 120.321 293.677 118.978 292.02 118.978C290.363 118.978 289.02 120.321 289.02 121.978C289.02 123.634 290.363 124.978 292.02 124.978Z" fill="black"/>
<path d="M315.02 127.978C318.334 127.978 321.02 125.291 321.02 121.978C321.02 118.664 318.334 115.978 315.02 115.978C311.706 115.978 309.02 118.664 309.02 121.978C309.02 125.291 311.706 127.978 315.02 127.978Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M315.02 124.978C316.677 124.978 318.02 123.634 318.02 121.978C318.02 120.321 316.677 118.978 315.02 118.978C313.363 118.978 312.02 120.321 312.02 121.978C312.02 123.634 313.363 124.978 315.02 124.978Z" fill="black"/>
</g>
<!-- sign -->
<g id="sign">
<path d="M383.02 267.608C396.827 267.608 408.02 265.087 408.02 261.978C408.02 258.868 396.827 256.348 383.02 256.348C369.213 256.348 358.02 258.868 358.02 261.978C358.02 265.087 369.213 267.608 383.02 267.608Z" fill="#C6CCD2" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M408.02 261.978V275.978C408.02 279.088 396.83 281.607 383.02 281.607C369.21 281.607 358.02 279.088 358.02 275.978V261.978C358.02 265.088 369.21 267.608 383.02 267.608C396.83 267.608 408.02 265.088 408.02 261.978V261.978Z" fill="#C6CCD2" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M386.02 179.978H380.02V261.978H386.02V179.978Z" fill="#C6CCD2"/>
<path d="M380.27 179.978V261.978" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M386.27 179.978V261.978" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M392.62 187.978H373.42C371.542 187.978 370.02 189.5 370.02 191.378V221.578C370.02 223.455 371.542 224.978 373.42 224.978H392.62C394.498 224.978 396.02 223.455 396.02 221.578V191.378C396.02 189.5 394.498 187.978 392.62 187.978Z" fill="white" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M418.77 144.478C418.77 149.638 417.67 154.548 415.69 158.978H350.85C348.87 154.548 347.77 149.638 347.77 144.478C347.77 139.318 348.87 134.408 350.85 129.978H415.69C417.67 134.408 418.77 139.318 418.77 144.478V144.478Z" fill="white"/>
<path d="M415.69 158.978C410.14 171.358 397.71 179.978 383.27 179.978C368.83 179.978 356.4 171.358 350.85 158.978H415.69V158.978Z" fill="#166088"/>
<path d="M350.85 130.978C356.4 118.598 368.83 109.978 383.27 109.978C397.71 109.978 410.14 118.598 415.69 130.978H350.85Z" fill="#166088"/>
<path d="M350.85 129.978H415.68" stroke="black" stroke-width="2.35" stroke-miterlimit="10"/>
<path d="M383.27 179.978C402.876 179.978 418.77 164.084 418.77 144.478C418.77 124.871 402.876 108.978 383.27 108.978C363.664 108.978 347.77 124.871 347.77 144.478C347.77 164.084 363.664 179.978 383.27 179.978Z" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path d="M415.68 158.978H350.86" stroke="black" stroke-width="2.35" stroke-miterlimit="10"/>
</g>
<!-- leaf -->
<g id="e">
<path class="leaf2" d="M562.13 158.408C557.37 172.408 544.12 182.478 528.51 182.478C508.9 182.478 493.01 166.588 493.01 146.978C493.01 127.368 508.9 111.478 528.51 111.478C533.71 111.478 538.65 112.598 543.1 114.608" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class="leaf2" d="M543.02 114.478C540.88 122.748 533.1 130.648 523.08 135.118C513.06 139.588 502.61 139.418 495.02 135.478C497.16 127.208 504 119.248 514.01 114.778C524.03 110.308 535.43 110.548 543.02 114.478Z" fill="#68B672" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M521.79 161.378C516.9 162.528 510.78 161.088 505.62 157.108C500.46 153.128 497.52 147.568 497.4 142.538C502.29 141.388 508.41 142.828 513.57 146.808C518.73 150.788 521.67 156.348 521.79 161.378Z" fill="#68B672" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="l">
<path d="M445.02 101.348C445.02 129.488 442.24 156.158 437.27 180.038C437.21 180.298 436.83 180.298 436.77 180.038C431.8 156.158 429.02 129.488 429.02 101.348C429.02 73.2075 431.8 46.5375 436.77 22.6575C436.83 22.3975 437.21 22.3975 437.27 22.6575C442.24 46.5375 445.02 73.2075 445.02 101.348Z" fill="#68B672" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="leaf1" d="M467.87 159.298C459.03 168.798 448.63 175.918 437.48 180.598C437.36 180.648 437.07 180.388 437.12 180.258C440.98 168.808 447.32 157.908 456.15 148.398C464.99 138.898 475.39 131.778 486.54 127.098C486.66 127.048 486.95 127.308 486.9 127.438C483.04 138.888 476.7 149.788 467.87 159.298V159.298Z" fill="#68B672" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
</div>
<input type="text" />
<div id="search">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</main>
<!-- JS Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script>
<!-- My Scripts -->
<script src="js/scripts.js"></script>
</body>
</html>