Merge pull request #1003 from harshita-2003/main

animated title heading (video added) #1002
akshitagupta15june · Jul 6, 2023 · 768584f · 768584f
2 parents b554e1e + 8d615cf
commit 768584f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/Iskcon/event.css b/Iskcon/event.css
@@ -436,4 +436,45 @@ footer {
     margin-top: 1rem;
   }
 
+}
+
+
+
+.title-word {
+  animation: color-animation 4s linear infinite;
+  font-size: 4.2rem;
+}
+
+.title-word-1 {
+  --color-1: #DF8453;
+  --color-2: #3D8DAE;
+  --color-3: #E4A9A8;
+}
+
+.title-word-2 {
+  --color-1: #DBAD4A;
+  --color-2: #ACCFCB;
+  --color-3: #17494D;
+}
+
+.title-word-3 {
+  --color-1: #ACCFCB;
+  --color-2: #E4A9A8;
+  --color-3: #ACCFCB;
+}
+
+.title-word-4 {
+  --color-1: #3D8DAE;
+  --color-2: #DF8453;
+  --color-3: #E4A9A8;
+}
+
+@keyframes color-animation {
+  0%    {color: var(--color-1)}
+  32%   {color: var(--color-1)}
+  33%   {color: var(--color-2)}
+  65%   {color: var(--color-2)}
+  66%   {color: var(--color-3)}
+  99%   {color: var(--color-3)}
+  100%  {color: var(--color-1)}
 }
diff --git a/Iskcon/event.html b/Iskcon/event.html
@@ -75,10 +75,14 @@
   <div class="about">
     <div class="header">
       <h1>
-        <span class=" firstWord">L</span>
+        <!-- <span class=" firstWord">L</span>earn About ISKCON -->
+        <span class="title-word title-word-1">Learn</span>
+        <span class="title-word title-word-2">About</span>
+        <span class="title-word title-word-3">ISCKON</span>
+        <!-- <span class=" firstWord">L</span>
          <span class="firstWord_secondPart">
           earn About ISKCON
-        </span> 
+        </span>  -->
       </h1>
       <p><b> International Society for Krishna Consciousness (ISKCON)</b></p>
     </div>