# Session: MonkChat
Autor: Jonathan Fernando Costa Galo
### Foto do site em anexo:
### Link do Código no Html:
https://codesandbox.io/s/monkchatweb-e0n9d?file=/src/pages/home/Faixa1/index.css
### 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>MonkChatWeb</title>
<link rel="stylesheet" href="../../comum/comum.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="cabecalho">
<img src="../../../assets/images/logo1-1.webp" class="parte1-img1" />
<img src="../../../assets/images/Line-1.webp" class="parte2-img2" />
<div class="parte3">MonkChat</div>
</div>
<div class="conteudo">
<div class="conteudo-direita">
<div class="direita-cima">
<div class="conteudo1-linha1">
<div class="linha1-parte1">Sala:</div>
<textarea class="linha1-parte2">SangueNosOio</textarea>
</div>
<div class="conteudo1-linha2">
<div class="linha2-parte1">Nick:</div>
<textarea class="linha2-parte2">JojoLindo1609</textarea>
</div>
<div class="conteudo1-linha3">
<button class="botao-cima1">Criar</button>
<button class="botao-cima2">Entrar</button>
</div>
</div>
<div class="direita-baixo">
<div class="conteudo2-linha1">Mensagem:</div>
<textarea class="conteudo2-linha2">Opa, tudo bem aí??</textarea>
<div class="conteudo2-linha3"></div>
<button class="botao-baixo1">Enviar</button>
</div>
</div>
<div class="conteudo-2">
<div class="botao-restart">
<img class="restart"src="../../../assets/images/Group1.webp" class="restart"/>
</div>
<div class="conteudo-esquerda">
<div class="esquerda-chat">
<div class="chat-comentario1">(15:02:01) <span class="negrito">Brunex</span> entrou na sala...</div>
<div class="chat-comentario2">(15:03:25) <span class="negrito">Brunex</span> fala para <span class="negrito">Todos</span>: Opa, tudo bem ai?</div>
<div class="chat-comentario3">(15:03:25) <span class="negrito">Brunex</span> saiu da sala...</div>
<div class="chat-comentario1">(15:02:01) <span class="negrito">Brunex</span> entrou na sala...</div>
<div class="chat-comentario2">(15:03:25) <span class="negrito">Brunex</span> fala para <span class="negrito">Todos</span>: Opa, tudo bem ai?</div>
<div class="chat-comentario3">(15:03:25) <span class="negrito">Brunex</span> saiu da sala...</div>
<div class="chat-comentario1">(15:02:01) <span class="negrito">Brunex</span> entrou na sala...</div>
<div class="chat-comentario2">(15:03:25) <span class="negrito">Brunex</span> fala para <span class="negrito">Todos</span>: Opa, tudo bem ai?</div>
<div class="chat-comentario3">(15:03:25) <span class="negrito">Brunex</span> saiu da sala...</div>
<div class="chat-comentario1">(15:02:01) <span class="negrito">Brunex</span> entrou na sala...</div>
<div class="chat-comentario2">(15:03:25) <span class="negrito">Brunex</span> fala para <span class="negrito">Todos</span>: Opa, tudo bem ai?</div>
<div class="chat-comentario3">(15:03:25) <span class="negrito">Brunex</span> saiu da sala...</div>
<div class="chat-comentario1">(15:02:01) <span class="negrito">Brunex</span> entrou na sala...</div>
<div class="chat-comentario2">(15:03:25) <span class="negrito">Brunex</span> fala para <span class="negrito">Todos</span>: Opa, tudo bem ai?</div>
<div class="chat-comentario3">(15:03:25) <span class="negrito">Brunex</span> saiu da sala...</div>
<div class="chat-comentario1">(15:02:01) <span class="negrito">Brunex</span> entrou na sala...</div>
<div class="chat-comentario2">(15:03:25) <span class="negrito">Brunex</span> fala para <span class="negrito">Todos</span>: Opa, tudo bem ai?</div>
<div class="chat-comentario3">(15:03:25) <span class="negrito">Brunex</span> saiu da sala...</div>
<div class="chat-comentario1">(15:02:01) <span class="negrito">Brunex</span> entrou na sala...</div>
<div class="chat-comentario2">(15:03:25) <span class="negrito">Brunex</span> fala para <span class="negrito">Todos</span>: Opa, tudo bem ai?</div>
<div class="chat-comentario3">(15:03:25) <span class="negrito">Brunex</span> saiu da sala...</div>
<div class="chat-comentario1">(15:02:01) <span class="negrito">Brunex</span> entrou na sala...</div>
<div class="chat-comentario2">(15:03:25) <span class="negrito">Brunex</span> fala para <span class="negrito">Todos</span>: Opa, tudo bem ai?</div>
<div class="chat-comentario3">(15:03:25) <span class="negrito">Brunex</span> saiu da sala...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
```
### Código CSS
```css=
.container {
display: flex;
flex-direction: column;
background-color: #583bbf;
padding: 2em 2em;
height: 100vh;
width: 100vw;
}
.cabecalho {
display: flex;
flex-direction: row;
margin: 20px 0px;
align-items: center;
}
.conteudo {
display: flex;
flex-direction: row;
background: rgba(0, 0, 0, 0.12);
margin: 30px 30px 30px;
height: 73%;
border-radius: 4px;
}
.conteudo-direita {
display: flex;
flex-direction: column;
margin: 40px 40px 40px;
}
.conteudo1-linha1 {
display: flex;
flex-direction: row;
margin: 0px 0px 10px 0px;
}
.conteudo1-linha2 {
display: flex;
flex-direction: row;
margin: 0px 0px 10px 0px;
}
.conteudo1-linha3 {
display: flex;
flex-direction: row;
margin: 0px 0px 10px 0px;
justify-content: flex-end;
}
.botao-cima1 {
background: #50b4bf;
border: none;
padding: 5px 15px;
border-radius: 20px;
font: 16px Montserrat;
color: #ffffff;
font-weight: bold;
margin: 0px 10px 0px 0px;
}
.botao-cima2 {
background: #50b4bf;
border: none;
padding: 5px 15px;
border-radius: 20px;
font: 16px Montserrat;
color: #ffffff;
font-weight: bold;
}
.botao-baixo1 {
background: #50b4bf;
border: none;
padding: 5px 30px;
border-radius: 20px;
font: 16px Montserrat;
color: #ffffff;
font-weight: bold;
}
.conteudo-2 {
display: flex;
flex-direction: column;
}
.conteudo-esquerda {
display: flex;
flex-direction: column;
width: 845px;
height: 85%;
background: #c041e0;
margin: 5px 0px 40px;
border-radius: 4px;
overflow-y: auto;
}
.parte3 {
font: 36px Montserrat;
color: #ffffff;
font-weight: bold;
}
.linha1-parte1 {
font: 24px Montserrat;
color: #ffffff;
font-weight: bold;
margin: 0px 15px 0px 0px;
}
.linha2-parte1 {
font: 24px Montserrat;
color: #ffffff;
font-weight: bold;
margin: 0px 10px 0px 0px;
}
.conteudo2-linha1 {
font: 24px Montserrat;
color: #ffffff;
font-weight: bold;
margin: 0px 0px 7px 0px;
}
.chat-comentario1 {
font: 16px Montserrat;
color: #ffffff;
margin: 20px 20px 10px 20px;
}
.chat-comentario2 {
font: 16px Montserrat;
color: #ffffff;
margin: 10px 20px 10px 20px;
}
.chat-comentario3 {
font: 16px Montserrat;
color: #ffffff;
margin: 10px 20px 10px 20px;
}
.span {
font-weight: bold;
}
.botao-restart {
}
.botao-restart-fundo {
opacity: 0.2;
}
.restart {
color: white;
}
.negrito{
font-weight: bold;
}
.linha1-parte2{
border-radius: 5px;
height: 30px;
font: 16px Montserrat;
color: #000000;
}
.linha2-parte2{
border-radius: 5px;
height: 30px;
font: 16px Montserrat;
color: #000000;
}
.conteudo2-linha2{
border-radius: 5px;
height: 10em;
width: 17.2em;
margin: 0px 0px 7px 0px;
font: 16px Montserrat;
color: #000000;
}
.conteudo-esquerda::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #3E006F;
}
.conteudo-esquerda::-webkit-scrollbar
{
width: 7px;
background-color: #3E006F;
border-radius: 10px;
}
.conteudo-esquerda::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #ffffff;
}
.parte1-img1{
margin: 0px 15px 0px 0px;
}
.parte2-img2{
margin: 0px 15px 0px 0px;
}
.direita-baixo{
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.restart{
margin: 10px 10px 0px 10px;
}
.botao-restart{
display: flex;
flex-direction: row;
justify-content: flex-end;
}
```
### Código CSS (comum.css)
```css=
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
margin: 0;
width: 100%;
}
* {
box-sizing: border-box;
}
```
{"metaMigratedAt":"2023-06-16T05:35:43.709Z","metaMigratedFrom":"Content","title":"Session: MonkChat","breaks":true,"contributors":"[{\"id\":\"f59e6c25-3cb1-4556-be8b-0ad8b709be8c\",\"add\":9175,\"del\":0}]"}