From b9c9249bb1ae5d5d196d5f4f334bee37cc4d1608 Mon Sep 17 00:00:00 2001 From: Henry Hiles Date: Mon, 24 Jan 2022 13:35:57 -0500 Subject: [PATCH] Initial commit --- index.html | 130 ++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 0 style.css | 141 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 271 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..94625f6 --- /dev/null +++ b/index.html @@ -0,0 +1,130 @@ + + + + + + Messaging + + + + + + +
+
+
+ Hi there! +

10 minutes ago

+
+
+
+
+ Hey! +

9 minutes ago

+
+
+
+
+ So how are you etc... etc... +

9 minutes ago

+
+
+
+
+ Hey! +

9 minutes ago

+
+
+
+
+ So how are you etc... etc... +

9 minutes ago

+
+
+
+
+ Hey! +

9 minutes ago

+
+
+
+
+ So how are you etc... etc... +

9 minutes ago

+
+
+
+
+ Hey! +

9 minutes ago

+
+
+
+
+ So how are you etc... etc... +

9 minutes ago

+
+
+
+
+ Hey! +

9 minutes ago

+
+
+
+
+ So how are you etc... etc... +

9 minutes ago

+
+
+
+
+ Hey! +

9 minutes ago

+
+
+
+
+ So how are you etc... etc... +

9 minutes ago

+
+
+
+
+ Hey! +

9 minutes ago

+
+
+
+
+ So how are you etc... etc... +

9 minutes ago

+
+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..ea61e34 --- /dev/null +++ b/style.css @@ -0,0 +1,141 @@ +:root { + --primary: #14bbaa; + --secondary: #2c3c4c; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1.2em; + scroll-behavior: smooth; + display: grid; + grid-template-rows: 100px 1fr 175px; + height: 100vh; +} + +nav, +footer { + background-color: var(--secondary); + color: white; + display: flex; + flex-direction: row; + align-items: center; +} + +nav a { + margin: 0 0.5em; + text-decoration: none; + text-transform: capitalize; + width: fit-content; + color: white; + grid-template-columns: 1fr 500px; +} + +nav:first-child a { + font-size: 1.5em; +} + +footer { + justify-content: center; + gap: 30px; + padding: 20px; +} + +textarea { + border: none; + color: white; + background-color: transparent; + border-bottom: 0.05em solid white; + font-family: inherit; + font-size: 2rem; + max-width: 100%; + max-height: 90%; +} + +textarea::placeholder { + color: white; +} + +button { + border: none; + border-radius: 2em; + color: #f5f0f0; + font-size: 1em; + padding: 0.7rem 1.6rem; + text-decoration: none; + background-color: var(--primary); +} + +button:hover { + filter: brightness(0.9); +} + +.message-timestamp { + font-size: 12px; + color: white; +} + +.message-text { + padding: 10px; + font-size: 17px; + white-space: initial; + line-height: 23px; + font-weight: normal; + word-wrap: break-word; + display: inline-block; + background-color: #e4366a; + text-align: center; + color: white; + border-radius: 20px; +} + +#messages { + background-color: var(--primary); + padding: 30px; + overflow-y: auto; +} + +#messages::-webkit-scrollbar { + width: 10px; +} + +#messages::-webkit-scrollbar-track { + display: none; +} + +#messages::-webkit-scrollbar-thumb { + background: var(--secondary); + border-radius: 10px; +} + +#messages::-webkit-scrollbar-thumb:hover { + filter: brightness(0.9); +} + +.message-content { + max-width: 75%; +} + +.message { + padding: 5px; + width: 100%; + display: flex; + flex-direction: row; +} + +.message-right { + justify-content: right; +} + +.message-right .message-text { + background-color: #e9e932; + color: #424242; +}