HFBA / index.html
Chunte's picture
Chunte HF staff
Upload index.html
b314464 verified
raw history blame
No virus
25.3 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="font-mono max-w-fit text-3xl bg-blue-500 text-white mb-5 py-3 px-6 rounded-full">HF Logos</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="font-mono max-w-fit text-3xl bg-blue-500 text-white mb-5 py-3 px-6 rounded-full">Huggies</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Doodle Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Acedemic Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Vision Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">D Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Coding Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Game Jam Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">IDEFICS Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Vibing Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Karaoke Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Lora Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">iHuggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Wizard Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Optimum Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Super Huggy!</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Huggy back</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Wine Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Dragon Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">GPU Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Comic Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Curious Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">To the moon</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Diffusor Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Fishing Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Global Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Greeting Huggy l</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Greeting Huggy r</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Caring Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Guide Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">in-love Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Manager Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Paper Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Scan Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">Violinist Huggy</h5>
<!--Download Buttons-->
</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="pl-3 pt-3">
<h5 class="text-lg font-sans text-BluishDark">X-ray Huggy</h5>
<!--Download Buttons-->
</div>
</div>
</div>
</section>
</div>
</body>
</html>