Merge pull request #65 from Honeshwar/fix-issue-#63

fix issue #63
Iamdivyak · Oct 28, 2023 · a06197f · a06197f
2 parents ac43c40 + 3eeef39
commit a06197f
Showing 1 changed file with 43 additions and 17 deletions.
diff --git a/css/style.css b/css/style.css
@@ -139,14 +139,16 @@ a.my-cv {
   border: .1rem solid #F87474;
   border-radius: .5rem;
   background-color: #FEF4F2 !important;
-  transition: background .5s, border 0.5s, color 0.5s ease-in-out; /* Add a 0s transition for the specified properties */
+  /* transition: background .5s, border 0.5s, color 0.5s ease-in-out; Add a 0s transition for the specified properties */
 }
 
 a.my-cv:hover {
-  background: linear-gradient(90deg, rgba(79,1,1,1) 0%, rgba(242,79,79,1) 81%) !important; /* Add your desired gradient colors */
+  background: linear-gradient(90deg, rgba(79,1,1,1) 0%, rgba(242,79,79,1) 81%); /* Add your desired gradient colors */
   color: white;
   font-weight: 600;
-  border: none;
+  border: .1rem  solid white;
+  transition: all 1s ease-in-out; 
+  /* Add a 0s transition for the specified properties */ 
 }
 
 
@@ -212,21 +214,44 @@ color: #0D0F16;
   font-weight: 500;
   font-size: 1.4rem;
   color: white;
-  background: #F26C4F;
+  /* background: #F26C4F; */
+  background: linear-gradient(90deg, #F26C4F 0%, #F26C4F 81%);
   border-radius: .2rem;
   padding: .6rem 2rem;
   cursor: pointer;
-  transition: background .5s, border 0.5s, color 0.5s ease-in-out; /* Add a 0s transition for the specified properties */
+  /* transition: background 1s, border 0.5s, color 0.5s ease-in-out; */
+   /* Add a 0s transition for the specified properties */
 }
 
 .homeBtn:hover {
-  background: linear-gradient(90deg, rgba(79,1,1,1) 0%, rgba(242,79,79,1) 81%) !important; ; /* Add your desired gradient colors */
   color: white;
   font-weight: 500;
+  animation: animatedGradient .5s .2s ease 1 both;
+  transition: all 1s ease-in;
+}
+
+@keyframes animatedGradient{
+  0%{
+    background: linear-gradient(90deg, #660303c9 0%, #e02929c9 81%);
+  }
+  25%{
+    background: linear-gradient(90deg,  #660303da 0%, #e02929da 81%);
+  }
+  50%{
+    background: linear-gradient(90deg,  #660303ec 0%, #e02929ec 81%);
+  }
+  75%{
+    background: linear-gradient(90deg,  #660303ef 0%, #e02929ef 81%);
+  }
+  100%{
+    background: linear-gradient(90deg,  #660303 0%, #e02929 81%);
+  }
 }
 
 
 
+
+
 /* second section */
 .second-section{
   background: #FFFFFF;
@@ -278,33 +303,34 @@ border-radius: 10px;
   top:0;
   left:0;
   border-radius: 10px;
-  transition: background 0.5s, color .5s, font-weight .5s ease-in-out ; /* Add a 0s transition for the specified properties */
+  /* transition: background 0.5s, color .5s, font-weight .5s ease-in-out ; Add a 0s transition for the specified properties */
 
   display:flex;
   justify-content: center;
   align-items: center;
   gap:15px;
 }
-.project-grid .layer:hover{
-  background: linear-gradient(90deg, rgba(245, 245, 245, 0.5) 0%, rgb(238, 236, 236,0.5) 81%) !important; 
+/* .project-grid .layer:hover{
+  /* background: linear-gradient(90deg, rgba(245, 245, 245, 0.5) 0%, rgb(238, 236, 236,0.5) 81%) !important;  */
+
+/* } */
 
-}
 .layer a{
   border-radius: 10px;
   overflow: auto;
   padding: 6px 10px;
   color: #ececec;
   opacity: 0;
   transition: 0.7s;
-  background-color: rgb(25, 26, 27);
-  border: 1px solid rgb(36, 36, 37);
+  background-color: #ff7777;
+  border: #F87474; 
 }
 
 .layer:hover a{
   opacity: 1;
 }
 .layer a:hover{
-  background-color: #ff7777;
+  background-color: #f54343;
   border: #F87474; 
 }
 
@@ -416,13 +442,13 @@ border-radius: 10px;
   padding: 1.2rem 1.6rem;
   margin-right: 2rem;
   cursor: pointer;
-  transition: background .5s, border 0.5s, color 0.5s ease-in-out; 
+  /* transition: background .5s, border 0.5s, color 0.5s ease-in-out;  */
 }
 
 .About-section .homeBtn:hover {
   background: linear-gradient(90deg, rgba(79,1,1,1) 0%, rgba(242,79,79,1) 81%) !important; ; /* Add your desired gradient colors */
   color: white;
-  font-weight: 500;
+  font-weight: 500; 
 }
 
 
@@ -525,7 +551,7 @@ button[type="submit"] {
   color: #FFFFFF;
   margin-top: 20px;
   padding: 0 15px;
-  transition: background .5s, border 0.5s, color 0.5s ease-in-out; /* Add a 0s transition for the specified properties */
+  /* transition: background .5s, border 0.5s, color 0.5s ease-in-out; Add a 0s transition for the specified properties */
 }
 
 button[type="submit"]:hover {
@@ -630,7 +656,7 @@ a{
 .back-to-top::after {
     content: "";
     display: block;
-    vertical-align: middle;
+    /* vertical-align: middle; */
     border-bottom: solid 10px #EA5D5F;
     border-left: solid 10px transparent;
     line-height: 0;