animate the text in teams section

css/index.css

@@ -669,3 +669,40 @@ ul.mainBodyList {
     width: 20%;
   }
 }
+
+
+.teamheading {
+  color: #ffffff;
+  font-size: 50px;
+  top: 10%;
+  left: 100%;
+  transform: translateX(-00%);
+  font-family: "Josefin Sans", sans-serif;
+  letter-spacing: 5px;
+  text-align: center;
+  white-space: pre-wrap;
+}
+
+.teamheading::after {
+  content: "";
+  width: 5px;
+  height: 55px;
+  background-color: #ffffff;
+  position: absolute;
+  animation: blinking 1s 3s infinite;
+}
+
+/** heading Type Writer animation*/
+
+@keyframes blinking {
+  0% {
+     background-color: #fff;
+  }
+  50% {
+     background-color: transparent;
+  }
+  100% {
+     background-color: #fff;
+  }
+}
+

index.html

@@ -511,8 +511,8 @@ <h4 style="color: white; font-size: 1em;">Imagination is more important than kno
 
       <!-- ------------------Profile cards starts here----------------- -->
 
-      <div class="our-team"><h1>Technical Board Heads</h1>
-          <hr>
+      <div class="our-team container">
+        <div class="teamheading"></div>
       </div>
 
       <div class="cards-container container-fluid">
@@ -641,6 +641,21 @@ <h3>Riya Sheoran  </h3>
       </div>
       <!---------X------ End Footer bottom Area -----------X-------->
   </div>
+  <script>
+      const heading = "Meet the amazing Heads";
+let i = 0;
+
+const typing = () => {
+   if (i < heading.length) {
+      document.querySelector(".teamheading").innerHTML += heading.charAt(i);
+      i++;
+
+      setTimeout(typing, 150);
+   }
+};
+
+typing();
+  </script>
 
 </body>
 </html>

main.js

@@ -0,0 +1,13 @@
+const heading = "Please Meet Our Team";
+let i = 0;
+
+const typing = () => {
+   if (i < heading.length) {
+      document.querySelector(".heading").innerHTML += heading.charAt(i);
+      i++;
+
+      setTimeout(typing, 150);
+   }
+};
+
+typing();