Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.min.js" defer></script> | |
| <script> | |
| function downloadImage(url, filename) { | |
| var link = document.createElement("a"); | |
| link.href = url; | |
| link.download = filename; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| } | |
| </script> | |
| <style> | |
| .download-button { | |
| transition: transform 0.2s; | |
| } | |
| .download-button:active { | |
| transform: scale(0.80); | |
| } | |
| </style> | |
| <link rel="stylesheet" href="css/style.css" /> | |
| <title>HFBA</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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"> | |
| </head> | |
| <body class="bg-BluishWhite"> | |
| <!--Body Container--> | |
| <div class="container px-5 py-10 mx-auto"> | |
| <!--HF Logos Section--> | |
| <section id="HFlogos" class="mb-28"> | |
| <!--Section Title--> | |
| <div class="flex flex-row items-center justify-between"> | |
| <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> | |
| <div class="text-BluishDark transform hover:text-gray-900 "> | |
| <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> | |
| </div> | |
| </div> | |
| <!--GRID Container--> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10"> | |
| <!-- Component 1 Container --> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="pl-3 pt-3"> | |
| <h5 class="text-lg font-sans text-BluishDark">HF Logo</h5> | |
| <!--Download Buttons--> | |
| <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm"> | |
| <!--.PNG button--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.png</p> | |
| </button> | |
| <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5"> | |
| <!--.SVG button--> | |
| <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 "> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.svg</p> | |
| </button> | |
| <hr class="mx-3 h-3 rounded-sm border-IconBorder border-r xl:mx-2.5"> | |
| <!--.AI button--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.ai</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Component 2 Container --> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="pl-3 pt-3"> | |
| <h5 class="text-lg font-sans text-BluishDark">Rainbow Hugging Face</h5> | |
| <!--Download Buttons--> | |
| <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm"> | |
| <!--.PNG button--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.png</p> | |
| </button> | |
| <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5"> | |
| <!--.SVG button--> | |
| <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 "> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.svg</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Component 1 Container --> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="pl-3 pt-3"> | |
| <h5 class="text-lg font-sans text-BluishDark">HF logo + title</h5> | |
| <!--Download Buttons--> | |
| <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm"> | |
| <!--.PNG button--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.png</p> | |
| </button> | |
| <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5"> | |
| <!--.SVG button--> | |
| <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 "> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.svg</p> | |
| </button> | |
| <hr class="mx-3 h-3 rounded-sm border-IconBorder border-r xl:mx-2.5"> | |
| <!--.AI button--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.ai</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!--Component 1 container--> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="pl-3 pt-3"> | |
| <h5 class="text-lg font-sans text-BluishDark">HF logo + white title</h5> | |
| <!--Download Buttons--> | |
| <div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm"> | |
| <!--.PNG button--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.png</p> | |
| </button> | |
| <hr class="mx-3 h-3 rounded-sm border-r border-IconBorder border-xl:mx-2.5"> | |
| <!--.SVG button--> | |
| <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 "> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.svg</p> | |
| </button> | |
| <hr class="mx-3 h-3 rounded-sm border-IconBorder border-r xl:mx-2.5"> | |
| <!--.AI button--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4" alt=""> | |
| <p class="text-gray-500 font-mono">.ai</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!--Huggies section--> | |
| <section id="Huggies" class=""> | |
| <!--Section Title--> | |
| <div class="flex items-center mb-5"> | |
| <div class="font-mono max-w-fit text-3xl bg-blue-500 text-white py-3 px-6 rounded-full">Huggies</div> | |
| </div> | |
| <!--GRID Container--> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10"> | |
| <!--Modern Huggies--> | |
| <div class="w-full flex flex-col col-span-2 row-span-2"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Doodle Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.gif</p> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Component 1 Container --> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Acedemic Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Component 2 Container --> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Vision Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Component 1 Container --> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">D Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Coding Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Game Jam Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">IDEFICS Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Component 1 Container --> | |
| <div class="w-full flex flex-col col-span-2 row-span-2"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Vibing Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.gif</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Karaoke Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Lora Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">iHuggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Wizard Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col col-span-2"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Optimum Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col col-span-2 row-span-2"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Super Huggy!</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Huggy back</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Wine Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Dragon Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Outlined Huggies--> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">GPU Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Comic Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Curious Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">To the moon</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Diffusor Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Fishing Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Global Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Greeting Huggy l</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Greeting Huggy r</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Caring Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Guide Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">in-love Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Manager Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Paper Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Scan Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">Violinist Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex flex-col"> | |
| <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"> | |
| <!--Info box--> | |
| <div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center"> | |
| <h5 class="text-lg font-sans text-BluishDark">X-ray Huggy</h5> | |
| <!--Download Buttons--> | |
| <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"> | |
| <img src="images/download icon.svg" class=" w-4 h-4 hidden md:inline-block" alt=""> | |
| <p class="text-gray-500 font-mono hidden md:inline-block">.png</p> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </body> | |
| </html> | |