# MonkChat | Web
### html
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="../../assents/fonts/fonts.css" />
<title>Static Template</title>
</head>
<body>
<div class="conteiner">
<div class="cabecalho">
<div class="logo">
<img src="../../assents/images/MkChat-logo.png" />
</div>
<div class="barra"></div>
<div class="titulo">MonkChat</div>
</div>
<div class="conteudo">
<div class="conteiner-form">
<div class="box-sala">
<div>
<div class="label">Sala:</div>
<input class="input" />
</div>
<div>
<div class="label">Nick:</div>
<input class="input" />
</div>
<div>
<button>Criar</button>
<button>Entrar</button>
</div>
</div>
<div class="box-mensagem">
<div class="label">Mensagem:</div>
<textarea></textarea>
<button class="botao-enviar">Enviar</button>
</div>
</div>
<div class="conteiner-chat">
<img class="botao-atualizar" src="../../assents/images/image2.png" />
<div class="chat">
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> entrou na sala...</div>
</div>
<div class="mansage">
<div>(15:02:01)</div>
<div><b>Brunex</b> Opa, tudo bem ai?</div>
</div>
<div class="mansage">
<div>(15:03:25)</div>
<div><b>Brunex</b> saiu da sala...</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
### css
```css=
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
body {
margin: 0px;
}
* {
box-sizing: border-box;
}
.conteiner {
display: flex;
flex-direction: column;
background-color: #583bbf;
color: #ffff;
font-family: Montserrat;
padding: 1em 4em;
height: 100vh;
min-width: 1280px;
}
.cabecalho {
display: flex;
flex-direction: row;
margin: 0.5em;
align-items: center;
}
.logo {
}
.barra {
}
.titulo {
font: 700 2.2em Montserrat;
}
.conteudo {
display: flex;
flex-direction: row;
background: rgba(0, 0, 0, 0.12);
padding: 2em 5em;
height: 100%;
}
.conteiner-form {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 2em 1em 2em 0px;
}
.box-sala {
display: flex;
flex-direction: column;
}
.box-sala > div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin: 0.3em;
}
.label {
font: 700 24px Montserrat;
width: 3em;
}
.input {
font: 16px Montserrat;
border: none;
outline: none;
padding: 0.5em 1em;
border-radius: 5px;
}
button {
color: #ffff;
font: 700 16px Montserrat;
background: #50b4bf;
border-radius: 20px;
border: none;
outline: none;
padding: 0.5em 1.5em;
margin: 0.5em 0.3em;
align-self: flex-end;
transition: 0.3s;
}
button:hover {
cursor: pointer;
background-color: #2d8a95;
}
.box-mensagem {
display: flex;
flex-direction: column;
}
textarea {
font: 16px Montserrat;
height: 10em;
border: none;
outline: none;
resize: none;
margin: 0.5 0px;
padding: 1em 2em;
border-radius: 5px;
}
.conteiner-chat {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.botao-atualizar {
width: 15px;
align-self: flex-end;
}
.chat {
display: flex;
flex-direction: column;
background: rgba(192, 65, 224, 0.19);
border-radius: 3px;
padding: 1.5em;
margin: 1em 0px;
height: 25em;
overflow-y: auto;
}
.chat::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #3e006f;
}
.chat::-webkit-scrollbar {
width: 7px;
background-color: #3e006f;
border-radius: 10px;
}
.chat::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #cbcbcb;
}
.chat > div {
margin: 0.3em 0px;
font-size: 0.9em;
}
.mansage {
display: flex;
flex-direction: row;
font-size: 0.9em;
margin: 0.4em 0.4em;
}
@media (max-width: 1280px) {
.conteiner {
font-size: 1em;
min-width: auto;
height: 100%;
padding: 1em;
}
.cabecalho {
flex-direction: column;
}
.conteudo {
flex-direction: column;
padding: 0.2em;
}
.conteiner-form {
padding: 1em;
margin: 2em 0px;
}
.conteiner-form > div {
margin-bottom: 2em;
}
.label {
width: 5em;
}
.input {
width: 100%;
display: flex;
flex-direction: flex-start;
}
.box-sala > div:nth-of-type(3) {
flex-direction: column;
}
button {
width: 100%;
height: 2.5em;
border-radius: 0.3em;
align-self: center;
}
.chat {
margin: 1em;
}
.botao-atualizar {
margin: 0px 1em;
}
.mansage {
flex-direction: column;
}
}
```
{"metaMigratedAt":"2023-06-16T06:04:19.448Z","metaMigratedFrom":"Content","title":"MonkChat | Web","breaks":true,"contributors":"[{\"id\":\"1ac86fe9-aad5-49b4-b562-fee077af4a56\",\"add\":10172,\"del\":0}]"}