# 1° Etapa MonkChat
> **Aluna:** Patricia Oliveira Paulino
> **Número:** 37
## HTML MonkChat
```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="MonkChat.css">
<title>MonkChat</title>
</head>
<body>
<div class="container">
<div class="cabecalho">
<div class="logo"> <img src="logo1.png" alt=""></div>
<div class="barra"> </div>
<div class="titulo"> MonkChatWeb </div>
</div>
<div class="conteudo">
<div class="container-form">
<div class="box-sala">
</div>
<div class="salazinha">
<div class="label"> Sala: </div>
<input type="text"> </input>
</div>
<div class="salazinha2">
<div class="label"> Nick: </div>
<input type="text"> </input>
</div>
<div class="button">
<button> Criar </button>
<button> Entrar </button>
</div>
<div class="box-mensagem">
<div class="label"> Mensagem: </div>
<textarea> Olá, tudo bem ai? </textarea>
<div class="btn-enviar">
<button> Enviar </button>
</div>
</div>
</div>
<div class="container-chat">
<div class="chat-atualizar"> <img src="Vector.png" alt=""> </div>
<div class="chat">
<div> (15:02:01) <b> Patricia_oliveira </b> entrou na sala</div>
<div> (15:02:11) <b> Patricia_oliveira </b> Tudo bom? </div>
<div> (15:05:06) <b> Patricia_oliveira </b> Saiu da sala: ...</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
````
## CSS MonkChat
```htmlembedded=
body {
margin: 0px;
}
.container {
display: flex;
flex-direction: column;
background-color: #583bbf;
color: #ffffff;
padding: 2em 5em 3em 5em;
font-family: Montserrat;
height: 100vh;
}
.cabecalho {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 2em;
}
.logo {
width: 8em;
}
.barra {
background: linear-gradient(180deg, #ba9d4c -10.17%, #f3d991 115.25%);
width: 4px;
height: 4em;
margin: 0.1em 0.1em;
border-radius: 2em;
margin-right: 3em;
}
.titulo {
font: 700 2em Montserrat;
}
.conteudo {
display: flex;
flex-direction: row;
background: rgba(0, 0, 0, 0.12);
padding: 3em;
}
.container-form {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2em;
}
.box-sala {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.box-sala {
display: flex;
flex-direction: row;
}
.label {
font-weight: 700;
font-size: 1.2em;
width: 4em;
right: 20em;
}
input {
border: none;
background: #ffffff;
border-radius: 5px;
outline: none;
padding: 0.4em;
}
button {
font-weight: 700;
color: #ffffff;
background: #50b4bf;
border-radius: 20px;
border: none;
padding: 0.5em 1.5em;
margin: 0.2em;
}
.button {
display: flex;
align-self: flex-end;
margin-bottom: 3em;
}
.box-mensagem {
display: flex;
flex-direction: column;
justify-self: flex-end;
}
textarea {
height: 13em;
border: none;
background: #ffffff;
border-radius: 4px;
outline: none;
margin: 0.6em 0.1em;
resize: none;
}
.container-chat {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0em 2em 2em 2em;
}
.chat-atualizar {
width: 1em;
align-self: flex-end;
margin: 0.2em;
}
.chat {
display: flex;
flex-direction: column;
background: rgba(192, 65, 224, 0.19);
border-radius: 3px;
padding: 1.5em;
height: 100%;
}
.chat > div {
font-size: 0.8em;
margin: 0.4em 0em;
overflow-y: auto;
}
.box-sala-botoes {
font-size: 0.9em;
margin: 0.4em 0em;
}
.salazinha {
display: flex;
flex-direction: row;
margin: 0.2em;
align-items: center;
align-self: flex-end;
}
.salazinha2 {
display: flex;
flex-direction: row;
margin: 0.2em;
align-items: center;
justify-content: flex-end;
}
.btn-enviar {
align-self: flex-end;
}
@media (max-width: 1000px) {
.container {
padding: 2em;
height: 100%;
}
.conteudo {
flex-direction: column;
padding: 0em;
}
.button {
flex-direction: column;
margin-bottom: 1em;
width: 100%;
align-self: flex-start;
margin: 1em 0em;
}
.btn-enviar {
align-self: flex-start;
width: 100%;
}
button {
width: 100%;
border-radius: 4px;
}
}
````
{"metaMigratedAt":"2023-06-16T05:59:03.790Z","metaMigratedFrom":"Content","title":"1° Etapa MonkChat","breaks":true,"contributors":"[{\"id\":\"d757cf0b-4ece-4c2f-893c-8a075e5d4af3\",\"add\":4501,\"del\":0}]"}