Hugging Face's logo

Spaces:
Chunte
/
HFBA
Running

App Files Community
2
Chunte HF staff commited on
Commit
de4774d
·
verified ·
1 Parent(s): ef4701e

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +789 -648
index.html CHANGED
@@ -1,649 +1,790 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.min.js" defer></script>
8
- <script>
9
- function downloadImage(url, filename) {
10
- var link = document.createElement("a");
11
- link.href = url;
12
- link.download = filename;
13
- document.body.appendChild(link);
14
- link.click();
15
- document.body.removeChild(link);
16
- }
17
- </script>
18
- <style>
19
- .download-button {
20
- transition: transform 0.2s;
21
- }
22
- .download-button:active {
23
- transform: scale(0.80);
24
- }
25
- </style>
26
- <link rel="stylesheet" href="css/style.css" />
27
- <title>HFBA</title>
28
- <link rel="preconnect" href="https://fonts.googleapis.com">
29
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
30
- <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
31
- </head>
32
- <body class="bg-BluishWhite">
33
- <!--Body Container-->
34
- <div class="container px-5 py-10 mx-auto">
35
-
36
- <!--HF Logos Section-->
37
- <section id="HFlogos" class="mb-28">
38
- <!--Section Title-->
39
- <div class="flex flex-row items-center justify-between">
40
- <div class="font-mono max-w-fit text-3xl bg-blue-500 text-white mb-5 py-3 px-6 rounded-full">HF Logos</div>
41
- <div class="text-BluishDark transform hover:text-gray-900 ">
42
- <a href="https://huggingface.co/brand" target="_blank" class="">View official HF branding guideline <svg xmlns="http://www.w3.org/2000/svg" class="inline w-6 h-6" width="32" height="32" viewBox="0 0 20 20"><path fill="currentColor" d="M9.516 6a.5.5 0 0 0 0 1h2.777l-4.147 4.146a.5.5 0 0 0 .708.708L13 7.707v2.777a.5.5 0 0 0 1 0V6.5a.5.5 0 0 0-.5-.5zm3.25 11a2.5 2.5 0 0 0 2.47-2.11A2.501 2.501 0 0 0 17 12.5v-7A2.5 2.5 0 0 0 14.5 3h-7a2.501 2.501 0 0 0-2.4 1.797A2.5 2.5 0 0 0 3 7.266V13.5A3.5 3.5 0 0 0 6.5 17zM4 7.266A1.5 1.5 0 0 1 5 5.85v6.65A2.5 2.5 0 0 0 7.5 15h6.68a1.5 1.5 0 0 1-1.414 1H6.5A2.5 2.5 0 0 1 4 13.5zM7.5 4h7A1.5 1.5 0 0 1 16 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 6 12.5v-7A1.5 1.5 0 0 1 7.5 4"/></svg></a>
43
- </div>
44
-
45
- </div>
46
-
47
- <!--GRID Container-->
48
- <div class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10">
49
- <!-- Component 1 Container -->
50
- <div class="w-full flex flex-col">
51
- <img src="images/Brand Logos/Hugging Face.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
52
- <!--Info box-->
53
- <div class="pl-3 pt-3">
54
- <h5 class="text-lg font-sans text-BluishDark">HF Logo</h5>
55
- <!--Download Buttons-->
56
- <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
57
- <!--.PNG button-->
58
- <button x-data="{ filename: 'Hugging Face.png', imageUrl: 'images/Brand Logos/Hugging Face.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button download-button">
59
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
60
- <p class="text-gray-500 font-mono">.png</p>
61
- </button>
62
-
63
- <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5">
64
- <!--.SVG button-->
65
- <button x-data="{ filename: 'hf-logo.svg', imageUrl: 'images/Brand Logos/hf-logo.svg'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button ">
66
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
67
- <p class="text-gray-500 font-mono">.svg</p>
68
- </button>
69
- <hr class="mx-3 h-3 rounded-sm border-IconBorder border-r xl:mx-2.5">
70
- <!--.AI button-->
71
- <button x-data="{ filename: 'hf-logo.ai', imageUrl: 'images/Brand Logos/hf-logo.ai'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
72
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
73
- <p class="text-gray-500 font-mono">.ai</p>
74
- </button>
75
- </div>
76
- </div>
77
- </div>
78
-
79
- <!-- Component 2 Container -->
80
- <div class="w-full flex flex-col">
81
- <img src="images/Brand Logos/Rainbow Hugging Face.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
82
- <!--Info box-->
83
- <div class="pl-3 pt-3">
84
- <h5 class="text-lg font-sans text-BluishDark">Rainbow Hugging Face</h5>
85
- <!--Download Buttons-->
86
- <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
87
- <!--.PNG button-->
88
- <button x-data="{ filename: 'Rainbow Hugging Face.png', imageUrl: 'images/Brand Logos/Rainbow Hugging Face.png'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
89
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
90
- <p class="text-gray-500 font-mono">.png</p>
91
- </button>
92
- <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5">
93
- <!--.SVG button-->
94
- <button x-data="{ filename: 'Rainbow Hugging Face.svg', imageUrl: 'images/Brand Logos/Rainbow Hugging Face.svg'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button ">
95
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
96
- <p class="text-gray-500 font-mono">.svg</p>
97
- </button>
98
-
99
- </div>
100
- </div>
101
- </div>
102
- <!-- Component 1 Container -->
103
- <div class="w-full flex flex-col">
104
- <img src="images/Brand Logos/hf-logo-with-title.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
105
- <!--Info box-->
106
- <div class="pl-3 pt-3">
107
- <h5 class="text-lg font-sans text-BluishDark">HF logo + title</h5>
108
- <!--Download Buttons-->
109
- <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
110
- <!--.PNG button-->
111
- <button x-data="{ filename: 'hf-logo-with-title.png', imageUrl: 'images/Brand Logos/hf-logo-with-title.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
112
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
113
- <p class="text-gray-500 font-mono">.png</p>
114
- </button>
115
-
116
- <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5">
117
- <!--.SVG button-->
118
- <button x-data="{ filename: 'hf-logo-with-title.svg', imageUrl: 'images/Brand Logos/hf-logo-with-title.svg'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button ">
119
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
120
- <p class="text-gray-500 font-mono">.svg</p>
121
- </button>
122
- <hr class="mx-3 h-3 rounded-sm border-IconBorder border-r xl:mx-2.5">
123
- <!--.AI button-->
124
- <button x-data="{ filename: 'hf-logo-with-title.ai', imageUrl: 'images/Brand Logos/hf-logo-with-title.ai'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
125
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
126
- <p class="text-gray-500 font-mono">.ai</p>
127
- </button>
128
- </div>
129
- </div>
130
- </div>
131
-
132
- <!--Component 1 container-->
133
- <div class="w-full flex flex-col">
134
- <img src="images/Brand Logos/hf-logo-with-white-title.png" alt="Image 1" class="w-full h-full bg-black shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
135
- <!--Info box-->
136
- <div class="pl-3 pt-3">
137
- <h5 class="text-lg font-sans text-BluishDark">HF logo + white title</h5>
138
- <!--Download Buttons-->
139
- <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
140
- <!--.PNG button-->
141
- <button x-data="{ filename: 'hf-logo-with-white-title.png', imageUrl: 'images/Brand Logos/hf-logo-with-white-title.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
142
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
143
- <p class="text-gray-500 font-mono">.png</p>
144
- </button>
145
-
146
- <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5">
147
- <!--.SVG button-->
148
- <button x-data="{ filename: 'hf-logo-with-white-title.svg', imageUrl: 'images/Brand Logos/hf-logo-with-white-title.svg'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button ">
149
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
150
- <p class="text-gray-500 font-mono">.svg</p>
151
- </button>
152
- <hr class="mx-3 h-3 rounded-sm border-IconBorder border-r xl:mx-2.5">
153
- <!--.AI button-->
154
- <button x-data="{ filename: 'hf-logo-with-white-title.ai', imageUrl: 'images/Brand Logos/hf-logo-with-white-title.ai'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
155
- <img src="images/download icon.svg" class=" w-4 h-4" alt="">
156
- <p class="text-gray-500 font-mono">.ai</p>
157
- </button>
158
-
159
-
160
- </div>
161
- </div>
162
-
163
- </div>
164
- </section>
165
-
166
-
167
-
168
- <!--Huggies section-->
169
- <section id="Huggies" class="">
170
- <!--Section Title-->
171
- <div class="flex items-center mb-5">
172
- <div class="font-mono max-w-fit text-3xl bg-blue-500 text-white py-3 px-6 rounded-full">Huggies</div>
173
- </div>
174
-
175
- <!--GRID Container-->
176
- <div class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10">
177
-
178
- <!--Modern Huggies-->
179
-
180
- <div class="w-full flex flex-col col-span-2 row-span-2">
181
- <img src="images/modern Huggies/Doodle Huggy.gif" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
182
- <!--Info box-->
183
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
184
- <h5 class="text-lg font-sans text-BluishDark">Doodle Huggy</h5>
185
- <!--Download Buttons-->
186
- <button x-data="{ filename: 'Doodle Huggy.gif', imageUrl: 'images/modern Huggies/Doodle Huggy.gif' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
187
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
188
- <p class="text-gray-500 font-mono hidden md:inline-block">.gif</p>
189
- </button>
190
- </div>
191
- </div>
192
-
193
-
194
- <!-- Component 1 Container -->
195
- <div class="w-full flex flex-col">
196
- <img src="images/modern Huggies/Acedemic Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
197
- <!--Info box-->
198
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
199
- <h5 class="text-lg font-sans text-BluishDark">Acedemic Huggy</h5>
200
- <!--Download Buttons-->
201
- <button x-data="{ filename: 'Acedemic Huggy.png', imageUrl: 'images/modern Huggies/Acedemic Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
202
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
203
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
204
- </button>
205
- </div>
206
- </div>
207
- <!-- Component 2 Container -->
208
- <div class="w-full flex flex-col">
209
- <img src="images/modern Huggies/computer vision Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
210
- <!--Info box-->
211
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
212
- <h5 class="text-lg font-sans text-BluishDark">Vision Huggy</h5>
213
- <!--Download Buttons-->
214
- <button x-data="{ filename: 'computer vision Huggy.png', imageUrl: 'images/modern Huggies/computer vision Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
215
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
216
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
217
- </button>
218
- </div>
219
- </div>
220
- <!-- Component 1 Container -->
221
- <div class="w-full flex flex-col">
222
- <img src="images/modern Huggies/D Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
223
- <!--Info box-->
224
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
225
- <h5 class="text-lg font-sans text-BluishDark">D Huggy</h5>
226
- <!--Download Buttons-->
227
- <button x-data="{ filename: 'D Huggy', imageUrl: 'images/modern Huggies/D Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
228
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
229
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
230
- </button>
231
- </div>
232
- </div>
233
-
234
-
235
- <div class="w-full flex flex-col">
236
- <img src="images/modern Huggies/Transformer Agent Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
237
- <!--Info box-->
238
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
239
- <h5 class="text-lg font-sans text-BluishDark">Coding Huggy</h5>
240
- <!--Download Buttons-->
241
- <button x-data="{ filename: 'Coding Huggy', imageUrl: 'images/modern Huggies/Transformer Agent Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
242
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
243
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
244
- </button>
245
-
246
- </div>
247
- </div>
248
-
249
-
250
-
251
- <div class="w-full flex flex-col">
252
- <img src="images/modern Huggies/Game Jam Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
253
- <!--Info box-->
254
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
255
- <h5 class="text-lg font-sans text-BluishDark">Game Jam Huggy</h5>
256
- <!--Download Buttons-->
257
- <button x-data="{ filename: 'Gameing Huggy', imageUrl: 'images/modern Huggies/Game Jam Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
258
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
259
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
260
- </button>
261
-
262
- </div>
263
- </div>
264
-
265
- <div class="w-full flex flex-col">
266
- <img src="images/modern Huggies/IDEFICS Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
267
- <!--Info box-->
268
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
269
- <h5 class="text-lg font-sans text-BluishDark">IDEFICS Huggy</h5>
270
- <!--Download Buttons-->
271
- <button x-data="{ filename: 'IDEFICS Huggy', imageUrl: 'images/modern Huggies/IDEFICS Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
272
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
273
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
274
- </button>
275
-
276
- </div>
277
- </div>
278
-
279
- <!-- Component 1 Container -->
280
- <div class="w-full flex flex-col col-span-2 row-span-2">
281
- <img src="images/modern Huggies/Vibing Huggy.gif" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
282
- <!--Info box-->
283
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
284
- <h5 class="text-lg font-sans text-BluishDark">Vibing Huggy</h5>
285
- <!--Download Buttons-->
286
- <button x-data="{ filename: 'Vibing Huggy', imageUrl: 'images/modern Huggies/Vibing Huggy.gif' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
287
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
288
- <p class="text-gray-500 font-mono hidden md:inline-block">.gif</p>
289
- </button>
290
-
291
- </div>
292
- </div>
293
-
294
- <div class="w-full flex flex-col">
295
- <img src="images/modern Huggies/Karaoke Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
296
- <!--Info box-->
297
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
298
- <h5 class="text-lg font-sans text-BluishDark">Karaoke Huggy</h5>
299
- <!--Download Buttons-->
300
- <button x-data="{ filename: 'Karaoke Huggy', imageUrl: 'images/modern Huggies/Karaoke Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
301
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
302
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
303
- </button>
304
-
305
- </div>
306
- </div>
307
-
308
- <div class="w-full flex flex-col">
309
- <img src="images/modern Huggies/Lora Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
310
- <!--Info box-->
311
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
312
- <h5 class="text-lg font-sans text-BluishDark">Lora Huggy</h5>
313
- <!--Download Buttons-->
314
- <button x-data="{ filename: 'Lora Huggy', imageUrl: 'images/modern Huggies/Lora Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
315
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
316
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
317
- </button>
318
-
319
- </div>
320
- </div>
321
-
322
-
323
- <div class="w-full flex flex-col">
324
- <img src="images/modern Huggies/Robot Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
325
- <!--Info box-->
326
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
327
- <h5 class="text-lg font-sans text-BluishDark">iHuggy</h5>
328
- <!--Download Buttons-->
329
- <button x-data="{ filename: 'Robot Huggy', imageUrl: 'images/modern Huggies/Robot Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
330
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
331
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
332
- </button>
333
-
334
- </div>
335
- </div>
336
-
337
- <div class="w-full flex flex-col">
338
- <img src="images/modern Huggies/Text Generation Wizard Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
339
- <!--Info box-->
340
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
341
- <h5 class="text-lg font-sans text-BluishDark">Wizard Huggy</h5>
342
- <!--Download Buttons-->
343
- <button x-data="{ filename: 'Wizard Huggy', imageUrl: 'images/modern Huggies/Text Generation Wizard Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
344
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
345
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
346
- </button>
347
-
348
- </div>
349
- </div>
350
-
351
- <div class="w-full flex flex-col col-span-2">
352
- <img src="images/modern Huggies/Optimum Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow px-3 rounded-3xl object-contain">
353
- <!--Info box-->
354
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
355
- <h5 class="text-lg font-sans text-BluishDark">Optimum Huggy</h5>
356
- <!--Download Buttons-->
357
- <button x-data="{ filename: 'Optimum Huggy', imageUrl: 'images/modern Huggies/Optimum Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
358
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
359
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
360
- </button>
361
-
362
- </div>
363
- </div>
364
-
365
- <div class="w-full flex flex-col col-span-2 row-span-2">
366
- <img src="images/modern Huggies/Super Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
367
- <!--Info box-->
368
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
369
- <h5 class="text-lg font-sans text-BluishDark">Super Huggy!</h5>
370
- <!--Download Buttons-->
371
- <button x-data="{ filename: 'Super Huggy!', imageUrl: 'images/modern Huggies/Super Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
372
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
373
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
374
- </button>
375
-
376
- </div>
377
- </div>
378
-
379
- <div class="w-full flex flex-col">
380
- <img src="images/modern Huggies/Back of a Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
381
- <!--Info box-->
382
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
383
- <h5 class="text-lg font-sans text-BluishDark">Huggy back</h5>
384
- <!--Download Buttons-->
385
- <button x-data="{ filename: 'Huggy back', imageUrl: 'images/modern Huggies/Back of a Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
386
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
387
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
388
- </button>
389
- </div>
390
- </div>
391
-
392
- <div class="w-full flex flex-col">
393
- <img src="images/modern Huggies/Wine Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
394
- <!--Info box-->
395
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
396
- <h5 class="text-lg font-sans text-BluishDark">Wine Huggy</h5>
397
- <!--Download Buttons-->
398
- <button x-data="{ filename: 'Wine Huggy', imageUrl: 'images/modern Huggies/Wine Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
399
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
400
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
401
- </button>
402
- </div>
403
- </div>
404
-
405
- <div class="w-full flex flex-col">
406
- <img src="images/modern Huggies/Dragon Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
407
- <!--Info box-->
408
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
409
- <h5 class="text-lg font-sans text-BluishDark">Dragon Huggy</h5>
410
- <!--Download Buttons-->
411
- <button x-data="{ filename: 'Dragon Huggy', imageUrl: 'images/modern Huggies/Dragon Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
412
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
413
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
414
- </button>
415
- </div>
416
- </div>
417
-
418
- <!-- Outlined Huggies-->
419
- <div class="w-full flex flex-col">
420
- <img src="images/Outlined Huggies/GPU Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
421
- <!--Info box-->
422
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
423
- <h5 class="text-lg font-sans text-BluishDark">GPU Huggy</h5>
424
- <!--Download Buttons-->
425
- <button x-data="{ filename: 'GPU Huggy', imageUrl: 'images/Outlined Huggies/GPU Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
426
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
427
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
428
- </button>
429
- </div>
430
- </div>
431
-
432
- <div class="w-full flex flex-col">
433
- <img src="images/Outlined Huggies/Comic Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
434
- <!--Info box-->
435
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
436
- <h5 class="text-lg font-sans text-BluishDark">Comic Huggy</h5>
437
- <!--Download Buttons-->
438
- <button x-data="{ filename: 'Comic Huggy', imageUrl: 'images/Outlined Huggies/Comic Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
439
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
440
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
441
- </button>
442
- </div>
443
- </div>
444
-
445
- <div class="w-full flex flex-col">
446
- <img src="images/Outlined Huggies/Curious Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
447
- <!--Info box-->
448
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
449
- <h5 class="text-lg font-sans text-BluishDark">Curious Huggy</h5>
450
- <!--Download Buttons-->
451
- <button x-data="{ filename: 'Curious Huggy', imageUrl: 'images/Outlined Huggies/Curious Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
452
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
453
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
454
- </button>
455
- </div>
456
- </div>
457
-
458
- <div class="w-full flex flex-col">
459
- <img src="images/Outlined Huggies/Rocket Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
460
- <!--Info box-->
461
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
462
- <h5 class="text-lg font-sans text-BluishDark">To the moon</h5>
463
- <!--Download Buttons-->
464
- <button x-data="{ filename: 'To the moon', imageUrl: 'images/Outlined Huggies/Rocket Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
465
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
466
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
467
- </button>
468
- </div>
469
- </div>
470
-
471
- <div class="w-full flex flex-col">
472
- <img src="images/Outlined Huggies/Diffusor guide Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
473
- <!--Info box-->
474
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
475
- <h5 class="text-lg font-sans text-BluishDark">Diffusor Huggy</h5>
476
- <!--Download Buttons-->
477
- <button x-data="{ filename: 'Diffusor Huggy', imageUrl: 'images/Outlined Huggies/Diffusor guide Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
478
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
479
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
480
- </button>
481
- </div>
482
- </div>
483
-
484
- <div class="w-full flex flex-col">
485
- <img src="images/Outlined Huggies/Fishing Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
486
- <!--Info box-->
487
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
488
- <h5 class="text-lg font-sans text-BluishDark">Fishing Huggy</h5>
489
- <!--Download Buttons-->
490
- <button x-data="{ filename: 'Fishing Huggy', imageUrl: 'images/Outlined Huggies/Fishing Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
491
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
492
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
493
- </button>
494
- </div>
495
- </div>
496
-
497
- <div class="w-full flex flex-col">
498
- <img src="images/Outlined Huggies/Global Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
499
- <!--Info box-->
500
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
501
- <h5 class="text-lg font-sans text-BluishDark">Global Huggy</h5>
502
- <!--Download Buttons-->
503
- <button x-data="{ filename: 'Global Huggy', imageUrl: 'images/Outlined Huggies/Global Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
504
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
505
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
506
- </button>
507
- </div>
508
- </div>
509
-
510
- <div class="w-full flex flex-col">
511
- <img src="images/Outlined Huggies/Greeting Huggy left.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
512
- <!--Info box-->
513
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
514
- <h5 class="text-lg font-sans text-BluishDark">Greeting Huggy l</h5>
515
- <!--Download Buttons-->
516
- <button x-data="{ filename: 'Greeting Huggy l', imageUrl: 'images/Outlined Huggies/Greeting Huggy left.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
517
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
518
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
519
- </button>
520
- </div>
521
- </div>
522
-
523
- <div class="w-full flex flex-col">
524
- <img src="images/Outlined Huggies/Greeting Huggy right.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
525
- <!--Info box-->
526
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
527
- <h5 class="text-lg font-sans text-BluishDark">Greeting Huggy r</h5>
528
- <!--Download Buttons-->
529
- <button x-data="{ filename: 'Greeting Huggy r', imageUrl: 'images/Outlined Huggies/Greeting Huggy right.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
530
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
531
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
532
- </button>
533
- </div>
534
- </div>
535
-
536
- <div class="w-full flex flex-col">
537
- <img src="images/Outlined Huggies/Growing model Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
538
- <!--Info box-->
539
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
540
- <h5 class="text-lg font-sans text-BluishDark">Caring Huggy</h5>
541
- <!--Download Buttons-->
542
- <button x-data="{ filename: 'Caring Huggy', imageUrl: 'images/Outlined Huggies/Growing model Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
543
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
544
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
545
- </button>
546
- </div>
547
- </div>
548
-
549
- <div class="w-full flex flex-col">
550
- <img src="images/Outlined Huggies/Guide Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
551
- <!--Info box-->
552
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
553
- <h5 class="text-lg font-sans text-BluishDark">Guide Huggy</h5>
554
- <!--Download Buttons-->
555
- <button x-data="{ filename: 'Guide Huggy', imageUrl: 'images/Outlined Huggies/Guide Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
556
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
557
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
558
- </button>
559
- </div>
560
- </div>
561
-
562
- <div class="w-full flex flex-col">
563
- <img src="images/Outlined Huggies/Loving modelndataset Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
564
- <!--Info box-->
565
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
566
- <h5 class="text-lg font-sans text-BluishDark">in-love Huggy</h5>
567
- <!--Download Buttons-->
568
- <button x-data="{ filename: 'in-love Huggy', imageUrl: 'images/Outlined Huggies/Loving modelndataset Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
569
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
570
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
571
- </button>
572
- </div>
573
- </div>
574
-
575
- <div class="w-full flex flex-col">
576
- <img src="images/Outlined Huggies/Manager Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
577
- <!--Info box-->
578
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
579
- <h5 class="text-lg font-sans text-BluishDark">Manager Huggy</h5>
580
- <!--Download Buttons-->
581
- <button x-data="{ filename: 'Manager Huggy', imageUrl: 'images/Outlined Huggies/Manager Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
582
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
583
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
584
- </button>
585
- </div>
586
- </div>
587
-
588
- <div class="w-full flex flex-col">
589
- <img src="images/Outlined Huggies/Paper Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
590
- <!--Info box-->
591
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
592
- <h5 class="text-lg font-sans text-BluishDark">Paper Huggy</h5>
593
- <!--Download Buttons-->
594
- <button x-data="{ filename: 'Paper Huggy', imageUrl: 'images/Outlined Huggies/Paper Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
595
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
596
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
597
- </button>
598
- </div>
599
- </div>
600
-
601
- <div class="w-full flex flex-col">
602
- <img src="images/Outlined Huggies/Scan Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
603
- <!--Info box-->
604
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
605
- <h5 class="text-lg font-sans text-BluishDark">Scan Huggy</h5>
606
- <!--Download Buttons-->
607
- <button x-data="{ filename: 'Scan Huggy', imageUrl: 'images/Outlined Huggies/Scan Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
608
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
609
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
610
- </button>
611
- </div>
612
- </div>
613
-
614
- <div class="w-full flex flex-col">
615
- <img src="images/Outlined Huggies/Violinist Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
616
- <!--Info box-->
617
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
618
- <h5 class="text-lg font-sans text-BluishDark">Violinist Huggy</h5>
619
- <!--Download Buttons-->
620
- <button x-data="{ filename: 'Violinist Huggy', imageUrl: 'images/Outlined Huggies/Violinist Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
621
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
622
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
623
- </button>
624
- </div>
625
- </div>
626
-
627
- <div class="w-full flex flex-col">
628
- <img src="images/Outlined Huggies/X-ray Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
629
- <!--Info box-->
630
- <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
631
- <h5 class="text-lg font-sans text-BluishDark">X-ray Huggy</h5>
632
- <!--Download Buttons-->
633
- <button x-data="{ filename: 'X-ray Huggy', imageUrl: 'images/Outlined Huggies/X-ray Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
634
- <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
635
- <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
636
- </button>
637
- </div>
638
- </div>
639
-
640
- </div>
641
- </section>
642
- </div>
643
- </body>
644
- </html>
645
-
646
-
647
-
648
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
649
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.min.js" defer></script>
8
+ <script>
9
+ function downloadImage(url, filename) {
10
+ var link = document.createElement("a");
11
+ link.href = url;
12
+ link.download = filename;
13
+ document.body.appendChild(link);
14
+ link.click();
15
+ document.body.removeChild(link);
16
+ }
17
+ </script>
18
+ <style>
19
+ .download-button {
20
+ transition: transform 0.2s;
21
+ }
22
+ .download-button:active {
23
+ transform: scale(0.80);
24
+ }
25
+ </style>
26
+ <link rel="stylesheet" href="css/style.css" />
27
+ <title>HFBA</title>
28
+ <link rel="preconnect" href="https://fonts.googleapis.com">
29
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
30
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
31
+ </head>
32
+ <body class="bg-BluishWhite">
33
+ <!--Body Container-->
34
+ <div class="container px-5 py-10 mx-auto">
35
+
36
+ <!--HF Logos Section-->
37
+ <section id="HFlogos" class="mb-28">
38
+ <!--Section Title-->
39
+ <div class="flex flex-row items-center justify-between">
40
+ <div class="font-mono max-w-fit text-3xl bg-blue-500 text-white mb-5 py-3 px-6 rounded-full">HF Logos</div>
41
+ <div class="text-BluishDark transform hover:text-gray-900 ">
42
+ <a href="https://huggingface.co/brand" target="_blank" class="">View official HF branding guideline <svg xmlns="http://www.w3.org/2000/svg" class="inline w-6 h-6" width="32" height="32" viewBox="0 0 20 20"><path fill="currentColor" d="M9.516 6a.5.5 0 0 0 0 1h2.777l-4.147 4.146a.5.5 0 0 0 .708.708L13 7.707v2.777a.5.5 0 0 0 1 0V6.5a.5.5 0 0 0-.5-.5zm3.25 11a2.5 2.5 0 0 0 2.47-2.11A2.501 2.501 0 0 0 17 12.5v-7A2.5 2.5 0 0 0 14.5 3h-7a2.501 2.501 0 0 0-2.4 1.797A2.5 2.5 0 0 0 3 7.266V13.5A3.5 3.5 0 0 0 6.5 17zM4 7.266A1.5 1.5 0 0 1 5 5.85v6.65A2.5 2.5 0 0 0 7.5 15h6.68a1.5 1.5 0 0 1-1.414 1H6.5A2.5 2.5 0 0 1 4 13.5zM7.5 4h7A1.5 1.5 0 0 1 16 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 6 12.5v-7A1.5 1.5 0 0 1 7.5 4"/></svg></a>
43
+ </div>
44
+
45
+ </div>
46
+
47
+ <!--GRID Container-->
48
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10">
49
+ <!-- Component 1 Container -->
50
+ <div class="w-full flex flex-col">
51
+ <img src="images/Brand Logos/Hugging Face.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
52
+ <!--Info box-->
53
+ <div class="pl-3 pt-3">
54
+ <h5 class="text-lg font-sans text-BluishDark">HF Logo</h5>
55
+ <!--Download Buttons-->
56
+ <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
57
+ <!--.PNG button-->
58
+ <button x-data="{ filename: 'Hugging Face.png', imageUrl: 'images/Brand Logos/Hugging Face.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button download-button">
59
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
60
+ <p class="text-gray-500 font-mono">.png</p>
61
+ </button>
62
+
63
+ <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5">
64
+ <!--.SVG button-->
65
+ <button x-data="{ filename: 'hf-logo.svg', imageUrl: 'images/Brand Logos/hf-logo.svg'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button ">
66
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
67
+ <p class="text-gray-500 font-mono">.svg</p>
68
+ </button>
69
+ <hr class="mx-3 h-3 rounded-sm border-IconBorder border-r xl:mx-2.5">
70
+ <!--.AI button-->
71
+ <button x-data="{ filename: 'hf-logo.ai', imageUrl: 'images/Brand Logos/hf-logo.ai'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
72
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
73
+ <p class="text-gray-500 font-mono">.ai</p>
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Component 2 Container -->
80
+ <div class="w-full flex flex-col">
81
+ <img src="images/Brand Logos/Rainbow Hugging Face.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
82
+ <!--Info box-->
83
+ <div class="pl-3 pt-3">
84
+ <h5 class="text-lg font-sans text-BluishDark">Rainbow Hugging Face</h5>
85
+ <!--Download Buttons-->
86
+ <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
87
+ <!--.PNG button-->
88
+ <button x-data="{ filename: 'Rainbow Hugging Face.png', imageUrl: 'images/Brand Logos/Rainbow Hugging Face.png'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
89
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
90
+ <p class="text-gray-500 font-mono">.png</p>
91
+ </button>
92
+ <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5">
93
+ <!--.SVG button-->
94
+ <button x-data="{ filename: 'Rainbow Hugging Face.svg', imageUrl: 'images/Brand Logos/Rainbow Hugging Face.svg'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button ">
95
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
96
+ <p class="text-gray-500 font-mono">.svg</p>
97
+ </button>
98
+
99
+ </div>
100
+ </div>
101
+ </div>
102
+ <!-- Component 1 Container -->
103
+ <div class="w-full flex flex-col">
104
+ <img src="images/Brand Logos/hf-logo-with-title.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
105
+ <!--Info box-->
106
+ <div class="pl-3 pt-3">
107
+ <h5 class="text-lg font-sans text-BluishDark">HF logo + title</h5>
108
+ <!--Download Buttons-->
109
+ <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
110
+ <!--.PNG button-->
111
+ <button x-data="{ filename: 'hf-logo-with-title.png', imageUrl: 'images/Brand Logos/hf-logo-with-title.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
112
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
113
+ <p class="text-gray-500 font-mono">.png</p>
114
+ </button>
115
+
116
+ <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5">
117
+ <!--.SVG button-->
118
+ <button x-data="{ filename: 'hf-logo-with-title.svg', imageUrl: 'images/Brand Logos/hf-logo-with-title.svg'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button ">
119
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
120
+ <p class="text-gray-500 font-mono">.svg</p>
121
+ </button>
122
+ <hr class="mx-3 h-3 rounded-sm border-IconBorder border-r xl:mx-2.5">
123
+ <!--.AI button-->
124
+ <button x-data="{ filename: 'hf-logo-with-title.ai', imageUrl: 'images/Brand Logos/hf-logo-with-title.ai'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
125
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
126
+ <p class="text-gray-500 font-mono">.ai</p>
127
+ </button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!--Component 1 container-->
133
+ <div class="w-full flex flex-col">
134
+ <img src="images/Brand Logos/hf-logo-with-white-title.png" alt="Image 1" class="w-full h-full bg-black shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
135
+ <!--Info box-->
136
+ <div class="pl-3 pt-3">
137
+ <h5 class="text-lg font-sans text-BluishDark">HF logo + white title</h5>
138
+ <!--Download Buttons-->
139
+ <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
140
+ <!--.PNG button-->
141
+ <button x-data="{ filename: 'hf-logo-with-white-title.png', imageUrl: 'images/Brand Logos/hf-logo-with-white-title.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
142
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
143
+ <p class="text-gray-500 font-mono">.png</p>
144
+ </button>
145
+
146
+ <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5">
147
+ <!--.SVG button-->
148
+ <button x-data="{ filename: 'hf-logo-with-white-title.svg', imageUrl: 'images/Brand Logos/hf-logo-with-white-title.svg'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button ">
149
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
150
+ <p class="text-gray-500 font-mono">.svg</p>
151
+ </button>
152
+ <hr class="mx-3 h-3 rounded-sm border-IconBorder border-r xl:mx-2.5">
153
+ <!--.AI button-->
154
+ <button x-data="{ filename: 'hf-logo-with-white-title.ai', imageUrl: 'images/Brand Logos/hf-logo-with-white-title.ai'}" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
155
+ <img src="images/download icon.svg" class=" w-4 h-4" alt="">
156
+ <p class="text-gray-500 font-mono">.ai</p>
157
+ </button>
158
+
159
+
160
+ </div>
161
+ </div>
162
+
163
+ </div>
164
+ </section>
165
+
166
+
167
+
168
+ <!--Huggies section-->
169
+ <section id="Huggies" class="">
170
+ <!--Section Title-->
171
+ <div class="flex items-center mb-5">
172
+ <div class="font-mono max-w-fit text-3xl bg-blue-500 text-white py-3 px-6 rounded-full">Huggies</div>
173
+ </div>
174
+
175
+ <!--GRID Container-->
176
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10">
177
+
178
+ <!--Modern Huggies-->
179
+
180
+ <div class="w-full flex flex-col col-span-2 row-span-2">
181
+ <img src="images/modern Huggies/Huggy Pop.gif" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow rounded-3xl object-contain">
182
+ <!--Info box-->
183
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
184
+ <h5 class="text-lg font-sans text-BluishDark">Huggy Pop</h5>
185
+ <!--Download Buttons-->
186
+ <button x-data="{ filename: 'Huggy Pop.gif', imageUrl: 'images/modern Huggies/Huggy Pop.gif' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
187
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
188
+ <p class="text-gray-500 font-mono hidden md:inline-block">.gif</p>
189
+ </button>
190
+ </div>
191
+ </div>
192
+
193
+
194
+ <div class="w-full flex flex-col">
195
+ <img src="images/modern Huggies/Huggy Sunny hello.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow p-3 rounded-3xl object-contain">
196
+ <!--Info box-->
197
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
198
+ <h5 class="text-lg font-sans text-BluishDark">Huggy Hello</h5>
199
+ <!--Download Buttons-->
200
+ <button x-data="{ filename: 'Huggy Sunny hello.png', imageUrl: 'images/modern Huggies/Huggy Sunny hello.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
201
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
202
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
203
+ </button>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="w-full flex flex-col">
208
+ <img src="images/modern Huggies/Huggy Sunny.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow p-3 rounded-3xl object-contain">
209
+ <!--Info box-->
210
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
211
+ <h5 class="text-lg font-sans text-BluishDark">Huggy Sunny</h5>
212
+ <!--Download Buttons-->
213
+ <button x-data="{ filename: 'Huggy Sunny.png', imageUrl: 'images/modern Huggies/Huggy Sunny.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
214
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
215
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
216
+ </button>
217
+ </div>
218
+ </div>
219
+
220
+
221
+
222
+ <div class="w-full flex flex-col">
223
+ <img src="images/modern Huggies/Huggy the Pooh meme.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow p-3 rounded-3xl object-contain">
224
+ <!--Info box-->
225
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
226
+ <h5 class="text-lg font-sans text-BluishDark">Huggy the Pooh</h5>
227
+ <!--Download Buttons-->
228
+ <button x-data="{ filename: 'Huggy the Pooh meme.png', imageUrl: 'images/modern Huggies/Huggy the Pooh meme.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
229
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
230
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
231
+ </button>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="w-full flex flex-col">
236
+ <img src="images/modern Huggies/Snake Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
237
+ <!--Info box-->
238
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
239
+ <h5 class="text-lg font-sans text-BluishDark">Snake Huggy</h5>
240
+ <!--Download Buttons-->
241
+ <button x-data="{ filename: 'Snake Huggy.png', imageUrl: 'images/modern Huggies/Snake Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
242
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
243
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
244
+ </button>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="w-full flex flex-col">
249
+ <img src="images/modern Huggies/Huggy Chef.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
250
+ <!--Info box-->
251
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
252
+ <h5 class="text-lg font-sans text-BluishDark">Huggy Chef</h5>
253
+ <!--Download Buttons-->
254
+ <button x-data="{ filename: 'Huggy Chef.png', imageUrl: 'images/modern Huggies/Huggy Chef.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
255
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
256
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
257
+ </button>
258
+ </div>
259
+ </div>
260
+
261
+
262
+ <div class="w-full flex flex-col">
263
+ <img src="images/modern Huggies/Huggy Yolk.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
264
+ <!--Info box-->
265
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
266
+ <h5 class="text-lg font-sans text-BluishDark">Huggy Yolk</h5>
267
+ <!--Download Buttons-->
268
+ <button x-data="{ filename: 'Huggy Yolk.png', imageUrl: 'images/modern Huggies/Huggy Yolk.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
269
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
270
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
271
+ </button>
272
+ </div>
273
+ </div>
274
+
275
+
276
+ <div class="w-full flex flex-col">
277
+ <img src="images/modern Huggies/Huggy Medic.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
278
+ <!--Info box-->
279
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
280
+ <h5 class="text-lg font-sans text-BluishDark">Huggy Medic</h5>
281
+ <!--Download Buttons-->
282
+ <button x-data="{ filename: 'Huggy Medic.png', imageUrl: 'images/modern Huggies/Huggy Medic.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
283
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
284
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
285
+ </button>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="w-full flex flex-col">
290
+ <img src="images/modern Huggies/Huggy Lab.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
291
+ <!--Info box-->
292
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
293
+ <h5 class="text-lg font-sans text-BluishDark">Huggy Lab</h5>
294
+ <!--Download Buttons-->
295
+ <button x-data="{ filename: 'Huggy Lab.png', imageUrl: 'images/modern Huggies/Huggy Lab.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
296
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
297
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
298
+ </button>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Component 1 Container -->
303
+ <div class="w-full flex flex-col">
304
+ <img src="images/modern Huggies/Acedemic Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
305
+ <!--Info box-->
306
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
307
+ <h5 class="text-lg font-sans text-BluishDark">Acedemic Huggy</h5>
308
+ <!--Download Buttons-->
309
+ <button x-data="{ filename: 'Acedemic Huggy.png', imageUrl: 'images/modern Huggies/Acedemic Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
310
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
311
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
312
+ </button>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Component 1 Container -->
317
+ <div class="w-full flex flex-col">
318
+ <img src="images/modern Huggies/D Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
319
+ <!--Info box-->
320
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
321
+ <h5 class="text-lg font-sans text-BluishDark">D Huggy</h5>
322
+ <!--Download Buttons-->
323
+ <button x-data="{ filename: 'D Huggy', imageUrl: 'images/modern Huggies/D Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
324
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
325
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
326
+ </button>
327
+ </div>
328
+ </div>
329
+
330
+
331
+ <div class="w-full flex flex-col col-span-2 row-span-2">
332
+ <img src="images/modern Huggies/Doodle Huggy.gif" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
333
+ <!--Info box-->
334
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
335
+ <h5 class="text-lg font-sans text-BluishDark">Doodle Huggy</h5>
336
+ <!--Download Buttons-->
337
+ <button x-data="{ filename: 'Doodle Huggy.gif', imageUrl: 'images/modern Huggies/Doodle Huggy.gif' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
338
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
339
+ <p class="text-gray-500 font-mono hidden md:inline-block">.gif</p>
340
+ </button>
341
+ </div>
342
+ </div>
343
+
344
+
345
+ <div class="w-full flex flex-col">
346
+ <img src="images/modern Huggies/Transformer Agent Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
347
+ <!--Info box-->
348
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
349
+ <h5 class="text-lg font-sans text-BluishDark">Coding Huggy</h5>
350
+ <!--Download Buttons-->
351
+ <button x-data="{ filename: 'Coding Huggy', imageUrl: 'images/modern Huggies/Transformer Agent Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
352
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
353
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
354
+ </button>
355
+
356
+ </div>
357
+ </div>
358
+
359
+
360
+ <div class="w-full flex flex-col">
361
+ <img src="images/modern Huggies/Huggy Hi.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
362
+ <!--Info box-->
363
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
364
+ <h5 class="text-lg font-sans text-BluishDark">Huggy Hi.png</h5>
365
+ <!--Download Buttons-->
366
+ <button x-data="{ filename: 'Gameing Huggy', imageUrl: 'images/modern Huggies/Huggy Hi.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
367
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
368
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
369
+ </button>
370
+
371
+ </div>
372
+ </div>
373
+
374
+
375
+ <div class="w-full flex flex-col">
376
+ <img src="images/modern Huggies/Game Jam Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
377
+ <!--Info box-->
378
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
379
+ <h5 class="text-lg font-sans text-BluishDark">Game Jam Huggy</h5>
380
+ <!--Download Buttons-->
381
+ <button x-data="{ filename: 'Gameing Huggy', imageUrl: 'images/modern Huggies/Game Jam Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
382
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
383
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
384
+ </button>
385
+
386
+ </div>
387
+ </div>
388
+
389
+ <div class="w-full flex flex-col">
390
+ <img src="images/modern Huggies/IDEFICS Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
391
+ <!--Info box-->
392
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
393
+ <h5 class="text-lg font-sans text-BluishDark">IDEFICS Huggy</h5>
394
+ <!--Download Buttons-->
395
+ <button x-data="{ filename: 'IDEFICS Huggy', imageUrl: 'images/modern Huggies/IDEFICS Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
396
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
397
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
398
+ </button>
399
+
400
+ </div>
401
+ </div>
402
+
403
+ <!-- Component 2 Container -->
404
+ <div class="w-full flex flex-col">
405
+ <img src="images/modern Huggies/computer vision Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
406
+ <!--Info box-->
407
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
408
+ <h5 class="text-lg font-sans text-BluishDark">Vision Huggy</h5>
409
+ <!--Download Buttons-->
410
+ <button x-data="{ filename: 'computer vision Huggy.png', imageUrl: 'images/modern Huggies/computer vision Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
411
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
412
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
413
+ </button>
414
+ </div>
415
+ </div>
416
+
417
+
418
+
419
+ <div class="w-full flex flex-col">
420
+ <img src="images/modern Huggies/Karaoke Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
421
+ <!--Info box-->
422
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
423
+ <h5 class="text-lg font-sans text-BluishDark">Karaoke Huggy</h5>
424
+ <!--Download Buttons-->
425
+ <button x-data="{ filename: 'Karaoke Huggy', imageUrl: 'images/modern Huggies/Karaoke Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
426
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
427
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
428
+ </button>
429
+
430
+ </div>
431
+ </div>
432
+
433
+ <!-- Component 1 Container -->
434
+ <div class="w-full flex flex-col col-span-2 row-span-2">
435
+ <img src="images/modern Huggies/Vibing Huggy.gif" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
436
+ <!--Info box-->
437
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
438
+ <h5 class="text-lg font-sans text-BluishDark">Vibing Huggy</h5>
439
+ <!--Download Buttons-->
440
+ <button x-data="{ filename: 'Vibing Huggy', imageUrl: 'images/modern Huggies/Vibing Huggy.gif' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
441
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
442
+ <p class="text-gray-500 font-mono hidden md:inline-block">.gif</p>
443
+ </button>
444
+
445
+ </div>
446
+ </div>
447
+
448
+ <div class="w-full flex flex-col">
449
+ <img src="images/modern Huggies/Lora Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
450
+ <!--Info box-->
451
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
452
+ <h5 class="text-lg font-sans text-BluishDark">Lora Huggy</h5>
453
+ <!--Download Buttons-->
454
+ <button x-data="{ filename: 'Lora Huggy', imageUrl: 'images/modern Huggies/Lora Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
455
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
456
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
457
+ </button>
458
+
459
+ </div>
460
+ </div>
461
+
462
+
463
+ <div class="w-full flex flex-col">
464
+ <img src="images/modern Huggies/Robot Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
465
+ <!--Info box-->
466
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
467
+ <h5 class="text-lg font-sans text-BluishDark">iHuggy</h5>
468
+ <!--Download Buttons-->
469
+ <button x-data="{ filename: 'Robot Huggy', imageUrl: 'images/modern Huggies/Robot Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
470
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
471
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
472
+ </button>
473
+
474
+ </div>
475
+ </div>
476
+
477
+ <div class="w-full flex flex-col">
478
+ <img src="images/modern Huggies/Text Generation Wizard Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
479
+ <!--Info box-->
480
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
481
+ <h5 class="text-lg font-sans text-BluishDark">Wizard Huggy</h5>
482
+ <!--Download Buttons-->
483
+ <button x-data="{ filename: 'Wizard Huggy', imageUrl: 'images/modern Huggies/Text Generation Wizard Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
484
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
485
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
486
+ </button>
487
+
488
+ </div>
489
+ </div>
490
+
491
+ <div class="w-full flex flex-col">
492
+ <img src="images/modern Huggies/Dragon Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
493
+ <!--Info box-->
494
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
495
+ <h5 class="text-lg font-sans text-BluishDark">Dragon Huggy</h5>
496
+ <!--Download Buttons-->
497
+ <button x-data="{ filename: 'Dragon Huggy', imageUrl: 'images/modern Huggies/Dragon Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
498
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
499
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
500
+ </button>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="w-full flex flex-col col-span-2">
505
+ <img src="images/modern Huggies/Optimum Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow px-3 rounded-3xl object-contain">
506
+ <!--Info box-->
507
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
508
+ <h5 class="text-lg font-sans text-BluishDark">Optimum Huggy</h5>
509
+ <!--Download Buttons-->
510
+ <button x-data="{ filename: 'Optimum Huggy', imageUrl: 'images/modern Huggies/Optimum Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
511
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
512
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
513
+ </button>
514
+
515
+ </div>
516
+ </div>
517
+
518
+ <div class="w-full flex flex-col col-span-2 row-span-2">
519
+ <img src="images/modern Huggies/Super Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
520
+ <!--Info box-->
521
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
522
+ <h5 class="text-lg font-sans text-BluishDark">Super Huggy!</h5>
523
+ <!--Download Buttons-->
524
+ <button x-data="{ filename: 'Super Huggy!', imageUrl: 'images/modern Huggies/Super Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
525
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
526
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
527
+ </button>
528
+
529
+ </div>
530
+ </div>
531
+
532
+ <div class="w-full flex flex-col">
533
+ <img src="images/modern Huggies/Back of a Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
534
+ <!--Info box-->
535
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
536
+ <h5 class="text-lg font-sans text-BluishDark">Huggy back</h5>
537
+ <!--Download Buttons-->
538
+ <button x-data="{ filename: 'Huggy back', imageUrl: 'images/modern Huggies/Back of a Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
539
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
540
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
541
+ </button>
542
+ </div>
543
+ </div>
544
+
545
+ <div class="w-full flex flex-col">
546
+ <img src="images/modern Huggies/Wine Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
547
+ <!--Info box-->
548
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
549
+ <h5 class="text-lg font-sans text-BluishDark">Wine Huggy</h5>
550
+ <!--Download Buttons-->
551
+ <button x-data="{ filename: 'Wine Huggy', imageUrl: 'images/modern Huggies/Wine Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
552
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
553
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
554
+ </button>
555
+ </div>
556
+ </div>
557
+
558
+
559
+ <!-- Outlined Huggies-->
560
+ <div class="w-full flex flex-col">
561
+ <img src="images/Outlined Huggies/GPU Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
562
+ <!--Info box-->
563
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
564
+ <h5 class="text-lg font-sans text-BluishDark">GPU Huggy</h5>
565
+ <!--Download Buttons-->
566
+ <button x-data="{ filename: 'GPU Huggy', imageUrl: 'images/Outlined Huggies/GPU Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
567
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
568
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
569
+ </button>
570
+ </div>
571
+ </div>
572
+
573
+ <div class="w-full flex flex-col">
574
+ <img src="images/Outlined Huggies/Comic Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
575
+ <!--Info box-->
576
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
577
+ <h5 class="text-lg font-sans text-BluishDark">Comic Huggy</h5>
578
+ <!--Download Buttons-->
579
+ <button x-data="{ filename: 'Comic Huggy', imageUrl: 'images/Outlined Huggies/Comic Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
580
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
581
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
582
+ </button>
583
+ </div>
584
+ </div>
585
+
586
+ <div class="w-full flex flex-col">
587
+ <img src="images/Outlined Huggies/Curious Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
588
+ <!--Info box-->
589
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
590
+ <h5 class="text-lg font-sans text-BluishDark">Curious Huggy</h5>
591
+ <!--Download Buttons-->
592
+ <button x-data="{ filename: 'Curious Huggy', imageUrl: 'images/Outlined Huggies/Curious Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
593
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
594
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
595
+ </button>
596
+ </div>
597
+ </div>
598
+
599
+ <div class="w-full flex flex-col">
600
+ <img src="images/Outlined Huggies/Rocket Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
601
+ <!--Info box-->
602
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
603
+ <h5 class="text-lg font-sans text-BluishDark">To the moon</h5>
604
+ <!--Download Buttons-->
605
+ <button x-data="{ filename: 'To the moon', imageUrl: 'images/Outlined Huggies/Rocket Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
606
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
607
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
608
+ </button>
609
+ </div>
610
+ </div>
611
+
612
+ <div class="w-full flex flex-col">
613
+ <img src="images/Outlined Huggies/Diffusor guide Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
614
+ <!--Info box-->
615
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
616
+ <h5 class="text-lg font-sans text-BluishDark">Diffusor Huggy</h5>
617
+ <!--Download Buttons-->
618
+ <button x-data="{ filename: 'Diffusor Huggy', imageUrl: 'images/Outlined Huggies/Diffusor guide Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
619
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
620
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
621
+ </button>
622
+ </div>
623
+ </div>
624
+
625
+ <div class="w-full flex flex-col">
626
+ <img src="images/Outlined Huggies/Fishing Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
627
+ <!--Info box-->
628
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
629
+ <h5 class="text-lg font-sans text-BluishDark">Fishing Huggy</h5>
630
+ <!--Download Buttons-->
631
+ <button x-data="{ filename: 'Fishing Huggy', imageUrl: 'images/Outlined Huggies/Fishing Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
632
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
633
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
634
+ </button>
635
+ </div>
636
+ </div>
637
+
638
+ <div class="w-full flex flex-col">
639
+ <img src="images/Outlined Huggies/Global Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
640
+ <!--Info box-->
641
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
642
+ <h5 class="text-lg font-sans text-BluishDark">Global Huggy</h5>
643
+ <!--Download Buttons-->
644
+ <button x-data="{ filename: 'Global Huggy', imageUrl: 'images/Outlined Huggies/Global Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
645
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
646
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
647
+ </button>
648
+ </div>
649
+ </div>
650
+
651
+ <div class="w-full flex flex-col">
652
+ <img src="images/Outlined Huggies/Greeting Huggy left.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
653
+ <!--Info box-->
654
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
655
+ <h5 class="text-lg font-sans text-BluishDark">Greeting Huggy l</h5>
656
+ <!--Download Buttons-->
657
+ <button x-data="{ filename: 'Greeting Huggy l', imageUrl: 'images/Outlined Huggies/Greeting Huggy left.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
658
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
659
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
660
+ </button>
661
+ </div>
662
+ </div>
663
+
664
+ <div class="w-full flex flex-col">
665
+ <img src="images/Outlined Huggies/Greeting Huggy right.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
666
+ <!--Info box-->
667
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
668
+ <h5 class="text-lg font-sans text-BluishDark">Greeting Huggy r</h5>
669
+ <!--Download Buttons-->
670
+ <button x-data="{ filename: 'Greeting Huggy r', imageUrl: 'images/Outlined Huggies/Greeting Huggy right.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
671
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
672
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
673
+ </button>
674
+ </div>
675
+ </div>
676
+
677
+ <div class="w-full flex flex-col">
678
+ <img src="images/Outlined Huggies/Growing model Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
679
+ <!--Info box-->
680
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
681
+ <h5 class="text-lg font-sans text-BluishDark">Caring Huggy</h5>
682
+ <!--Download Buttons-->
683
+ <button x-data="{ filename: 'Caring Huggy', imageUrl: 'images/Outlined Huggies/Growing model Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
684
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
685
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
686
+ </button>
687
+ </div>
688
+ </div>
689
+
690
+ <div class="w-full flex flex-col">
691
+ <img src="images/Outlined Huggies/Guide Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
692
+ <!--Info box-->
693
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
694
+ <h5 class="text-lg font-sans text-BluishDark">Guide Huggy</h5>
695
+ <!--Download Buttons-->
696
+ <button x-data="{ filename: 'Guide Huggy', imageUrl: 'images/Outlined Huggies/Guide Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
697
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
698
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
699
+ </button>
700
+ </div>
701
+ </div>
702
+
703
+ <div class="w-full flex flex-col">
704
+ <img src="images/Outlined Huggies/Loving modelndataset Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
705
+ <!--Info box-->
706
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
707
+ <h5 class="text-lg font-sans text-BluishDark">in-love Huggy</h5>
708
+ <!--Download Buttons-->
709
+ <button x-data="{ filename: 'in-love Huggy', imageUrl: 'images/Outlined Huggies/Loving modelndataset Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
710
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
711
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
712
+ </button>
713
+ </div>
714
+ </div>
715
+
716
+ <div class="w-full flex flex-col">
717
+ <img src="images/Outlined Huggies/Manager Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
718
+ <!--Info box-->
719
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
720
+ <h5 class="text-lg font-sans text-BluishDark">Manager Huggy</h5>
721
+ <!--Download Buttons-->
722
+ <button x-data="{ filename: 'Manager Huggy', imageUrl: 'images/Outlined Huggies/Manager Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
723
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
724
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
725
+ </button>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="w-full flex flex-col">
730
+ <img src="images/Outlined Huggies/Paper Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
731
+ <!--Info box-->
732
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
733
+ <h5 class="text-lg font-sans text-BluishDark">Paper Huggy</h5>
734
+ <!--Download Buttons-->
735
+ <button x-data="{ filename: 'Paper Huggy', imageUrl: 'images/Outlined Huggies/Paper Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
736
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
737
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
738
+ </button>
739
+ </div>
740
+ </div>
741
+
742
+ <div class="w-full flex flex-col">
743
+ <img src="images/Outlined Huggies/Scan Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
744
+ <!--Info box-->
745
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
746
+ <h5 class="text-lg font-sans text-BluishDark">Scan Huggy</h5>
747
+ <!--Download Buttons-->
748
+ <button x-data="{ filename: 'Scan Huggy', imageUrl: 'images/Outlined Huggies/Scan Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
749
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
750
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
751
+ </button>
752
+ </div>
753
+ </div>
754
+
755
+ <div class="w-full flex flex-col">
756
+ <img src="images/Outlined Huggies/Violinist Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
757
+ <!--Info box-->
758
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
759
+ <h5 class="text-lg font-sans text-BluishDark">Violinist Huggy</h5>
760
+ <!--Download Buttons-->
761
+ <button x-data="{ filename: 'Violinist Huggy', imageUrl: 'images/Outlined Huggies/Violinist Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
762
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
763
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
764
+ </button>
765
+ </div>
766
+ </div>
767
+
768
+ <div class="w-full flex flex-col">
769
+ <img src="images/Outlined Huggies/X-ray Huggy.png" alt="Image 1" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
770
+ <!--Info box-->
771
+ <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
772
+ <h5 class="text-lg font-sans text-BluishDark">X-ray Huggy</h5>
773
+ <!--Download Buttons-->
774
+ <button x-data="{ filename: 'X-ray Huggy', imageUrl: 'images/Outlined Huggies/X-ray Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
775
+ <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt="">
776
+ <p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
777
+ </button>
778
+ </div>
779
+ </div>
780
+
781
+ </div>
782
+ </section>
783
+ </div>
784
+ </body>
785
+ </html>
786
+
787
+
788
+
789
+
790