Upload 6 files

css/style.css

@@ -520,11 +520,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 2.5rem;
 }
 
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
 .mx-3 {
   margin-left: 0.75rem;
   margin-right: 0.75rem;
@@ -558,24 +553,20 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: grid;
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-6 {
-  height: 1.5rem;
+.hidden {
+  display: none;
 }
 
-.h-3 {
-  height: 0.75rem;
+.h-full {
+  height: 100%;
 }
 
 .h-4 {
   height: 1rem;
 }
 
-.h-5 {
-  height: 1.25rem;
+.h-3 {
+  height: 0.75rem;
 }
 
 .w-full {
@@ -586,18 +577,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   width: 50%;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-4 {
   width: 1rem;
 }
 
-.w-5 {
-  width: 1.25rem;
-}
-
 .max-w-fit {
   max-width: -webkit-fit-content;
   max-width: -moz-fit-content;
@@ -628,6 +611,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   align-items: center;
 }
 
+.gap-1 {
+  gap: 0.25rem;
+}
+
 .gap-x-5 {
   -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
@@ -647,12 +634,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -671,18 +652,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 1.5rem;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .rounded-sm {
   border-radius: 0.125rem;
 }
 
-.border {
-  border-width: 1px;
-}
-
 .border-r {
   border-right-width: 1px;
 }
@@ -707,21 +680,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-IconBg {
-  --tw-bg-opacity: 1;
-  background-color: rgb(232 237 240 / var(--tw-bg-opacity));
-}
-
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -867,6 +830,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .md\:inline-block {
+    display: inline-block;
+  }
+
   .md\:w-2\/5 {
     width: 40%;
   }
@@ -875,6 +842,18 @@ Ensure the default browser behavior of the `hidden` attribute.
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
   .md\:p-14 {
     padding: 3.5rem;
   }

index.html

@@ -162,50 +162,66 @@
       <!--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>
+        <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="pl-3 pt-3">
+             <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">.png</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="pl-3 pt-3">
+            <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="pl-3 pt-3">
+            <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="pl-3 pt-3">
+             <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>
           
@@ -213,9 +229,13 @@
           <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">
+             <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--> 
+              <!--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>
@@ -225,9 +245,13 @@
           <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">
+             <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--> 
+              <!--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>
@@ -235,9 +259,13 @@
           <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">
+             <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--> 
+              <!--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>
@@ -246,9 +274,13 @@
           <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">
+             <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--> 
+              <!--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">.png</p>
+                </button> 
                 
           </div>
           </div>
@@ -256,9 +288,13 @@
           <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">
+             <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--> 
+              <!--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>
@@ -266,9 +302,13 @@
           <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">
+             <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--> 
+              <!--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>
@@ -277,9 +317,13 @@
           <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">
+             <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--> 
+              <!--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>
@@ -287,9 +331,13 @@
           <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">
+             <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--> 
+              <!--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>
@@ -297,9 +345,13 @@
           <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">
+             <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--> 
+              <!--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>
@@ -307,9 +359,13 @@
           <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">
+             <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--> 
+              <!--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>
@@ -317,27 +373,39 @@
           <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">
+             <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-->            
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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>
 
@@ -345,153 +413,221 @@
           <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">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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="pl-3 pt-3">
+             <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-->           
+              <!--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>