Added Typewriter effect to 'Learning'

assets/css/style.css

@@ -1766,4 +1766,25 @@ footer {
   color: var(--box-anchor);
   font-size: 14px;
   margin-bottom: 15px;
-}
+}
+.typewriter {
+  display: inline-block;
+  overflow: hidden;
+  border-right: 3px solid #2796ff;
+  white-space: nowrap;
+  vertical-align: bottom;
+
+  animation: typing 3s steps(20, end) forwards infinite, blinking-cursor 0.5s step-end infinite;
+}
+
+@keyframes typing {
+  from { width: 0 }
+  to { width: 61% }
+}
+
+@keyframes blinking-cursor {
+  from, to { border-color: transparent }
+  50% { border-color: #2796ff; }
+} 
+
+

assets/js/main.js

@@ -310,4 +310,22 @@ const boxes = document.querySelectorAll('#services .col-lg-6 .box');
     box.addEventListener('click', function () {
         box.classList.toggle('is-flipped');
     })
-})
+})
+const words = ["Learning  ", "Exploring  ", "Growing  "]; 
+    let currentWordIndex = 0;
+
+    function typeNextWord() {
+      const typewriterSpan = document.getElementById('typewriter');
+      typewriterSpan.textContent = words[currentWordIndex];
+
+      currentWordIndex++;
+      if (currentWordIndex === words.length) {
+        currentWordIndex = 0;
+      }
+
+      setTimeout(typeNextWord, 2990); 
+    }
+
+    typeNextWord();
+
+

index.html

@@ -110,7 +110,7 @@
   <!-- ======= Hero Section ======= -->
   <section id="hero">
     <div class="hero-content" data-aos="fade-up">
-      <h2>Make <span>Learning</span><br />Fun!</h2>
+      <h2>Make <span class="typewriter" id="typewriter"></span><br />Fun!</h2>
       <div>
         <a href="#about" class="btn-get-started scrollto">Know More</a>
         <a href="join-us-form.html" class="btn-projects scrollto">Join Us</a>