Improved the hover effect of nav links

kd1729 · Oct 29, 2023 · 538f5ca · 538f5ca
1 parent e711844
commit 538f5ca
Showing 1 changed file with 40 additions and 33 deletions.
diff --git a/style.css b/style.css
@@ -219,12 +219,9 @@ h3.first-b {
   margin: 5rem 9rem;
   padding: 1rem;
   border-radius: 10px;
-  box-shadow:
-    rgba(0, 0, 0, 0.25) 0px 54px 55px,
-    rgba(0, 0, 0, 0.12) 0px -12px 30px,
-    rgba(0, 0, 0, 0.12) 0px 4px 6px,
-    rgba(0, 0, 0, 0.17) 0px 12px 13px,
-    rgba(0, 0, 0, 0.09) 0px -3px 5px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
+    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
+    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
 }
 
 .intro-head {
@@ -349,10 +346,9 @@ h3.first-b {
     rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 } */
 
-
 .skill-card ul {
   display: block;
-  list-style-type: none; 
+  list-style-type: none;
   margin: 0;
   padding: 0;
 }
@@ -362,15 +358,15 @@ h3.first-b {
   align-items: center;
   margin-bottom: 1rem;
   white-space: nowrap;
-  text-align: left; 
+  text-align: left;
   padding-left: 1.7rem;
   position: relative;
 }
 
 .skill-card li::before {
-  content: "\f058"; 
-  font-family: "Font Awesome 5 Free"; 
-  color: #fae1e1; 
+  content: "\f058";
+  font-family: "Font Awesome 5 Free";
+  color: #fae1e1;
   font-size: 1.2rem;
   position: absolute;
   left: 0;
@@ -380,13 +376,10 @@ h3.first-b {
   position: relative;
   bottom: 7px;
   left: 5px;
-  box-shadow:
-    rgba(0, 0, 0, 0.4) 0px 2px 4px,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
-    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 }
 
-
 /*
   --------------------------------------------------->
   Projects
@@ -515,10 +508,8 @@ h3.first-b {
   position: relative;
   bottom: 7px;
   left: 5px;
-  box-shadow:
-    rgba(0, 0, 0, 0.4) 0px 2px 4px,
-    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
-    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
 }
 
 .experience-name {
@@ -554,10 +545,10 @@ h3.first-b {
 }
 
 .experience-text ul li::before {
-  content: '\f105'; 
-  font-family: 'Font Awesome 5 Free';
+  content: "\f105";
+  font-family: "Font Awesome 5 Free";
   font-weight: 900;
-  color: #76fae6; 
+  color: #76fae6;
   position: absolute;
   left: 0;
   top: 4px;
@@ -638,7 +629,7 @@ textarea {
 /* Social Media icons  */
 
 .icons ul {
-  margin-top: 1rem ;
+  margin-top: 1rem;
   padding-bottom: 7%;
   display: flex;
   justify-content: center;
@@ -901,10 +892,10 @@ textarea {
     padding: 0 2rem 0 0;
   }
 
-  .grid-container{
-    grid-template-columns: repeat(2,1fr);
+  .grid-container {
+    grid-template-columns: repeat(2, 1fr);
   }
-  .project-desc{
+  .project-desc {
     font-size: 1.4rem;
   }
 }
@@ -1256,7 +1247,7 @@ header h2 a {
 }
 
 .logo::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   right: 0;
@@ -1267,7 +1258,6 @@ header h2 a {
   animation-delay: 0.4s;
 }
 
-
 nav {
   position: absolute;
   top: 100%;
@@ -1291,13 +1281,30 @@ nav a {
   color: white;
   font-size: 1.2rem;
   padding: 0.5rem;
-  transition: all 500ms ease-in-out;
+  transition: all 100ms ease-in-out;
+  position: relative;
 }
 nav ul li a:hover {
-  font-weight: bold;
-  font-size: 1.5rem;
+  /* font-weight: bold; */
+  /* font-size: 1.5rem; */
   color: rgba(255, 72, 72, 0.829);
 }
+
+nav a::after {
+  content: "";
+  width: 0;
+  height: 3px;
+  background: rgba(255, 72, 72, 0.829) !important;
+  position: absolute;
+  left: 0;
+  bottom: -0.7px !important;
+  transition: 0.4s;
+}
+
+nav a:hover::after {
+  width: 100%;
+}
+
 #btn-toggle {
   display: none;
 }