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 @@

Imagination is more important than kno -

Technical Board Heads

-
+
+
@@ -641,6 +641,21 @@

Riya Sheoran

+ 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();