From 9c92322da2a7e6a1253c863d29471659ca107e27 Mon Sep 17 00:00:00 2001 From: Brandal <127673956+brandalokadjaya@users.noreply.github.com> Date: Wed, 5 Jun 2024 20:56:09 +0700 Subject: [PATCH] Add files via upload --- index.html | 53 +++++++++++++++++++ styles.css | 152 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 205 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..3984317 --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + + From brandalokajaya + + + + +
+
+ +
+
+
+
+ + + + + +
+
+ +
+ +
+ + +
+
+
+
+ +
+
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ae91eb2 --- /dev/null +++ b/styles.css @@ -0,0 +1,152 @@ +body { + font-family: Arial, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + margin: 20px; + padding: 0; + box-sizing: border-box; +} + +header { + background-color: #000; /* Warna hitam */ + width: 100%; /* Lebar penuh */ + padding: 10px 0; + text-align: center; + position: fixed; /* Tetap di tempat saat digulir */ + top: 0; + left: 0; + z-index: 1000; /* Menempatkan di depan elemen lainnya */ +} + +.logo-container { + display: inline-block; +} + +.logo { + height: 50px; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 80px; /* Memberi ruang untuk header tetap */ +} + +.column { + margin: 10px; +} + + +.container { + display: flex; + flex-direction: column; + width: 100%; + max-width: 600px; + align-items: center; + padding: 10px; +} + +.column { + width: 100%; + margin: 10px 0; +} + +textarea { + width: 100%; + height: 150px; + padding: 10px; + box-sizing: border-box; +} + +button { + margin-top: 10px; + padding: 10px 20px; + cursor: pointer; +} + +#result { + margin-top: 20px; + display: flex; + align-items: center; + width: 100%; +} + +#generatedURL { + width: 70%; + padding: 10px; + margin-right: 10px; + box-sizing: border-box; +} + +#displayTexts { + margin-top: 20px; + width: 100%; + max-width: 600px; + word-wrap: break-word; + white-space: pre-wrap; /* To preserve newlines */ + display: none; + align-items: center; +} +#marqueeText { + width: 100%; + white-space: nowrap; + overflow: hidden; + box-sizing: border-box; + margin-bottom: 10px; + font-size: 100px; +} + +#marqueeText span { + display: inline-block; + padding-left: 100%; + animation: simpleMarquee 15s linear infinite; +} + +/* Animasi marquee sederhana */ +@keyframes simpleMarquee { + from { + transform: translateX(100%); + } + to { + transform: translateX(-100%); + } +} +#animatedText { + width: 100%; +} + +#listenButton { + margin-top: 10px; +} + +@keyframes marquee { + from { + transform: translateX(100%); + } + to { + transform: translateX(-100%); + } +} + +@media (max-width: 600px) { + .container { + padding: 5px; + } + + button { + width: 100%; + margin: 5px 0; + } + + #result { + flex-direction: column; + align-items: stretch; + } + + #generatedURL { + width: 100%; + margin-bottom: 10px; + } +}