diff --git a/frontend/css/effect.md b/frontend/css/effect.md
new file mode 100644
index 0000000..7738c32
--- /dev/null
+++ b/frontend/css/effect.md
@@ -0,0 +1,71 @@
+
+## typing effect
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Typewritter Effect</title>
+    <!--Google Fonts-->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        width: 100%;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+        background: black;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .type {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .type span {
+        font-size: 60px;
+        color: white;
+        font-family: "Cutive Mono";
+        height: 60px;
+        border-right: 1mm solid white;
+        letter-spacing: 5px;
+        animation: typing 1s steps(13, end), blink 1s step-end infinite;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      @keyframes typing {
+        from {
+          width: 0;
+        }
+        to {
+          width: 100%;
+        }
+      }
+      @keyframes blink {
+        0%,
+        100% {
+          border-color: transparent;
+        }
+        50% {
+          border-color: white;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="type">
+      <span>Typing Effect</span>
+    </div>
+  </body>
+</html>
+```
\ No newline at end of file
diff --git a/frontend/css.md b/frontend/css/index.md
similarity index 97%
rename from frontend/css.md
rename to frontend/css/index.md
index 9122673..bd8ce9c 100644
--- a/frontend/css.md
+++ b/frontend/css/index.md
@@ -2,8 +2,13 @@
 
 - Position
 - @LunDevCode
-- Scroll, Font-Size
+- Scroll, 
+- Font Responsive / Font-Size 
 - Animation : css, tailwind
+- Image
+- Bg
+- Color
+- SVG
 
 ```
 .div
