# SESSION MONKCHAT 03/08 HTML/CSS
## 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">
<title>Monk Chat</title>
</head>
<body>
<div class="container">
<div class="cabecalho">
<div class="logo"><img src="LOGO.png" /></div>
<div class="barra"></div>
<div class="titulo">MonkChatWeb</div>
</div>
<div class="conteudo">
<div class="conteudo-form">
<div class="form-sala">
<div>
<div class="label">Sala:</div>
<input class="input"></input>
<div class="label">Nick:</div>
<input class="input"></input>
</div>
<div class ="btn">
<button>Entrar</button>
<button>Enviar</button>
</div>
</div>
<div class="form-msg">
<div class="label">Mensagem:</div>
<textarea></textarea>
<button class="btn-env">Enviar</button>
</div>
</div>
<div class="conteudo-chat">
<img class="atualizar" src="/ATUALIZAR.png" alt="">
<div class="chat">
<div>(15:02:01) <b>Brunex</b> entrou na sala: ...</div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:01) <b>Brunex</b> entrou na sala: ...</div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div> <div>(15:02:01) <b>Brunex</b> entrou na sala: ...</div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </div>
<div>(15:02:11) <b>Brunex</b> fala para <b>Todos:</b> Oieeeee </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;
}
.container {
display: flex;
flex-direction: column;
background-color: #583bbf;
color: #fff;
padding: 2em 5em 6em 5em;
font-family: Montserrat;
height: 100vh;
overflow: auto;
}
.cabecalho {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 3em;
}
.titulo {
font: 700 2.2em Montserrat;
}
.conteudo {
display: flex;
flex-direction: row;
background: rgba(0, 0, 0, 0.12);
padding: 3em 5em;
height: 100%;
}
.conteudo-form {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2em;
}
.form-sala {
display: flex;
flex-direction: column;
}
.btn {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin: 0.2em;
}
.label {
font-weight: 700;
font-size: 1.2em;
width: 4em;
}
.input,
textarea {
border: none;
background: #ffffff;
border-radius: 5px;
outline: none;
padding: 0.4em 0.5em;
resize: none;
}
button {
font-weight: 700;
color: #fff;
background: #50b4bf;
border: none;
border-radius: 20px;
padding: 0.5em 1.5em;
margin: 0.3em;
}
.form-msg {
display: flex;
flex-direction: column;
}
textarea {
height: 12em;
margin: 0.5em 0em;
}
.btn-env {
align-self: flex-end;
}
.conteudo-chat {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 0em 2em 2em 2em;
}
.atualizar {
width: 1em;
align-self: flex-end;
margin: 0.4em;
}
.chat {
display: flex;
flex-direction: column;
background: rgba(192, 65, 224, 0.19);
border-radius: 3px;
padding: 1.5em;
height: 100%;
overflow-y: auto;
}
.chat::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #f5f5f5;
border-radius: 10px;
}
.chat::-webkit-scrollbar {
width: 10px;
background-color: #f5f5f5;
}
.chat::-webkit-scrollbar-thumb {
background-color: #fff;
background-image: -webkit-linear-gradient(
top,
#8d1fd6 0%,
#a317bec4 50%,
#a317bec4 51%,
#8d1fd6 100%
);
}
.chat {
font-size: 0.9em;
margin: 0.4em 0em;
}
```
{"metaMigratedAt":"2023-06-16T05:59:24.540Z","metaMigratedFrom":"Content","title":"SESSION MONKCHAT 03/08 HTML/CSS","breaks":true,"contributors":"[{\"id\":\"4c424d8f-f274-42df-9402-f6014d7ba673\",\"add\":5985,\"del\":0}]"}