Spaces:

Chunte
/

HFBA

Running

App Files Files Community

HFBA / index.html

Chunte HF staff

Upload 6 files

3140e75 verified 4 months ago

raw history blame contribute delete

No virus

43 kB

	<!DOCTYPE html>
	<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/alpinejs@2.8.2/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>