Merge pull request #82 from Dimple-Choudhary/main

Animated "to-do list" text
Kritika30032002 · Oct 5, 2023 · ec228fa · ec228fa
2 parents 4b98a90 + 14abc25
commit ec228fa
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@
                 alt=""
                 style="height: 70px; margin-bottom: 20px"
               />
-              <h1>To Do</h1>
+              <h1 class="text text-center">To-Do List</h1>
 
               <input type="checkbox" id="modeToggle" class="mode-toggle">
             </div>

diff --git a/style.css b/style.css
@@ -40,6 +40,37 @@ body.dark-mode .list-group-item {
   width: 100%;
   height: 100%;
 }
+ .text {
+    width: 100%;
+    font-size: 50px;
+    color: rgb(255, 255, 255);
+    letter-spacing: 10px;
+    border-right: 5px solid black;
+    white-space: nowrap;
+    animation: typing 3s steps(10), cursor .4s step-end infinite alternate;
+    overflow: hidden;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes cursor {
+    50% {
+      border-color: transparent;
+    }
+  }
+
+  @keyframes typing {
+    from {
+      width: 0;
+    }
+    to {
+      width: 30%;
+    }
+
+  }
+.text-center{
+    margin-left:  auto;
+    margin-right: auto ;
+}
 
 .main {
   position: relative;