From a4636472d8e9510487cce4c8ccacf07c9e61ed9d Mon Sep 17 00:00:00 2001
From: Anna-137 <palakchauhan.ait@gmail.com>
Date: Fri, 30 Oct 2020 21:29:24 +0530
Subject: [PATCH] animate the text in teams section

---
 css/index.css | 37 +++++++++++++++++++++++++++++++++++++
 index.html    | 19 +++++++++++++++++--
 main.js       | 13 +++++++++++++
 3 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 main.js

diff --git a/css/index.css b/css/index.css
index ed1e7e5..572e2bf 100644
--- a/css/index.css
+++ b/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;
+  }
+}
+
diff --git a/index.html b/index.html
index 3b1ac2d..5e30a70 100644
--- a/index.html
+++ b/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>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..8b15cb5
--- /dev/null
+++ b/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();