added onhover color effect to projects

rashelrr · Dec 13, 2023 · 76d4a5d · 76d4a5d
1 parent cae79b0
commit 76d4a5d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 22 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -687,22 +687,28 @@ section {
 # Projects
 --------------------------------------------------------------*/
 .projects .color-box {
-  background: #c9c7c7; 
+  background: #b8cde2; 
   background-clip: content-box;
+  color: #45505b;
+}
+.projects .color-box:hover {
+  animation: animate-color 0.5s forwards; 
+}
+
+@keyframes animate-color {
+  0%   { background-color: #b8cde2; }
+  100% { background-color: #9ccbf9; color: white; }
 }
 
 .projects .icon-box {
-  padding: 2rem;
-  transition: all ease-in-out 0.3s;
-  box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.05);
+  padding: 2rem; 
   cursor: pointer;
 }
 
 .projects .icon-box h4 {
   font-weight: 700;
   margin: 10px 0 15px 0;
   font-size: 26px;
-  color: #45505b;
 }
 
 .projects .icon-box .about {
@@ -734,11 +740,6 @@ section {
   margin-bottom: 0;
 }
 
-.projects .icon-box:hover {
-  border-color: #fff;
-  box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08);
-}
-
 /*--------------------------------------------------------------
 # Footer
 --------------------------------------------------------------*/

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -152,11 +152,6 @@
     });
   }
 
-
-
-
-
-
   /**
    * Using GitHub API to get my repositories
    * Credit: https://github.com/2kabhishek/projects 
@@ -199,13 +194,6 @@
   };
   getRepos();
 
-
-
-
-
-
-
-
   /**
    * Portfolio isotope and filter
    */
-Original file line number
+Diff line change
@@ Expand Up / @@ -152,11 +152,6 @@ @@
         });
       }
       /**
        * Using GitHub API to get my repositories
        * Credit: https://github.com/2kabhishek/projects
@@ Expand Down Expand Up / @@ -199,13 +194,6 @@ @@
       };
       getRepos();
       /**
        * Portfolio isotope and filter
        */
@@ Expand Down @@