# Submissão 1 MonkChat | Linguagem de Programação
**Autor**: Vitório Trindade Santana
**Turma**: Informática C
**Número**: 50
[toc]
## Links
Link do projeto: https://codesandbox.io/s/monk-8n3y7?file=/src/pages/index.html
Link para vizualização do projeto: https://8n3y7.csb.app/src/pages/index.html
## Código Html
```htmlmixed=
<!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">
<title> MonkChat </title>
<link rel="stylesheet" href="../pages/index.css"/>
<link rel="stylesheet" href="../pages/responsivo.css"/>
</head>
<body>
<div class="container-MonkChat">
<div class="t1-logo">
<div class="t1-imagem-logo"> <img src="../assets/images/logoMonk.png"/> </div>
<div class="t1-barra-meio"> </div>
<div class="t1-nome-monk"> MonkChat </div>
</div>
<div class="t1-conteudo">
<div class="t1-sala-e-mensagens">
<div class="t1-sala-informacoes">
<div class="t1-nome-sala">
<div class="t1-texto-sala"> Sala: </div>
<div class="t1-input-sala"> <input/> </div>
</div>
<div class="t1-usuario">
<div class="t1-texto-usuario"> Nick: </div>
<div class="t1-input-sala"> <input/> </div>
</div>
<div class="t1-botoes-entrar">
<div class="t1-botao-criar"> <button> Criar </button> </div>
<div class="t1-botao-entrar"> <button> Entrar </button> </div>
</div>
</div>
<div class="t1-campo-mensagem">
<div class="t1-texto-mensagem"> Mensagem: </div>
<div class="t1-area-digitacao"> <textarea rows="12" cols="32" placeholder="Digite aqui a sua mensagem!"></textarea> </div>
<div class="t1-botao-enviar"> <button> Enviar </button> </div>
</div>
</div>
<div class="t1-area-mensagens">
<div class="t1-botao-recarregar"> <img src="../assets/images/reload.png"/> </div>
<div class="t1-campo-mensagens">
<div class="t1-mensagem">
<div class="t1-horario"> (15:02:01) </div> <a class="t1-nome-usuario"> Brunex </a> entrou na sala
</div>
<div class="t1-mensagem">
<div class="t1-horario"> (15:02:25) </div> <a class="t1-nome-usuario"> Brunex </a> fala para <a class="t1-para-quem"> Todos:</a> Opa, tudo bem ai?
</div>
<div class="t1-mensagem">
<div class="t1-horario"> (15:02:25) </div> <a class="t1-nome-usuario"> Brunex </a> saiu da sala...
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
## Código Css
```css=
body {
margin: 0px;
}
* {
box-sizing: border-box;
}
.container-MonkChat {
background-color: #583bbf;
display: flex;
flex-direction: column;
padding: 2em 4em 0em 4em;
height: 100vh;
}
.t1-logo {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 2em;
}
.t1-imagem-logo img {
width: 5em;
height: 3.8em;
}
.t1-barra-meio {
margin: 0em 1.2em;
background: linear-gradient(180deg, #ba9d4c -10.17%, #f3d991 115.25%);
width: 4px;
height: 3em;
margin: 0em 1em;
border-radius: 1em;
}
.t1-nome-monk {
font: 2em Montserrat-SemiBold;
font-weight: 600px;
color: white;
}
.t1-conteudo {
display: flex;
flex-direction: row;
background-color: #4d34a8;
padding: 1.5em 5em 2.5em 5em;
width: 78em;
}
.t1-sala-e-mensagens {
display: flex;
flex-direction: column;
padding-top: 1.8em;
margin-right: 6em;
}
.t1-sala-informacoes {
margin-bottom: 2.5em;
}
.t1-nome-sala {
margin-bottom: 0.3em;
}
.t1-usuario {
margin-bottom: 0.6em;
}
.t1-nome-sala,
.t1-usuario {
display: flex;
flex-direction: row;
align-items: center;
}
.t1-texto-sala {
margin-bottom: 0.2em;
}
.t1-texto-sala,
.t1-texto-usuario {
font: 1.1em Montserrat-SemiBold;
color: white;
flex-grow: 1;
}
.t1-input-sala input {
font: 700 0.8em Montserrat-SemiBold;
border-radius: 0.45em;
border: none;
outline: none;
padding: 0.5em 0.8em;
}
.t1-botoes-entrar {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.t1-botao-criar {
margin-right: 0.3em;
}
.t1-botao-criar button,
.t1-botao-entrar button {
font: 0.75em Montserrat-SemiBold;
color: white;
background-color: #50b4bf;
border-radius: 2em;
border: none;
outline: none;
padding: 0.4em 1.6em;
}
.t1-campo-mensagem {
display: flex;
flex-direction: column;
}
.t1-texto-mensagem {
font: 1.3em Montserrat-SemiBold;
color: white;
margin-bottom: 0.3em;
}
.t1-area-digitacao {
margin-bottom: 0.4em;
}
.t1-area-digitacao textarea {
padding: 0.7em 0.9em;
border: none;
border-radius: 0.3em;
outline: none;
resize: none;
font: 700 0.8em Montserrat-SemiBold;
}
.t1-botao-enviar {
align-self: flex-end;
}
.t1-botao-enviar button {
font: 0.75em Montserrat-SemiBold;
color: white;
background-color: #50b4bf;
border-radius: 2em;
border: none;
outline: none;
padding: 0.4em 1.6em;
}
.t1-botao-recarregar {
display: flex;
justify-content: flex-end;
margin-bottom: 1em;
}
.t1-botao-recarregar img {
width: 0.9em;
height: 0.96em;
}
.t1-campo-mensagens {
background-color: #6237b3;
border-radius: 0.2em;
width: 45em;
height: 24.8em;
padding: 1em;
overflow-y: auto;
}
.t1-campo-mensagens::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #3e006f;
}
.t1-campo-mensagens::-webkit-scrollbar {
width: 0.3em;
background-color: #3e006f;
border-radius: 0.6em;
}
.t1-campo-mensagens::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #cbcbcb;
}
.t1-mensagem {
display: flex;
flex-direction: row;
font: 0.8em Montserrat-SemiBold;
color: white;
text-align: center;
margin-bottom: 0.7em;
}
.t1-horario {
font: 700 1em Montserrat-SemiBold;
margin-right: 0.4em;
}
.t1-nome-usuario {
font: 1em Montserrat-SemiBold;
margin-right: 0.4em;
}
.t1-para-quem {
font: 1em Montserrat-SemiBold;
margin: 0em 0.4em;
}
@font-face {
font-family: Montserrat-SemiBold;
src: url("../assets/fonts/Montserrat-SemiBold.ttf");
}
@font-face {
font-family: Montserrat-Thin;
src: url("../assets/fonts/Montserrat-Thin.ttf");
}
```
## Código Css Responsivo
```css=
@media (max-width: 1024px) {
.container-MonkChat {
padding: 2em 1.5em;
height: 100%;
}
.t1-logo {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2em;
}
.t1-barra-meio {
display: none;
}
.t1-nome-monk {
margin-bottom: 1em;
}
.t1-conteudo {
display: flex;
flex-direction: column;
padding: 1em 1.5em;
width: 100%;
}
.t1-sala-e-mensagens {
padding-top: 1.8em;
width: 100%;
}
.t1-sala-informacoes {
margin-bottom: 2.5em;
}
.t1-texto-sala,
.t1-texto-usuario {
margin-right: 1.5em;
flex-grow: 0;
}
.t1-nome-sala {
margin-bottom: 0.3em;
}
.t1-usuario {
margin-bottom: 1.5em;
}
.t1-input-sala {
flex-grow: 1;
}
.t1-input-sala input {
width: 100%;
padding: 0.5em 0.7em;
}
.t1-botao-criar {
margin-bottom: 0.3em;
}
.t1-botoes-entrar {
display: flex;
flex-direction: column;
width: 100%;
}
.t1-botao-criar {
margin: 0em 0em 0.5em 0em;
}
.t1-botao-criar button,
.t1-botao-entrar button {
border-radius: 0.3em;
width: 100%;
}
.t1-campo-mensagem {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 1.4em;
}
.t1-texto-mensagem {
font: 1.3em Montserrat-SemiBold;
color: white;
margin-bottom: 0.3em;
}
.t1-area-digitacao {
margin-bottom: 0.5em;
}
.t1-area-digitacao textarea {
width: 100%;
font: 700 0.8em Montserrat-SemiBold;
}
.t1-botao-enviar {
align-self: center;
width: 100%;
}
.t1-botao-enviar button {
border-radius: 0.3em;
padding: 0.4em 1.6em;
width: 100%;
}
.t1-botao-recarregar {
margin-bottom: 1em;
}
.t1-botao-recarregar img {
width: 1.2em;
height: 1.3em;
}
.t1-campo-mensagens {
background-color: #6237b3;
border-radius: 0.2em;
width: 100%;
height: 15em;
padding: 1em;
margin-bottom: 1em;
}
.t1-mensagem {
flex-wrap: wrap;
margin-bottom: 1.5em;
}
.t1-horario {
margin-right: 100%;
}
.t1-para-quem {
margin: 0em 0.2em;
}
}
```
{"metaMigratedAt":"2023-06-16T05:42:52.903Z","metaMigratedFrom":"Content","title":"Submissão 1 MonkChat | Linguagem de Programação","breaks":true,"contributors":"[{\"id\":\"052c8e10-b233-429a-a1e0-0d8df7864830\",\"add\":17915,\"del\":9134}]"}