diff --git a/index.css b/index.css new file mode 100644 index 00000000..c8b57c06 --- /dev/null +++ b/index.css @@ -0,0 +1,59 @@ +body{ +font-family:cursive; +margin: 0.5rem; +margin-left: 6rem; +padding: 18rem; +align-content: center; +background-color: #f4f0f0; +background-image: url("https://us.123rf.com/450wm/essestocks/essestocks1809/essestocks180900583/109616432-speech-bubble-silhouette-sticker-icons-set-sign-kit-of-comic-tell-chat-communication-pictogram.jpg?ver=6"); +/* background-image: url("https://img.freepik.com/premium-vector/set-speak-bubbles-text-chatting-boxes-bubbles-messages-isolated-flat-line-icon-vector_316839-1299.jpg"); */ +} + +#message-board{ + border: 8px solid rgb(10, 189, 234); + background-color: rgb(255, 216, 137); + display: flex; + flex-direction: column; + align-items: center; +} + +#message-buttons{ + display: flex; + flex-direction: row; +} + +#send-btn{ + border: 2px solid rgb(246, 7, 158); + height: 50px; + width: 120px; + margin: 1rem; + align-items: center; + background-color:rgb(255, 250, 204); + +} + +#all-message-btn{ + border: 3px solid rgb(255, 131, 222); + height: 70px; + width: 30rem; + margin: 1rem; + text-decoration: none; + background-color: rgb(10, 189, 234); + font-size: larger; +} + + +#form-container { + display: none; +} +#show-form-button{ + border: 4px solid rgb(10, 189, 234); + margin: 1rem; + background-color: rgb(255, 131, 222); +} + +#designer{ + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/index.html b/index.html index 2d2e2a34..e5727006 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,59 @@ +
+