diff options
| author | Benjamin Sanders <ben@Benjamins-MacBook-Pro.local> | 2025-08-16 21:06:00 -0400 |
|---|---|---|
| committer | Benjamin Sanders <ben@Benjamins-MacBook-Pro.local> | 2025-08-16 21:06:00 -0400 |
| commit | 9a684bfe20dae7db9ac3f722dcd42c1854458749 (patch) | |
| tree | f10a70784e4f6682a5ad937c6cc693e5d1c86732 /poem.html | |
| parent | 53278a2f54bff4c812c36d854f143c11d33a95b6 (diff) | |
added poem.html and Made with heart in Helen, GA
Diffstat (limited to 'poem.html')
| -rw-r--r-- | poem.html | 81 |
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> |