changed icons in benefit section to animated icons- super cool :-)

inspired-consulting · Nov 24, 2023 · 6f51716 · 6f51716
1 parent 4f39c29
commit 6f51716
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 8 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -17,4 +17,22 @@ html {
 
 .ts-benefit-section {
   height: 50rem;
-}
+}
+
+/* Initially hide animated icon */
+.ts-animated-icon {
+  display: none;
+}
+
+/* Show animated icon on card hover */
+.ts-hover-trigger:hover .ts-static-icon {
+  display: none;
+}
+
+.ts-hover-trigger:hover .ts-animated-icon {
+  display: block;
+}
+
+
+
+
diff --git a/src/img/diagramm.gif b/src/img/diagramm.gif
diff --git a/src/img/diagramm.png b/src/img/diagramm.png
diff --git a/src/img/meteorregen.gif b/src/img/meteorregen.gif
diff --git a/src/img/meteorregen.png b/src/img/meteorregen.png
diff --git a/src/img/roboter (1).gif b/src/img/roboter (1).gif
diff --git a/src/img/roboter (1).png b/src/img/roboter (1).png
diff --git a/src/img/roboter.gif b/src/img/roboter.gif
diff --git a/src/img/roboter.png b/src/img/roboter.png
diff --git a/src/img/schild.gif b/src/img/schild.gif
diff --git a/src/img/schild.png b/src/img/schild.png
diff --git a/src/img/zusammenarbeit.gif b/src/img/zusammenarbeit.gif
diff --git a/src/img/zusammenarbeit.png b/src/img/zusammenarbeit.png
diff --git a/src/index.html b/src/index.html
@@ -57,8 +57,12 @@ <h2 class="text-4xl mb-8 font-bold text-center text-primary-900">Stay one step a
       <div class="flex place-content-center pt-6">
 
         <!-- CARD 1 -->
-        <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-primary-200 mr-6">
-          <img src="./img/icons8-ai-64.png" alt="Roboter Icon" class="w-16 h-16 mx-auto my-4">
+        <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-primary-200 mr-6 ts-hover-trigger">
+          <img src="./img/roboter.png" alt="Roboter Icon" class="w-12 h-12 mx-auto my-6 ts-static-icon">
+
+          <!-- Animated GIF Icon (Initially Hidden) -->
+          <img src="./img/roboter.gif" alt="Animated Icon" class="w-16 h-16 mx-auto my-4 ts-animated-icon">
+
           <!-- <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 mx-auto my-4 text-primary-500" fill="none"
             viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75l-2.489-2.489m0 0a3.375 3.375 0 10-4.773-4.773 3.375 3.375 0 004.774 4.774zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -75,8 +79,13 @@ <h2 class="text-4xl mb-8 font-bold text-center text-primary-900">Stay one step a
         </div>
 
          <!-- CARD 2 -->
-         <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-primary-200 mr-6">
-          <img src="./img/icons8-delete-shield-64.png" alt="Shield Icon" class="w-16 h-16 mx-auto my-4">
+         <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-primary-200 mr-6 ts-hover-trigger">
+          <img src="./img/schild.png" alt="Shield Icon" class="w-12 h-12 mx-auto my-6 ts-static-icon">
+
+          <!-- Animated GIF Icon (Initially Hidden) -->
+          <img src="./img/schild.gif" alt="Animated Icon" class="w-16 h-16 mx-auto my-4 ts-animated-icon">
+
+
           <!-- <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 mx-auto my-4 text-primary-500" fill="none"
             viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round"
@@ -93,13 +102,18 @@ <h2 class="text-4xl mb-8 font-bold text-center text-primary-900">Stay one step a
         </div>
 
         <!-- CARD 3 -->
-        <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-primary-200">
-          <img src="./img/icons8-staff-64.png" alt="Collaboration Icon" class="w-16 h-16 mx-auto my-4">
-         <!-- <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 mx-auto my-4 text-primary-500" fill="none"
+        <div class="max-w-sm rounded overflow-hidden bg-gray-100 border-2 border-primary-200 ts-hover-trigger">
+          <img src="./img/zusammenarbeit.png" alt="Collaboration Icon" class="w-12 h-12 mx-auto my-6 ts-static-icon">
+
+          <!-- Animated GIF Icon (Initially Hidden) -->
+          <img src="./img/zusammenarbeit.gif" alt="Animated Icon" class="w-16 h-16 mx-auto my-4 ts-animated-icon">
+
+          <!-- <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 mx-auto my-4 text-primary-500" fill="none"
             viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
             <path stroke-linecap="round" stroke-linejoin="round"
               d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z" />
           </svg> -->
+
           <div class="px-6 py-2">
             <div class="font-bold text-xl mb-2 text-primary-900">Collaboration & Communication</div>
             <p class="text-gray-700 text-base">