Merge pull request #431 from SaranshBangar/navbarAnimation

Added transiton to buttons
anuragverma108 · May 15, 2024 · 0453115 · 0453115
2 parents cb57a60 + bb8f934
commit 0453115
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -92,7 +92,7 @@
    * transition
    */
 
-  --transition-1: 0.25s ease;
+  --transition-1: all 0.25s ease;
   --transition-2: 0.5s ease;
   --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
 }
@@ -478,8 +478,8 @@ body {
 
 .navbar-list {
   display: flex;
-    justify-content: center;
-    align-items: center;
+  justify-content: space-evenly;
+  align-items: center;
 
   margin-block-end: 10px;
 }
@@ -489,6 +489,7 @@ body {
   padding-block: 8px;
   line-height: 2;
   transition: var(--transition-1);
+  transition-property: all;
 }
 
 .navbar-link:is(:hover, :focus) {

diff --git a/index.html b/index.html
@@ -64,29 +64,40 @@
 
       <nav class="navbar" data-navbar>
         <ul class="navbar-list">
+
           <li class="navbar-item">
-            <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
-                class="ri-home-fill"></i> Home</a>
+            <a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link>
+              <i class="ri-home-fill"></i>
+              Home
+            </a>
           </li>
 
           <li class="navbar-item">
-            <a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i
-                class="ri-bar-chart-fill"></i> Benefits</a>
+            <a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link>
+              <i class="ri-bar-chart-fill"></i>
+              Benefits
+            </a>
           </li>
 
           <li class="navbar-item">
-            <a href="#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i
-                class="ri-medal-fill"></i> Literary Realms</a>
+            <a href="#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link>
+              <i class="ri-medal-fill"></i>
+              Literary Realms
+            </a>
           </li>
 
           <li class="navbar-item">
-            <a href="#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
-                class="ri-price-tag-3-fill"></i> Pricing</a>
+            <a href="#pricing" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link>
+              <i class="ri-price-tag-3-fill"></i>
+              Pricing
+            </a>
           </li>
 
           <li class="navbar-item">
-            <a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i
-                class="ri-customer-service-2-fill"></i> Contact</a>
+            <a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link>
+              <i class="ri-customer-service-2-fill"></i>
+              Contact
+            </a>
           </li>
 
           <li class="navbar-item">
@@ -96,9 +107,11 @@
           <li class="navbar-item">
             <a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
           </li>
+
           <li class="navbar-icon">
             <img style="width: 32px;" src="./assets/images/moon.png" class="theme-icon" id="theme-icon">
           </li>
+
         </ul>
       </nav>