1 files changed, 81 insertions, 0 deletions
diff --git a/poem.html b/poem.html
new file mode 100644
index 0000000..65ad6f5
--- /dev/null
+++ b/poem.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Typing Poem Loop with Background</title>
+  <style>
+    body {
+      background: url('https://www.soonerplantfarm.com/_ccLib/image/plants/DETA-5377.jpg') no-repeat center center fixed;
+      background-size: cover;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      font-family: monospace;
+      font-size: 1.5em;
+      padding: 20px;
+      text-align: center;
+    }
+
+    #overlay {
+      background-color: rgba(0, 0, 0, 0.5); /* semi-transparent overlay for readability */
+      padding: 20px;
+      border-radius: 10px;
+    }
+
+    #text {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .cursor {
+      display: inline-block;
+      width: 10px;
+      background-color: #fff;
+      margin-left: 2px;
+      animation: blink 1s step-start infinite;
+    }
+
+    @keyframes blink {
+      50% { background-color: transparent; }
+    }
+  </style>
+</head>
+<body>
+  <div id="overlay">
+    <div id="text"></div><div class="cursor"></div>
+  </div>
+
+  <script>
+    const poem = `And I think it’s time
+you had a pink cloud
+summer
+‘Cause you’ve gone too
+long without a smile
+I think it’s time you
+found another reason to
+stay for a while`;
+
+    const textDiv = document.getElementById('text');
+    let index = 0;
+
+    function type() {
+      if (index < poem.length) {
+        textDiv.textContent += poem.charAt(index);
+        index++;
+        setTimeout(type, 50);
+      } else {
+        setTimeout(() => {
+          textDiv.textContent = "";
+          index = 0;
+          type();
+        }, 2000); // wait 2 seconds before looping again
+      }
+    }
+
+    type();
+  </script>
+</body>
+</html>