From 6f626d909229d895b5cc3c62b595f9a67244f947 Mon Sep 17 00:00:00 2001
From: AshishKumarSamantaray
 <121350516+AshishKumarSamantaray@users.noreply.github.com>
Date: Tue, 14 May 2024 00:10:51 +0530
Subject: [PATCH 1/2] typowriter effect implemented successfully , words of
 your choice can be entered as many words as possibles as specified in the
 chat.

---
 index.html | 86 +++++++++++++++++++++++++++++++++++++++++++++---------
 style.css  | 25 +++++++++++++++-
 2 files changed, 97 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 0af79781d..27b810e15 100644
--- a/index.html
+++ b/index.html
@@ -166,7 +166,63 @@
     <header>
       <div class="container header-section flex">
         <div class="header-left">
-          <h1 id="automatic-change">Learn Interactively</h1>
+          <div class="wrapper1">
+            <div class="static-txt">Learn </div>
+            <div data-typewriter="Interactively,Engagingly,Enjoyingly,Happily"></div>
+<!--            insert words here-->
+          </div>
+
+          <script>
+            class Typerwriter {
+              constructor(el, options){
+                this.el = el;
+                this.words = [...this.el.dataset.typewriter.split(',')];
+                this.speed = options?.speed || 100;
+                this.delay = options?.delay || 1500;
+                this.repeat = options?.repeat;
+                this.initTyping();
+              }
+
+              wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+              toggleTyping = () => this.el.classList.toggle('typing');
+
+              async typewrite(word){
+                await this.wait(this.delay);
+                this.toggleTyping();
+                for (const letter of word.split('')) {
+                  this.el.textContent += letter;
+                  await this.wait(this.speed)
+                }
+                this.toggleTyping();
+                await this.wait(this.delay);
+                this.toggleTyping();
+                while (this.el.textContent.length !== 0){
+                  this.el.textContent = this.el.textContent.slice(0, -1);
+                  await this.wait(this.speed)
+                }
+                this.toggleTyping();
+              }
+
+              async initTyping() {
+                for (const word of this.words){
+                  await this.typewrite(word);
+                }
+                if(this.repeat){
+                  await this.initTyping();
+                } else {
+                  this.el.style.animation = 'none';
+                }
+              }
+            }
+
+            document.querySelectorAll('[data-typewriter]').forEach(el => {
+              new Typerwriter(el, {
+                repeat: true,
+              })
+            })
+          </script>
+
           <p id="sub-para">
             Experience immersive learning like never before with simulations, 3D
             visualizations, customized quizzes, and videos all in one place!
@@ -185,18 +241,22 @@ <h1 id="automatic-change">Learn Interactively</h1>
       </div>
     </header>
 
-    <script type="text/javascript">
-      (function () {
-        var words = ["Learn Interactively", "Learn Engagingly"],
-          i = 0;
-        setInterval(function () {
-          $("#automatic-change").fadeOut(function () {
-            $(this)
-              .html(words[(i = (i + 1) % words.length)])
-              .fadeIn();
-          });
-        }, 2000);
-      })();
+<!--    <script type="text/javascript">-->
+<!--      (function () {-->
+<!--        var words = ["Learn Interactively", "Learn Engagingly"],-->
+<!--          i = 0;-->
+<!--        setInterval(function () {-->
+<!--          $("#automatic-change").fadeOut(function () {-->
+<!--            $(this)-->
+<!--              .html(words[(i = (i + 1) % words.length)])-->
+<!--              .fadeIn();-->
+<!--          });-->
+<!--        }, 2000);-->
+<!--      })();-->
+<!--    </script>-->
+
+    <script>
+
     </script>
 
     <!-- features section -->
diff --git a/style.css b/style.css
index 2c0caffe8..2d7930127 100644
--- a/style.css
+++ b/style.css
@@ -79,10 +79,33 @@ nav {
       font-weight: normal;
       font-size: .80em;
     }
-h1 {
+.wrapper1{
 	font-size: 3rem !important;
 	position: relative;
 	z-index: -10;
+	display: flex;
+}
+
+[data-typewriter] {
+	font-size: 3rem !important;
+	position: relative;
+	height: 2rem;
+	margin-left: 10px;
+}
+
+[data-typewriter]:not(.typing){
+	animation: blink-caret 1.1s step-end infinite;
+}
+
+@keyframes blink-caret {
+	0%,
+	100% {
+		border-color: transparent
+	}
+
+	50% {
+		border-color: #ff8e3c;
+	}
 }
 
 h2 {

From 7879427e9f39400859d9f8e9c4befc9b14bbd79b Mon Sep 17 00:00:00 2001
From: AshishKumarSamantaray
 <121350516+AshishKumarSamantaray@users.noreply.github.com>
Date: Tue, 14 May 2024 00:12:52 +0530
Subject: [PATCH 2/2] typowriter effect implemented successfully , words of
 your choice can be entered as many words as possibles as specified in the
 chat.

---
 index.html | 2 +-
 style.css  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 27b810e15..a652a9b76 100644
--- a/index.html
+++ b/index.html
@@ -168,7 +168,7 @@
         <div class="header-left">
           <div class="wrapper1">
             <div class="static-txt">Learn </div>
-            <div data-typewriter="Interactively,Engagingly,Enjoyingly,Happily"></div>
+            <div data-typewriter="Interactively,Engagingly,Intelligently,Happily"></div>
 <!--            insert words here-->
           </div>
 
diff --git a/style.css b/style.css
index 2d7930127..ec701df92 100644
--- a/style.css
+++ b/style.css
@@ -90,7 +90,7 @@ nav {
 	font-size: 3rem !important;
 	position: relative;
 	height: 2rem;
-	margin-left: 10px;
+	margin-left: 8px;
 }
 
 [data-typewriter]:not(.typing){