Merge pull request #72 from arifakhtar51/arifakhtar51

solved : Enable transition effects when hovering over navbar sections #46
PranavBarthwal · May 12, 2024 · 1e7af5b · 1e7af5b
2 parents c898f20 + 5a355c6
commit 1e7af5b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -12,9 +12,6 @@
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" type="image/png" href="./assets/favicon.png"> 
 </head>
-
-
-
 <body>
 
     <div id="bg"></div>
@@ -35,16 +32,16 @@
     <div class="collapse navbar-collapse pe-5" id="navbarSupportedContent">
       <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
         <li class="nav-item">
-          <a class="nav-link text-light" href="#">Home</a>
+          <a class="nav-link text-light decorate-text" href="#">Home</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link text-light" href="#apod">APoD</a>
+          <a class="nav-link text-light decorate-text" href="#apod">APoD</a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link text-light" href="#mars">MartianImagery</a>
+        <li class="nav-item ">
+          <a class="nav-link text-light decorate-text" href="#mars">MartianImagery</a>
         </li>
         <li class="nav-item">
-         <a href="#contact"> <button class="btn btn-outline-light rounded-pill" type="submit">Contact Us</button></a>
+         <a href="#contact"> <button class="btn btn-outline-light rounded-pill decorate-text" type="submit">Contact Us</button></a>
         </li>
     </div>
   </div>

diff --git a/style.css b/style.css
@@ -278,3 +278,13 @@ body {
 .card p {
   padding: 10px 0;
 }
+.decorate-text {
+  transition: color 0.2s ease; /* transition property for color change */
+}
+
+.decorate-text:hover {
+  color: rgb(207, 48, 170);
+  transition-delay: 0.2s; 
+  transform: scale(1.1);
+  transition: color 0.2s ease; /* Smooth transition for color change */
+}